火了一年的扁平化，同学们都了解清楚了吗? 今天分享一篇从扁平化的流行缘由聊到对介面设计的影响的文章，附有一些设计技巧和注意事项，值得一读哟。

　　在过去几年中，我们见证了软件和应用介面设计从 3D 及拟物化向扁平化和极简化的快速转变。尽管这一趋势现在已经无所不在，但我们不妨拿出一点时间来思考今天的结果是如何形成的，以及其对介面设计整体有着何种影响。另外，我还会和大家分享一些有关设计扁平化介面的小技巧和注意事项。

　　Windows Phone 8 及 WordPress APPle iOS 7 介面。

　　什么情况?

　　大家怎么就突然从大爱材质、斜面和投射阴影突然转向热衷扁平化颜色和简约字型了? 这一转变受到了很多因素的推波助澜，下面是其中比较显着的几项。

　　资讯负荷过度

　　在当今这个资讯延绵不绝的文化背景下，我们每天要不停地接触各种资讯流，有的重要，有的无关紧要。我们要不断地评估、过滤并且创造各种内容，这一切显然是很费神的。此外，我们所摄入的内容中有很多都转移到了小萤幕装置中，从而更加剧了这种负荷过度的感觉。所以说人们现在很容易对过量的资讯感到应接不暇，而减少多用户介面 (UI) 中的元素则能够带来少许视觉上的宁静。

　　杂乱不再：Geckoboard 的视觉化工具可方便您一眼轻松解读关键资料。

　　简约是金

　　与上述趋势类似，很多具有颠覆意义的 Web 应用和服务可提供功能高度集中的工具。虽然传统的软件开发商比较喜欢在产品中加入大量功能作为高售价的借口，但是朝着集中化微应用转变的风潮却更倾向于使用简单代替多样化的功能组合。应用越简单，介面也就越简单。

　　漂亮简约：Oak 的 Blue 天气应用。

　　内容为王

　　每当有新装置和技术进入市场之时，其功能和推动互动发展的程度总会让我们为之着迷。继介面所带来的迷乱之后，我们一般都会将注意力重新集中到内容上去。不论是文字、音讯还是视讯，对媒体内容的摄入大概是我们使用装置时的主要活动，而在这种情况下，我们需要保证介面不会影响我们的摄入过程。

　　技术精通

　　随着智慧手机和平板快速普及各种多用户，业界对其控制方式显见性的顾虑日渐消退。尽管一度曾经担心多用户会难以看见不显眼的按钮，但现在我们却更愿意探索较为细微的互动内容。 Windows 8 和 Chrome for Android 甚至还支持在没有视觉提示的情况下通过触控命令点亮萤幕。

　　Fitbit 的控制面板介面在视觉上表现明亮、大胆而且简单好用。

　　技术的影响

　　大部分软件都会受限于所执行的平台。萤幕尺寸和画素密度是硬体方面的限制因素。较小的介面大大限制了设计调色盘的范围，也就意味着介面上的每个元素都要具有自己的表现力。文字规模和字型大小将在很大程度上决定扁平化设计的美感和可用性。

　　如果您的目标装置无法体现出细微到这种程度的差别，那算您运气好。随着移动装置的萤幕尺寸和画素密度不断提高，以后更薄更小的装置将能实现更高的清晰度。当然，对 @font-face 的支持也大大地提升了极简化文字核心设计的吸引力。

　　使用 Wallmob 进行实时销售监控：记录所有带浏览器装置的销售数字。

　　响应式设计

　　随着各种尺寸可联网装置的普及，UI 受大势所趋而务求更加流畅，而与之相应的，就是响应式设计风潮。尽管响应式设计不需要特别的美学，但也可以说扁平化 UI 相比其他风格来说能够更易于辅助响应式设计的美观。简化设计的另一优势在于能够降低页面重量从而减少载入时间。

　　简单但一点到位：OnSite

　　理想实践

　　好了，理论就说到这。下面我们来看看一下实际操作上的注意事项。打造有效的简化设计难度很高。在层层剥离常规的一些 UI 元素 (投射阴影、斜面、材质等等) 的同时，您就会发现所剩下的为数不多的这些元素多么重要。下面的小提示尽管在很大程度上是通用的，但尤其适用于扁平化 UI 。

　　开始之前

　　任何专案都一样，步是先确保自己选定的样式合理。在开始进行扁平化设计之前，要先保证自己的设计符合目标多用户的感觉以及目标平台、装置和应用型别。如果不适合您的专案情况，那紧跟潮流也没有意义。

　　流程

　　不管您要采用哪种样式风格，遵循流程都是非常重要的。下面的几个建议可以帮助您实现简约效果。

　　1 、在设计简化介面时，我一般会从 PC 机出现前的时代寻找灵感，那时的设计师和艺术家往往需要做到 “多快好省” 。接这个机会您可以重新探访一下过去的很多优秀设计，例如 Josef Müller-Brockmann 和 Wim Crouwel 。另外，我还会看向 Ellsworth Kelly 等极简主义画家，Mies van der Rohe 等建筑家和 Dieter Rams 等工业设计师。

