愈来愈普遍的扁平化设计，真的会下降人们使用页面的效力吗？

“其实不是扁平化设计下降了效力，而是不好的设计下降了效力。”

9 月 3 日，咨询公司 Nielsen Norman 发布了1篇研究报告，指出扁平化设计会使用户导航的效力下降 22%。

他们找来了 71 名用户，分别跟踪他们在阅读 9 组网站时的眼球运动，并将用户们花在内容上的时间记录下来。

被作为“对比组”的网站上，按钮具有阴影、浮雕的效果，超链接则被突显为加粗的蓝色字体。而实验组的按钮和超链接们的视觉元素则被弱化了。

当阅读那些被弱化视觉元素的网站时，平均每位参与者会多花 22% 的时间在网页内容上。

不像以往的用户粘度实验，Nielsen Norman 没有把用户多花的时间算作网站用户的主动停留时间，而是将它们解释为“用户在阅读文字内容时的不肯定性”€€€€这些参与者花费了更多时间用来定位他们希望看到的元素。

简而言之，他们的结论是，扁平化设计（flat design）是1种不那末直观的设计，抹去了网页按钮与内容之间的差别。这使得用户将可点击的元素和不可点击的图标与文本混淆，因此影响了效力，还可能致使广告商和电子商务网站们损失数10亿美元。

虽然这个观点工作服生产哪家专业
自打扁平化设计流行于数字屏幕后就被频繁讨论，但 22% 这个具体数字还是第1次被提出来。

扁平化是如何渐渐成为主流的

设计师们对扁平化的解释不1，常常是从“它不是甚么”说开去的。它在拟物化（skeuomorphism）盛行的时候横空出世，大胆剥离了3维表现情势的沉重设计风格，只留下没有纹理、没有质感效果、没有阴影的平面元素。但发展到现在，扁平化仿佛又将阴影和深度重新吸纳，炮制出“伪 3D”的效果。

“所以我历来都不认可‘扁平化’这个词，我觉得来描写这类风格更好的1个词是平面化”，frog 视觉设计师 Jaskni Wong 对《好奇心日报》说。

但曾称作 Metro 的设计语言被1致认为是真实的扁平化设计：它由不同色彩鲜明的方框色块组成，抹去了1切阴影、投影、斜角等设计元素，彻彻底底的平面设计风格。

发布 Metro 的微软，也因此成了第1个将扁平化设计风格用于数字界面的公司。

2012 年 Computex Taipei 大会，微软公然宣布，Metro 会被用在行将发布的 Windows 8 和 Windows Phone 上。

那时，苹果还站在扁平化风格的对峙面，以拟物化设计界面和现实主义审美闻名。而微软在 2007 年发售的 Windows Vista 也才刚刚更新了1种叫“Aero”的界面风格，它被看作是微软对拟物化设计的成熟尝试，而毛玻璃质感会带给用户更强烈的审美感受。

Metro 则好像突然让微软走向了自己的对峙面：1切看起来立体的元素都取消了。它的灵感来自于机场和地铁的唆使牌，旨在明确。

看起来也的确如此：大号无衬线字体，弱化图象，依赖排版。微软描写它“直觉、易懂、现代”，称这类新的设计风格是“真实的数字化”。当时这类简洁的设计情势的确使人线人1新，取得了包括 Jaskni 在内很多设计师追捧。

事实上，微软用上扁平化设计还要更早：他们在 2006 年发布的媒体播放器 Zune 中就使用了这类风格。

Zune 的诞生始于微软试图与苹果 iPod 的较量。微软的商业发展总监 Will Tschumy 号称微软每一年花费 200 亿元在设计上。

“我们做了无数用户体验背后的调研”，Will Tschumy 说，“微软是唯逐一家在各个屏幕上具有统1设计语言的公司了。”

很快地，Zune 的产品设计风格延伸成为所有微软产品的设计语言。扁平化设计风格同样成了最流行的设计趋势。

苹果也加入了扁平化设计的热潮中，乃至还成了扁平化的最大拥趸和推动者。要知道，拟物化和写实主义设计在很长1段时间内都是苹果的设计标志。

直到 2012 年，苹果的主页导航栏还是光滑的球面型，按钮们则像是裹了糖衣1般发光。2013 年 6 月 10 日世界开发者大会，苹果借着 iOS 7 发布推出了全新的 UI 设计风格。这1切都产生在苹果副总裁 Scott Forstall 离开苹果后，Jony Ive 掌管了全部公司的交互界面。

