咖啡廳與健身日常

圖片來源：Unsplash

到底要怎麼做才可以設計一個可以吸引人的網站呢，尤其對於剛步入設計網站的新手來說，不知道是否毫無頭緒呢？別擔心，在國外的一個網站內的一篇文章就有教大家如何設計出能吸引人的網站喔，只是它是英文的文章，所以想透由翻譯的方式跟大家分享內容，這樣也比較好讀易懂喔。

A great web design is so much more than just delivering content and making it look good. When visitors come to your site, they produce a set of feelings about your website and your organization. The type of feelings they produce – positive or negative – are entirely in your hands and should not be overlooked when designing content.

一個好的網站設計，並不只是傳遞內容還有讓網站看起來好看而已。當訪客來到您的網站時，他們不自覺就開始對您的網站有了刻板印象。他們有正面或是負面的印象全憑您的設計，也因此，您如果想要吸引訪客來流覽您的網站，雖然網站內容是很重要的，但也不能忽視設計的重要性。

Over the years, there has been a body of knowledge produced to help designers create effective visuals that play into the psychology of their viewers. In order to achieve this, one must understand how different web design elements and how we use them affect the mood, attitude and experience the visitor will have while browsing our website.

這些年有非常多能幫助網站設計者搭配心理學的概念來設計能吸引訪客的網站的相關知識。為了要達到更多訪客來訪的目標，您需要的是去了解有哪些不同的網站設計元素以及這是如何影響訪客在瀏覽網站時觀看的心情、心態以及經驗。

Below are four major areas of website design and development that have the biggest impacts on the psychology of website visitors. These are the tools you’ll need to create a visually-engaging site that encourages visitors to return.

以下是四種主要網站設計的領域及發展，都對網站訪客的心理的影響是最大的。以下四個設計重點都是您需要去搭配做設計來吸引訪客再次回訪。

Content 內容

圖片來源：Unsplash

For websites, content drives the design you see on screen. Visitors come to a website to access information they need. Web design helps them find the information they need quickly and with ease.

以網站來說，內容的確會影響網站整體在螢幕上所呈現的感覺。訪客點選網站是要取得他們所需要的資訊。而在有那麼多的資訊的情況下，網站整體的設計感的確給予訪客較方便且快速的選擇方向。

In the early days of the Web, it was common to see pages and pages slammed with content, often pages with 10,000 words or more (as a comparison, this article is about 1,600 words). With pages loaded down with content, it made it extremely difficult to find content, let alone read through to get the information needed. This often invoked stress, anxiety and overall unpleasant feelings for visitors.

在網站的萌芽期，您很常會看到塞滿內容的網頁，通常有高達10000字甚至是更多的文字在網頁上面〈相較之下，本文章的原文只有大約1600個英文字〉。不過在這樣的情況下，您會發現，要找到自己想看的內容相當地不容易，得需要花很多的時間和心力才可以，而這通常會讓訪客會有不舒服又有焦慮的感覺。

With today’s Web design, content should be edited and organized so that there is a happy medium between providing adequate and needed information while not overwhelming visitors. When content is in that happy place, visitors are able to find the information quickly and they feel good afterwards.

不過到了網路盛行的現代，我們相當幸運的是，網站內容的組織編排大多讓人賞心悅目，而且還能兼顧內容的品質。當這樣的內容放在優質的網站設計中，訪客得以快速地找到自己需要的資訊而且並不會有太多的負擔。

Hiding content, presenting too much content or otherwise mudding up your website makes visitors irritable, leading to possible loss in potential business.

但看到那麼多的網站後千萬不要以為網站設計很容易，只要把內容隱藏、放太多的內容或是放過多沒有價值的內容就行，這些行為是會讓訪客感到厭煩的，並會導致網站經營上的損失。

In addition, the type of content you present sets a tone for you and your organization. If your content doesn’t present the right information in a logical place, is hard to follow or tends to beat around the bush on important information, then visitors will feel this way about you.

此外，您網站所呈現內容的類型會讓您的網站及組織定調。如果您的內容沒有提供理論下的正確資訊，這很難讓訪客再次回訪；又或者，在一些重要的資訊上的內容相當地拐彎抹角的話〈簡單來說就是廢話太多或是贅字〉，這會讓訪客對網站有了不好的印象，更不會想要再訪。

圖片來源：Unsplash

Keep your content clean, organized, easy to read, concise, and professional to help aid in the psychology of your visitors and produce positive vibes.