　　2 、暂时脱离工作也很有帮助。扁平化和简化设计的核心就在于细微之处。所以，短暂休息后带着新的眼光重新回到工作中有时反而比一味苦心琢磨要更有效用。

　　3 、将不同版本毗邻比较也很有用。在将一条输入线上下 5 个画素来回倒腾了 20 分钟之后，我会保留下两个不同版本进行比较，这样孰优孰劣马上见分晓。

　　4 、由于物体的相对大小具有着非常关键的意义，因此您需要尽早开始在不同种类的装置上检视设计理念，以便确定其是否合适。

　　5 、在工作的同时，经常自问：“我是否真的需要这个?” 人总是很容易对自己钟意的东西念念不舍，但我们还必须频繁地找出要砍掉或者简化的内容。抛弃自己费尽心思做出来的东西不容易，但编辑取舍也是必须的。

　　Global Closet：一款由 The Workshop 为国家地理教育打造的互动游戏。

　　网格

　　网格在介面设计中扮演着非常关键的角色，绝无例外。在您拿着一套受限制的视觉元素，努力想确定其各自顺序并让使用方式更加直观时，网格能够带来很大帮助。

　　网格所确定的，不仅仅是视觉顺序。您还可以用它来界定内容和功能组。有时候要将一组物体分组不一定非要用到线条或者方框。简单的对其和空间调整往往能帮助多用户理解介面的结构。

　　您也可以尝试使用具有特定重要意义的元素打破网格来吸引多用户的注意力。

　　尝试使用一下密度比较高的网格。在大幅简化视觉调色盘时，您可能会发现您的设计能够支持更为复杂的结构，同时看起来也不会显得凌乱。您也可以试试看仅通过位置调整能够传达出哪些额外的信息。

　　Live School Rossul Design 开发的 iPad 应用。

　　色彩

　　颜色毫无疑问是视觉设计中的一个关键组成部分。对于简化介面来说，其所具有的意义更加关键。

　　考虑更为宽泛的调色盘。个人来说，我觉得范围比较窄小的调色盘通常能创造出比较功能化的介面。想创造出让人眼花缭乱的缤纷色彩非常简单。但通过下面这种方法，您可以大大拓展一下选择范围; 而且，考虑到待设计元素的数量很少，扩充套件调色盘还能给您带来很良好的感觉。

　　在设定调色盘时，可以在一个比较宽泛的色值范围内对选定的色调进行测试，并确保其在亮色和暗色下表现都合适。

　　建议分别试验一下同系配色及鲜明对比。早期对调色盘进行试验将保证您在接下来能够掌握微妙和强对比元素所需的全部配色范围。

　　TriplAgent 的视觉设计采用了绝妙的配色方案。

　　文字

　　在扁平化内容驱动网站上，文字是主角。

　　衬线体无疑是个办法，但无衬线字型却能让人感到更为简洁。

　　您可以找一个粗细和样式种类比较多的字型型别。虽然不一定全用的上，但比较宽泛的选择范围有助于更为鲜明地界定层次结构。您也可能会发现某个粗细度在某个特定环境下效果更佳。

　　不要怕使用大小粗细走极端的字型搭配来构建视觉顺序。尝试使用超大超细的标题字型搭配小号中等粗细的正文字型。

　　注意字型是否易于辨认阅读。这一点虽然听起来有点无厘头，但您对自己所选定字型的依仗将是很强烈的，所以一定要保证其在任何尺寸小均易于辨认。

　　Siteleaf 上清爽易读的文字。

　　互动

　　在扁平化 UI 中，要表现出哪些元素可互动是个有学问的活。下面是我常用的一些方法。

　　对比如果布局内容中大部分为白色，那可以给互动元素新增一定其他色彩。如果您的设计以文字为主，可以使用简单的图示表示互动。如果标题比较大而且全部为小写字母，那么连结部分可以做小一点并使用大写字母。您懂的。

　　常规的位置安放方法也能起到作用。比方说您的后退箭头使用细 V 形表示，可以将其放置到左上角，因为多用户一般会到这个位置找后退按钮。

　　随着页面上叠加内容的增加，我们无法将所有可互动元素都做成按钮的样子。介面应尽量直观。但如果互动过程比较复杂或有违常规，则应提供方便的错误恢复方法。

　　下拉选单、模拟视窗、弹出式视窗及其他层叠元素对于扁平化设计来说操作起来比较麻烦。您可以采用鲜明的对比、边框或着色区分不同的互动层级。

　　所呈现的设计要素布局简单，对比度优秀：Taasky.

　　结尾

　　在设计领域没有一成不变的规范。看到各位设计师如此热忱地投入极简化多用户介面的设计令人欢欣鼓舞。但是，探索扁平化设计是否就意味着绝不使用渐变和阴影? 当然不是。事实上，我近期看到的几个很有意思的作品一方面以巧妙的方式呈现出了内容，另一方面也保证了互动的直观易懂，从而实现了扁平化和尺寸直接的平衡。

　　在这个互联互通、资讯丰裕、功能丰富的数字时代，简化设计广泛的复兴让人眼前一亮。这自然不会是无所不能的解决方案 (没有任何一种风格能做到无所不能)，但只要经过深思熟虑和恰当的应用，其能够实现既好用，有舒适的数字体验。