UI设计中的扁平化与拟物化视觉传达解析

1、    ui设计中的扁平化与拟物化视觉传达解析    孙骁莉 贺鹏摘 要：在当前的ui设计中，扁平化与拟物化是其最为常见的两种设计方式与设计风格，其各自拥有的优势特点也不尽相同。本文将通过简单说明ui设计以及扁平化与拟物化设计的基本内涵，结合具体ui设计案例，通过对比分析ui设计中的扁平化与拟物化，指明二者各自存在的优势与劣势，并思考未来ui设计的发展方向。关键词：ui设计;扁平化;拟物化0 引言通过解析ui设计中的扁平化与拟物化设计，一方面可以使得人们对ui设计当中的扁平化设计、拟物化设计予以深刻认知，准确掌握两者的联系与区别，另一方面也可以在厘清扁平

2、化与拟物化内在关联性的基础上，为如何有效落实ui设计，进一步强化ui设计效果提供相应的理论参考与指导帮助。1 ui设计及其扁平化设计与拟物化设计的内涵分析1.1 ui设计ui为user interface的首字母缩写，意思是用户界面。ui设计简单来说就是用户界面设计，即通过将软件人机交互、操作逻辑以及界面美观等视作一个有机整体的设计形式。ui设计不仅旨在促使系统朝着个性化与内涵化的方向发展，同时也将提高系统操作便捷性，明确系统定位以及突出系统鲜明特征作为其主要设计目的。1在ui设计中，按照具体分工不同，其设计师可以细分成用户体验师、视觉设计师等等，其中用户体验师主要负责利用各种途径了解用户对于

3、体验以及界面的想法和需求，在此基础上有针对性地开展项目设计工作。而交互设计师则主要负责各项目交互环节，要求其研发出与用户体验相适宜的多种设计方案。而视觉设计师则主要负责完成对各种界面的视觉设计，结合具体品牌形象、用户需求等提高设计界面的交互性。1.2 扁平化设计在当前的ui设计中，扁平化设计指的就是一种通过以直观清晰、简洁明了的方式展现各种信息与事物，以有效避免产生大量认知障碍的设计形式。扁平化设计以摒弃所有装饰效果为设计核心，采用扁平化设计的图标中，图标各元素中均无任何添加修饰，如阴影、渐变或是羽化、斜面等特效修饰。譬如在ios 7的系统图标设计中便采用了典型的扁平化设计方式，所有图标均由各

4、种简单的、颜色明亮的纯色色块组合而成，搭配粗重醒目的字体，在省略一切不必要的界面元素如按钮、图标等基础上，以突出功能本身的使用，在有效增强信息直观性的同时使得界面与用户使用之间形成良好交互。不仅如此，在ios 7系统中的各类通信app设计中也运用了扁平化设计方式。其通过一律使用绿色与白色相互组合的色块，使得用户在长期交互中形成固定思维，可使其迅速联想到白色与绿色的组合在系统界面设计中代表通信，进而帮助用户快速锁定图标。1.3 拟物化设计ui设计中的拟物化设计主要指的是，在设计中对现有实体进行充分运用，使得即便无须在新设计中使用其原来功能，也可以有效保障新设计具有较高的亲和度。2例如，在ios拟

5、物化设计中，阅读软件ibook界面模仿真实的书面，其将书籍纸张作为整体界面背景，细看时甚至可以清晰看出纸张的纹路。用户在翻上一页或下一页界面时，其还会模拟发出类似“唰唰”的真实翻书声，令整个体验过程极具趣味性与亲和性。由此可见，拟物化设计突出界面对实物材质、质感以及各种细节的真实模拟，在交互上以对现实中存在的各种操作形式进行模拟，使得拟物化设计具有丰富的感性化色彩交互形式，其学习成本相对较低，用户可凭借个人实际经验快速掌握具体操作方法。2 ui设计中的扁平化与拟物化对比分析2.1 空间占用对比分析在实用角度下，ui设计对其占用系统资源量的关注度逐渐提高。相比拟物化设计，ui设计中的扁平化设计，

6、所占用的系统资源量更小。其直接体现在ios 7系统的图标设计中，采用拟物化设计的系统短信图标，其占用的手机硬件空间在70kb左右。在对此类图标进行設计制作时，需要设计人员同时使用包括底色层等在内的若干图层，即设计人员需要在底色层上增加绘图图层，画出短信的对话框云朵，同时将包括描边、投影等在内的诸多特效加入图层使用中，从而有效完成图标设计。但在此过程中，大量使用各种图层与特效也在一定程度上增加了其占用的手机硬件空间。相比之下，在使用扁平化方式设计ios 7系统中的短信图标时，设计人员只需使用两个图层，在省略大部分其他图层特效下，使得图标设计所占用的空间大幅压缩，有助于加快系统自然运行速度，对延长

7、设备使用寿命也具有一定的积极作用。而通过对比ios 7系统中的返回键图标设计，采用扁平化设计与拟物化设计下所占用的手机硬件空间分别为40kb与32.6kb。因此，ui设计中的扁平化在占据手机内存方面更具优势，如果选择使用拟物化设计方式则极有可能在界面设计中出现占用过多系统内存，影响系统运行速度和用户体验等情况。2.2 互动体验对比分析ui设计中的拟物化设计具有更多的设计元素，在互动体验中相比扁平化设计，拟物化设计更加具有表现力。这主要是由于使用拟物化设计的过程中，人们可以直接在虚拟设备中，运用其实际生活中所使用的各种真实操作体验与思维逻辑，进而有助于降低用户使用难度。例如，在手机app的设计中

