作者：Kate Meyer，译者李福东 原文地址

【前言】扁平化设计是一种自2012年开始流行开来的网页设计风格、至今仍广泛使用。但滥用扁平化设计可能导致严重的可用性问题，其中最大的问题是这种设计缺少可点击的视觉标识。扁平2.0在这方面则可以有更好的变现。

扁平化设计是一种流行的设计风格，采用这种设计风格的网页中没有光泽或者三维视觉效果的图形元素。许多设计师认为，这是极简设计的分支。

3D效果，纹理与写实主义

扁平化设计常被视为是3D效果、纹理与写实主义设计风格的对立面。一个真正的扁平UI完全不会出现任何的3D效果、纹理或写实主义风格的元素。

3D效果

3D效果为界面带来深度错觉，帮助用户形成视觉层次并知晓哪些元素是可交互的。

向上凸起、给人可按下感觉的元素，通常用来表示网页按钮。

向下凹陷、感觉可以被填充的元素，通常用来表示输入区域，比如搜索栏。

早期的界面中，伪3D效果（阴影、梯度和高光）来使可操作元素一目了然。然而，这种伪3D效果冲击性太强、过于厚重而容易分散用户注意力。

这是一个典型的windows95对话框，它使用了非常明显的阴影和高光来营造3D效果。请注意其中凸起的按钮和凹陷的输入框。顶部三个tab中，选中状态也非常清晰。然而，厚重的阴影也影响了界面的美观性。

纹理

纹理是指界面设计时使用的那些用于模仿真实世界的装饰性设计。纹理设计想要做到的是，让用户可以借助已有经验去迅速理解所接触到的全新产品界面。

在亚马逊的Kindle Fire平板中，书架的设计就采用了纹理设计，有着完全的3D“书架”和木质纹理。这样设计的目的是帮助用户将以前关于书架的知识迁移到电子平板上。“书架”和木质纹理与系统功能无关、其意义在于增强书架功能。后来，亚马逊从其UI中移除了这种设计。

写实主义

写实主义是指模仿真实物件或者其审美性的纹理的设计风格。

纹理设计常常与写实主义相混淆。我们常在网页设计中见到这两者的混合使用。两者的主要区别是：写实主义的目的纯粹是满足审美需要，而纹理设计则希望借助隐喻来帮助用户理解界面。

与前面提到的Kindle Fire平板电脑相似，豆芽杂货连锁店（Sprouts grocery chain）的网站采用三维木质纹理。这里的写实主义设计的目的仅仅是为了审美情趣，并没有用于帮助用户了解如何使用界面的隐喻、也并不是模拟真实世界。

扁平化设计的兴起

2011年，微软Metro design设计风格和Windows 8的发布极大地推动了扁平化设计的流行。微软文档将新设计风格描述为“真实的数字化”（authentically digital）——这一描述巧妙地提升了扁平化设计对设计师的吸引力。不同于纹理设计，扁平化设计被看着是对数据化媒介的探索，而不是真实物理世界的重复。

苹果官网页面的扁平化成为这一趋势风向标。苹果一直坚持的是纹理设计和写实主义设计，直到2013年，苹果官网才转变成扁平风格。

2007年的苹果官网（来源: WayBackMachine）。导航设计采用的是高光、3D样式的tab。

2012年的苹果官网（来源: WayBack Machine）。标签隐喻消失了，但导航栏依然采用了高光和圆形（更像是写实主义设计），新的搜索栏采用了阴影使其看起来是空白(这个设计，在视觉效果上比Windows17年前的设计优雅很多，但设计理念是一致的)。右下角可见图标很有光泽、很可能会干扰用户对其的理解。这些按钮更像是在发光而不只是凸出。

2015年的苹果官网。整个导航栏，包括LOGO、都采用了扁平化设计-没有阴影、纹理或高光。用户知道导航选项可点击的唯一方式是按照惯例：在导航栏顶部往往有一个强烈的彩色条纹（广告除外，但是这个很微弱、且可能受到banner blindness现象影响）。

扁平化设计的可用性问题

自2011年扁平化设计提出开始，Nielsen Norman Group便公开批评其可用性问题（见链接vocal critic of its inherent usability issues ）。其最主要的观点是扁平化设计为了追求美学的时尚而牺牲了用户的需求。

多年来，用户已经习惯了传统的点击标识，比如蓝色字体、下划线链接或带3D效果的按钮。随着设计趋势的改变、用户接触到新的设计原型，用户识别可链接可点击元素的能力也在进化，但这并不意味着我们可以完全抛弃这些可点击线索。

