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網站，其目標是要警告大眾來自美國國家安全局可察覺地威脅。由於這網站在主要訊息方面吸引了目光，同時也在生理上誘導使用者藉由滾動向下「逃離危險區」，所以在單頁網站的第一部份使用紅色是特別聰明的。這種方式當然會讓使用者花更多時間瀏覽。