“扁平化设计”的使用正逐渐成为网页和UI设计近期的大趋势，同时也是时下的一个热门话题，各种探讨和学习研究纷至沓来。鉴于我本身一直钟情于极简主义，所以扁平化设计中的美学对我极有启发，特别是在近期对QuoteRobot（我在2010年与他人共同完成的一个提案书写应用）进行重新设计时。

在本篇文章中，我将与大家探讨什么是扁平化设计，并审视其他设计师对扁平化设计的看法，然后为大家提供一些能用于自己设计工作的小建议。

什么是扁平化设计？

从实践角度说，扁平化设计就是指不采用近几年流行的渐变、像素完美阴影和拟物化方法（在后面的部分会详细介绍）实现“扁平化”的界面。

Layervault的Allen Grinshtein也许算得上是“扁平化设计”一词的始作俑者。他曾在HackerNews上大为流行的一篇文章中说道：

“Web端上广受喜爱的产品都有着相似的设计审美，它们的斜面、插入阴影和投影都大致相同。对于设计师，达到这种让人“垂涎”的界面水平也许值得骄傲。但是对我们，以及作为少数存在的UI设计师来说，这就大错特错了。”

~ Allan Grinshtein (Layervault)

以Layervault为例，其设计的美妙之处在于简约，并且摒弃了我们作为设计师拼命想达到的很多额外的设计细节。我们当下奉为UI设计潮流，并广为使用的各种渐变和风格正在潜移默化的发生着改变，而对这一潮流的学习和研究将充满着趣味。

扁平化设计范例

在Squarespace的新版本中，设计师选用了一套近乎完全扁平化的界面。想来他们一定在线框图和UI上花费了大量的时间，尽管设计过程如此复杂，但导航却十分简单。

我自己虽然从来没用过LayerVault，但根据我的观察，其的扁平化UI很简单易用。

Facebook一直是扁平化设计审美的簇拥者——其仅在近期才刚刚开始使用少量的斜面。

“Facebook是界面向扁平化发展的一个完美范例。其主要的操作按钮虽然还留有少量的斜面，但大量的二级操作都已经完全扁平化。鉴于他们一直没有再修改界面样式，这种方法肯定是成功的。”

~ Ian Storm Taylor (Segment.io)

尽管Facebook近些年因为频繁修改界面而备受批评，但扁平化仍然是互联网上使用最多的网站样式，想来大众的口味是不会错的。

的Rdio界面也采用了扁平化和极简主义风格，并几乎完全抛弃了阴影、渐变甚至彩色。

我有幸曾为Nest的前端代码做过一些小的贡献，并被他们推出的扁平化审美完全吸引住了。这些簇拥扁平化设计的设计师对这一风格还确实热情满满。

“…作为交互设计师——我们应该热衷于自己所使用的方法，并坚决拒绝拟物化和投影一类我们已经深陷其中的玩意。”

~ Daniel Howell (Howells)

抵制拟物化

正如20世纪建筑界的极简主义运动强烈抵制先前几个世纪的建筑装饰主义一样，扁平化设计审美也可能成为对多年来网站和界面过度设计或过渡修饰的抵制运动。其中最常见的一个例子，就是Apple近年来饱受诟病的过度使用拟物化。

Apple因在日历应用中过度使用皮革材质而备受设计师的批评。

维基百科将拟物化定义为：

对原产品设计中因功能性而存在的设计要素进行模仿，并使之成为新设计中装饰性元素的一种产品设计元素。

举例来说，我们经常对用做按钮的元素应用渐变和投影效果，因为真实世界中的按钮就具有这些属性，但在计算机用户界面环境中实际上这些属性并非必要。

“一个天气类应用使用玻璃温度计的图片，这就是拟物化：玻璃在原始环境（真实世界的温度计）下是必要的，但在新的设计中却纯粹是个装饰。”

~ Sacha Greif

在日历应用上使用皮革材质是否真的必要？同样，对按钮应用渐变和3d边缘是否真的必要？难道不这样用户就不知道去点按钮了吗？装饰到什么程度算是必要？没有装饰就不行了吗？

“真实生活中，人在按按钮时会感觉到弹性，但是在手机或者屏幕上却没有这种物理的反馈。虽然在你脑中能够想象这种物理性，但在拟物化的现实中它并不真实存在。所以说，或者至少对我来说，拟物化在这一方面并不能达到期望的高度，这让我很失望。”

~ Allan Yu (svpply / eBay)