以 Metro 的扁平化标准来看，iOS 7 其实不算完全扁平，它还保存了1些纹理。但它相比自己过去的设计，拿掉了光泽、斜角和阴影。图标们更简洁了，色彩也更鲜明了。照片的图标从1株现实的向日葵变成了7彩色轮；相机图标则由原来描绘细致的镜头变成了1台黑色的相机剪影。

不过 iOS 7 初揭晓时，遭到了1些批评，曾获德国设计奖毕生成绩奖的Erik Spiekermann 就专门拍了个视频批评苹果过于纤细而难以浏览的字体。更大的硬伤还在于：控制中心（control center）对可点与不可点元素的混淆，和没必要的细线分割（苹果在后来的版本中对这点做出了改进，用更深的色块表示可点元素，也取消了细线）。

但这明显无碍无数设计师们跟随苹果1起拧转了设计趋势。最显著的变化莫过于那些登上苹果 APP Store 的利用们。要是给它们的图标依照时间顺序梳理下来，你会发现图标们也基本遵守立体、描绘细教师工作服请购申请
节到拍扁、简洁的路径变化着。

扁平化与日渐普遍的极简主义

这类趋势并不是无端出现。

被誉为建筑史“现代主义之父”的美国建筑师 Louis Sullivan 创造了现代摩天大楼的原型，他留给后世更大的财富，还在于放之4海而皆准的设计格言：情势追随功能（ Form follows function）。

这句话的意思很简单，即设计首先得斟酌功能性。

从拟物化和现实主义，到极简的扁平化，再由扁平化升级为更具兼容度的设计风格，都是用户界面设计风格顺应了当下潮流所得的结果。

1994 年，万维网的出现使得互联网开始引发公众注意。大部份美国的上市公司开始视1个公然的网站为必须品。但此时，个人电脑的渗透率极低。只有专业工作人员熟习电脑桌面软件，更不用说那些看了使人疑惑的数字接口了。设计师们花了大量时间制作网站按钮、菜单和跳转链接，使他们看起来稍微友好1些。

在网页设计几近无可参照确当时，人们认为网站设计的黄金准则就是去模仿电脑桌面的界面设计。

1995 年发布的 Windows 95 就是 3D 摹拟的经典例子。

它的对话框使用了很深的阴影和高光来制造 3D 效果。它们的突出凹陷都遵守着两个基本原则：

突出的元素是可以用鼠标点击按下的。它常常被用来表示按钮。


凹陷的元素则是被用来填充的。诸如搜索框等输入框就常使用内陷的视觉元素。







就犹如美国 1840 年代的铁路、1920 年代的汽车和收音机所带来的技术繁华1样，巨大的互联网泡沫积聚起来，又由于过热的投机行动经历了1场名为“Dot Com”泡沫的破裂。

不过很快地，互联网经历泡沫幻灭以后再次起飞，1大批新的创业公司出现，让自己的界面充斥着阴影、气泡、眩光、巨大投影等时下流行的元素。

微软在 2003 年发布的 Outlook Web Access，被认为是网页设计的杰出代表。




这个在如今标准看来很是简陋的界面，在当时是 .NET 网站的标准，和很多 AJAX 库所渴求的设计。

与此同时，苹果的拟物化设计和现实主义风格也搭载着产品的出售被更多用户接受。

拟物化是对物理世界1些特点的模仿。它用在设计中，能让用户在对现实存在物品的了解基础上，学会使用1种全新的交互界面。

苹果的用户界面上，那些反光的图标实际上是现实生活中的物体在电子屏幕上的1种转移。在大部份人还未被智能手机牢牢擒住时，这类对现实物品的模仿其实能消除人们对电子事物的疏离感。







苹果将虚拟键盘做成精致的水晶玻璃质感，正是为了让人们习惯虚拟键盘的存在。可以很肯定地说，假设它没有做得如此“直觉”，它的体验就没有说服力，也无从培养消费者的习惯。

拟物化风格愈演愈盛，并被苹果对细节的极致描绘推向了高点。

但和过去数百年建筑、艺术的发展轨迹类似，扁平化设计所代表的“极简主义”，也是在堆叠装潢风潮到达极盛以后，开始1股由繁入简的风潮。

