新拟态风格推动下的轻拟物UI设计研究*

莫忧（广东白云学院）

一、用户界面设计的发展历程

（一）早期图形用户界面

随着20 世纪80 年代计算机技术的发展，用户界面实现了从命令行界面向图形界面的跨越。早期的图形用户界面采用了视觉隐喻的方法进行设计，即模仿用户现实生活中熟悉的事物的外形及其交互模式。

1984 年，Macintosh 计算机System 1.0 操作系统，首次将图形用户界面概念带给了大众。桌面隐喻开始使用，文件和应用程序显示为图形图标，用户可以在虚拟桌面上随意放置。交互和图形表意明确，如文件看起来像一张纸，用户可以通过把文件和文件夹拖入废纸篓来删除文件。基于隐喻性的图形用户界面设计将晦涩难懂的电脑语言包装成简单易懂的图形，降低了用户的学习成本，提高了使用效率。

早期的图形用户界面受限于设备的显示性能，图形无法呈现精美细致的色彩与线条。因此其视觉特征多为纯色与黑色描边结合，低分辨率下呈现像素化的视觉表现，图形轮廓具备拟物特征。初代图形用户界面的隐喻性视觉语言为后来用户界面的视觉设计奠定了基础。随着数字产品设备的不断更新，用户界面设计进入了全新的时代，拥有了更多可能性。

（二）拟物化界面

2007 年随着数字设备的普及，拟物化UI 设计风格开创。拟物化界面的视觉表现延续了早期图形用户界面的隐喻性视觉语言。并且由于设备的快速发展与升级，屏幕分辨率和色域有了显著提高。在此基础上的界面设计丰富了元素的细节与质感，最大程度还原了现实物体的形状、色彩、光影、纹理。映射真实生活场景的UI 界面给用户提供了使用参考，用户可以基于原有经验快速上手。熟悉的场景也给用户带来了丰富的情感体验。拟物化界面非常适合对数字产品缺乏认知的第一代用户。

2012 年拟物化界面设计发展到达顶峰。随着数字技术、社会环境、用户需求的不断发展，拟物化界面弊端逐渐显现。例如，厚重的纹理、质感、配色形成视觉干扰，用户无法快速获取重要信息；设计占用设备更多的存储空间，加载速度慢；设计成本高，效率低，多终端适配性差。

此时，对数字界面认知成熟的用户已不再需要一个栩栩如生的界面来指引用法。为了克服这些问题，提供更加高效、直观、便捷的交互体验，另一种新兴设计风格应运而生。

（三）扁平化界面

2013 年，某互联网巨头公司在产品的系统界面中应用了全新扁平化界面风格。清新的糖果色调与干净简约的视觉风格顿时让用户眼前一亮。扁平化风格就是去除拟物化风格中所有的立体与材质装饰效果，以点线面的形式表现可识别的视觉元素，色彩倾向于高饱和度、高明度的色调。扁平化界面去除了非功能性的视觉干扰，提高了用户的识别效率。

在适配性方面，扁平化元素可以以矢量格式呈现，前端开发效率较高，能够适配任何尺寸的屏幕且不失真。至此，扁平化成为主流的设计风格延续至今。

然而，扁平化风格的大量使用及其单调的表现让用户产生了审美疲劳。同时，界面层级的平面化易导致误操作，过于简单的界面传达情感的能力较弱等问题逐渐显现出来。很多设计师开始挖掘新的UI 设计风格，对拟物的重新思考成为突破口。

二、新拟态风格的突破

在扁平化风格发展到鼎盛时期，人们对扁平化越来越熟悉之后，出现了一种叫作新拟态（Neumorphism）的视觉风格。该风格起源于2019 年11 月5 日乌克兰设计师Alexande Plyuto 在设计网站Dribble 发布的一组手机银行界面设计作品。其UI 设计融合了拟物化的质感和扁平化的简约，清新的外观让人们眼前一亮并纷纷模仿，同时涌现出了大量概念设计作品。

虽然有拟物的参与，但新拟态风格削弱了材质的表现，把重点放在对真实光影的模仿，以此表现出从界面中挤出凸起或凹陷的部分。其背景使用纯色，不带任何纹理修饰，仅搭配光影就能让人感受到逼真的哑光塑料质感平面。新拟态风格的图形元素轮廓与扁平化相似，在简约的基础上多了些细节刻画，具有强表意性，能让用户与其认知体系联系在一起。光影塑造是新拟态风格的重点，需要充分运用内阴影、外阴影、内发光、外发光去打造层次感和立体感，如图1。新拟态风格有深色版和浅色版，在大面积深灰色或米白色基础上，通过饱和度高的亮色对重要元素进行强调。

