为你的眼睛做UI设计- 多彩的情绪：Web UI设计的视觉内涵 [译]（part4）

为你的眼睛做UI设计

多彩的情绪：Web UI设计的视觉内涵

本章内容组织结构--译者注

颜色的使用是一门艺术。

Photo credit:“ex removal screen cross”. Brett Jordan.Creative Commons.

在人类历史上，画家和艺术大师都会因其颜色运用得恰到好处而为人认可。现代社会这种艺术形式被用于商业领域如广告和现在的Web设计，由于颜色的含义深不可测，颜色的运用技巧也在逐渐精进，且永无止境

我们将探索颜色的理论基础及其使用方案，并考察颜色所传达出的情感深意

---

颜色理论

颜色的理论一本书也说不完，我们将重点阐述关于UI设计的部分。我们将颜色的设计理论分为3类：

1. 对比 — 每一种颜色都有一系列的对比色—就是相互之间的对比比其他颜色来得更为强烈。你能通过下图找到每个颜色的对比色，简单的说就是在色环的对面。

Photo credit:“color wheel”. Michael Hernandez.Creative Commons.

2. 互补（应该是相似-译者注）— 颜色之间并不总是对比的，相邻色之间相辅相成，互为映衬。相邻色在色环上是紧挨着的。例如，紫色的相邻色是蓝色和粉红。

3. 内涵 — 每一种颜色都会引起一种特别的情绪：明亮的暖色（红、橙、黄）会带给人能量，使人警觉。而较深的冷色（绿、蓝、紫）会让人放松，平静。CNN的导航栏使用红色来使标题更加醒目，这是运用颜色将新闻内容分开。

Photo credit:http://www.edition.cnn.com/

在web 设计中颜色并不只是视觉的装饰品，在商业中也会起到戏剧般的效果。如果你不信，可以读一下Jeremy Smith的文章—颜色心理学是如何拓展你的业务的。

颜色是一种科学，运用的好能使你的界面大变样。

---

颜色的情感化暗示

没有人会否认颜色和情感之间的联系：事实上自从中世纪人类已经书面记载了颜色对于人们的心理影响。自然而然所有的 web 设计师都想把颜色处理好，因为颜色用对了，网站传达出的情感和氛围也就对了。

我们分析了在Vandelay Design和Smashing Magazine的研究者的建议，并且根据我们自己的经验将其做了过滤。

请注意到不同的文化中颜色代表的意义也不同。我们主要是以西方文化为背景来看待颜色所传达出的情感。如果想更深入得了解不同的文化是怎样看待不同的颜色的，请看来自Web Designer Depot 的文章。

红色

代表：力量、重要、青春

Photo credit:www.nowaynsa.com

红色是最醒目的颜色，它充满能量增加了人的血液循环。代表激情和力量的红色最吸引人的注意力，这也是为什么它会用在警示和重要的注意事项上。

红色用在No Way NSA上很适合，这个网站的目的就是警示来自美国国安局的威胁。红色运用在只有一个页面的网站非常明智，因为红色传达出了通过往下翻页赶快离开危险地带的信息，这诱使用户获取更多的网站内容。

然而，红色也有可能跟你唱反调，它会激起愤怒，至少会使人过分激动。如果你想营造一个轻松的氛围，少用点红色（至少将亮度调低）或者不要用。

橙色

代表：友好、充满能量、独特的

Photo credit:www.fanta.com

作为最柔和的暖色,橙色作用尤其多。当作为主要颜色时它是多么得迷人和充满能量，作为次要颜色时它也能悄悄地展现这些特性。橙色帮助制造了运动和充满能量的感觉。

橙色除了运用在芬达的品牌风格上，还用在了芬达的轻松卡通化得网站上，在显得亲近的同时还展现出了创造力。

黄色

代表：高兴、热情、古老（深色）

Photo credit:http:// ashmediagency.com/home

黄色是一个多用途的颜色，作用由它的深浅决定。

亮黄色是最充满能量的颜色，但并没有红色那么剧烈。中等色度的黄色又会给人一种爽快、舒服的感觉。暗黄色（包括金色）给人一种古老的的感觉营造了年代久远、睿智、珍贵的氛围。

上面的的例子来自于web设计机构Flash Media，深黄色渗透出一种充满能量、珍贵、权威的气息。这对于一个致力于打造业务和技能价值的公司是相当重要的。

绿色

代表：生长、稳定、财务相关、环境相关

Photo credit:http://portfolio.ervinandsmith.com/tda-thinkorswim-sharing/

绿色在暖色调和冷色调之间架起了一座桥梁，即使更多的时候被看成是冷色调。这意味着绿色拥有蓝色一样的冷静，但也有黄色的能量，由此创造出一种平衡稳固的氛围。深绿色给人一种富裕的感觉，你可以看一下上图的Ameritrade网站。

