UI插画组件系统设计研究

互联网行业的高速发展给UI设计师带来巨大挑战。为了应对用户需求的激增和产品业务线的不断拓展,许多互联网品牌推出了UI插画组件系统,有效提升了团队的工作效率。然而,UI插画组件系统的广泛流行造成了界面视觉同质化的问题,最终导致了用户的审美疲劳。另一方面,现有的UI插画组件系统大多强调功能而忽视了情感表达。基于这一背景,文章将情感化设计理论与UI插画组件系统设计进行有机结合,着重分析了情感化设计的三层次理论,并在此基础上提出各层次视角下的设计思路。文章旨在探寻构建UI插画组件系统的新思路,为该域的研究者和从业者提供参考。

一、情感化理论概述

(资料图片仅供参考)

情感化理论是指用设计触发用户情绪反应以提升用户体验的设计理论。20世纪之初,简约主义的设计风格盛极一时。改风格强调产品的功能性和实用性,崇尚“少即是多”,在视觉上展现出极强的工业风。然而,随着物质生活的提升,用户开始更加注重心理与情感层面的寄托。在这一背景下,情感化设计理论应运而生。该理论强调用户的感性认知和心理感受,为产品带来了温度和“人情味”。如今,在情感化设计理论的引领下,互联网产品设计走向了以用户体验为中心的时代。情感化理论的核心部分是三层次理论：人类大脑活动可分为本能层、行为层以及反思层,这三个层次分别对应了不同的情绪反应,且三者之间相互作用、相互调节[1]。三层次理论用科学的方式对人类复杂的情绪反应进行梳理归类,为情感化设计提供了理论依据。

二、UI插画组件系统设计

UI插画组件系统是一套架构严谨、规则统一的视觉框架体系。该体系以原子设计理论（AtomicDesign）为基础,按照原子构成特征将UI插画拆解为不同层次的组件,实现了插画的模块化运作以及元素的统一化管理。UI插画组件系统的具体应用优势主要体现在模块化、系统化和平台化三个特性：首先,模块化的运作模式使得插画素材具有可复用性,能够有效避免界面中相同元素的重复生产,成倍地降低了产品视觉的修改和优化成本;其次,系统化的设计思维保证产品视觉在风格上维持统一,从而打造出具有辨识度的品牌形象,强化用户认知;第三,构建组件系统本质上是将原本单一的素材库拓展为综合性设计平台,实现产品团队全链路、跨职能的高效协作,用设计驱动品牌发展。

三、UI插画组件系统的情感化设计思路分析

文章基于对情感化三层次理论的研究提出了UI插画组件系统的设计思路,总体思路如图1所示。

（一）本能层设计思路

本能层根据感官刺激判断环境,帮助生物趋利避害。该层次的情绪反应由生物因素决定,遵从自然法则。由此可知,符合自然规律或人类基本认知规律的感官形式能够给用户带来本能层上的愉悦。例如,自然界中大多数生物拥有对称的生理结构,而非对称的形体通常代表着基因或生长缺陷,因此,用户会对具有对称结构的视觉形式抱有天生的好感。本能层对应组件系统中的最小颗粒度单位,即画面中的视觉元素,具体包括造型、形象、颜色和构图。视觉元素决定了UI插画的视觉表现,优秀的视觉表现能够引发用户的审美心理,激发用户对产品的使用兴趣。因此,在本能层应当对视觉元素制定规范,以达到较好的视觉效果。首先,造型设计应当风格统一、外形流畅、比例和谐,给用户留下良好的第一印象;其次,人物形象应当贴合用户审美,提高用的户好感度;第三,在颜色的应用上,尽量选用高明度、高纯度的色彩,打造鲜艳明亮的画面效果,同时色彩搭配上突出冷暖、明暗对比,提升视觉冲击力;第四,构图的布局形式应当贴合页面特点,而景别设置要聚焦于人物组件,突出画面中的主次关系。

（二）行为层设计思路

维持人类基础行为的部分被称为行为层。在这一层次中,大脑分析刺激信号,并对运动系统发出行动指令。行为层的情绪由行为的完成度和流畅度决定,当行为得以顺利完成,人们便会获得成就感,并随之产生喜悦、开心等正面情绪;反之,若行为受到阻碍,人们则会有挫败感,并随之产生困惑、生气等负面情绪。行为层对应产品的功能和操作,在该层次中需要为UI插画组件赋予功能性和可操作性,使其从单一的元素变为实用的组件。行为层的具体做法为：从角色设定、面部表情和肢体动态三个方面对本能层的人物元素进行延展,形成生动、活泼的系列化人物组件,满足实用需求。角色设计是指为人物组件增添身份、性别、性格等特征点,以适应多角色互动的业务场景,为了增强用户代入感,角色的具体设定应当与用户画像紧密结合;表情设计是情感在人物面部上的具象化表达,在设计时要选取具有代表性的情感指标;动态设计即对人物动作、行为的设计,应符合人体的结构特征。

