为你的眼睛做UI设计

从对比到相似的视觉关系

如果你查字典，对比和相似是完全对立的。但是在web设计里，它们是一个硬币的两面。

对比和相似都可以显示出页面元素之间的关系—如果在视觉上运用这种关系能够节省用户许多精力和时间。

我们将解释它们俩各自是怎样发挥作用的，然后会演示他们俩是怎样互为作用互为加强的。

对比

在界面布局上，对比同样可以直观的反应界面布局界限的存在。例如上层导航栏与主要内容之间的颜色对比能够向用户指出主要内容的位置。

1. 明暗对比

所有使用智能设备的人都会明白当明暗对比运用在按钮上的意义。

当按下按钮时，按钮变暗使它看起来更像真实世界中的明暗关系。除了这些，它还传达给用户一种反馈信息。这种对比很少有图形的改变，在界面设计时这是一种非常有用的工具。

1. 它用在你想要表现有深度的地方—按钮、滑块、开关等等。

2.你想用过明暗对比将用户的注意力引导至亮度较高的物体上。

对比仍然是他们交互设计的核心元素，在下图中，一种抽象的悬停对比并没有使用户从导航到主要内容感觉到突兀感。

2. 使用对比色

对比色的使用是抓住用户的眼球的重要技术，因为它能引导用户的视觉中心、影响用户的情绪、传达某种信号，给用户一种直观的印象。颜色能够分成2类：暖色和冷色。

暖色 — 红色、橙色、黄色。这些都代表生机勃勃、充满能量、或者咄咄逼人的。

冷色 — 绿色、蓝色、紫色。这些代表放松、冷静、抑制、或被动。

我们如何利用好它们呢？

记住一条简单的规则：和冷色在一起暖色是起主要作用的。例如制作一个红色的按钮能够吸引注意力，当如果把红色的按钮放在蓝色或绿色的背景上会更加引起注意。

上面的栗子当中黄色在蓝色的背景中是多么显眼，而红色夺去了绿色的中心地位，像要把绿色给吞没了一样。

3. 前景和背景对比

2. 聚焦点—这些元素是为了将其从周围脱颖而出（通过对比），越显眼的元素越起支配作用。剩下的元素次要显眼的被认为是焦点。

记住合理使用对比，如果想要用户被所有的东西吸引，那么什么也吸引到用户的眼球。选取最重要的元素使用对比。

相似

在第一章中我们提到，看起来相似的东西传达出的意义也是相似的。例如，大多数的导航菜单栏其大小及字体都是相似的，看上去是可被点击的。这些UI样式是非常有用的，一个经验丰富的设计师钻研的足够深，通过不同层级之间的相似来展现各个项目之间的关系。

并不是说相似就是相同。有些相似表达出的信息是明显的，而有些是体现在上下文的细微之处。看一下几种运用在web UI设计的相似

1. 3种主要的相似

即使这些物体的颜色都是相同的，观者最容易的就是将形状作为分类依据。尽管相似物体在大小方面不同，但是小的正方形会和大的正方形联系在一起，小的圆形会和大的圆形联系在一起。这样很简单不是吗？

现在你会把大的正方形都联系在一起而把小的正方形都联系在一起。因为大小方面的差异会产生对比，所以我们在大小之间也能建立联系。

当形状相同时，我们会以颜色来分类而不是大小。

Rutledge解释说这些实验证明了相似性的层级从高到低依次为颜色、形状、大小。

这种层级归因于演化心理学。回顾我们周围，因为很多的视觉刺激大小和形状很难引起我们的注意，但是颜色会立即吸引到我们的注意。想象一下一条红色的蛇是不会被我们忽略的。但只是知道这之间的层级关系还是不够的，我们还需要知道如何去运用它们。

2. 将相似性运用到web UI设计中

让我们看一下怎样在链接、内容、界面结构方面使用相似性。

1. 链接

链接需要和其他内容产生一定的对比，但必须和其他链接看起来相似。

让我们看一下传统的链接处理方式。下图中的Reddit中的链接并没有什么创新，通过网站链接的文字链接到其他网站。

如果你需要设置不同的链接种类，那么得精心设计出更多的相似性来表现链接的关系。在Reddit所有蓝色的链接都是链接到其他网站的，而灰色是用来显示用户操作的（像评论、分享等）

用户名的链接和Reddit的子链接是相同的颜色，在字体大小上比内容链接要小。在这里显示出了我们刚才所说的相似性的层级（颜色，大小、形状）：蓝色的字说明它们都是链接。而用户名及子链接的小号字体说明了它们和主要的内容又是不相同的。

让我们来看一下评论和分享的链接。设计师的首要任务就是应该让用户理解这些链接是可以点击的。为了达到这个目标，改变字体颜色是将链接从周围区分开来的最快途径。但为了使这些文字更加突出像一个链接，设计师将字体加粗（这是在形状上面的细微改变）

2. 内容

除了将链接分类，设计师一个最重要的就是任务之一就是将各块内容之间的关系理清。如果这种技巧运用得当，那么各块内容之间的关系会自动分层，不用划线也能将结构理清。

看看下图运用相似性来管理页面关系的ZURB主页。

ZURB对其不同产品使用了相同的视觉规则。使用4块相似颜色的正方形，它们之间的关系不言自明。一旦你看到一个产品的设计规范你就能很快分辨出其他相似的产品也是出自ZURB公司。在这种情况下，视觉的统一性也暗示了分类及上下文的统一。

由于方块的使用与其他内容的对比是那么强烈，各方块之间的内容相似性就更加凸显出来了。所以我们就不需要单单使用一个“产品”来给各个方块做标题了。

3. 框架

总而言之，我们并不需要使用实实在在的方框线条来组织结构或者在内容之间建立联系。我们能单纯使用对比和相似来向用户展示产品的组织结构。

例如我们来浏览一下Craigslist 。不得不承认网站不太好看要是能够修饰一下就会很好。但是它内容的结构还是不错的。

网站中的纵列都符合以下原则：将图片放于左侧，将可点击的标题置顶并设置颜色为蓝色，再加上价格、日期、空格、位置都是同一位置。只要有一项违反了这种相似性就会引起用户的疑虑，让人们觉得怪怪的。

Craigslist 做的很傻，它让用户觉得这就是个测试版，但它仍可使用的原因之一便是它组织结构逻辑性强。

小结

在用对比还是相似的时候不要纠结，两者都用就对了。

对比和相似如果一种用得太多会削弱另外一种的影响力。聪明的设计师通过对两者各自细微控制达到一种平衡。当你在这方面搞不太清，去上一下网，你会发现到处都是对比和相似性的应用。