移动端界面设计从拟物化到扁平化风格的演变

李 怡

（陕西师范大学 美术学院，陕西 西安 710062）



移动端界面设计从拟物化到扁平化风格的演变

李 怡

（陕西师范大学 美术学院，陕西 西安 710062）

摘 要：随着智能设备的迅猛发展，界面设计的清晰层级、便捷交互、视觉风格成为了设计师的首要课题。与此同时，基于用户体验为主导的移动终端界面设计经历了从拟物化风格向扁平化风格的巨大转变过程。本文研究即是分析在移动端界面设计中从拟物化到扁平化的演变原因，并从深层原因出发总结界面设计发展规律。笔者通过对用户体验进行分析，以典型的界面设计案例为研究对象，从交互设计、视觉元素等方面总结出移动终端界面设计从拟物化向扁平化发展的原因。

关键词：界面设计；拟物化；扁平化

一、拟物化设计的起源

在计算机界面设计领域，拟物化设计起源于图形界面（GUI）的视觉隐喻，它是一种GUI设计外观风格，常见在软件界面上模拟现实物品的纹理、质感等。其目标是使用户在视觉上更加熟悉亲和，用直观的物象再现计算机领域中的抽象概念，降低用户使用的学习成本。在苹果公司的人机界面指南中曾经写到：“当应用中的可视化对象和操作按照现实世界中的对象与操作模仿，用户就能快速领会如何使用它。”

二、拟物化设计的优势

1.艺术审美性

界面设计的发展离不开艺术创造，而设计的审美创造正是实现设计活动中科学技术与艺术的结合，使设计产品实现科技内涵的统一，既有技术效能又有对人的感性适应性。“拟物化”设计追求高度的还原现实物象，模拟现实物品的造型、质感，通过叠加高光、纹理、材质等各种效果对实物进行再现。但这种设计并不是单一的写实，而是在现实事物基础上，对其功能和产品准确定位后的具有主观能动性的设计思考后的产物，使其在视觉上具有一定的艺术审美性。

2.直观性

界面设计作为一种语言手段，发挥着传达信息的符号作用。任何符号都是一种约定俗成，它利用一定形式、色彩或图案来表达一定的意义。这种传达可以是图像的、标示的或象征的，它关注的是语义信息的传达。拟物化设计符号在设计领域中广泛使用，是由于其比文字更简练，使信息传达更加直观、高效，具有标识性，使人们在形象的直观中获得某种意义的领悟。

3.逻辑性

产品设计是以市场为导向的，社会需求决定了要设计什么样的产品。如何使产品语言具有良好的理解性，如何使产品语言适用于不同性别、年龄段、受教育程度的人群，以便于他们能够快速的学习和使用。对此，勒维提出了一种“MAYA”阀限，即Most Advanced Yet Acceptable（最先进而又可接受）。这一概念对于产品语言设计提出了创新规范，也就是说产品设计要以用户的接受程度为限度，否则难以在市场中受到人们的青睐。

拟物化设计正是在考虑到以上理论后，产生的顺应市场的设计风格。在智能手机刚刚开始普及，用户对于界面的交互、信息的传达不是很熟悉和明确，但是他们熟悉现实的事物，拟物化设计通俗易懂的特征正好符合用户群体的这种需求。其对现实物象的再现正好具有功能相近产品的类型化特征，使其指代功能与现实对象之间具有空间联系或是因果联系，引发用户的联想。

三、拟物化设计的不足

首先，由于手机界面设计元素与现实生活中的实物有着本质的不同，即使再参照模仿也不是所有符号都能够完全找到合适的实物进行参照。拟物化设计的本质就是把虚拟环境下产品体验中的某一特性在真实世界中找到一种映射，然后把这种映射通过设计语言归纳成为拟物化的视觉符号，从而使产品体验本身更加具有真实度和情感化，并符合用户心智。而如果找不到符合该产品体验中某一特性的实物的话，其映射就无法成立。例如，网页浏览器这一icon设计，其本身在现实中生活中没有实物，那么在拟物化设计中就无法达成这种映射。大多数的网页浏览器icon设计就是使用了PC电脑中IE浏览器的LOGO进行的，或者是参照了地球、罗盘。这是一种约定俗成的符号语义，只有熟知这种语义的人才会理解其传达的信息，而不了解的人就难以知晓其寓意。最终的体验难以符合用户心智模型，反而增加了用户的认知负担。

其次，拟物化设计还受到时间的局限性。例如在拟物化设计下的收音机或者罗盘的icon，往往是依照其现实形态为参考的，而随着时代的进步，这些实物已经逐渐退出了历史舞台，那么拟物化的映射也不再成立。

另外，由于拟物化的成熟，设计师们开始过于追求拟物设计的逼真效果，以及特效的添加使用。简而言之就是不顾具体的设计情境为拟物而拟物，毫无助益的拟物则给用户带来了认知障碍和视觉疲劳，而模糊了其本身的意义，即信息传达。

四、扁平化界面设计的发展——以苹果iOS7系统为例

