扁平化设计开始流行啦~

翻译自smashing magazine这里。翻译的不好请见谅。

在最近几年里，我们发现软件和应用的界面快速的从立体，纹理化变为扁平，简洁化。这种变化趋势是普遍存在的，我们来花些时间来看看这些变化是如何发生的，以及这些变化产生的影响。除此之外，我会分享一些关于扁平化设计的贴士以及注意事项。

手机界面上的扁平设计

windows phones 8 和ios 7 的界面设计

扁平化设计是如何发生的？##

纹理感，倾斜的，阴影感的设计变成了大块的色块，简洁的排版的设计。这是如何发生的？原因有很多，有几个是最重要的。

信息过载###

在我们的生活中，我们在不断的处理信息，重要的以及大部分是不重要的。我们处理信息，过滤信息也创造信息，这些使得我们疲惫不堪。更糟糕的是，我们越来越多的信息获取来自小屏幕，这加重了信息过载的感觉。要改变这种状况其实很简单，就是减少用户界面的杂乱。

从杂乱中解脱：Geckoboard旨在生成重要数据的概要

简洁是金###

许多应用高度关注于某个领域只提供极度有限的功能也渐渐成为一种趋势。而传统的应用提供一大堆的功能来匹配它的高价。这次转变关注于微型应用：有着极简的功能。简单应用的意味着简单的界面。

美丽与极简：oak做的天气预报应用blue

内容是金###

当新的设备和技术进入市场时，我们往往会为它们的功能和他们高级的交互性而着迷。它们往往疯狂的致力于内容方面。多媒体消费，不管是文本，音频还是视频，我们关注的是内容。

技术素养###

手机以及平板迅速的减少详细展示所有的用户资料以及明显的控制。然后我们过去仍然担心一个遗漏的按钮如果它不在屏幕上。我们现在更愿意去探索细致的交互。Windows 8 和安卓的Chrome浏览器甚至支持从屏幕外滑入的触摸指令，没有任何的视觉指示。

Fitbit的仪表界面是颜色明亮的容易操作的视觉指示

技术影响###

大部分软件会被它所在的运行平台所限制。屏幕的大小和分辨率是硬件的限制。很小的界面限制每个元素的设计。排版的伸缩以及字号决定了扁平设计的美学性以及可用性。

随着手机屏幕的分辨率在不断的提高，细小的部分能被更清晰的展示，但是如果你的目标设备不能显示这种程度的细微，那就很糟糕了。当然啦，支持@font-face可以提高最小化的基于排版的设计。

wallmob监视各种设备浏览器的缩放

响应式设计###

随着越来越多的不同尺寸的设备，用户界面设计不得不变得更加流动化以及响应式。响应式设计并不要求特别的美学，很明显扁平化的设计比其他设计更容易实现响应式。最小化设计的另一个优势是可以减少页面加载时间。

轻量化网站:OnSite(更大的页面效果)

最佳实践##

好了，理论也足够了。我们来看看一些实践的注意事项。创建有效的极简的设计是非常有挑战的。随着你避开通常的用户界面设计的陷阱（阴影，倾斜，材质等），你会很快的意识到剩下的元素是多么重要。以下的与扁平设计相关贴士是普遍适用的。

在你开始之前###

对于任意一个项目，第一步是确认你选择的风格是有意义的。在投身于扁平设计之前，确认它与你的目标用户的情感以及平台，设备和应用类型一致。如果并不适合你的项目，追随潮流是没有意义的。

处理###

你处理的方式是非常重要的，无论你采用哪种风格。这有些需要旨在最简化记住的。

• 当设计一个极简话的界面，我总是从前pc时代寻找灵感，那个时候设计师和艺术家做了很多关于极简话的事。这是一个绝佳的时机去重新研究一些绝佳的设计，如Josef Müller-Brockmann和Wim Crouwel。我同样观察极简化的画家如 Ellsworth Kelly，建筑家如Mies van der Rohe和工业设计家如Dieter Rams。
• 走出过去的工作是有帮助的。扁平和最小化设计都是关于细节。因此，休息一下，待会再回来。借助新鲜的视角比潜心研究更有效。
• 比较版本之间的区别同样很有帮助。在移动了5像素的一行内容在在上面和在下面这两个版本，我保存这两个版本。20分钟之后，更好的选择显现了。
• 当你工作时，不停的问自己，“这个真的需要吗？”增加一项是如此的简单，但你必须常常寻找那些可以被删去或简化的元素。扔掉一些你花了好多时间的工作是艰难的，但编辑是关键的。

