!!!!1扁平化设计美学

扁平化设计美学

神飞 发表于 17. Feb, 2013, 分类: Tips , 7 条评论 ?

标签：扁平化 & 拟物化 & 设计

译自：The Flat Design Aesthetic: A Discussion

原文：扁平化设计美学

请尊重版权，转载请注明来源，谢谢??

最近一个在网页和UI设计上逐渐增长的趋势是“扁平化设计”的使用，而且现在已经是一个非常热门的话题了。满大街的现场讨论会以及大量的教程。我常常被吸引到极简主义设计中，所以扁平化设计是一种很自然的给我启发的设计美学，特别是在最近的一个项目的重新设计中。

在本文中，我将讨论下什么是扁平化设计、回顾其它设计方式，并提供如何在你自己的设计中实现的一些技巧。

什么是扁平化设计？

实际上，扁平化设计意味着在设计中不使用常用的渐变、像素完美的阴影，然后通常是近年来蔓延的用来实现看起来“平面”的用户界面。

Layervault的Allen Grinshtein或许最初定义了“扁平化设计”。在一篇发表于HackerNews的文章中，他说：

“网页中广受欢迎的产品通常都有一些类似的设计美学，比如一些立体、内阴影、外阴影等。对设计师来说，他们会以实现这种“媚俗”的界面而感到自豪。但对我们，对其它的少数设计师来说，这样做很2。。。“

~ Allan Grinshtein (Layervault)

如果你去看Layervault，它的美在于其简洁，甚至没有任何我们作为设计师常常会去挖空心思实现的额外的细节设计。了解和琢磨作为当前趋势来使用的渐变和其它样式是件蛮有趣的事情，这些慢慢在变化~~

扁平化设计实例

在新版Squarespace网站中，他们选择了一个几乎完全扁平的界面, 你可以估算出它们花在原型和设计UI上的时间，这个界面相当复杂，但是却非常易用。

尽管我只看过而从来没有自己用过LayerVault，新的扁平化UI看起来真的很简洁易用。

Facebook几乎一直拥抱扁平化设计美学——只是最近才加入一些轻微的立体化。

“Facebook是一个扁平化设计趋势的完美例子。它们的主要操作按钮依然使用轻微的立体化，但大量的次要按钮采用了完全的扁平化设计。而且依据事实判断，它们从未改变过界面风格，它一直是这样的。“

~ Ian Storm Taylor (Segment.io)

尽管它们在过去这些年一直被批判要大改它们的界面，它依然是网上被使用最多的网站之一，嗯，用户是不会错的。。。

最新的Rdio的界面亦是如此扁平和极简，它几乎完全没有阴影、渐变、甚至是颜色。。。

在Nest上线之前，我很高兴为它贡献了一点儿前端代码，我被它所展现出的扁平化美学给迷倒了。

拥抱扁平化设计的设计师们真的是发自内心的迷恋它了。

“…作为交互设计师——我们应该在我们的工作中拥抱这种方法，并坚定的避开我们身处的拟物化、阴影的泥淖。”

~ Daniel Howell (Howells)

对拟物化设计的挑战

就像上个世纪在建筑领域极简主义运动对过度装修的冲击，扁平化设计可能是一个对已经被使用多年的过度设计、或者过于花哨的网站和界面的一个颠覆。一个典型的例子就是最近人们批判Apple的拟物化设计的过度使用。

　　Apple收到了大量的来自于设计师对其在日历app中大量使用无用的皮革材质的批判。

Wikipedia 这样定义拟物化:

一个产品的设计元素模仿其在原始产品设计中是必要功能，但是在新的设计中变为装饰的设计元素

比如，我们通常给元素用上渐变和阴影以至于看起来像按钮，因为现实世界中按钮大都带有特性，尽管它们在电脑用户界面的设置中是不必要的。

“所以一个使用玻璃温度计图片的天气app就是拟物化：玻璃在原来（现实中的温度计）是必要的，而在新设计中变为完全的装饰。“

~ Sacha Greif