因此，扁平化设计完全可以成为对界面设计滥用装饰的抵制，正如极简主义抵制过去华而不实的豪华建筑风格。

功能决定形式，拥抱扁平化

20世纪建筑界的极简主义运动还产生了一些我们至今仍津津乐道的设计名言，例如“功能决定形式”、“少即是多”等等。同样，雕塑家米开朗基罗在谈到自己如何塑造其标志性的大卫像时，也有一句名言让我大爱：

“很简单。只要去掉看起来不像大卫的石头就行了。”
~ Michaelangelo)

具体运用到用户界面设计中，这通常就是说要去掉让界面贴近真实生活的内容。37signals的团队因在其产品（如Basecamp）中运用这一原则而名声大振（而且大获成功）。在扁平化设计界，“少即是多”是绝对的真理。为了表现出扁平化设计的美感，设计师必须注重于对象的功能，而不是外观。这是关键，也是线框图对设计流程如此重要的原因所在。

审美因人而异

在写这篇文章前的调研过程中，我几乎没找到任何科学论断来支持屏幕上的按钮越真实就越显得“可点”这一说法。虽然有很多证据为对比、颜色理论和层级理论提供支持，但我敢肯定的说，一个扁平化的橙色按钮和一个斜面橙色按钮放到恰当的背景下效果完全不会有差别。下面是一些其他设计师的看法：

“这就跟T台的流行趋势一样——流行起来大家就都跟风，但是作为一名设计师，你恰恰需要避免这个。”

~ Cemre Güngör (Branch)

“说拟物化设计差劲，就像说紫色很丑或者椭圆不适合web应用一样，完全没意义的话。”

~ Sacha Greif

“为什么要在没有证据的情况下大肆宣传某个设计美学优于其他美学？难道说为了提高美观就可以降低使用性吗？”

~ Geoff Stearns (formerly YouTube)

好设计就是好设计，跟审美无关

那么，如果斜面、渐变和阴影只是因人而异的东西，到底什么才是一项好的设计呢？不论你是否要用扁平化的审美，用户界面的关键都在于规划。我想扁平化的设计能够让人更加轻松的识别出一项好的设计，因为在设计与功能之间杂七杂八的东西更少。

 下面是一些不错的用户界面设计建议：

一致性

使用通用的UI元素和样式可以帮助用户减少对产品的困惑，从而让应用的使用更加简单。

对比

可点击的元素应该与不可点击的元素形成对比。例如可以使用颜色、大小、位置和样式等方法进行对比。

布局

使用基于960g布局的网格是为你的设计界定某些视觉指导原则的好方法。你的眼睛会自然地跟随内容所建立起的线条和比率移动，因此，了解和使用网格是强化视觉平衡的好方法。

层级

我更倾向于把这一点看作是“用户操作”。关于这一点我有一肚子话可说，总之，把最常见的用户操作（有时也称为用例）放在显眼位置同时把不常见的操作隐藏起来是简化界面，让产品更加易用的绝佳方法。重要的东西要显眼，这是一条通用的规则。

“根据我的经验，扁平化还是“现实化”并不重要。重要的是让用户一眼就能看明白应用的层级，并能够轻松找到下一个可以操作的对象。” 

~ Caroline Keem (writer)

目标受众
不同的目标受众会倾向于不同的审美风格。例如，建筑师、设计师和关注时尚的受众可能会簇拥扁平化设计，而孩子、小丑等其他人可能喜欢比较好玩的材质和颜色。

反馈

在进行点击时，快速、明确的反馈很重要。动画通常是提供视觉反馈的好方法。例如，在点击某个对象后旋转加载图标。有关于反馈我要说的另外一点是，需要在恰当的时机提供吸引人并且内容翔实的帮助和状态信息。

减少阻力

一般来说，减少用户实现某项目标期间的操作步骤可以打造更加流畅的体验。任何打断或额外的步骤都会降低产品的用户转化率。

鼓励探索

在用户结束对界面的最基本使用后，应该在他们进一步探索后给他们展现其预期的效果作为其自主探索的奖励。

线框图

如果你想打造一套有效的扁平化设计，那么我还想再强调一次线框图和规划的重要性。确定最常见的用例，写下来，然后反复修改线框图直到一切完美。我个人喜欢在纸上做，但是现在也有很多不错的线框图工具。

“扁平化设计有着自己的位置，但是也不要忘记其只不过是众多设计美学中的一种。光泽化设计、扁平化设计、哑光设计、木质感设计等等，都只是放置在优秀信息结构和交互设计之上的样式而已。

~ Mike Cuesta (carecloud)