设计趋势思考：扁平和简约来袭

[核心提示] 在过去几年里，软件和 APP 的界面设计风格发生了迅速变化，由 3D、拟物发展到扁平、简约。尽管这一趋势广泛存在，咱们仍是思考下是如何发展至此的，以及它对整个界面设计领域有何影响。

编者注：本文转自腾讯 CDC，做者 Adrian Taylor 是一位交互创意总监而且是 Pushstart Creative 的创办人, 专一于多种研究，如物理聚合、人机交互技术和品牌体验等。尽管他目前工做的重点是产品研发、战略发展、UX 等，可是对 pixels 却一往情深。了解更多能够去 designtaylor.com 或关注他的 Twitter（译者 zera）。

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

---

在过去几年里，软件和 APP 的界面设计风格发生了迅速变化，由 3D、拟物发展到扁平、简约。尽管这一趋势广泛存在，咱们仍是思考下是如何发展至此的，以及它对整个界面设计领域有何影响。另外，我会分享扁平界面设计的一些技巧和注意问题。

Windows Phone 8 和 Apple iOS 7 的用户界面

发生了什么？

那么，为何群体意识从喜好带纹理、有透视和阴影的设计转变喜好扁平色彩和极简图形的设计呢？固然致使这一转变有不少因素，可是有一些因素更为突出。

信息过载

随着世界联系愈来愈紧密，咱们不断地接受大量信息，一些信息是重要的、相关的，但大部分不是。咱们不断地评估其价值，过滤无用信息，或建立新的内容，全部这些都使咱们精疲力竭。还有，大部份内容消费已转移到小屏幕设备，更是加重了超负荷现象。这样咱们就很容易就淹没在信息中，砍掉用户界面（UI）的繁杂元素才是视觉设计的王道。

摆脱混乱: Geckoboard 的设计使关键数据被一目了然呈现，并易于理解

简约就是金科玉律

一样有个趋势就是，颠覆性的网页应用和服务正提供高度专用化的工具，只设计少数功能。虽然传统软件开发员倾向于为产品加载过多功能，以期得到高价定位；但目前变化趋势专一于微应用，偏心功能简洁。简单的应用意味着有简单的界面。

美观且精致：由 Oak.设计的 Blue 天气应用程序

又一次，之内容核心

新设备和新技术涌入市场时，经常会出现这样的状况，咱们热衷于思考于它们能作什么，咱们又怎样才能提升交互性。但关注界面设计这一狂热以后又回归专一于内容。媒体资源的消费，不论文字、音乐仍是视频、音视频，等咱们设备上最经常使用的活动，在你乐享其中时，确定不但愿被无关的界面元素打扰。

技术水平

随着智能手机和平板电脑已渗透到千家万户，显性操做正在逐渐减小。过去，若是弹窗没有从屏幕跳出来，咱们曾担忧用户会错过操做，而如今，咱们更愿意让用户去探索这种细微的交互体验。鉴于此，不少互联网产品已经支持没有任何视觉引导的触碰指令。

Fitbit 的仪表盘的视觉设计清爽、胆大, 和亲和力

技术的影响

大部分软件受限于运行平台。屏幕尺寸和像素密度也受限于硬件设备条件。一个简约的界面须要十分有限的设计元素，这意味着每个元素都要有所发挥。排版布局和字体粗细在很大程度上决定了扁平设计的美观和易用性。

若是你的目标设备不能处理好这方面的细微差异，你就不太幸运了。随着屏幕尺寸和像素密度不断增长，更细、更小的样式也能呈现最佳的清晰度。固然，对 @font-face 属性的支持，提升了对文字间距的集中处理，也增长了极简排版的吸引力。

Wallmob 的市场数据监控应用：从任何一个有一个浏览器的设备上均可以检测到数据

响应式设计

随着各类尺寸联网设备的普及，交互界面变得更须要强调适配性，响应式设计也就应运而生。虽然响应式设计并不要求特定风格，但扁平的交互界面显然比其它样式要更容易处理。简约设计的另外一种优点就是，能见下降页面重量和缩短加载时间。

无重量的响应设计：OnSite

敢于实践

好了，不唠叨理论了。让咱们看看实践上的操做吧。设计一个有效的简约风格很具备挑战的。当你抛弃界面上那些花哨的装饰元素（下拉阴影，透视关系，纹理材质等），立马就会意识到剩余的元素关键且重要。如下几个技巧在设计中广泛很实用，特别是针对扁平 UI 设计：

开始设计以前

任何项目开始第一步，就是确保你选对风格。深刻设计以前，确保风格符合目标用户的感知需求，适应目标平台、承载设备和应用类型。若是该方案风格与项目不匹配，那么接下来的导向则毫无心义。

流程

设计流程很是重要，不管选择何种样式！简约设计时记住如下几点：