Global Closet):The Workshop制作的为自然地理教育的交互性游戏

网格###

网格在界面设计上扮演了一个重要的角色，没有例外。当你在项目中尝试建立被视觉元素所限制的规则以及可用性直觉时，网格很有用。

• 网格不仅仅是建立视觉的规则。用它来定义内容以及功能性分组。我们并不是总要一条线或盒子来把东西一些组织在一起。简单的对齐以及空白能帮助用户知道界面的结构。
• 尝试用部分元素来打破网格能真正的引起用户的注意。没有了伪3D的诡计，简单的布局准则例如缩放和定位成为了最好的展示视觉元素层次的方式。
• 尝试用密集的网格而不是那些你以前习惯的。当你减少视觉的颜色，你会发现你的设计能支持更复杂结构而不显得杂乱。看看你的布局还能传达一些什么其他的信息。

Live School:Rossul 设计的iPad应用

颜色###

明显的，颜色总是视觉设计的关键。在最小化见面中，颜色变得更加重要。

• 考虑一个更广的调色板。如果你喜欢我，你会觉窄的调色板会导致更功能化的界面。现在你有机会去延伸，处理更少的元素，你能感觉良好去拓展调色板。
• 当你开始设置调色板，测试你从一堆颜色中选的色相能产生明亮的和昏暗的版本。
• 你可能想测试同系配色朴实的类型。早早的测试你的调色板有足够的范围足够对于那些细致和高对比度的元素。

TriplAgent使用晕眩的颜色调色板的的视觉设计

排版###

对于扁平的内容驱动的网站，排版是英雄。

• serifs当然是个选择，但san serifs 觉得更清爽。
• 查找各种各样的字体和样式。你没有必要都使用它们，但一个广阔的选择可以帮助你定义你的层级更锐利，并且你可能会找到在确定的环境用确定的字体粗细。
• 不要害怕用两种极端不同的字号和粗细去创造视觉秩序。尝试对头条用超大，超细的字体，对主体内容用小号的普通粗细的字体。
• 小心字体的易辨认性。这听起来很蠢，你的字体需要满足这样的条件，确认它们在各种缩放下都很容易辨识。

Siteleaf上简洁可辨识的排版

交互###

在扁平的用户界面，可交互性意味着很困难。这里有一些我使用的方法。

• 对比是关键。如果主要的布局是白色的，你可以给可交互的元素一些颜色。如果设计主要是文字驱动的，你可以用简单的图标。如果头条很大并且是小写的，你可以让链接很小和大写的。你懂的。
• 符合常理的布置也很有用。如果你用slim chevron做为后退按钮，你把它放在左上角，用户也期待发现后退按钮在那。
• 当你在页面上放置很多特性，让每个可交互的元素是一个按钮是没有意义的。那些外观应该是直觉的那个样子。但是，在那种特别复杂或出乎意料的交互的情况下，要简单的从误操作中恢复过来。
• 下拉框，模块框，弹出框等其他布局元素在实现扁平设计是有困难的。层次对比，边框以及着色在视觉上分割了交互性。

设计在简单布局和最佳对比下的元素：Taasky

总结##

我不认为设计规则是固定不变的。见到设计者如此花大工夫在创建极度简单，简洁的用户界面是令人敬畏的。探索扁平的设计意味着完全不用渐变和阴影吗？当然不是。实际上，我最近看了一些在扁平和层次在一些有趣的作品中。

在这个信息丰富，塞满了各种东西的数字社会里。极简的设计对见证者来说是振奋人心的。当然了，这并不是所有事情的解决方案，但当被合适的深思熟虑的考虑后使用，它能造就高可用性和愉悦的数字体验。