界面设计的拟物化和扁平化的风格探讨

冯敏

摘要：自交互設计初始至现在，经历了拟物化和扁平化两种较为对立的风格。为了了解这两种风格特点及用户感受，文章从手机图形用户界面入手，简单介绍了拟物化和扁平化的特征，同时用功能分析法比较了两种设计风格的优劣，探讨出拟物化具有艺术性、映射性、情感性的优势和空间性、时间性、干扰性的劣势，以及扁平化拥有简易性、功能性的优点和大部分设计千篇一律的缺点，得到了拟物化偏向情感化而扁平化注重功能性的结论。

关键词：拟物化 扁平化 风格 交互设计 图形用户界面

中图分类号：JO24 文献标识码：A

文章编号：1003-0069（2019）03-0069-03

一、手机图形用户界面

图形用户界面（Graphic User Interfac）的概念最早由施乐公司在上世纪70年代提出，主要用于方便用户操作计算机系统。最早的计算机操作模式是由用户向计算机输入代码指令，再由计算机运作完成。但是这种操作模式的学习成本过高，不是所有用户都能理解和记住各种代码指令及专业知识，因此对于普通用户来说，操作计算机比较困难。而图形用户界面的出现则解开了这一困境。图形用户界面运用了菜单、按钮、图标等各类元素来帮助使用者理解当前对计算机发出的指令合义，用户再通过下达图标命令使计算机在后端运行指令。在这种情况下，图形用户界面的图标往往会模拟现实世界的物体和逻辑来帮助用户理解和使用。而新技术的发明使图形用户界面不再仅仅局限于计算机，智能手机也开始应用图形用户界面。随着智能手机在生活中的全方面渗透，图形用户界面的设计也变得越来越重要。对于手机和用户来说，图形用户界面是人类语言和计算机语言之间的翻译，是二者相互沟通的桥梁，是一个提供了一种更加简便的人机交互方式的载体。

在很多情况下，手机图形用户界面的设计需要能做到对用户的操作进行暗示和引导，最好还能同时引起用户对交互操作的兴趣，而最简单的方式莫过于在视觉上的设计。由此，手机图形用户界面也有了越来越明显的设计风格。

二、拟物化

拟物化（Skeuomorph）这个词最早来源于希腊语sk6uos，它将很多不必要的装饰元素应用于对象。它的主要特征就是模拟真实的装饰效果，包括阴影、高光、透视、渐变、物体材料和质感如木头纹理，皮革纹路的表现等。

（一）拟物化的优势

在手机图形用户界面，拟物化的兴起源于2007年乔布斯发布的第一代Phone手机，直至后来的IOS 6系统，拟物化风格的应用达到了巅峰。从打开iPhone手机的第一刻开始，拟物化图标就在不断展现它的风采：开机载入页面上苹果公司的logo包括了凸起造型和阴影元素;载入完成后，屏幕下方右划按钮槽不仅有文字提示“滑动来解锁”，还具有动态反光效果（如图1）。

解锁进入桌面后，每一个图标都是上半部分反光发白，下半部分颜色更深，而底部边缘略带隐隐反光效果，形成一种图标中部高起，两边圆滑向下的半圆造型。而图标内容则更体现立体视觉效果：备忘录图标里的纸张图案上有上一张被撕出的毛边投射下的阴影;报刊杂志图标则是原木色的书柜，隔板上还有木头独有的纹理;而设置图标则由银色的齿轮构成，带着冷酷的金属反光（如图2）。各种颜色、材质、阴影、透视在每个图标里得到了细腻的体现。乔布斯为了极力推广智能手机，采用了与现实物体如此相仿的拟物化设计风格，正是因为拟物化设计有以下优势：

1.映射性：智能手机刚刚兴起，用户还不能很好地操作新的机器和交互。拟物化图标极大地模仿了现实生活中的物体，就算是第一次接触智能手机的用户也能通过被模仿的现实物体的用途猜出拟物化图标的作用和交互后的效果。拟物化图标良好的隐喻作用能将现实世界物体的功能映射到和智能手机的图标交互中，大大降低了用户在操作上的困难和陌生，减少了他们对于新鲜事物的不适和排斥感。比较典型的类似于各类面对儿童的填色游戏、拼图游戏等，拟物化的图案让使用经验不甚丰富的儿童也能轻易理解各图标用途并使用。