那麼說了那麼多網站設計的禁忌，有什麼方法才能設計出吸引訪客眼球的網站呢？我建議您把網站版面編排得簡潔乾淨、把內容做得有組織性並比較容易讓訪客觀看且具有專業性。如果您掌握了這幾個大方向就可以踏出做出成功網站的第一步。

To help you craft the best content for your website, this article at Tuts+ goes into further detail on the psychology of great content for your website.

但這幾個大方向講起來過於籠統，所以為了要幫助您了解如何做出更好的網站內容，我會推薦您閱讀Tuts+的文章，裡面會提供您相關的細節。

Space 空間感

The way a Web page is organized can dramatically affect how a visitor feels while they are there. Organizing content should be a priority in any web design, but this organization should take into consideration the space it takes up on the site.

網站的編排方式會大幅度影響訪客來訪的感受。有組織性的內容無論是在任何網站設計都是應該是優先考慮的事項，但是另外還應該要考慮網頁的空間感。

If you’re not familiar, “white space” is the areas of a design in which no content or visual element demanding our attention is present. White space plays an important role in any type of design work, especially Web design, because it visually gives a resting place for the visitor. These resting places are often found in margins and the space around things.

如果您對這方面不是很熟悉，那麼“留白”這種設計的感覺會讓人會很喜歡。無論在哪一類型的設計，有留白的空間感都扮演了相當重要的角色，特別是網站設計。這是因為在視覺上，它給予訪客有像是處在休息的空間裡。而您會發現通常在許多成功的網站上會把這類白色的空間放在網頁邊緣或是內容的周圍之處。

網頁頁面部分留白會讓來看網站的人感到舒服 〈圖片來源：Unsplash〉

The concept of minimalism – that is, using the least amount of visual content needed to convey your point or idea – is currently very popular across the Web, specifically on services like Squarespace.

這樣的設計正好符合了極簡主義的概念，也就是說，使用最少的內容來傳達網站所要表達的理念或是觀點。這是目前最常見的網站設計，特別像是在Squarespace這個架站平台上，您會發現有非常多這樣的設計。

Said differently, if a visitor comes to your website and every inch of real estate on the screen is taken up by words, graphics, blinking things, etc., it starts to feel chaotic and makes them uneasy. If no white space is present, there is nothing for them to move their eyes to take a visual break.

以另一種方式來說，當一個訪客搜尋到您的網站時，發現到有許多的文字、圖樣和其他東西在上面，這會開始讓他覺得相當混亂而且是不舒服的。如果說網頁完全沒有留白的空間，那麼會讓訪客在瀏覽網站時，眼球沒有休息的時間及空間。

If you take the time to edit and organize your content in a way that is respectful of the space you have to present the information, you give a feeling of professionalism, organization and overall good vibes to visitors. You want your visitors to feel like you have your stuff together and that you are easy to work with.

但是凡事總有例外，如果您花了很多心力在於編輯及編排網站內容，您在其餘的空間上需要放上資訊，那麼這是值得您去做的。因為這樣可以給予訪客一種專業、有組織性並能帶來好心情，而且這會讓訪客覺得您的網站是有內容的，並會願意再訪。

Keeping things simple with a well organized website using adequate white space tells visitors you know what’s important and you don’t want to waste their time.

利用白色版面來把網站版面做得簡潔並搭配良好的編排方式會讓瀏覽的訪客對於網站有提供重要內容的意象，而且另一個好處是，您不用花太多的時間尋找您要的資訊。

Learn more about white space and keeping things simple in this Smashing Magazine article.

如果您想更了解留白設計並想讓網站看起來更加簡潔的實際案例，那麼您可以看看Smashing雜誌裡的文章。

Color 顏色

圖片來源：Unsplash

When designing a website, often the colors are dictated by the organization’s new or existing visual identity (or brand). But how these colors are used affects how the visitor feels when they visit your site.

以網站設計來說，網站的顏色決定了訪客對於網站所屬公司〈或是品牌〉的視覺意象，是嶄新的還是陳舊的？但是這樣的說法您應該還是很難了解對吧？所以我們要了解的是，當訪客來瀏覽網站時，到底有那些顏色對於訪客的感受具有那些影響呢？

Most visual identities have neutral colors (i.e the tints, shades, and hues of whites, grays, and blacks) that are used along with their main colors. In most modern web designs, these neutral colors often take dominance in terms of how much real estate they take up.

許多企業視覺識別〈visual identities，VI，例如企業商標〉都是中性色〈neutral color，例如顏色濃淡、陰影的變化以及白色、灰色及黑色〉搭配他們的主顏色。在許多現代的網站設計中，這些中性顏色的採用通常也決定了他們網站的篇幅大小。

