为你的眼睛做UI设计

从对比到相似的视觉关系

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

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

Photo credit:“Ying Yang Sign”. Wikimedia.Creative Commons.

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

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

---

对比

我们在Web UI Best Practices 中说过如果对比使用得当的话能够逐渐戏剧性凸显功能的重要差异。它激起了我们的原始反射：我们对差异的的敏感帮助我们在生物的演化过程中生存了下来。

对比被Brandon Jones 更加细化了，他研究了界面上的对比如何影响人的第一感觉。当大多数人看到这幅图时，他们并不只是看到2个圆，而是一个黑色的圆和一个红色的圆。这种运用在界面上对比是基于人类最原始的反应。

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

1. 明暗对比

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

Photo credits:www.dribbble.com

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

Usaura 的创始人Dmitry Fadeyev指出明暗对比在web UI设计时主要有两种用法：

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

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

即使你的网站倾向于扁平设计，至少这种阴影和明暗关系仍然会产生3D效果。德国设计机构Dunckelfeld在合理运用颜色及对比方面是优秀的教材，我们来看一下他们是怎么设计按钮的。在主菜单上，当你把鼠标悬停在按钮上时，按钮的明暗对比会反转，给用户立即提供反馈增加了一层用户与界面的互动。

Photo credits:www.dunckelfeld.de

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

Photo credits:www.dunckelfeld.de

2. 使用对比色

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

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

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

我们如何利用好它们呢？

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

Photo credit:www.uxpin.com

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

Photo credits:TV Safety.org

利用冷暖色之间的对比能将眼球吸引至或脱离界面的中心。在TV Safety.org 的例子中红色的导航按钮在绿色的映衬下是多么的显眼。在Web UI Patterns 2014中我们讨论了更多这方面的内容。

3. 前景和背景对比

格式塔原则在各个方面阐述了相似和对比。对比决定了各个项目与背景之间的关系和视觉重心。Vanseo Design 的Steven Bradley指出太多的对比也会颠覆设计的完整性，我们来看两个重要的应用：

1. 前景和背景 — 我们看到一项设计时的第一眼时会自然而然得将图形与背景区分开来。这之间重要的关系为设计提供了上下文联系。因此，只有通过对比用户才能将两者区分开。

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

这幅图中，绿色的圆都是相似的，橙色的条纹也是相似的但是它们相互之间形成了直接的对比。

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

学习更多关于使用对比来表现视觉层级请查看great piece by Steven Bradley.

---

相似

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

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

1. 3种主要的相似

Andy Rutledge 根据格式塔原则分析了相似性在web设计中的应用，及主要的相似性种类及其表现出的极大的元素之间的联系。我们觉得他的研究工作相对来说在实用性和细节方面还是不错的。

看一下第一幅图，找出什么东西之间关系最大。

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

但要是所有的东西形状和颜色都相同呢？

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

最后，我们来看一下Rutledge的第三幅图--相同的形状不同的大小和颜色。

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

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

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

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

每个设计师在设计时必须展现界面元素的视觉暗示。用户会在10秒钟之内决定是否留在现在的页面上，所以设计师必须将界面结构快速得展现给用户。

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

1. 链接

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

一般来说网站会将链接设置成蓝色，并且带有下划线。我们在Web Ui Patterns 2014中说到这种蓝色带有下划线的文字作为链接符合用户的预期，用户基本不需要再次思考学习。

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

Photo credit:www.reddit.com

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

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

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

2. 内容

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

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

Photo credit:ZURB.com

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

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

我们来看一下Pattern Tap。网站使用相似的卡片来代表各个图案是可以被链接的。当鼠标悬停在卡片上时卡片所表现出来的反馈都是一样的，这种相同的用户体验反过来增强了相似性。

Photo credit:www.Patterntap.com

我们在Web Ui Pattern 2014中提到正是这种让用户能够在视觉上快速理解的能力是卡片在重内容网站中成为最有效的方法的原因。事实上，这种视觉表意规则发展得如此之快以至于它将成为未来UI发展得新趋势。

3. 框架

根据Rutledge所述，相似性也能组织页面的框架结构。

这个例子中所有方块没有差别，所有的元素看起来都是一样的，所以它们看起来都是联系在一起的。

我们来看一下能够用颜色来玩出什么花样。在这幅图中通过其他方面都相同的颜色块构成了形状（一个纵列）。

在第三幅图中我们把元素分为了两类。蓝色的方块看起来是有联系的，绿色的也是如此。每一个元素在虽然在大小方面是相同的但是我们的眼睛把它们分成了两类。

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

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

Photo credit:www.craigslist.org

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

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

想要学习如何将对比和相似运用得炉火纯青我们强烈推荐我们的设计师Steven Bradley 的文章。以下是将对比和相似和谐共处的例子—25条关于web设计制造重点的例子。

小结

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

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