8、，无论是ios系统还是android系统，手机界面中的黄色便签图标均代表着备忘录软件，其正是通过在软件图标设计中将用户现实生活中使用的便笺纸这一元素放大，但其并非单纯意义上的简单拟物，而是通过以拟物为基础，加入简洁、明快的主题风格，因此ui设计中的拟物化设计具有更强的视觉冲击力与吸引力。尤其是在采用拟物化设计方式下所呈现的设计状态，与现实生活高度贴合，此种交互方式可有效简化用户认知过程，将丰富多样且充满人性化的感情透过ui设计传递给用户。与扁平化设计相比，虽然拟物化设计中所使用的图层、特效等相对较多，会在一定程度上占用一定量的系统资源，但其也因此比扁平化设计更加具有细腻的细节设计。2.3 视觉

9、效果对比分析从视觉效果的角度来看，ui设计中的扁平化设计比拟物化设计具有更强的视觉效果，在扁平化设计下的界面具有更高的美观持久度，其在视觉引导方面的优势也明显强于拟物化设计。例如，在photoshop的软件图标设计中，其最初设计版本为一只眼睛，后期变为一支羽毛，而现在该款软件图标为底深字浅的一种图标字母。随着用户越来越多，图标的简洁程度也越来越高。在扁平化设计下，图标摒弃以往所有的装饰效果，只采用深蓝色背景底搭配浅蓝色边框，将粗体窄长的“ps”字样放置在浅蓝色边框内的中心位置，使得用户可以清晰直观地了解软件类型及其具体应用功能。而在设计过程中，只采用简单的图形以及单色块，可以有效减少人体的视觉

10、疲劳，用清晰、简洁的图形突出主要元素，在有效引导用户视觉、视线的同时也大大增强设计的干练、一目了然之感。同样，在移动终端ui设计中运用扁平化设计相比使用拟物化设计，可以更加精准、有效地为用户提供相关的重要信息。这主要是由于扁平化设计的运用下能够使得移动应用各功能模块实现扁平化，进而有效突出其使用功能减少多余操作和信息的干扰。3譬如在我国许多城市地区的地铁查询系统界面设计中，使用不同的颜色表示对应的地铁线路。采用扁平化设计方式的地铁线路图中，能够清晰准确地将各条地铁线路信息准确传递给乘客。而在视频软件爱奇艺的分类界面设计中，同样也通过扁平化设计的方式，利用不同颜色的色块代表各界面功能，如电影和电

11、视剧部分分别使用棕黄色与蓝色色块，界面中的少儿和综艺娱乐部分则分别使用黄色与粉色色块。在利用色彩区分方式的基础上，在其空白位置处搭配使用相应的文字，从而在有效增强界面视觉引导的同时避免多余的线条、边框等设计元素增加视觉上的杂乱感。3 ui设计中扁平化与拟物化的发展趋势通过结合前文的分析研究，可知ui设计中，扁平化设计具有更强的视觉效果与占用系统资源少等优势。而拟物化设计因其具有更多的设计元素，加之用户可直接运用其现实生活中的操作经验及思维方式，因此在拟物化设计方式下，用户认知过程更短，设计体验交互感更加强烈。故而在现阶段的ui设计中，出现了以扁平化设计代替拟物化设计的趋势，但值得注意的是，虽然

12、拟物化设计在系统资源占用量、界面美观持久度等方面缺乏优势，但其同样具有一定的应用优势。因此本文认为，在ui设计中，完全使用扁平化设计代替拟物化设计的方式并不可取。设计人员还需要充分结合实际情况与具体设计需求，合理选择相应的ui设计方式，从而获得更为理想的设计效果。首先，在采用扁平化设计方式进行ui设计时，设计人员需要巧妙借助心理暗示的力量，在格式塔原理的指导下，避免用户在交互过程中产生诸多疑惑。例如，在按钮或文本框的设计过程中，设计人员可以适时将拟物化设计理念引入其中，即在按钮与文本框现有图层的基础上，为其适当增加阴影或下沉效果，使得用户可以更加清晰直观地明确按钮与文本框的位置及应用功能，当用

13、户在点击按键或文本框，与之产生交互时，利用适当的视觉动画转换的方式对用户给予及时反馈，使得用户能够立即了解其操作正确，提升用户的使用体验。其次，在以使用拟物化设计为主的方式进行ui设计的过程中，设计人员应当跳脱以往过度追求强化视觉效果的“怪圈”，坚定不移地坚持以内容为中心。通过對卡姆剃刀理论进行灵活运用，即将设计中多余的线条、边框等各种设计元素一并剔除，只使用用户认知领域内的交互实体。在此基础上，积极利用扁平化设计中的界面布局、字体使用等方式，如通过使用纯色块搭配简洁明了的文字重点突出主要元素，进而使得用户可以快速掌握图标含义的同时调用其实际生活经验，在短时间内掌握其具体操作方式。最后，在ui设计领域中，设计人员还需要充分发挥自身的想象力与创造力，发展“伪扁平化”的设计模式。即通过将扁平化与拟物化进行交互，实现ui设计的扁平化与虚拟化的有机融合，在有效发挥二者的优势作用下探寻更多极具创造性和新颖性的ui设计方式，以此有效防止设计雷同化，同时达到促进ui设计实现长效发展的根本目的。4 结语在ui设计中，扁平化与拟物化均是其至关重要的两种设计方式。二者均具有自身的优势与不足，因此在实际进行ui设计时，设计人员还需要充分结合具体设计对象与设