For instance, if an organization’s main colors are blue and yellow, with neutrals being white and black, it is likely that they may choose a white background to display their content on, instead of a blue or yellow background.

例如，如果一個網站的主色是藍色和黃色再搭配黑色跟白色這樣的中性色，那麼很可能它們會挑一個白色的背景來呈現他們的內容，而不是採用藍色或黃色來當背景。

These neutrals act much like white space does: it provides an opportunity for rest. Using the example above, if all you see on that organization’s website was blue and yellow, it would be an overwhelming site to focus your attention on (think yellow text on a blue background).

這些中性色的效果就像是前面所提的留白：提供訪客在瀏覽網站時有休息的機會。我們再回去看前段所提的例子，如果您瀏覽的網站充滿著藍色及黃色，那麼您的注意力得要放在太多的地方〈如果還是無法理解，那麼就想想看黃色字體放在藍色背景的圖像吧〉

The types of colors you use also play into the psychology of your Web design. Cooler colors (blues, greens, purples) often provide an inviting, professional and relaxed feeling. In contrast, it can be used to give a very cold and unfriendly feeling as well. Warmer colors (yellows, oranges, reds) are soothing, warm, and give a sense of creativity but can also give off negative feelings such as anger and stress.

您也能把顏色的選擇套用在網站設計的心理學。較冷的顏色〈藍色、綠色、紫色〉同常給人有種誘人、專業及放鬆的感覺。相對的，這也會讓人有冷酷及不友善的感覺。暖色系〈黃色、橘色、紅色〉帶有平靜的、撫慰人心的、溫暖及創意的感受，但相對的也會帶來生氣及壓力這兩種負面的意境。

黃字黑底的網站〈圖片來源：thenextweb〉

In addition, neutrals such as white often give a positive feeling of openness, but could also feel bland and dull. Grays are often considered slick, modern, and clean, but can be very cold and uninviting. Blacks are often associated with being professional and clean cut, but is also very overpowering and can be rather generic.

另外，像是白色這種中性色通常給人一種清爽的正面感受，但是也可能讓人感到單調及乏味。而灰色通常會被認為是具有現代感、乾淨及光滑感，但也可能讓人有冷漠及不吸引人的感覺。而黑色通常會聯想到專業及潔淨，但也會有壓迫或是普通的感覺。

How you use colors to help convey the positive feelings discussed above depends on the tint (lightness), hue (type) and shade (darkness) of the color as well as how much of the color you opt to use. If you want your site to be inviting, open and creative, a combination of blues and greens, with touches of yellow or orange, on a white or light gray background will help convey these positive feelings to your visitors.

由上面所提及的篇幅來看，您如何使用顏色來傳達正面的意象還得搭配顏色的濃淡、色調〈字體〉和陰影以及您所採用的色彩量。如果說您想要讓網站看起來更吸引人、開放性及有創造力，那麼搭配藍色跟綠色再加上點黃色或是橘色在以白色或是輛灰色的背景就能幫助網站有帶給訪客正面的意象。

For more information on how exact colors play into the psychology of web design, Vandelay Design has a great article outlining each primary and secondary color and its effects on viewers.

如果您想更了解顏色在網站設計心理學的作用的相關資訊，那麼我會推薦Vandelay Design這個網站，裡面有非常多主色與配色對於網路使用者影響的相關文章可供您做參考。

Typography 字體的排版

Finally, typography can convey tons of emotions and feelings for visitors to your website. There are thousands of typefaces out there, and thanks to advancing Web technology such as CSS3, these typefaces have found their way onto websites as well.

在文章的最後，要提的是字體的排版方式，字體的排版是可以傳遞非常多的情感及感受給來到您網站的訪客。到目前為止，已經出現上千種的字體，這點得感謝像是CSS3這種先進的網路科技，讓我們在設計網站時得以有那麼多的字體做選擇。

No more picking a typeface out of the 15 or so Web-safe fonts. This has opened the door to thousands of new typefaces that can be used. And with great choice comes great responsibility.

那麼有那麼多的字體選項，我該選擇哪一種？切記，不要選擇字體大小超過15或是只挑網路通用安全字體〈Web-safe fonts〉，別忘了，有非常多的字體供您做選擇，而且當您選擇較少見的字體來做網站設計就越有機會被訪客看見。

