设计

扁平化设计是未来吗?

自从GUI的概念提出以来,当一行行的命令代码的交互方式改变为通过图形直观表达后,通过模拟现实生活中的事物、工具来表现具体的功能的设计方式就成为了界面设计的主流,也就是我们后来说的拟物化设计,这是一种非常符合人的常识和直觉的做法,比如把电脑上的画图工具用笔和画板来表示,把手机的电话功能用电话机的图形来表示等等,这能够让很多第一次接触电子设备的人能够通过这些图案来直接识别其所指代的功能。

其实,即使到了现在这个扁平化风格设计大行其道的时代,UI的设计大多还是在遵循这个道理,比如在iOS 7中,虽然Johny Ive对iOS一脉相承的拟物化的设计做了大刀阔斧的改造,但是仍旧保留了一些“拟物”的迹象,比如图标中的报刊杂志、时钟、电话等等,还有如输入键盘中的设计成剪刀的剪切图标、设计成麦克风的语音识别图标等等。

当我再仔细回看这些图标或者形状的时候,才发现它已经不是以前拟物化风格中纯粹的将现实生活中的事物投影到手机界面中了。比如设计成电话形状的电话图标,设计成剪刀样子的剪切按钮等等,其实这都是经过十几年的发展,人们形成了习惯或者说是默认的规律。也就是说,这些现实生活中的事物已经成为了一种公认的界面符号了。

但是,即使这些都是被公众认可的界面符号,可也远不如像文字、交通标志等等符号普及,这其中就牵扯到了对符号的外化形象和内涵意义的学习的问题。
作为新新人类的大多数80后、90后甚至00后而言,从小接触数码产品的我们对于这些符号似乎有种天生的亲切感,但是反观对于年纪更大的用户群体,或是对数码产品不太感冒的小女生,这些过于“扁平化”甚至是“抽象化”的按钮、图标的图形设计就显得有些难以捉摸了。

网页版pages的工具栏

还有更加过分的情况,一些大胆的软件将按钮设计成无文字辅助独立出现的扁平化风格,就连“身经百战”的我也偶尔会拿不定主意,比如上图,这是苹果iCloud网页版Pages的顶部工具栏,对于很早以前就有接触过Office的人来说,还是可以认出这上面大部分的按钮图标的,但是比如中间的T表示“字体”、以及“字体”按钮旁边的“形状”按钮,都不是非常的直观。

Mac版Pages的工具栏

不过对于经常使用Pages的朋友而言,这些按钮都是和Mac版的软件界面一一对应的,但是可以注意到,Mac版的工具栏每个按钮的下方都有文字标注,用于提示用户每一个按钮的功能,而且每一个按钮图标都用带阴影的白色圆角矩形框住,使按钮从工具栏背景色上跳跃出来,这是一种对人类本能的暗示。

在匈牙利的用户体验设计师Zoltán Gócza的《破除关于UX和网页设计的32条迷信》一文中有提到:

“许多研究表明,图标都难以记忆,往往非常低效。微软的Outlook工具栏就是一个很好的例子:原来只有图标的工具栏有可用性很差,更改图标和它们的位置也没有多大帮助,直到后来在图标旁边加入文本标签,解决了可用性问题,人们才开始使用工具栏。而另一项研究中,UIE团队发现人们记住的通常是按钮位置而不是功能的图形演绎。”

也就是说,扁平化设计在用户可识别性上有先天的不足,再加上越来越简约的版面布置,使得传统的图标或按钮加文字的排布方式逐渐变成纯文字的按钮和纯图标的按钮,在这个过渡阶段,扁平化设计如果只通过依靠用户以前所积累的经验来避免学习成本上升,那么更多的会遇到用户体验中最糟糕的错误——让用户通过试错来得到正确使用方式。

OS X Yosemite的界面

在我看来,新的OS X系统Yosemite在UI设计方面是一个非常好的例子,苹果公司同样在最新的OS X系统上对UI进行了大刀阔斧的改造,虽然很多人把这一次UI改造也叫做“扁平化”,但是我觉得这其实是一个不那么“扁平”的“扁平化”设计,UI元素中充满了阴影、浮雕来营造的立体效果,这些在拟物化设计中常用的手法在Yosemite上仍然得以保留,但却将过去版本中过度使用的各种仿真材质效果进行了去除,这样做的好处,一来就是在用户熟悉的基础上,剔除掉可能分散用户注意力的装饰元素,二来又能保留辅助用户理解操作逻辑的交互元素,从而做到超出“扁平化”阵营的真正地为用户着想。

在未来的交互界面设计中,我认为大可不必将拟物化设计视为仇敌,也无需将扁平化设计奉上神坛,设计的目的其实是服务,要重视的是设计对人所产生的影响,而非最终呈现的视觉效果。

 

禁止转载,欢迎拍砖!

(30 篇文章)

一个视觉设计师,一个喜欢科技、数码,也喜欢音乐、电影,热爱生活的好青年。

查看该作者全部文章