扁平化设计常被视作网页和界面设计发展到成熟阶段的意味。

这类成熟首工作服厂家批发定制
先体现在设计师身上，他们对设计图标和界面已得心应手，开始转而寻求创新和现代性。

互联网的渗透意味着远比过去更多的人熟习如何与电子装备互动。我们已习惯于与数字装备的交互方法。即使是某个页面上只有1个细线条方框，只要上面写着“Go”，你也清楚地知道那是个可以被点击的按钮。

一样的发展轨迹，你可以在印刷物上的“扁平化”上找到。

这类更“原始”1些的载体，早在 60 年前就已见证过这类极简风格的壮盛时期。当时扁平化设计的名称还叫做“瑞士设计风格”，也称为“国际印刷风格”（International Typographical Style）。

如它名字所指，这类设计风格始于瑞士，在 1940€€1950 年代推行至全球，成为战后西方的设计基础。

推动者是现代最著名的平面设计师之1 Armin Hofmann。从苏黎世艺术学院毕业后，他作为1名版师流转于 Basel 和 Bern。1947 年，在火车上遇见时任 Basel 艺术学院校长的 Emil Ruder 后，他得知那儿正缺1名教师，因而开始了 40 年的教学生涯，并在后来代替了 Ruder 的校长位子。

Hofmann 1生中大部份时间都在设计扁平设计风格的海报。由于他认为，海报是最好和最有效的沟通情势之1。




他的海报永久高效审慎地使用色彩和字体。他将这类做法称为“色采的琐碎化”。即使以当下的审美标准评判，它们照旧融会了创意与艺术气质，完全不过时。


事实上，Hofmann 用在海报中的元素和如今的扁平化设计元素并没有太大区分：照片蒙太奇，强调排版和实验性的构图，和大量无衬线字体。

他还将自己的设计哲学和实践写入了1本名为Graphic Design Manual的设计指点手册，成了无数平面设计师的必读书目。




这类“剥离非必要元素”的风格专注于可读性，和一样以清晰可读为准绳的 Helvetica 字体1起，在2战后的西方设计史中，占据了1席之地。


扁平化设计在本来就是平面的海报中，并没有遭受太大问题。这也是极简排版风格在印刷物中长盛不衰的缘由之1。

数字屏幕就没有这么简单了。虽然很多设计师全心拥抱扁平化设计，但这类初期只有两个维度的设计风格，也很快就暴露出局限性。比如抛弃1切3维元素的 Metro，它的诞生就伴随着反对者对其易用性的质疑。

虽然在 Jaskni 看来，Metro 难以推行的缘由还在于 Windows Phone 可怜的市场份额，和它对开发者的高要求，“它基于wayfinding（路牌唆使），是非常需要功力的1个领域。”

愈来愈多设计师厌倦了它的魅力，开始寻求解决方案。

扁平化，真的就是指完全扁平吗？

这恰正是 Nielen Normann 这份报告存在的缺点之1：这份报告对扁平化设计的理解仿佛还停留在它们最初的印象，忽视了这类设计语言进入数字屏幕以来的进化。

在它的对比组中，扁平化就是完全没有纹理和阴影的存在。

但现实情况是，扁平化设计其实与拟物化设计的概念并行不悖。它具有物理世界中的规则，乃至开始主动摹仿现实中的“层次”和“维度”，比如很多设计师利用深浅不1的色块表现出阴影，而不是过去的投影、斜角和渐变，仿制出真实的投影。此时它的对峙面已不是拟物化了，而是“丰富设计”（rich design）。




Jaskni 和 frog 另外一名视觉设计师胡€€申都认为这份报告转达的并不是扁平化的缺点，而是“不好的设计”的缺点。


报告忽视的另外一个紫色马夹工作服套装
问题在于，网站阅读效力不单单由用户导航的速度决定，网页加载也是重要因素。

他们说，设计风格实际上是设计师审美与硬件基础之间的拉扯结果。比如 Jaskni 认为“非常好看”的 Windows Vista 界面，限于硬件，在拖动窗口会出现卡顿现象。即使微软具有推行这类精细设计的热忱，开发者也会由于惧怕消耗系统资源而放弃优化。

而扁平化图标使用简洁的图象转达信息，少有渐变、纹理和阴影，图标更小，页面加载时间也更快。它们既有装潢性，也能导航到网站的正确位置。