苹果公司的人机界面指南《iOS Human Interface Guidelines》里也提到：“当应用中的可视化对象和操作按照现实世界中的对象与操作模仿，用户就能快速领会如何使用它。”

2.艺术性：拟物化图标包括了很多装饰性元素，具有极强的装饰效果。它模拟现实物体添加了阴影、高光、透视、材质等，在平面上展现了一定的三维效果，但又不是一味地照搬现实，在设计上进行了些许的艺术加工，为的是更加突出该图标的功能性。这种略带个性的模仿也给用户带来了亲切的视觉享受，形成了一种艺术效果。

3.情感性：对于现实的模仿能够极大地调动用户的情绪。由于视觉上的真实性极高，图标也就不仅仅只是一种功能的符号。对于真实的模仿不光勾起用户的回忆或联想，也流露出设计师的设计情感，这种情感通过细致的描绘传递给用户，用户也能感受到设计师在模仿真实时的个人情绪。

（二）拟物化的劣势

尽管拟物化有诸多好处，但万事终有两面性，拟物化也有难以掩盖的弊端：

1.空间性：并不是所有图标都可以有现实物体作为模仿对象。时钟、日历、计算机可以有实体模仿，但是如浏览器这种本就源于虚拟世界中的功能就难以找到模仿对象。例如苹果手机的Safari浏览器图标（如图3）被设计成了指南针的造型，用户第一次使用，很可能将这个图标的功能理解为指南针，这确实会引起用户的误解和疑惑，形成一定的交互困难。

2.时间性：模仿对象的选取终究是设计时期的代表物体。随着时间的推移，当时的功能代表物体并不意味着过了一段时间之后依然是功能代表。由于科技总是随着时间而变化，生活产品的外形也是在不断变化的。以前黑胶唱片机可能是音乐的代表物体，一段时间后随身听已经变成了人们的新宠，而现在音乐播放已经包含在手机强大的功能里7o每个时期相同功能的代表物品不同，而成长于不同时期的用户对于功能的代表物品的印象也是完全不同的。对于极大模仿真实物体的拟物化风格来说需要耗费更多的精力在模仿对象的挑选和设计上。

3.干扰性：当下用户对智能手机的操作大都游刃有余，通过手机为载体而传达的信息也越来越多。天气、时钟、日期、照片、音乐、地图、娱乐、运动、学习、购物……手机早已不仅仅只为通讯而存在，更多的功能和可能让用户几乎都通过手机来接受和传递信息。太多的手机应用和太快的生活节奏让用户产生焦虑感，他们已无暇平静地欣赏各个设计精美、立体繁复的图标和背景，此时用户的关注点在于功能性以及效率性。如果不能一眼找到自己关注和需要的信息，说明过多的装饰已经对信息接收造成了干扰，长此以往，不仅造成审美疲劳，还降低了用户的生活效率，增加用户的信息焦虑。

三、扁平化

扁平化设计其实在IOS7之前就已经出现了。Windows Phone（如图4）和安卓4.0系统分别在2010年和2011年运用了扁平化风格，但当时图形用户界面的设计仍旧处于拟物化盛行阶段，因此扁平化设计并没有受到多少关注。直到2013年IOS7带领着完全不同以往的新设计风格来袭，扁平化设计才受到了众人的瞩目。

扁平化的特征就是运用简单的几何形体、线条、鲜明的色彩构成与拟物化完全不同的二维平面，它完全摒弃了阴影、透视、高光、纹理、质感等任何三维元素，將图案和信息完完全全的展平在用户面前。扁平化的造型具有高度凝炼性，看似简单实际在设计上并不容易。它需要设计师能够抓住物体的本质，再用简单的线条和具有冲击力的色彩表达概括成一个图案符号。