新拟态风格给用户营造了一种简约、清新、微立体的视觉感受。轻质感的特征增强了界面与现实的联系，使用户产生亲切感，增添了扁平化缺少的情感因素。与众不同的视觉形象也增加了新鲜感。这在当下独树一帜的设计风格给设计者们带来的启发不局限于它具体的表现形式，更多的是对“物感” “微写实”设计的思考与探索。

三、轻拟物UI设计的兴起

新拟态风格在其诸多优势的情况下，也因可访问性、代码实现效率等问题没有成为当下主流的UI 设计风格。但新拟态风格给之后UI 设计风格的发展指引了方向，一类半现实主义的拟态设计——轻拟物UI 设计如雨后春笋般涌现。轻拟物UI 设计延续了新拟态风格的设计理念，以功能性为主导，对于物理质感做轻量化处理，重点仍然放在光影的塑造，视觉表现介于拟物化与扁平化之间。与此同时衍生出了多元质感的轻拟物UI 设计风格，包括但不限于新拟态、玻璃拟态、粘土拟态等。各互联网巨头开始在部分界面中采用轻拟物的UI 设计，印证了这一趋势，如图2。

图2 某产品备忘录UI风格对比（图片来源：iPad界面截图）

（一）轻拟物UI 的特征分析

1.图形

用户界面中的图形元素一般包括各种控件及图标。图形元素在界面中是一种视觉语言，向用户传递着应用的交互逻辑、功能信息，和状态。因此，轻拟物UI 的图形元素需要有极强的表意性，通过与用户熟悉的事物形象建立联系，使用户能够快速且准确理解图形指代的含义。

在控件图形方面，造型使用大量圆角来创造柔和与亲近的感受。图标的造型轮廓与扁平化一致，具有简约的特征，但也增加了少许细节。

2.色彩

在色彩方面，轻拟物UI 设计的组件与背景倾向于使用同类色，元素之间对比度较低，给人一种清透干净的感觉，避免使用纯黑或纯白，这样不利于后续光影的打造。图标和层级较高的元素则使用饱和度高、对比度大的色彩突出其重要性，同时营造活泼、时尚的氛围。作为轻拟物风格虽然有拟物的参与，但其仅保留部分的实物色彩特征，维持一定的抽象感。色彩具有传递情绪体验和树立产品形象作用，因此在创建配色方案时需考虑品牌调性和应用场景。

3.光影

光影的塑造是轻拟物UI 的核心视觉表现手法。它能够将平面化的图形转换成立体的效果。光源分为主光源和环境光。同一个应用里的界面其主光源照射方向与角度需一致，以符合现实逻辑。通常情况下，主光源从左上方向右下方以45 度角照射。环境光的色彩由UI 元素的背景颜色决定，会在元素的暗部体现出来。环境光的参与增加了界面的氛围感。因主光源和环境光的影响，元素表面会产生极为丰富的层次，分为高光、亮部、暗部、环境反光、投影。在塑造光影层次时应确保各区域过渡自然，色彩柔和。轻拟物UI 的光影效果不以高度现实还原为目的，而是注重柔和、精致。

4.肌理

肌理就是物体表面的纹理，用户结合自己的生活经验与认知，可以通过肌理感受到元素的物理质感。肌理可以模仿物质表面的纹理结构进行视觉表现，如木纹、布料、皮革、磨砂。肌理与光影共同作用能表达出UI 元素的粗糙程度、透光程度、软硬程度。单一物质感受即能形成一种独立的轻拟物UI 风格，如玻璃拟态风格，因此定义风格的核心元素的肌理表现基本为一种。

（二）轻拟物UI 的优势与局限分析

1.优势

轻拟物UI 具有较强的情感性，即能满足用户一定程度的情感需求，通过创造积极的情绪建立产品与用户之间的连结。轻拟物UI 通过复刻较柔和的现实光影效果，创造了熟悉感、场景感、舒适感，再结合用户的心理联想，可以带来轻松舒适的情感体验。它是满足了用户对于产品的外观视觉、功能性和易用性之后，进一步满足了更高层次的心理需求。

