​​4. Colorful Emotions: Visual Vibrancy in Web UI Design
​​The skill of using colors is no less than an artform. 
​​使用色彩的技巧不亞於藝術形式（artform)。
​​ 
​​Across human history, master painters and other artists have earned global recognition from their ability to manipulate colors. In the modern era, the artform now opens up a lot of new commercial and business applications, first in advertising, and now in web design. With an almost bottomless depth, the skill of color usage can be improved and refined endlessly. 
​​We’ll explore the fundamentals of color theory and color scheme, then examine the emotional effects of certain colors. 
​​從人類歷史來看繪圖大師以及其他藝術家藉由運用色彩的能力贏得全世界的認同，在當代藝術形式（artform）開啟了許多商業應用，一開始是用在廣告業，而現在是用在網頁設計。由於深不見底學習知識，色彩使用的技能能夠無止境地改善和精煉。接下來我們會探索基本的色彩理論和配色方案，最後在看看一些色彩的情感效應。
​
​4.1 Color Theory
​​色彩理論
​​The topic of color could fill a whole book on its own, so we’ll stick to what’s relevant to UI design here. We can break down color theory into 3 parts with regards to web UI design:
​​這個色彩主題幾乎可以出一本書了，所以我們在這裏只討論跟UI設計相關話題。對於網頁UI設計我們可以把色彩理論切成三部分。
​​ 
​​Contrast – Every shade of color has a set opposite – an “arch-nemesis” whose contrast is far greater than any other color. You can use the color wheel below to find each specific color’s opposite. Simply locate the color on the opposite end of the circle. 
​​每種形式色彩都有一組相反色－其「對比」比任何其它顏色來得大。你可以使用下面的彩色輪盤找到每組色彩對應的相反色。可以輕而易舉地從圓盤相反方向終點找到對應色。
​​Complementation – Colors aren’t always at odds with each other: complementary colors accent each other and bring out their best, the opposite of contrast. These are the colors immediately next to each other on the color wheel, for example, purple’s complements are blue and pink. 
​​互補－顏色並不總是彼此相左，互補色強調彼此之間而且可以帶來最好的，這剛好是「對比」的相反，這些互補色在彩色輪盤彼此相鄰。舉個例子，紫色的互補色是粉紅色以及藍色。
​​ 
​​Vibrancy – Each color evokes a specific moods: the brighter warm colors (red, orange, yellow) tend to energize a user and make them more alert, while darker cool shades (green, blue, purple) tend to be more relaxing and tranquil. CNN uses a red banner in their top navigation to heighten alertness, a color decision that suits the site’s breaking news content.
​​活力－每種顏色會激發起特殊地情緒：越明亮地溫暖顏色（紅、橘、黃）往往讓使用者更有活力更有警覺心；然而暗冷色系列（綠、藍、紫）往往讓人更放鬆平靜。CNN網站在頂部瀏覽區使用了紅色橫幅來提高警覺性，這種顏色決定對於此網站的重大新聞內容很適合。 
​​ 
​​ 
​​Color theory in web design is more than just a visual garnish, it can have game-changing effects on your business. If you don’t believe us, read conversion consultant Jeremy Smith’s article explaining how the psychology of color can expand your business. 
​​色彩理論不僅是一種視覺裝飾，它在您的商業生意上更有一種翻轉效應。如果你不相信我們可以讀讀看轉換率顧問Jeremy Smith的文章（色彩心理學如何擴張你的生意） 
​​ 
​
​4.2 Vibrancy : Emotional Implications of Color 
​​色彩的情感影響 
​​ 
​​There’s no denying the link between emotions and colors: in fact, the human race has been documenting the psychological impact of color since the Middle Ages. Naturally, any web designer wants to harness this as well, since the right colors create the right moods and atmosphere for your site. 
​​沒人會否認顏色和情感之間的關聯，實際上人類自從在中世紀就記錄了色彩對心理的衝擊。由於對的顏色能為你的網站創造出對的情感和氣氛，任何一位網頁設計師理所當然地想要去控制它。 
​​ 
​​We’ve analyzed the advice of the researchers at Vandelay Design and Smashing Magazine, and filtered it through our own experience at UXPin. 
​​我們已經分析了在Vandelay Design和Smashing Magazine研究學者的建言，順便利用我們在UXPin的經驗來過濾。
​​ 
​​Please note that different cultures around the world perceive colors differently. We describe emotional associations that are most relevant to Western cultures. For a more in-depth look of how different cultures perceive color, read this thorough piece from Web Designer Depot. 
​​請注意世界上不同文化看待色彩不盡相同。我們描述跟西方文化最有關的情感連結。想更深入了解不同文化如何看待色彩請閱讀Web Designer Depot的這篇文章。
​​ 
​
​Red 
​​紅色 
​​Promotes: power, importance, youth
​​提升：威力、重要性、年輕 
​​ 
​​The most stimulating color, red is so energizing it has been used to increase blood circulation. Representing passion and power, red is the color that will attract the most attention, which is why it is commonly used for warnings and important notices. 
​​最有刺激性的顏色，紅色是如此地有活力，長久以來被用來促進血液循環。紅色是最能吸引目光的色彩，它代表權力、熱情，這就是為何它普遍用來當警告和重要性公告。 
​​ 
​​Red is very appropriate for the No Way NSA website, whose purpose is calling alarm to a perceived threat from the NSA. Using red in the first section of the single-page site is especially clever because it calls attention to the primary message while physiologically inducing people to “get out of the danger zone” by scrolling downwards. This, of course, only makes the user engage with more content. 
​​紅色很適合NO WAY NSA網站，其目標是要警告大眾來自美國國家安全局可察覺地威脅。由於這網站在主要訊息方面吸引了目光，同時也在生理上誘導使用者藉由滾動向下「逃離危險區」，所以在單頁網站的第一部份使用紅色是特別聰明的。這種方式當然會讓使用者花更多時間瀏覽。
​​ 
​​However, this could work against you, as red can incite anger, or at least overstimulation. If you’re going for a more relaxed atmosphere, use it sparingly (or at least in a lighter shade) or not at all. 
​​然而由於紅色會激發憤怒或是過度刺激， 這方式可能對你不管用。如果你想做的是比較輕鬆氣氛的網站，使用少一點紅色（或者至少顏色淺一點），或者不要全部使用紅色。 
​​ 
​
​Orange 
​​橙色
​​ 
​​Promotes: friendliness, energy, uniqueness
​​提升：友好、能量、獨特性
​​As the most muted of the warm colors, orange is uniquely versatile. As a primary color it can be engaging and energizing, and as a secondary color it also retains these properties in an unobtrusive way. Orange also helps to create a sensation of movement and energy. 
​​橙色是暖色系裡最柔和的，獨一無二通用型地。當成主色是引人入勝以及充滿活力的，而當成配色依舊能在不顯眼的方式下保留這些特質。橙色也能幫忙創造出移動和能量的感覺。 
​​ 
​​Aside from it being part of the brand style, orange works well with Fanta’s lighthearted and cartoonish site. The color shows creativity while retaining familiarity. 
​​除了當作品牌風格的一部分外，橙色跟Fanta的輕鬆和卡通式網站搭配地很好。這顏色在保留相似度的同時展示出它的創意。
​​ 
​
​Yellow
​​黃色
​​ 
​​Promotes: happiness, enthusiasm, antiquity (darker shades)
​​提升：快樂、熱情、古老（暗色調）
​​ 
​​ 
​​Yellow is one of the more versatile colors, depending on the shade. 
​​靠著色調使黃色成為多用途的顏色之一。 
​​ 
​​A bright yellow is the most energetic of the colors, without the severity of red. Middle shades of yellow give a sense of comfort while still feeling invigorating. Darker shades (including gold) can give the impression of antiquity, and lend an air of timelessness, wisdom, and curiosity. 
​​亮黃色沒有紅色帶來的警覺性是最有能量的顏色。中間色調的黃色在維持著暢快感的同時也給了一種舒適感。暗色調（包含金黃色）有種古代風的印象，也添加了永恆、智慧、好奇心的氣派在當中。 
​​ 
​​In the above example from web design agency Flash Media, the darker shade of yellow exudes energy, curiosity, and authority. This makes a lot of sense for a company who thrives on the value of their consultancy and skills. 
​​在上述來自Flash Media網頁設計機構的例子，暗色調的黃色散發著能量、好奇心、權威，這對一家成功來自於咨詢技能價值的公司很合理。
​​ 
​
​Green
​​綠
​​ 
​​Promotes: growth, stability, financial themes, environmental themes
​​提升：成長、穩定、財經主題、環境主題
​​Green bridges the gap between warm and cool colors, though tends to be more of a cool color. This means green has the same relaxing effects of blue, but still retains some of the energizing qualities of yellow. As such, it creates a very balanced and stable atmosphere. Darker shades give off more of the money/affluence feelings which you can see with Ameritrade above. 
​​綠色即便偏向冷色系，它搭起了暖色系和冷色系間隔的橋樑，這意味著綠色有和藍色一樣令人放鬆地效果，而且還保有一些黃色帶來充滿活力的特質。因此綠色創造了一種非常平衡穩定的氣氛。暗色系，您可以在上方的Ameritrade網站看到 ，散發出金錢富裕的感覺。
​​ 
​
​Blue
​​藍
​​ 
​​Promotes: calm, safety, openness (lighter shades), reliability (darker shades)
​​提升：冷靜、安全、開放（淺色系）、可靠性（深色系） 
​​ 
​​Like yellow, blue’s meaning varies greatly depending on the shade. All blues are universally relaxing and safe, but the lighter shades will seem more friendly while the darker ones seem more somber. Social media sites like Twitter and Facebook take advantage of light and medium shades, while corporate websites prefer dark shades’ tones of strength and reliability. 
​​像黃色一樣，藍色帶來的意義會隨著顏色深淺變化很大。所有藍色普遍上都是令人放鬆感到安全的，但是淺色系似乎比較友善一點，而暗色系似乎比較陰沈。社交媒體網站像是Facebook、Twitter善用了淺色、中色的優勢，然而企業網站則偏好暗色系所帶來的力量和可靠性。
​​ 
​​Van Vliet & Trap, an event design agency, makes clever use of dark blue. By using the blue in the flowers in the background, they visually hint at their expertise in floral design while also exuding trust and reliability. It makes a lot of sense since they plan high visibility (and somewhat nerve-wracking) events like weddings. 
​​活動設計機構Van Vliet & Trap很巧妙地使用了暗藍色。藉由背景花朵上使用了藍色，他們在視覺上暗示了花卉設計的專長，同時也散發出信任和可靠性。由於他們計劃高可見度（而且有點傷腦筋）的活動像是婚禮，所以使用藍色很合理。
​​ 
​
​Purple
​​紫色
​​ 
​​Promotes: luxury, romance (lighter shades), mystery (darker shades)
​​提升：豪華、浪漫（淺色系）、神秘（深色系）
​​Historically associated with royalty, purple retains the tone of luxury, even to the point of decadence. 
​​Purples suggests lavishness and wealth in general, making it a popular choice for fashion and luxury goods (and even chocolate, like the Cadbury example above). Lighter shades like lavender (with pink hues) are considered romantic, while darker shades seem more luxurious and mysterious. 
​​歷史上和王權有關聯，紫色即便在頹廢時期依舊保留了豪華的色調。
​​紫色一般而言意味著奢華和財富，讓它成為時尚業以及奢華物品的熱門選擇（甚至是巧克力，像是上面的Cadbury例子）。淺色系像是帶有粉紅色調的薰衣草被認為是浪漫，而深色系似乎帶有更多的豪華和神秘感。
​​ 
​
​Black
​​黑色 
​​ 
​​Promotes: power, edginess, sophistication
​​提升：權力、急躁、成熟 
​​ 
​​The strongest of the neutral colors, black exists on almost every website. 
​​最強地中性色－黑色－幾乎在每個網站都存在。 
​​ 
​​It can take on varying characteristics depending on its supporting colors, or dominate all of them if used in excess. Its strength amidst neutrality makes it the color of choice for long blocks of text, but as a primary color can give the impression of edginess, sophistication, or even evil. 
​​依其配色的不同，黑色可以有各種不同特質，或者在過量使用下可以支配所有顏色。在中性色中黑色的強度讓它成為長文中選擇地顏色。但作為主色，黑色給了我們急躁、成熟甚至是邪惡的印象。 
​​ 
​​For most websites, black is used to create an instant feeling of sophistication and timelessness. The feeling of elegance is especially strong well when paired with white font and set against a minimalist layout, as you can see in the “Dream and Reach” microsite from Bose. 
​​對於大部分的網站，黑色用來瞬間創造出成熟、永恆的感覺。當和白色字體一起搭配，和簡約佈局一起比對時，黑色優雅的感覺特別強烈，可以從Bose “Dream and Reach” microsite網站裡看出來。 
​​ 
​
​White
​​白色 
​​ 
​​Promotes: cleanliness, virtue, simplicity
​​提升：乾淨、美德、簡約 
​​ 
​​White is the color most associated with virtue, purity, and innocence in Western cultures. 
​​白色在西方文化裡是與美德、純真、清白最有關聯的顏色。
​​ 
​​Minimalist and simplistic sites most often use it as a background. By drawing the least attention of all the colors, white is the best for accenting the other colors on the page. 
​​簡約化以及簡單化網站常使用白色當作背景色。白色在所有色彩中吸引最少目光，所以想在網頁上把焦點放在別的顏色，白色是最佳選擇。
​​ 
​​This works particularly well for the awwwards-winning website of artist Kaloian Toshev. The white background draws attention to his vibrant artwork, while creating an art-gallery aura of elegance. 
​​白色在由藝術家Kaloian Toshev設計獲得awwwards獎項的網站上運用地特別合適，白色背景讓他生動地藝術作品吸引了目光，同時也創造出藝術畫廊優雅地光環。
​​ 
​
​Gray 
​​灰色
​​ 
​​Promotes: neutrality, formality, melancholy
​​提升：中立性、形式、憂鬱 
​​While in certain situations it can seem brooding or sad, gray is nonetheless a popular choice for looking traditional or professional. However, one of the greatest advantages of gray lies in varying its hues – changing the shade can give you a customized mix of properties from white and black, a powerful tool in skillful hands. 
​​即便在某些情形下灰色似乎帶有憂鬱悲傷，灰色依然是讓外型看起來傳統、專業化的熱門選擇。灰色一個最大的優勢在於藉由調整改變其色調可以給你們客製化黑白的混合特質，對於熟練的人是種很好用的工具。 
​​ 
​​When paired with brighter colors and presented in a flat UI, the grey background of awwwards feels much more modern than it does somber. 
​​awwwards網站的灰色背景在明亮顏色搭配下以扁平化使用者介面呈現，給人的感覺相較於原本地陰沈變得更有現代感。
​​ 
​
​Beige
​​米色
​​ 
​​Promotes: traits of surrounding colors
​​提升：周遭顏色的特點
​​Beige is the wildcard of the colors, as its main use is in drawing out other colors.
​​由於米色主要用在襯托出不同顏色，米色是這些顏色的外卡（具有關鍵影響力的事物）。
​​ 
​​On its own, beige is dull, though this can be used to symbolize humility. However, it will take on the characteristics of the colors around it, making it an interesting design tool. For these reasons, beige is almost always a secondary or background color. 
​​雖然米色可以用來象徵謙卑，它本身是笨拙遲鈍地。然而，米色可以呈現出圍繞在它四周的顏色的特質，讓米色成為一種有趣地設計工具。基於這些理由，米色幾乎當成次要色或是背景色來使用。 
​​ 
​​Darker shades of beige (like on the Dishoom site) will create an earthy and almost paper-like texture, while lighter shades feel fresher. In this case, the lighter shade around the brand name, which darkens outwards, help create the feeling that the restaurant is a fresh modern take on earthy cuisine.
​​顏色深一點的米色（像是Dishoom網站）可以創造出泥土般幾乎跟紙張一樣的質感，然而淺色系的會讓人感覺清新。在這案例中，圍繞在品牌名字（DISHOOM）的淺米色讓外圍變暗了，在它的幫助下讓使用者覺得這是一間清新現代感可以供應樸實料理的餐廳。
​​ 
​
​Ivory 
​​象牙色
​​ 
​​Promotes: comfort, elegance, simplicity
​​提升：舒適、優雅、簡潔
​​In terms of emotional response, ivory (and cream) are slight variations on white. 
​​就情緒反應而言，象牙色（以及淡黃白色）是輕微在白色上做點變化。
​​ 
​​Ivory is seen as warmer (or less sterile) than white, making it more comforting while still exuding the same minimalistic and complementary aspects. Ivory should be used in place of white to soften the contrast between it and darker colors. For the art in my coffee site, an orange/brown accent is added to the cream background (which looks slighly greyish) to create a sense of warmth. 
​​象牙色被視為比白色溫暖，讓象牙色可以同樣散發出簡約和互補觀點。象牙色應該用來替代白色柔化白色和深色之間的對比。在art in my coffee這個網站，橙/棕色調加到看起來有點灰的淡黃白色背景創造了一種溫暖的感覺。 
​​ 
​​If you’d like to read more analysis of color and emotion, check out this piece by 1stWebDesigner which deconstructs color use from 20 top brands. 
​​如果你想閱讀更多色彩和情緒分析可以看看1stWebDesigner網站提供的文章，這篇文章解構了前20大品牌的網站用色。 
​​ 
​
​4.3 Color Scheme
​​配色方案 
​​ 
​​Every site has a color scheme, the primary colors it uses for its main areas. As we’ve been discussing, the repeated use of these colors will affect the user’s mind and mood, typically subconsciously, so choose them well. 
​​每個網站都有其配色方案（主色調用在主要區塊），就我們已經討論過的，重複使用這些色彩特別是在潛意識方面會影響到使用者的心情，所以請好好選擇顏色。
​​ 
​​While there are lots of different ways to mix colors togethers, we’re going to focus on the 3 most successful, and common, ones:
​​雖然有很多不同方式可以混色，我們會注重在三個最成功、普遍使用的方法。
​​ 
​​Triadic – The triadic is the most basic and balanced of the three structures. Using vibrancy and complementation, but straying from the trickier contrast, the triadic structure is the safest and most reliable scheme. On the 12-step color wheel, select any 3 colors located 120 degrees from each other: one color for the background, and two for content and navigation.
​​三元 
​​三元是最基本的，它是三種架構的平衡。三元架構使用「鮮明性」和「互補性」但是背棄了麻煩的「對比」是種最安全、最有可靠性的方案。在12等分的彩色輪上，任選三個彼此120度的顏色：一個顏色當背景，其餘兩個當作內容和導覽。
​​ 
​​ 
​​Compound (Split Complementary) – The next scheme gets a little trickier to pull off, but can be rewarding if done well. The concept uses four colors: two contrasting pairs and two complementary pairs. 
​​複合（拆分互補） 
​​下一個方案有一點麻煩才能完成，但如果做的好是能夠得到收穫地。這概念使用四種顏色：兩對對比色以及兩對互補色。
​​ 
​​ 
​​Look at how stunning the page for Florida Flourish looks just based on its colors alone. The red and green contrast together with the text tags and plants, plus the blue and orange with the sky atop the desert. At the same time, the red/orange and blue/ green complements really bring the whole view together nicely.
​​看看Florida Flourish網站頁面的色彩是多麼令人驚嘆。紅色的文字標籤和綠色植物一起做對比，附加上橙色沙漠上頭的藍色天空。同時紅／橙以及藍／綠顏色互補，整個放在一起的視覺很好看。
​​ 
​​Analogous – Lastly there is the analogous scheme, which focuses exclusively on complementary colors. This one really highlights the vibrancy of the colors chosen, for example, a red-orange-yellow analogous scheme will seem very energetic and lively. While this scheme is relatively easy to pull off, the trick is in deciding which vibrancy of color to use, as it will be exaggerated. 
​​相似－最後有個相似方案專門，其焦點放在互補色。這方案實際上突顯出選中顏色的活力，舉紅－橙－黃為例，此相似方案顯得有能量活力。這方案相對上容易完成，但由於顏色容易被誇大，此方案麻煩在決定要使用那個顏色。
​​ 
​​ 
​​By using blues, turquoise, and greens for their analogous site, Blinksale creates a subdued and even safe atmosphere for its site. Notice how they use the contrasting yellow to draw attention to their call-to-action.
​​網站Blinksale使用藍色、青綠色、綠色創造出柔和甚至是安全的氣氛，可以注意他們如何在「呼籲採取行動」上使用對比地黃色來吸引目光。
​​ 
​​What we’ve just discussed are just the fundamentals of how color theory can enhance your UI design, but there’s no limit to how in-depth you can go with colors on your site. If you’d like to know more, you can check out this piece in Smashing Magazine on how to create your own color palette.
​​到目前為止我們所討論地是色彩理論的基本觀念如何增進你的使用者介面設計，但是究竟色彩理論在網站上的運用要懂多少並沒有限制，如果想要了解更多可以查看Smashing Magazine的文章「如何創造自己的調色盤」。
​​ 
​
​4.4 Color Assistance Tools
​​色彩輔助工具 
​​ 
​​Thankfully, there are plenty of tools to help you put color theory into practice. Check out these pre-made color palettes so you don’t need to start from scratch.
​​很感謝有很多工具幫助你把色彩理論付諸實行，看看這些事先做好地色彩調色盤所以您不必從零開始。 
​​ 
​​Adobe Color CC – Once known as Kuler, this has been regarded for a while as one of the most trusted color assistance tools available.
​​Adobe Color CC- 曾經被稱作Kuler，已經有一段時間被認為是有用地最可靠的色彩輔助工具之一。 
​​ 
​​Paletton – If you’re in need of a tool for speed or a simplified ease-of-use, this minimal tool can help you. Great for beginners. 
​​Paletton－如果您需要一個速度快或是簡單容易使用的工具，這個小工具可以幫助你。非常適合初學者使用。 
​​ 
​​Flat UI Color Picker – While for flat UI designs only, this is still a useful and convenient tool for color selection.
​​Flat UI Color Picker－雖然只給扁平化使用者介面設計使用，它依舊是個有用方便挑色的工具。 
​​ 
​​To further shorten the learning curve, you can also check out this list of 28 website color tools. 
​​為了進一步修短學習曲線，您可以看看「28個網站色彩工具」。 
​​ 
​
​4.5 Takeaway
​​No one’s expecting you to be Michelangelo, but a basic understanding of color usage is solid prerequisite for web design. 
​​沒有人期待你成為米開朗基羅，但在網頁設計領域基本瞭解色彩運用是種先決條件。 
​​ 
​​As we’ve just explained, colors carry with them a lot of extra weight that sometimes goes unnoticed. No matter what colors you choose, they have a definite influence on the design as a whole – from communicating contrast or similarity, to evoking precise emotions. 
​​就我們已經解釋過地，色彩額外帶來很多效應，有時候我們也未曾注意到。無論您選擇什麼顏色，從溝通對比或是相似性到激發特定情感，色彩肯定在整體地設計上有一定的影響力。 
​​ 
​​ 
​​ 
​​