Typefaces are designed to be used in specific situations and for certain uses. Serif fonts (those with little serifs, or feet, on the letters like Times New Roman) are often associated with professionalism, scholarly, and seriousness, while san-serif fonts (like Helvetica) are a bit more modern feeling, clean and more informal.

字體排版的方式是按特定的情況而且本身是具有某些用途的。襯線體〈是指有襯線的字體，又稱為有襯線體、襯線字、曲線描邊字，俗稱白體字，以常見的字體為例，襯線字就像是Times New Roman這個字體〉通常會聯想到專業、具有學術氣息及嚴肅的氛圍，而無襯線字〈san-serif，像是 Helvetica〉就具有些現代感、簡潔乾淨且常見於非制式的文件。

紐約時報〈the New York Times〉的標題用的就是襯線體〈圖片來源：Unsplash〉

For example, most news websites (i.e. The New York Times) use serif fonts to help convey the feeling of tradition, importance and knowledge. They want you to feel like they are an authority, that what you are reading is important and that they know what they are talking about.

例如，大部分的新聞網〈像紐約時報〉使用襯線體來幫助傳達傳統、重要且具知識性的信息。它們想要讓讀者感受到他們的新聞具權威性，讓您了解您正瀏覽的新聞是很重要的而且是言之有物的。

Sans-serif fonts are used more and more to convey a feeling of modern, clean, sophistication and upscale. Those in the technology industry often use san-serif fonts much more than serif fonts because they want visitors to feel like they are up-to-date and futuristic.

而無襯線體較常用於傳達現代感、乾淨、積極及高檔的意象。相較於襯線體，通常科技產業的網站比較常出現非襯線體是因為他們想讓訪客有未來感及跟上時代的感覺。

For more on what kind of fonts to use for your web design, Super Dev Resources has two great infographics to help you navigate your typography.

如果說您想要找到用於更多網站設計的字體，那麼Super Dev Resources正好提供了兩大類很棒的資訊圖表〈infographic〉樣式供您做文字造型設計的參考。

The way type is presented on the page is also important. Leading (space between the lines) and kerning (space between the letters) should be evaluated as well. Large leading with lots of white space between lines makes the copy feel airier and easier to read; little leading gives a crowded feeling and is hard to read more than one paragraph at a time.

在網頁中呈現的字的編排也是很重要的。行距〈leading〉〈每一行之間的距離〉及字距〈kerning〉〈每一字之間的間隔距離〉也是網站設計的重點。大的行距讓行與行之間會有較多的空間，這會讓讀者有較容易閱讀的感覺，而較小的行距會感覺很壅擠而且很難讓人再讀下去。

在這張圖片中，字與字的垂直間距就是行距〈leading〉而字與字的水平間距就是字距〈kerning〉〈圖片來源：Unsplash〉

Space between paragraphs, margins between blocks of text and other elements on the page, and font size (and its relation to leading) are also factors to consider. Tight paragraphs are uninviting and hard to read, copy that is too close to elements such as pictures make the page feel crowded, and too large or too small font size will either make the visitor feel like you are screaming at them or whispering.

另外，在每個段落間的間距及字體大小等等也是需要考量的因素。越窄的段落間距是不容易吸引人的而且也很難閱讀，由這個道理來看，像是圖片過多而讓圖片間沒有是當的間距也是會看起來相當擁擠，而且太大的字型會讓人覺得好像有在吼叫的意象，而太小的字型好像有人在嘴邊說悄悄話的感覺。

Need ideas on the types of fonts available for your Web design? Check out offerings by Abobe’s TypeKit or Google Fonts for ideas on the possibilities.

看到這裡，您需要關於網站設計的字型的概念嗎？您可以去看看Abobe’s TypeKit或是Google Fonts裡找找靈感。

Conclusion 結論

It is often the designers’ job to understand the psychology of their design choices when producing a design, but understand the basics in some key areas of design will help you understand and even further help produce great content and manage your web design more effectively.

通常網站設計的部分交給專業人士就行了，但是了解設計的背後關鍵的原理是能幫助您瞭解甚至產出更多更好的內容並能更有效自理自己的網站設計。

While these areas focus mainly on website design, a lot of the psychology of design can be used in other areas of design as well, such as logo and print design.

所以，當您耐心讀完這篇文章相信您對網站設計有了一個大概的方向，此外除了網站設計，也能將這些概念用在其他的設計領域，像是商標及平面設計都有幫助。

How will you apply these theories to your website?

那麼，您會怎麼應用這些原理在您的網站呢？

原文連結：The psychology of Web design: How colors, typefaces and spacing affect your mood

原文作者：Amber Leigh Turner