（一）扁平化的优势

相对于拟物化，扁平化展现了完全不同的优势。它站在拟物化的基础上，通过用户在拟物化引导下对手机界面已有的功能印象，对拟物化的界面进行了概括重构。对比IOS6与IOS7的图形用户界面，各功能图标在图案的外形上并没有很大改变，IOS7依旧遵循IOS6使用的功能代表物，但所有桌面图标的半圆形立体视觉效果则被完全舍弃，做成了平面效果（如图5）。

大部分按钮被压扁或删除外框只留文字和图形。通知栏内原有的深灰色布纹背景也全被删除改为半透明灰色平面。设置内的背景变成纯白，每个条目用线段分割，功能小图标也仅仅用纯蓝色图形显示（如图6）。

打开文件夹的界面从裂屏下凹效果变成白色半透明圆角方形背景。解锁屏依旧保留了滑动来解锁字样，但按钮与凹槽已消失不见，只余一个双线向上箭头表示（如图7）。

甚至于状态栏的背景也变成了全透明状态，完全与各种颜色的背景融为一体（如图8）。其他各界面也多用不同的色彩明度和透明度来制造差别。

1.简易性：扁平化的图形用户界面使次要的信息变得更加简单，减少了用户视线停留的时间，只为在用户宝贵的碎片化时间内将最重要的信息突出展现，由此，整体界面变得清爽整洁。因为只需要运用简单的元素设计，所以多个图标很容易达到视觉统一的效果，这对于推行品牌印象大有裨益。同时规则相同的元素通过精心排列和留白也能带来优雅的视觉效果，在一定程度上愉悦和放松了使用者的心情，增加了用户对于品牌的好感度。

2.功能性：与拟物化的劣势相反，简单的图案更加注重功能的呈现。拟物化的干扰性在此被剔除，图标更像是一个通道，它变成简单的功能入口，不同的颜色和外形更像是功能入口的区分，多样的信息没有其他的视觉干扰，用户可以轻松地捕获真实所需，大大提高了生活效率，减少了过量信息带来的焦虑和不安。

（二）扁平化的劣势

扁平化的劣势也同样明显。在大批量扁平化界面的影响下，用户很容易达到审美疲劳。平淡干净的界面当然会让人肃然起敬，但是简单元素的组合却非常考验设计师的设计功力，尤其在设计资源大量却又层次不齐的时期，简单的界面模仿似乎变得极其容易实现，然而只得其形不得其神使得大量界面设计干篇一律，清新平淡的设计再无法在用户心中留下深刻印象，反而过目即忘，这对现在越来越注重个性化的用户而言绝非好事。

四、当前设计偏向扁平化的原因

拟物化随着智能手机兴起，此时，用户尚不能熟悉自如地与智能手机交互，处于使用智能手机的学习期。拟物化能极好地模仿现实世界中的物体，其视觉效果对用户的联想思维有极大的帮助，降低了学习成本，减轻了学习负担，唤醒用户熟悉的自然行为和认知，有助于缓解他们对于学习新事物的焦虑感。

当用户在拟物化的暗示下熟悉了智能手机的操作，拟物化的映射和引导功能似乎就不那么明显重要了，只纯粹地剩下了装饰性元素带来的视觉效果。然而因为设计拟物化的图标需要模拟它在真实世界里的形态而在图标上加上各种各样的阴影、高光、透视、材质等元素，使得制作一个图标要耗费设计师较多的时间和精力，更不用说部分设计师为了突显自己的作品特色抓住尽可能多的客户，在图标设计上下了更大的功夫，将目光放在了更多可有可无的细节上，使原来就包含了很多装饰效果的拟物化界面变得愈发复杂，占有的系统资源越来越多，对用户也造成万～定的认知负担和审美疲劳。而到了全民智能、信息过载的时代，手机所传达的信息量上涨的趋势愈发明显，快节奏的生活让用户越来越重视效率的提高，手机图标上已经失去意义的装饰性内容离用户注重功能性的要求愈来愈远，信息本身的过量已经让用户感到焦虑，而无意义的装饰又对用户造成视觉干扰，挑战用户对过量信息的承受能力。在这些情况的敦促下，扁平化设计便应运而生。