（三）反思层设计思路

反思层是大脑进化的最高阶段,是人类独有的行为层次,涉及历史、文化、社会环境等多个领域,因此最为复杂和特殊。反思层的情感是经过大脑深层思考后产生的,具体表现为：当事物符合个人价值观或是能触发美好回忆时,就会在反思层引发积极情绪;反之,若事物违背个人价值观或是引起人的痛苦回忆时,会让人产生消极情绪。反思层的视角是综合性、多维度的,其情感反馈涉及多种环境因素而非独立存在,因此需要创建完整情境承载并引导用户情感[2]。在组件系统中,情境是对多个组件的合理搭配,最终以模块的形式呈现。在进行情境设计时可以采用逐层递进的发散思维,即从情感主题出发,按照从抽象到具象的顺序逐一确定情境中的事件、行为、实物等元素,做到表里呼应、情景交融。情感、事件、行为、实物共同构成了情境的意象库,四者紧密结合、相互促进,共同建立起插画与用户的情感纽带。

四、移动办公平台UI插画组件系统的情感化设计

（一）项目背景与设计目标

移动办公平台是数字化工作系统,其功能包括智能考勤、即时通讯、共享云盘,可以远程满足个人工作、团队协作、企业管理等多层次商务需求。自疫情爆发以来,移动办公平台需求急剧扩大,各大互联网巨头纷纷入驻移动办公赛道。然而,目前大部分的移动办公平台只注重功能的研发,忽视了对员工的关怀,导致用户产生抗拒心理。基于这一背景,文章展开设计实践,旨在为移动办公平台打造具有情感化的UI插画组件系统,优化用户体验。

（二）用户及其情感需求分析

移动办公平台目前主要应用于互联网企业。由于企业员工的更新速度快,员工整体呈现年轻化趋势,年龄约在20岁至35岁之间。在价值观上,由于目标群体受教育程度较高且获取信息的渠道多、视野开阔,大多坚持多元、包容、平等的价值取向;在消费态度上,目标群体的经济条件较好,且注重自身感受,愿意为高品质生活买单;在审美上,该群体深受泛娱乐化的影响,喜爱具有冲击力的视觉形式和以二次元为代表的“萌”系形象。为了明确用户的情感需求点,文章采用了访谈调研法,对5名互联网在职员工进行访谈。访谈对象分布于不同互联网企业,工龄在0.5年到3年之间,岗位包括程序员、设计师、HR和产品经理,使用的移动办公平台包括钉钉、企业微信以及企业自研产,具有代表性。本次实践的设计路径是,强化用户工作中的正面情感,引导并转化负面情感,因此,访谈重点聚焦用户在工作时的情绪状态。从访谈中可知,用户工作中的正面情绪主要有：工作取得成果而收获的自豪感;工作中有同事陪伴而产生愉悦心情。工作中产生的负面情绪有：重复性工作消磨积极性,引起厌烦;工作强度、难度大,形成焦虑情绪。根据访谈结果,可将用户的情感需求总结为以下四点：（1）“惊喜”,用惊喜感打破日常工作的沉闷,增强用户对工作的积极性;（2）“陪伴”,以朋友或同事的视角关怀用户,增强用户的愉悦心情;（3）“见证”,对用户的工作成果进行可视化展示,强化用户的自豪心情;（4）“安慰”,在用户遇到困难时给予安慰,化解用户的焦虑情绪。

（三）本能层情感化设计：视觉规范