1. 设计 minimal 界面时，我会从 pre-pc 时代寻求灵感，那个时候的艺术大师，用少许的资源作了大量的设计。例如：Josef Müller-Brockmann 和 Wim Crouwel，重温这些大师的做品是很好的学习机会。可是有时我也会参考 minimal 画家的做品，如 Ellsworth Kelly，建筑师，如 Mies van der Rohe 和工业设计师，如 Dieter Rams。

2. 放下工做，休息一下颇有帮助。扁平和简约设计的一切均关乎到细节的差别。所以小憩片刻后再回到工做，带着全新的眼光工做，比长时间左思右想更有效。

3. 并排比较各个版式一样有帮助。哪怕花 20 分钟前将一个线条下移各 5 个像素分别保存，对比两个版式就能很快分清孰好孰坏。

4. 因为实物展现的相对比例相当重要，因此要及早在不一样的目标设备上测试。

5. 整个设计过程当中不断问本身“真的须要吗？”。支撑项目时候，找一些讨巧的办法，例如，添加一些有趣的元素、样式会这样会很容易也会很吸引人，但必须始终注意剔除没必要要的元素，不断精简。甩掉你费尽心血的部分老是难以割舍，但修改过程必须挑剔。

Global Closet: 由 The Workshop 为美国地理杂志教育板块设计的一个互动游戏

网格

网格在界面设计中扮演很重要的角色，这里也不例外。若是你想经过创建视觉规范使整个设计次序化、直观化，那么网格就颇有帮助。

1. 网格不只仅能展示视觉次序。还可使用网格划份内容和功能组。你能够不用老是使用直线或框划分对象组，其实简单的对齐和间距设置也能帮助用户理解界面结构。

2. 试着打破网格的结构，突出重要的元素来吸引用户眼球。告别虚假的 3D 元素装饰后，实物比例和定位等基本布局原则就是展示视觉次序的关键。

3. 尝试一下你不习惯的更密集的网格设计。当你大量减小视觉配色这些元素时，又会发现这种设计方式能够承载更复杂的结构，也不显得凌乱。若是你有想表达的额外的内容信息你能够单独放置。

Rossul 设计的 Live School iPad App

颜色

固然，颜色在视觉设计中角色很重要，对 minimal 界面更为关键。

1. 考虑更宽泛的配色方案。若是大家像我同样，那么就会明白相近的配色每每使界面功能性更强。而以强烈的宽泛的配色来设计就更容易了。如今是你发挥的机会，只用少许的元素，扩展配色方案会让你感受很好。

2. 设置配色方案时，测试所选色调要在很宽的色谱内进行，才可保证用明暗对比来表现画面。

3. 若是你想试试同系配色和鲜明对比。要及早测试配色，以确保微妙变化和高对比度元素都能有足够的选择空间。

TriplAgent 的视觉设计使用了丰富的配色

文字排版

之内容主导的扁平式网页而言，文字排版就是大英雄，功不可没。

1. 衬线是一种选择，无衬线则会显得更干净。

2. 在品种繁多，粗细和样式各有差异的字体系列查找你须要的字体。固然不是使用所有，而宽泛的选择帮你更准确的定义出层级关系，同时你也会发现某些字体会更适合特定环境。

3. 不要顾忌把大小和粗细差异悬殊的字体搭配在一块儿就必定会形成视觉凌乱。用超大、超细的字体作标题而用中等粗细的小号字体作正文其实也是一种尝试。

4. 要注意字体便于阅读。我知道听起来好笑，但人们会对你选择的字体产生不少质疑，因此确保按任何比例缩放时均能阅读

Siteleaf 的设计，文字呈现干净且易读

交互

在扁平设计中，证实元素的交互性会显得很棘手。这是我采用的几个方法。

1. 对比很关键。若是构图留白比较多，你能够给可操做元素一点彩色；若是是文字为主，可使用简单的配图；若是标题是大号小写字母，连接能够用小号大写字母；就是这个意思。

2. 传统布局也颇有用。若是你要放置一个返回按钮，那就将其放置在用户指望找到返回按钮的位置上，左上角。

3. 当页面堆叠更多功能时，把每一个交互元素设计成按钮没意义。界面尽可能设计直观一些。但若是交互特别复杂或者出乎意料，提供简单的错误恢复功能。

4. 下拉框、模式窗口、弹出框等层级元素在扁平设计中通常比较难处理。而对鲜明的对比、边框、着色的处理，也能从视觉上区分出交互层级。

简洁的构图和鲜明的对比：Taasky

总结

我不相信设计有固定规则可循。看到设计师呕心沥血只为构建干净、简洁的用户界面，实在使人叹服。扁平就真的不须要渐变和阴影了吗？固然不是。实际上我见过最引人兴趣的工做，是那种能明智的呈现内容、同时可以保持交互直观性和平衡维度。

在咱们这个高度联系、资讯丰富和功能齐全的数字世界里，简约设计又从新普遍兴起。而它并不能解决一切，但若是考虑周全、应用得当，也一样能给我带来易用和愉悦的数字体验。