蓝色

代表：冷静、安全、开放（低色度）、可靠（深色度）

Photo credit:http://www.vanvlietandtrap.com/#/

像黄色，蓝色也是根据颜色深浅表达不同的含义。所有的蓝色都有放松、安全的意义，但是淡蓝色更多的是友好，而深蓝色更多的是忧郁。像Twitter 和 Facebook 这样的社交媒体将蓝色运用的炉火纯青，将充满力量和可信赖的深蓝色作为主色调辅以淡蓝色清新友好。

Van Vliet & Trap一个活动设计网站，蓝色用的非常好。将蓝色的花做背景，在视觉上暗示他们的主业是花艺设计，同样也流露出可信任可信赖。也为他们设计高品质的活动（如婚礼）做了完美的铺垫。

紫色

代表：奢华、浪漫（低色调）、神秘（暗色调）

Photo credit:https://www.cadbury.co.uk/

长久以来紫色就和王室相关，骨子里透露出尊贵的气息，即使现在已经不兴这一套了。

紫色暗示着奢华浪费，时尚的奢侈品经常选用的颜色（即使是用在Cadbury巧克力上也是如此）。浅色调像薰衣草色（添加了粉红色）让人联想到浪漫，深色调则是奢靡及神秘。

黑色

代表：力量、急躁、混合

Photo credit:http://dreamandreach.bose.com/en_US/explore

最强大的中立色，黑色几乎存在于每一个网站。

黑色会根据其他辅色来变化它的“性格”，甚至用的过多会占据所有颜色所表达出来的情绪。让其他颜色占大部分面积，作为点缀的黑色在其中起到的作用是中立的，而当黑色做主要颜色时，会给人一种急躁、强词夺理、或者邪恶的感觉。

在大多数网站，黑色用来营造一种混合、永恒的感觉。当配合白色字体，极简布局则逼格满满，请看Bose的“Dream and Reach”microsite 。

白色

代表：干净、优雅、简洁

Photo credit:http://mzkmzk.com/

在西方文化中，白色象征着优美、纯洁、清纯。

极简主义和追求简洁的网站大多数会采用白色为背景。作为最不起眼的颜色，通常白色是用来承载其他颜色的。

设计师Kaloian Toshev的网站 awwwards-winning 将白色运用得非常好。白色的背景将注意力都吸引到他的画作上去了，创造出一种优雅画廊的感觉。

灰色

代表：中立、礼节性的、忧郁的

Photo credit:www.awwwards.com

虽然大多数时候看起来是沉闷悲伤的，但是在表达传统和专业的方面灰色也是非常不错的。灰色的优势就是它色度的变化 — 通过色度的调整能够在白色和黑色之间变化，在老手的手里灰色是一个神器。

将亮度较高的灰色运用在扁平化的界面上，awwwards的灰色背景就显得高大上而不是阴沉的感觉了。

米黄色

适合做背景色

Photo credit:http://www.dishoom.com/

米黄色是百搭款，它主要是为了突出其他颜色。

米黄色有点迟钝的感觉。然而，米黄色会展现周围颜色的特点，作为一个有趣的设计工具经常作为次要颜色或背景颜色出现。

像Dishoom网站所用的色度较深的米黄色展现了一种泥土般或者纸质般的质感。色度较浅的米黄色给人一种新鲜的感觉。内亮外暗的设计会让人感觉酒店不仅时尚新鲜而且菜品带有泥土一般的原汁原味气息。（这也太扯了吧。。。）

象牙色

代表：舒服、优雅、简单

Photo credit:http://artinmyco ee.com/

在情感表达方面，象牙色（奶油色）和白色有少许差别。

象牙色比白色来的更暖些（或者说更柔和些），在表达极简和复杂方面时让人更舒服些，象牙色一般用在降低浅色和深色的对比时。art in my coffee网站中，橘色/棕色被加入到奶油色的背景中去了（看起来稍微有点灰）让人感觉暖暖哒。

如果想阅读更多关于颜色及情感关系的分析，查看1stWebDesigner 写的顶尖的20个品牌的颜色解析文章。

---

配色方案

每一个网站都有配色方案，主体色被用在最重要的地方。就像我们刚才讨论的那样，重复使用的颜色会潜移默化地影响着用户的心智和心情，所以我们必须搭配好。

有许多不同的颜色搭配方案，这里我们讨论3种最成功最典型的的方法：

1. 三角配色 — 三角配色在这三个方案中是最基础最平衡的结构。运用内涵及互补原则，去掉了复杂的对比，三角结构是最安全最可靠的配色方案。在12色相环中，你可以选择任何相距120度的颜色：一个做背景，一个用在内容中，一个用在导航中。