1.造型规范。第一,为了确保风格统一,本次实践统一采用扁平设计风格,在外形轮廓上凸显出强烈的几何特征,主要使用圆形和矩形等面性几何元素概括物体。内部用线条简要勾勒结构即可,舍弃细节和装饰,突出用整体感。第二,根据格式塔心理学可知,人类对事物的认知是整体大于局部的,因此造型设计应当按照从整体到局部的顺序,即先用几何图形塑造轮廓再往内细化,保证外观造型的完整流畅,以免细节堆砌导致视觉零散。第三,在比例设计上要以真实比例为基础,以免造成用户的认知偏差。文章以人物组件为例,对造型规范的推演进行说明,具体设计过程如图2所示。首先,分析当前职场上的流行穿搭,可见,当前流行中性风格、宽松舒适的服装,在廓形上可以提炼为“H形”。该廓形削弱了肩、腰、臀之间的差异,化曲为直,外形轮廓更流畅,为人体赋予包容性和延展性,贴合用户追求平等、包容的价值取向。由于“H形”廓形在几何图形中对应矩形,接下来用矩形概括出基本人体,头部则用正圆形表示。第三步,继续用圆形和矩形的组合概括四肢,注意倒角处的圆润感。最后,明确人体部分比例关系。本次实践采用接近模特身材的比例设定,并提高腰线,拉长腿部,迎合用户对身材的追求。比例具体数值为：以头部为基本单位a,身高为11a,腿部高度为7a,躯干与腿部长度比为0.57,接近黄金比例;手臂宽度0.9a,长度4.5a,肩宽2.5a,大腿宽1.25a。2.人物形象规范。文章分析了当前目标群体中普遍流行的IP形象：泡泡玛特、米菲兔和熊本熊,提取其设计的成功之处应用于本次实践。泡泡玛特的五官集中,眼睛较大,面部体现出明显的幼态特征,突显“萌”的气质;米菲兔的视觉特征在于“豆豆眼”和“x”形嘴,简洁可爱;熊本熊的优势在其黑色和红色的颜色对比和憨态可掬的表情。本次实践的人物形象在扁平风格的基础上结合了三者的优点：首先,五官位置偏下且相对集中,突出孩子般可爱稚气的面部特征;第二,眼睛使用了“豆豆眼”,在简洁的同时突显“呆萌”的气质;第三,脸部突出腮红,丰富脸部色彩,并突显情感属性。人物基本形象如图3所示。3.颜色规范。本次实践中的颜色参考了AntDesign基础色板。该色板利用先进技术捕捉了自然中不同色彩在自然光下的变化规律,形成了鲜艳明亮、富有自然美感的主色,并借助美术素描思路对主色进行深色和浅色的延伸,构成了完整的色系。色彩心理学强调,颜色对人的心理和生理有明显的影响作用,例如,暖色调让人联想到温暖,对人的心理有积极影响。因此,本次实践选择了AntDesign色板中的三个暖色色相,如薄暮红、日暮橙、金盏花黄;此外,为了增强视觉张力,还选用了拂晓蓝和青柠绿两个冷色调以形成色相上的冷暖对比。本次实践的基础颜色规范如表1所示。4.构图规范。构图包括平面上的布局设计和纵深上的景别设计,需要与其载体形式相匹配。本次实践选择弹窗载体进行讨论。弹窗属于模态视图,出现时会打断用户操作以确保信息的有效传达。该触发机制具有强烈的阻断感,会大大降低用户体验,因此需要融入插画以缓和用户的抵触情绪。布局是指将视觉元素在平面上进行合理排布。如图4.a所示,本次实践在布局上使用了“三分法”：首先将弹窗整体高度分为三等分,将文案放于顶部的1/3面积内,余下2/3面积用于容纳插画;接下来再次对插画部分进行横向和竖向的三等分,得到4个等分线汇集的焦点,用于定位画面焦点。利用“三分法”布局的画面元素均衡、紧凑有力,适用于扁平插画一类平行焦点的画面。景别是指主体物在画面中呈现范围的区别。其中,远景和全景可以呈现完整人体和较多景物,但是人物脸部较小难以透传情感,因此不适合情感化设计;特写则聚焦于人物肩部以上,虽然能够放大表情,但是画面缺少动作和场景描写,过于单一。可见,本次实践应当选择中景和近景的景别设置（如图4.b）：中景包含人物膝盖以上的部分,适用于多个人物互动的场景;近景聚焦于人物胸部以上,适用于描绘单个人物。

（四）行为层情感化设计：延展设计

1.角色延展设计。为了适应职场中多角色互动的场景,在行为层需要对人物进行角色延展。角色设定从用户画像出发,将身份、性别、性格等特征融入细节设计中,增强用户的代入感。本次实践以职场中的岗位类别作为角色的划分依据,如图5所示,具体包括以下四个角色：（1）技术员：负责项目技术实现的员工,如程序员。该角色精通计算机技术,热爱科技,性格直率、不善言辞。因此,选用象征沉稳、冷静、具有科技感的蓝色作为其代表色。服饰款式简单,装饰较少,符合角色不善打扮的个性,在脸部特别增添了眼镜作为视觉特征。（2）团队维护：服务管理企业团队的员工,如人力资源师和行政服务人员。该角色代表企业形象,因此在服装上选择了相对正式的职业套装,色彩上选择温暖的黄色。（3）策划者：负责项目的发起和策划,如产品经理、项目策划。该角色乐于表现、思维活跃,因此在服装款式上选择了活泼的卫衣和中裤,在色彩上使用具有生命力的绿色。（4）设计师：负责项目的创意及视觉部分,如插画师、平面设计师。该角色设计细节最为丰富,如服饰上使用了具有冲击力的撞色花纹、发型具有层次感,这些细节突出了角色具有较高审美力和创造力。2.表情延展设计。表情是情感在人物面部的具象化呈现,在情感化设计中具有重要意义。为了确保表情的有效性和代表性,本次实践查阅了代尔夫特大学情感研究实验室提出的人类61个基本情感指标,该情感指标有大量的研究样本支撑,可信度较高。接下来,根据调研部分提炼的情感需求,文章从61个情感指标中挑选出相关度最高的6个情感：惊喜、欢快、活力、愉悦、自豪、满意、失望、焦虑。最后,用五官的细微变化刻画出这6种情感,具体设计如图6所示。例如,惊喜表情中,眉毛上扬,嘴巴张大,体现出惊讶,而同时嘴角上扬表现喜悦。3.动态延展设计。为了保证人物动态的方便和协调,本次实践学习了动画制作中的“动作骨骼”技术。利用这一方法,动态变化信息得以从人物主体中抽离,单独记录于“动作骨骼”上,降低了动态设计的难度,并且实现了角色之间的动作共享。如图7所示,将人物造型关节处的圆心相连即可获得动作骨骼,将四肢绕节点旋转、移动可快速设计出目标动作。