不过，扁平化并不是完全摒弃纹理和阴影的存在，进化使得它解决了过去那些缺点。

2013 年，Google 发布的 Material Design 引发了很多扁平化设计爱好者的狂欢。

在它发布这个设计语言之前，Google 在设计上的战术很有些谨慎翼翼：设计没有重大变化，只是在每次新产品发布时实行1些小小改变。

但作为在设计上具有高要求和高用户期望的大公司，Google 在发布 Material 时做了超前的1步：它不但为自己的设计语言取了名字，还专门设定了相对完全而明晰的设计规则。

这为设计师们提供了便利。由于对设计师来讲，当平空设计出1套新的风格时，需要付出巨大的研究本钱与沟通本钱。而 Material Design 相当于1个框架，在其中生发出来的设计，是已被验证过的。

要解释 Material Design 的概念也很简单，它试图在最简化的设计中引入1些拟物化设计的特点：

它将所有设计元素都想象成在固定光源下的纸片，由于光源远近表现出深浅不同的色采和阴影。虽然它看起来照旧扁平，但就连运动模式都摹拟了物理世界的规则。




虽然1些设计师认为 Material Design 在色彩、阴影方向等都做了过于死板的限制，令他们创意受限，但 Material Design 的发布算是扁平化设计“进化”成功的尝试。


与 Material Design 发布同年，设计师 Jeff Escalante 也在 Dribbble 等设计网站上发起了1次关于扁平化设计趋势的讨论，并提出了1种很是简单粗鲁的解决方案：长阴影（Long Shadow）。

它的效果犹如将图标上的物体置于冬季阳光下：它们都拖着 45° 斜角的长阴影，是物体的 2.5 倍。




长阴影保存了扁平化设计的基本审美，但也为图象增加了深度。这使得它的确火了1阵，设计网站 Dribbble 和 Pinterest 上都出现很多类似作品。教程也在教大家如何以更高效力制作长阴影。

不过这类戏剧化的对角线阴影让人联想起初期的苏联海报或是像俄罗斯构成主义、几何抽象派画家马列维奇的拼贴画作品。它们都显现出1种积极的、理想主义的风格，具有强烈的视觉冲击力，非常合适用作图标和品牌商标。

但除此之外，长阴影的使用广度欠奉。和理论更成系统的 Material Design 相比，它并没有办法走得更长远。

2013 年，人们关于扁平化设计的讨论，还在于“它是1个趋势，还是1次革命”。

但从现在它们的发展看来，扁平化设计已成了1个容纳度极高的存在。它还在依照变体不断延续自己的影响力。

苹果实际上也未将自己限定在最初那个扁平化设计的框架里。在走扁平线路的 iOS 7 中，Game Center 图标在1众被拍扁的图标中显得不同，照旧具有闪亮的光泽感。

Dribbble 中不乏好事者将它拍扁，但“这就不是原来的球体了”，Jaskni 说，“苹果可能不是在1味寻求扁平化，而是在寻求好的设计。”







明显，扁平化设计只是电子屏幕设计的其中1个阶段。到目前为止，2D 界面的通用性已基本得到解决。1旦出现像 AR/VR 这样更沉醉的视觉需要时，它可能会失去现有的地位。

在过去两年多，包括微软在内的很多科技公司都在进行“包容性设计”，意即他们开始思考1些相对前沿的事物，并为之做出设计方案。

比如微软发布的全息装备 HoloLens。虽然用户能够与全息照相机进行互动，但 HoloLens 的操作系统与微软其它装备所用的界面其实不相同。

微软希望能发布1套像 Metro 那样，贯穿所有产品线的设计语言。

他们也“做到了”。今年 5 月的开发大会上，微软发布了1套叫做“Fluent”的设计语言，它看起来像是扁平化设计的延伸，但被赋予了无缝对接 2D 和 3D 操作系统的愿景。

虽然它目前还只是1个概念，但犹如每一个阶段的演进1样，这个照旧很年轻的系统需要时间。

题图来自：upslash

健康简餐愈来愈遭到年轻人的追捧，先行者 Wagas 为什么没有大扩大？




最后1个老牌子 HTC 也卖了手机团队，老1代智能手机品牌都是怎样灭亡的？ | 好奇心商业史




你在网上留下的每句话、每张照片，是怎样变成了互联网公司的财产？







- 关注好奇心研究所，与有气质的你共勉高尚趣味 -