2013年WWDC大会上，苹果公布了其最新的基于扁平化界面设计的操作系统iOS7，其中采用了全新设计的用户界面。iOS7进行了彻底重构，新的设计去除了之前拟物化设计的纹理和质感表现，从用户体验入手，将细致微妙的动态效果、优雅的色彩搭配和独特不凡的功能图层融为一体，使操作更加生动高效，界面设计更加干净简洁。

首先，iOS7的系统界面弱化控件视觉效果，以避免过于复杂的视觉效果干扰信息的传达。iOS6的按钮被指示箭头和文字所取代，而为了表达元素的可操作性，iOS7定义了关键色这一概念。在同一个APP中，使用区别于内容的一致的统一用色来表达可操作元素。在备忘录中，使用的是黄色；而在系统设置中，则统一使用了蓝色作为关键色。整体视觉效果上的变化，日历的例子最为明显，可以看到iOS7与iOS6两种截然不同风格的日历表达方式（如图1所示），iOS7的日历内容更加突出，操作元素被弱化；而iOS6的日历，极具操控感，让用户获得的信息是屏幕上每个内容元素和操作元素都是可交互的，这样的界面反而影响了主要信息的获取。

图1　iOS7和iOS6日历界面

其次，iOS7系统界面优化了内容元素，使其清晰可见。在设计中运用留白将表现的主体内容和功能更加突出，空白可以向用户传递宁静和安宁的感觉，让用户使用更专注，有效率。iOS7的日历是一个留白运用的经典例子（如图1所示），空白空间的使用让内容更加突出，并不再有之前的拥挤和紧迫感。

而在信息结构上，iOS7更鼓励采用深度层次来与用户交流，并要求隐喻更加符合物理世界。iOS7的文件夹摒弃了iOS6的屏幕裂开效果，而是采用了置于主屏之上的毛玻璃效果。这与系统整体的层次关系是相呼应的，在iOS7的层级秩序里，背景层始终是处于最底层的，其他表现层则置于其上。那么文件夹的打开则理应是悬浮于主屏之上，并采用毛玻璃的效果表达其层次关系。

另外，在新的iOS7系统中还大量使用半透明UI元素。半透明效果能够帮助用户尽可能多的了解到被遮挡的内容，并使用户理解层与层之间的物理关系。相对于安卓采用下拉式的控制中心界面，iOS7半透明的设计能够让用户了解到控制面板和后面界面的层次关系，表达更加清晰。

五、移动端界面设计从拟物化向扁平化演变的原因

扁平化设计风格的理念是对界面的视觉设计和功能进行一种抽象化表达，其不再只关注视觉上的实物再现，更重视功能重构与用户体验设计，这一理念并非横空出世。包豪斯所奠基的以观念和以解决问题为中心的的现代主义设计体系，提倡功能化的设计原则、重视工业设计与人的关系，这些正与扁平化设计的理念不谋而合。回顾历史，这样的发展规律也可以从西方绘画发展中找到映射。西方绘画在摄影发明以前，一直追求写实风格的绘画，以现实世界为摹本。而摄影发明之后，无论是荷兰风格派，还是俄国构成主义，或者是法国立体主义，都逐渐走向抽象化的风格，摆脱了现实世界的束缚，更加注重人的心灵体验的描绘。扁平化设计的出现和流行正是反映了繁久必简这一艺术发展规律。而拟物化设计并非是完全被扁平化设计所取代，扁平化设计也没有摒弃一切装饰效果，渐变、高光在扁平化界面中依旧可以看到。所谓“拟物化的衰落”，归根结底，是设计师在跟随这种时代趋势的前提下，理性的回归到产品初衷和用户体验中去，重新审视界面元素与整体视图效果，消除冗余的元素，省略繁复的特效，使其功能可见性被最大化。

总体而言，移动端界面设计从拟人化到扁平化风格的转变，是离不开以下几个因素的：1.扁平化设计通过“扁平化”的信息结构和图形化的视觉语言等优势，使移动端界面设计更具有实用价值和使用价值；2.拟物化风格过分的“华而不实”，导致了信息传达效率的降低，容易对用户产生视觉负担；3.产品界面是人与信息交流的媒介载体，扁平化的界面设计正式建立在用户认知心理的基础上，为用户提供与用户心理模型相吻合的界面系统，减少用户的认知负担。

移动端界面从拟物化到扁平化设计的变迁符合事物发展的规律，具有必然性的同时，也少不了用户的主观选择。界面设计是一个不断迭代更新发展的过程，因为用户体验也是不断变换的，用户在操作体验、视觉感受等方面会有越来越高的要求。这种拟物化设计的兴衰存在于漫长的界面设计历史演变过程中，通过对这一兴衰的研究可以一窥今后的界面设计发展轨迹。

参考文献：

[1] 徐恒醇.设计美学[M].北京:清华大学出版社,2006.

[2] (英)大卫·科罗.视觉符号[M].沈阳:辽宁科学技术出版社,2010. [3] (加)马歇尔·麦克卢汉.理解媒介[M].北京:译林出版社,2011.

[责任编辑：艾涓]

作者简介：李怡，女，陕西师范大学美术学院平面设计专业硕士研究生，主要从事平面设计研究。

收稿日期：2016-03-23

中图分类号：G20

文献标识码：A

文章编号：1672-8122（2016）04-0115-02