（五）反思层情感化设计：情境设计

反思层的情境设计模型如图8.a所示。该模型的中心层即为调研部分所提出的情感需求,即“惊喜”“陪伴”“见证”和“安慰”。第二层是触发这些情感需求的具体事件,例如生日派对、入职仪式、入职纪念日都是对用户有特殊意义的时间点,在这些时间点上设置提醒可以使用户感到惊喜。第三层则对应情境中具有代表性的人物行为,如生日惊喜中的“送礼物”“开派对”或是“鼓掌庆贺”。第四层是在情景中增加实物,起到烘托氛围、配合人物行为以及丰富画面层次的作用。实物通常是场景中的典型事物,如生日场景中的生日蛋糕、蜡烛、礼花等。“惊喜”“陪伴”“见证”“安慰”的情境意象库分别如图8.b、8.c、8.d、8.e所示。

（六）应用效果展示

图9展示了利用该UI插画组件系统制作的实际应用效果。图9.a为“惊喜”情境中的“生日”场景,整体以红色为主色调,突出欢乐的氛围,人物动作为“鼓掌”和“送蛋糕”,实物以蛋糕为主,背景中衬托了飞出的礼花;图9.b是“陪伴”情境中的“上班签到”场景,色彩以象征活力的橙色为主,人物动作为“喝咖啡”,背景中用太阳和日历暗示时间;图9.c是“见证”情境中的“转正”场景,人物挥舞工牌突出转正这一信息,背景中充斥了象征荣誉的小红花,整体色调以黄色为主,暗示荣誉与成功;图9.d是“安慰”情境中的“提案失败”场景,主色调设置为蓝色,暗示角色低落的心情,通过人物间的亲密举动向用户传达关怀与鼓励的情感,力求转化用户的消极情绪。

结语

UI插画是帮助人们理解界面信息的视觉语言,在界面设计中占有重要地位。组件系统运用系统化、模块化、平台化的思维来运作UI插画,其组织逻辑清晰、结构层次分明;而情感化设计则是从感性的角度出发,聚焦于用户内心情感。构建情感化的UI插画组件系统本质上是将理性逻辑与感性认知相结合,共同促进UI界面设计的升级与发展。

参考文献

[1]沈海泳，陈紫璇.情感化理论在日用品设计中的应用分析——以NENDO事务所作品为例[J].设计，2021，34（21）：41-43.

[2]欧阳子薇，高娃.基于情感化设计的智能机器宠物设计研究[J].设计，2021，34（17）：145-148.

[3]欧阳子薇，高娃.大学生情绪导向型机器宠物设计调查研究[J].设计，2021，34（03）：18-21.

[4]靳文奎，何人可.可穿戴产品适体设计的知识传递规律研究[J].包装工程，2021，42（16）：127-131.

[5]简梦婕，李晶，刘灿灿.针对大学生拖延症的劝导式交互产品设计研究[J].设计，2019，32（19）：138-140.

[6]段佩姚，王琛，黄逸芸，许灿.以“梵几”为例的家具设计师品牌市场推广分析[J].艺术科技，2019，32（09）：64.

[7]靳丽颖，张荣强，金冬.基于TRIZ理论的智能化产品设计与研究[J].家具，2018，39（06）：80-84.

[8]段佩姚，王琛.商业场所的人性化设计——以星巴克为例分析[J].艺术科技，2019，32（08）：56.

[9]李晗京，陈欣然，李晶.基于可用性洗护瓶产品研究设计[J].设计，2021，34（13）：133-135.

[10]黄嘉璐，刘玮.基于老年人的智能室家居种植产品设计研究[J].艺术科技，2019，32（05）：217-218.

作者：缪冬昕 郁舒兰 单位：南京林业大学家居与工业设计学院