在日历APP中使用皮革元素是否真的有必要呢？同样的，用渐变和立体边角来设计按钮是否也真的有必要？或者用户知道去点击它们么？有多少装饰是必须的？有么？

“在现实世界中，当一个按钮按下，你能感受到它的弹性和弹力，但是在手机或者屏幕上，有物理上反馈的先天不足。你的意识知道物理性的存在而拟物化没有。所以至少对我来说，它事实上没有达到预期和让我失望的时刻。”

~ Allan Yu (svpply / eBay)

所以，扁平化设计可能是在界面设计中装饰被过度使用的一种颠覆，就和过去极简主义是华而不实的装饰风格的一种颠覆一样。

形式遵循功能，拥抱扁平化

20世纪建筑领域的极简主义运动中，一些伟大的设计引用我们今天依然在谈论的“形式跟随功能(form follow function)”和“少即是多(less is more)”的理念。简单的来说，我喜欢这句来自雕刻家Michaelangelo(米开朗其罗)在被问道它是如何创造标志性的大卫雕像的时候说到的话。

“很简单，你就削掉那些看起来不像大卫的石头就好了。“

~ Michaelangelo)

在用户界面设计，常常去掉真正将界面带入生活的那些东西。37signals的团队因为应用这个理念到它们的产品中——比如BaseCamp——而臭名昭著（但也很成功）。在扁平化设计的世界中，少，真的是多。

为了实现扁平化设计美学，我们设计师必须专注于产品是干嘛的，而不是它们要看起来像什么。这是关键，也是线框对设计流程至关重要的原因。

美学是看法的问题

在我关于这篇文章的研究中，几乎没发现任何科学研究关于屏幕上的按钮看起来更像按钮实际上会更可点击。倒是有大量的证据支持对比度、色彩、层级，但是我愿意打赌在一个适当的上下文中，一个橙色的扁平化按钮会像一个立体的橙色按钮一样有效。这里有一些来自于其它设计师的观点。

“这和跑道时尚(runway fashion)并无二异——每个人都开始做同样的事情，当它到处都是时，要突出出来成为设计师，你就必须反其道而行。“

~ Cemre Güng?r (Branch)

“说“拟物化是坏设计”就像说“紫色是一个肮脏的颜色”或者“在Web app中没有椭圆的地儿”。它没有任何意义。”

~ Sacha Greif

“为什么推广某种设计理念在别的理念之上而不去证明你推崇的真的更好呢？难道更好看比可能降低可用性更有价值？“

~ Geoff Stearns (formerly YouTube)

好设计就是好设计，无关美学思想

那么，如果立体、渐变、阴影只是看法的问题，那么如何实现一个好的设计？无论你是否要使用扁平化设计，用户界面和规划相关。我相信扁平化设计使得识别一个伟大的设计更加简单，因为在设计和它如何工作之间少了很多干扰。

这里是一些关于伟大的界面设计的一些技巧：

一致性

通过使用通用的UI元素和样式，你可以帮助用户了解什么是可以期待的，然后使得更容易使用你的应用。

对比

可点击元素和非可点击元素之间要有适当的对比。这可以通过颜色、大小、位置以及样式来实现。

布局

使用一个网格布局，比如960gs，是为你的设计建立一些可视的指南的好的方法。视线会自然的准从由内容创建的线条和比例，所以理解和使用一个网格是一个强化视觉平衡的好办法。

层级

我更倾向于将此理解为“用户行为”，我会写一篇关于这个话题的文章，但是实现最通用的用户行为(有时被称为用例)容易发现，而去掉不太通用的行为是简化用户界面从而使它更好用的好方法。作为通用准则，最重要的要比不太重要的更醒目。

我的经验是，扁平的或者逼真的没什么关系，重要的是，层级在快速浏览以及用户方便的找到下一个操作中很重要。

　　作者: 神飞

爱好前端设计与开发，崇尚一目了然的设计。现居深圳，就职于腾讯ISUX团队 Follow me on twitter@qianduan。