轻拟物UI 在色彩的选择上较淡雅，画面干净、整洁，仅在重要信息上采用高饱和、高亮度的色彩突出。因此在信息主次关系的表现上，轻拟物UI 有明确的引导性。3D 质感的按钮和图标，配上明确的动效反馈，能给用户真实的点击感和触发感，并引导用户做出正确的操作。

轻拟物UI 的独特性给用户带来了极大的新鲜感，缓解了用户对于扁平化界面的审美疲劳。只要设计者在恰当的场景去应用，并处理好识别性、可访问性等影响使用体验的因素，就会给界面带来整体视觉上的提升。局部使用轻拟物风格也能够在界面中起到画龙点睛的作用。在数字产品数量剧增，且同质化问题严重的情况下，轻拟物UI 能够让产品形成独特的品牌形象，提升品位、格局、个性化，在视觉效果上达到突破创新，从而打动消费者。

2.局限性

轻拟物UI 虽然给扁平化界面增添了不少光彩，但其拟物化的特征降低了信息的传递效率。柔和的光影过渡和较低的对比度导致其可访问性降低。视力较弱的人群难以辨别信息分区与层级。轻拟物UI 风格在界面当中更多是以装饰的功能存在，因此不适合大面积使用，否则会出现膨胀感、拥挤感。应该在适合的组件或图标中少量使用。如果过分强调质感而不注重界面易用性，将会造成负面效果，影响交互体验。

（三）轻拟物UI 的应用分析

基础的轻拟物UI 风格能在界面中创造立体感的图形元素，因此该风格较多应用于图标，或具有特殊功能的工具型按钮。而一般组件、面板则倾向于使用同样属于轻拟物风格类型的新拟态风格，或是扁平化风格。全轻拟物UI 信息层级的表现能力较弱，因此界面的层级结构宜控制在3个以下，页面信息量保持简约，采用高逻辑性布局。为了保持界面柔和的调性，元素形状都使用圆角。

基于以上的特征分析与应用分析，轻拟物UI 风格适用于功能性界面，功能点较明确的，例如工具类App，包括计算器、时钟、日历，以及智能物联网App，包括智能家居、汽车终端；也适用于展示类界面，如官网介绍页面、产品展示页面，目前流行以少量重点信息展示为主。这种控件不多的界面适合整个应用轻拟物风格，界面也不会显得拥挤，能表现出现代、科技、活力、时尚的视觉感受，与产品本身调性一致。其他App 可以在局部应用进行视觉强化，加强用户对特定区域的视觉感知。

轻拟物UI 风格能够帮助产品创造差异性，从众多同质化应用产品中脱颖而出。具体的应用方式可以分为三种。

一是以主题皮肤的方式设计整套UI供用户切换使用，体现用户的年轻、时尚，和个性。

二是结合品牌识别元素进行设计，例如在Logo、辅助图形、IP 形象等元素上使用轻拟物风格，并在UI 界面中充分应用这些元素。

三是放大情感性这一优势的影响，在需要带动用户情绪的页面加入一些有趣且互动性强的元素，例如缺省页、加载页、个人页等。以上三种设计思路能够充分发挥轻拟物UI 风格的优势，提升产品的差异性和好感度。

四、轻拟物UI设计的发展趋势

伴随着轻拟物UI 设计理念的盛行，未来将可能衍生出更多质感的拟态设计，并成为独立风格存在。新拟态、玻璃拟态、粘土拟态等皆为根据其拟态物质定义的风格。某种风格的独立使用有时无法最大化其优势，反而会适得其反。例如，新拟态风格凸起、凹陷的单一样式在界面中完全使用时带来的拥挤感和视觉疲劳证明这并不是一个很好的设计方式。因此，根据实际需要、视觉效果的综合考量，将多种风格融合使用更能够使UI达到惊艳的效果。风格融合应用是未来轻拟物UI 设计的发展趋势。

在VR、AR、MR 领域的应用中，轻拟物UI 设计风格具有较大潜力。因为它的微立体的效果看起来像是可触摸的、真实的。在未来，用户有较大可能性倾向于具有3D 感的、有深度感的UI 设计风格。轻拟物UI 设计可以做到这个效果，尽管是伪3D。当然，3D 感的塑造方式也可以是3D 建模，或者其他更多方式。

UI 设计是除了功能性之外让一个数字产品脱颖而出的最大因素。随着了解各种风格的诞生、融合、循环、迭代，我们能够最大程度设计出符合用户期望的UI。这就是研究和探索设计趋势的意义所在。