扁平化流行时

最近的几年，软件和应用程序界面设计发生了快速的变化，从3D到拟物化到扁平化到简约化。变化无处不在，让我们来看看到底是怎么变成现在这个样子的，是什么影响了整个界面设计领域。 另外，我还将分享一些在扁平化设计中需要考虑的地方和技巧。

 

 

发生了什么？

究竟是什么，让人们从喜爱带纹理，斜面光影，下拉阴影的效果转变成偏好单一色调，简单的排版样式的呢？很多因素促成了这个变化，其中有些特别突出：

 

信息过量

 

在这个不掉线的时代，我们要面对不间断的信息流，有些是重要和有意义的，有些则一文不值。我们不停地评价，筛选，还有创造内容， 这些都让人精疲力尽。再加上我们大部分的内容阅读的场所已经转移到了小屏幕上，更加让信息不堪重负。这个时候，”化繁为简“在界面设计领域出现, 自成一派。 

简单是金

相似的趋势, 很多颠覆性的网页应用程序和服务正在提供高度专注的工具， 这些工具都只有极其有限的功能。相比传统的软件开发者们更倾向于把他们功能众多的产品贴上高价的标签，这个改变针对“轻应用”，它们钟爱简单的功能。简单的应用程序意味着简单的界面。

 

又一次，内容为王

通常当新的设备和技术进入市场的时候，我们会对它们的功能和先进的交互着迷，然后回归到对内容的关注。媒体消费，无论是文字，音频还是视频， 这些才是在我们的设备上和我们交流最多的, 而界面只是为我们开路而已。

 

技术素养的提高

随着智能手机和平板电脑的快速普及，对直觉操作的担忧也降低了。我们曾经害怕用户会因为不弹窗而错过一个按钮，现在我们非常乐意去拓展更加细微的交互。Win8和 安卓上的Chrome在系统启动后就开始支持触屏命令而不需要任何虚拟的指引标记。

 

技术的影响

运行平台会限制大部分的软件，屏幕尺寸和像素密度是硬件的限制因素。一个简约的界面要求非常有限的设计板面，意味着每个元素都很重要。排版比例和字体的粗细将很大程度决定偏平设计的美感和易用性.

如果你的设备不能处理到这个级别的细微差别，那你就悲剧了。随着移动设备上不断增加的屏幕尺寸和像素密度，更薄更小的类型能有更清晰的展示效果。 当然，类似@font-face(矢量字体，只需服务器端安装，客户端无需安装就能正常显示的字体)这样的支持已经爆炸式地出现在简约排版风格的设计中。

响应式设计

随着联网设备的尺寸越来越多样，界面必须变得越来越流畅优美，所以能根据界面大小改变的响应式设计应运而生。当然，响应式设计并不要求特别的审美，但是偏平化界面比其他风格更容易实现。另一个优势是简约设计减少了页面的大小和加载时间。

 

 

最佳实践

好的，理论到此为止。让我们来看看一些实际的思考。创建一个高效的简约的设计是相当有挑战的。当你剥掉普通界面的条条框框（下拉阴影，斜面光影，纹理等），你会很快意识到留下来的元素的重要性。接下来的技巧大部分情况下是通用的，它们和扁平界面息息相关。

 

开始之前

无论是任何项目，第一步是确保你选择的风格是合理的。在投入扁平设计之前，确保它符合你目标用户群的感受和你的目标平台，设备和程序类别。盲目跟风是不对的。

 

流程

流程至关重要，当你让事情简单的时候记住这几点:

1. 设计简约风格的界面时，做少就是做多。这是一个完美的机会去重新审视一些伟大的设计。

2. 适当从作品中跳出。 扁平和简约设计是关乎细微的差别。休息下再回来会发现比苦心研究更有效。

3. 比较多个版本。 选择把一根线向上还是向下移动5个像素， 尝试了20分钟后，我保存了2个版本后做比较，更好的版本很快就显而易见了。

4.考虑到对象的相对比例的重要性，尽早在各种设备中测试你的设计理念能否工作。

5. 不断问自己：”我真的需要它吗？“， 把一样你花了很多精力完成的东西去掉很难受，但是剪辑更重要。

网格

网格在很多界面设计中很重要。当你尝试让一个视觉元素在项目中直观的引导顺序和用户体验的时候，网格就能帮上忙。

1. 网格不只建立视觉次序， 使用它还能定义内容和功能组。你不必总用一条直线或一个对象组，简单的对齐和留白就能帮助用户理解界面的结构。

2.尝试用特别重要的元素来打破网格还真能吸引用户的眼球，没有虚假的3D效果装饰，比例和摆放位置等基本的排版法则在建立视觉层次时变成关键。

3.试下你不习惯的更密集的网格，当你大量地减少视觉元素后，你可能发现这个设计能支撑更加复杂的结构而不会凌乱。看看你能在独立摆放的位置传递哪些额外的信息。

 

颜色

颜色总是视觉设计的核心。简约设计中，它变得更重要:

1. 考虑一个更宽泛的配色方案。

2.设置配色方案时，在宽泛的频谱下你选择的色调，这样能保证你有亮色和暗色的版本。

3.你可能想尝试不同的基调，那就尽早地实验你的配色方案确保在微妙变化和高对比度的元素中都能有足够好的展示。

 

文字排版

以内容为主的扁平网站，文字排版就是英雄。

1. Serifs类型的字体是不错的选择， San serifs类型的字体会感觉更加清楚。

2.更宽泛的字体集。你确实不需要都用到它们，但是更宽泛的选择能帮助你定义出层次，你可能在特定的环境中能找到更加合适的字体。

3. 别害怕将完全不同大小和粗细的字体放在一起。尝试用超大超细的字体做标题，用中等粗细的小号字体做正文。

4.字体的易读性。

 

交互

在扁平化的界面中，让人意识到一个界面元素可以交互是很棘手的事情，我会通过以下的方法来实现：

1. 对比是关键。如果主要的布局是白色，那你可以给可交互的的元素加上些色彩。如果以文字为主，那你需要用简单插图。如果是大号小写标题，你可以用小号小写作链接。

2. 传统的布置也有帮助。如果你设计一个回退的按钮，用户会希望在左上角找到这个回退按钮。

3. 如果你想放置更多的功能在页面上，不要让所有的交互元素看上去像按钮。界面应该是尽可能直观的。但是一旦交互出奇的复杂或出乎意料，你需要让它能从错误中恢复。

4.下拉框，模态窗口，侧滑栏和其他的布局元素会在扁平设计中出现问题。让鲜明的对比，边框或者着色从视觉上去分离交互的层级。

 

总结

我不相信设计中硬性教条。看到设计师设计出相当干净和简洁的用户界面是极好的。难道开拓扁平设计就意味着绝对地去掉渐变和阴影？ 当然不是。事实上，一些最近的好东西都是让交互更直观。

生活在这个高度联系，资讯丰富，各种功能丰富的数字时代，我们正在见证简约设计的复苏。它不是所有事情的最佳方案，但是合理的考虑周全地利用它，能带来高度易用和愉悦的数字生活体验。

 

 

原文地址： http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/