当我们问一个22岁的加拿大人，她是如何知道网站的可点击元素的时，她给出了如下回答:

“最初可点击样式，无论文字或其他元素，蓝色、有下划线就表示可点击。但是……有下划线时会特别有帮助。或者是一个按钮……不必说点这里……只需要说立即购买、购买或添加到购物车即可。”

这句话形象地说明了人们是如何利用线索来判断可点击性的：

传统的一直使用的标识符号（比如，蓝色下划线的文本、凸起的按钮）

令人联想到传统标识符号的元素（比如：任何颜色下划线的文本，框中的文本）

上下文暗示（比如：可操作文本、页面顶部的文字等）

Trader Joe的主页有各种可点击符号:（1）蓝色、带有下划线的传统性的符号；（2）搜索栏处扁平红色按钮配合文字使人联想到按钮。（3）主导航点击黑色链接禅城的布局和文本变化，注意，尽管主体采用扁平化设计，但每个页面仍然有纹理设计——导航栏下方的木质“货架”。

如果您的网站想要变得更加扁平，为避免影响用户快速找到可点击元素，请遵照我们的点击元素设计指南（译者注：原文另附，要点翻译如下）：

文本链接

1、最安全的颜色为蓝色，其他颜色也可选择；

2、下划线并不是必须的，比如导航菜单就不需要。

3、请测试你的超链接颜色，确保色盲色弱者能正常使用；

4、超链接（或其他科点击元素）以外的任何地方，请勿使用你定义的超链接颜色，也不要

不要使用蓝色字体或下划线；

5、请保持全站超链接样式的一致性。

按钮

1、请确保你的按钮看起来像真正的按钮。必须有正确的视觉线索来帮助用户快速识别按钮。如果你使用3D效果，那么按钮建议设置为矩形；如果使用扁平化设计，也要确保它看起来可点击。

2、不可点击的元素，请避免其看起来像按钮。比如为标题文字添加了黑色的背景，就会给人以按钮的感觉。

3、请留意页面的内容层次，避免为用户带来五花八门的按钮。这样用户无法区分。

图形图表

1、让小图片在点击时有视觉反馈，比如图片变大。

2、要充分利用图片、ICON、文本等元素，来扩大可点击区域、提高用户的点击意愿。

3、请不要为图片设置过多的行动召唤按钮（CTA），除非图片里清晰地呈现了超链接列表（或按钮）。

符号与ICON

1、如果要使用icon图片链接，请确保其清晰可识别。

2、请尽量为icon添加文本等可点击的视觉线索，除非你所使用的icon识别性很高或已成为行业惯例。

注：此处只介绍要点。详细解释和案例，请访问文末链接：可点击性设计指南。

扁平2.0

最近，设计师们开始意识到扁平化设计中的可用性问题。因此一个更为成熟和平衡的扁平化设计开始成型。设计师们发现可以在探索“真实的数字化”的独特机会的同时，不会损害可用性。

这样的扁平化设计也被称为“半扁平”（semi flat），“准扁平”（almost

flat）或“扁平2.0”。这种风格的设计几乎扁平，但使用了微妙的阴影、高光和布局设计来创建用户界面的深度。

带有长投影的扁平滑设计（如上图）在2013年变得流行。长投影就是扁平2.0误入歧途的典型——3D效果仅仅增加了美观、但并没有为用户带来有意义的信息。值得庆幸的是，这种设计风格现在的人气有所下降，但长投影的ICON仍然在某些扁平化界面中存在。

谷歌的材料设计语言是扁平2.0的一个例子：它借助遵循物理学原理的隐喻和原则，去帮助用户理解界面及其视觉层次。

Evernote Android版是一个扁平2.0的优秀案例。尽管大部分死扁平UI，这个APP在导航栏和FAB按钮（the floating plus button“+”）中添加了微妙的阴影。在内容展示方面，它采用了卡片隐喻方式提供了扁平而有层次的三维空间。

正如所有的设计趋势一样，我们建议要平衡和适度。不要为了时尚而牺牲可用性。别忘了，你不是真实用户（除非你的目标用户就是设计师）。设计者很清楚每一处设计的意图，但用户却不可能这样。

早期伪3D GUI和史蒂夫·乔布斯式的纹理设计往往产生沉重的的界面。去除这些沉重的元素有利于提升可用性。但磨平视觉差异、完全扁平化也会走向另一个坏的极端。扁平2.0则为我们设计出既易于使用又简洁的界面，提供了可能。