Photo credit:“BYR Color Wheel”.Wikimedia.Creative Commons. Edited from original.

2. 混合配色（分开互补配色）—这个配色方案运用起来有点复杂，但是如果搭配的好的话值得一试。主要用4种颜色，两种对比色及其各自相邻色。

Photo credit:“BYR Color Wheel”.Wikimedia.Creative Commons. Edited from original.

Florida Flourish 网站运用了它本身的颜色。文字标签和植物使用了红绿对比，再加上沙漠天空上使用蓝色和橙色。所以红色、橙色之间的相似及蓝绿之间的相似将网站整体看上起不错。

Photo credit:www. orida ourish.com

3. 相似配色 

— 这是最近流行的配色方案，专门针对相似色。这种方案强调被选颜色的寓意，例如，红橙黄的相似配色看起来充满能量和生机勃勃。这种配色方案较容易使用原因在于决定采用颜色的何种寓意之后，这种寓意会被夸大。

Photo credit:“BYR Color Wheel”.Wikimedia.Creative Commons. Edited from original.

通过在相似网站上蓝色、孔雀蓝、绿色的使用,Blinksale 制造出一种平和安全的氛围。注意他们在联系电话按钮上使用的对比较为强烈的黄色来吸引用户的注意力。

Photo credit:www.blinksale.com

我们刚才讨论的是怎样运用颜色理论来提高你的界面设计观感，至于用到什么程度还是看你自己，你可以看一下Smashing Magazine 上的怎样创造自己的颜色风格。

---

颜色辅助工具

有一点值得庆幸，那就是有很多工具都可以帮助你将颜色理论应用于实际。下面这些预设好的调色工具，会帮你省去很多初始步骤。

1. Adobe Color CC：前身是 kuler，最值得信任的颜色辅助工具之一。

2. Paletton：如果你正需要一个能快速上手的简单工具，这个最能帮助你。新手尤其适用。

3. Flat UI Color Picker：只需要平面 UI 设计工具时，它非常方便实用。

如果想在学习之路上少交点学费，你还可以看看这个，28 个颜色工具网站。

---

小结

没人指望你成为米开朗琪罗，但是懂得最基本的颜色的使用是网页设计的必备条件。

就像我们刚才所说，颜色承载了很多不为人知的东西，无论选择什么颜色都会对整个设计产生直接影响，也许是产生了对比或相似，也许是表达了一种情感。

---

视觉层级5秒测试

研究表明只需0.1秒用户就能对你的网站形成大概的印象。为了吸引用户，你的网站必须在颜色、空间、对比等逻辑结构方面在用户面前快速形成一定的视觉层级。

Photo credit:http:// tness.reebok.com/be-more-human/

让我们来看一下将你的网站模糊之后，是否还能清晰地表意。

---

模糊测试

设计师Lee Munroe 说模糊测试就是将你的网站模糊化之后看还有什么元素是比较明显的。

如果凸显出来的元素并不是你想要强调的那么就需要重新设计了。从模糊的角度看你的网页将会显现网站的视觉层级的骨架，让你从新的角度看待网页的布局，实际操作时可以用ps将页面截图虚化5-10像素。

下图就是虚化后的结果。

Source:Visual Hierarchy

在上图Wufoo的主页中，注册按钮和产品特征仍然较为鲜明，较少的内容在第二层级。点击按钮的颜色和背景形成对比较为显眼，而且较大的留白也将用户的注意力集中在了产品特色方面。

---

其他方法

如果你不想虚化你的网站，你可以通过站在3英尺之外看你的屏幕也能达到虚化的效果。即使这种方法好像比较笨，但确实有效。

如果你设计的网站已经上线了，你可以在Chorne中试一试这些方法。

1. 在Chrome 中打开开发者工具

2. 在body中添加 -webkit-filter：blur（5px）。虚化的像素可以自定，推荐在5-10像素之间。

3. 重复这个步骤

第一次进行模糊测试后你可能会发现需要修改视觉层级

这时候，就像Lee Munroe建议的那样你可能需要调整这些东西：

大小    对比    颜色    形状    空格和边距    方向和位置

当你调整完之后再次进行模糊测试，直到满意为止。最后用ps或Chrome 将虚化值改为10像素看层级是否清晰。

---

小结

一个好的设计师不仅要有创造力更需要对结构、颜色、大小等等细节做考虑，考虑什么可以展现出来以及更重要的什么不能展现出来，这并不容易，所以我们才对像达芬奇梵高等艺术大师致以崇高的敬意。

刚说的3种模糊测试方法将会保证页面的所有元素传达出同一种含义。研究指出视觉是我们人类最主要的感觉，所以要确保你的设计能够传达给用户正确的第一印象。

我们希望这本书中的知识能够在实际工作当中帮到你，让我们开始设计吧。