似乎是想要极力撇去拟物化的风格影响，扁平化出现时风格迥异。它注重二维平面，舍去一切阴影、透视、高光等会使人联想到三维物体的元素，与具有繁复装饰效果的拟物化风格形成鲜明对比。由于看到了这个信息爆炸的时代下惶惶不安的心情，功能性在此被扁平化强调。而当完全不同以往的新风格初现时，用户难免会有不适应的感受。在这种情况下，为了延续用户从拟物化环境中学习到的认知和操作习惯，部分扁平化设计仍旧在造型上模拟之前的拟物化图案，只不过去掉了三维元素。

新的风格尽管带来不一的评价，它终究是有被用户习惯的时候。扁平化确实让界面显得干净整洁，主要信息被更加突出。但当一种审美从出现走到成熟，也终有走向衰弱的一天。当二维平面被大量使用，除了造型和颜色的区别，各图标的特色似乎在渐渐变淡，用户又开始靠肌肉运动习惯来操作手机时，好像又轮到了设计师推陈出新的主场。于是又渐渐兴起了扁平拟物化风格。如同字面意思，扁平拟物化既是在扁平化的基础上添加少许的阴影和高光等元素，略带拟物化特征，为简单冷漠的扁平化添加了一点温度和个性。小结

拟物化和扁平化的风格不能说成各取所爱，而是历史规律的发展，犹如象形文字甲骨文到如今以功能性为主的简体汉字的转变。

人类一开始总是自模仿进行发展，当发展到成熟至过熟阶段时再进行自我否定，走向一种新的符号化方式：手机图形用户界面的拟物化到扁平化，对于界面来说，概念上的“拟物化”其实并未没落，现在被多数人遗弃的只是设计风格上的拟物化，对于现在处于扁平化时代的图标来说，也是换百～种风格的“拟物化”，并且将一些不符合现在时代背景，因未曾选作被模仿对象而造成使用者困惑的元素舍弃，替换成更加符合当下时代背景的代表物体。然而在时间的作用下，当此时变成过去，此时的图标必然又会造成新的困惑，也会再次被舍弃替换，设计风格也将被新的图标所影响，这种过程周而复始，总是随着时间不停滚动。但唯一不会改变的是人类模仿的天性，无论图标怎样变化，都是在模拟当前时期的事物或行为，而不同的风格和审美也总是在形式和内容的变化过程中轮流交替。

两者相较而言，拟物化更加情感化，能够带动用户的情绪流露;而扁平化则以功能性为主，注重任务的执行。拟物化和扁平化并无对错之分，只有在当前环境背景以及应用场景下哪个更合适的区别。矫枉过正也非良策，不论哪一种方向的极端都会带来一定的弊病和困扰。设计也如太极，用辩证思维看待设计风格，阴阳调和才是正道。

参考文献

[1]劉馨忆.重看图形界面“扁平化”与“拟物化”之争——关于设计思维的探讨[J].工业设计，2016，（10）：163-164.

[2]王军亮.扁平化设计在交互设计中的应用[J].参花，2017，（15）：148.

[3]夏韬.浅析智能手机图标拟物化与扁平化的发展趋势[J].设计，2017，（1）：122-123.

[4]李怡.移动端界面设计从拟物化到扁平化风格的演变[J].今传媒（学术版），2016，24（4）：115-116.

[5]李宜勇.浅析UI图标拟物化和扁平化的交互方式[J].电脑知识与技术，2016，12（24）：64-65.

[6]杨光.界面扁平化设计风格成因探析[J].设计，2016，29（13）：46-47.

[7]李刚，佘天琪.解读扁平化在智能手机界面设计中的艺术表达[J].设计，2016，29（13）：134-135.

[8]熊琳.扁平化信息图形设计在交互设计领域的应用[J].大观，2016，（6）：74.