1、学研探索交互2023年2月 第36卷 第4期设计DESIGN134摘要：从情感化设计的角度出发,对UI插画组件系统进行研究和实践。文章主要运用理论分析法,重点分析了情感化理论的三个层次,提出了UI插画组件系统的情感化设计思路,并将分析结果应用于案例实践。为移动办公平台构建情感化UI插画组件系统。情感化的UI插画组件系统能够有效解决UI界面同质化问题,满足了用户的情感需求,从多个角度为产品赋能。关键词：UI设计 插画组件系统 情感化设计 视觉设计 用户体验中图分类号：TB472 文献标识码：A 文章编号：1003-0069（2023）04-0134-04Abstract：From the per
2、spective of emotional design,this paper studies and practices the design of UI illustration component system.This paper uses the theoretical analysis method mainly,focuses on the three levels of emotional influence theory,puts forward the emotional design idea of UI illustration component system,and
3、 applies the analysis results to case practice.Build an emotional UI illustration component system for mobile office platform.Emotional UI illustration component system can effectively solve the problem of UI interface homogeneity,meet the emotional needs of users,and empower products from multiple
4、angles.Keywords：UI design Illustration component system Emotional design Visual design User experience南京林业大学家居与工业设计学院 缪冬昕 郁舒兰基于情感化理论的 UI插画组件系统设计研究RESEARCH ON UI ILLUSTRATION COMPONENT SYSTEM DESIGN BASED ON EMOTIONAL CONCEPT引言互联网行业的高速发展给UI设计师带来巨大挑战。为了应对用户需求的激增和产品业务线的不断拓展,许多互联网品牌推出了UI插画组件系统,有效提升了团队的工
5、作效率。然而,UI插画组件系统的广泛流行造成了界面视觉同质化的问题,最终导致了用户的审美疲劳。另一方面,现有的UI插画组件系统大多强调功能而忽视了情感表达。基于这一背景,文章将情感化设计理论与UI插画组件系统设计进行有机结合,着重分析了情感化设计的三层次理论,并在此基础上提出各层次视角下的设计思路。文章旨在探寻构建UI插画组件系统的新思路,为该域的研究者和从业者提供参考。一、情感化理论概述情感化理论是指用设计触发用户情绪反应以提升用户体验的设计理论。20世纪之初,简约主义的设计风格盛极一时。改风格强调产品的功能性和实用性,崇尚“少即是多”,在视觉上展现出极强的工业风。然而,随着物质生活的提升,
6、用户开始更加注重心理与情感层面的寄托。在这一背景下,情感化设计理论应运而生。该理论强调用户的感性认知和心理感受,为产品带来了温度和“人情味”。如今,在情感化设计理论的引领下,互联网产品设计走向了以用户体验为中心的时代。情感化理论的核心部分是三层次理论：人类大脑活动可分为本能层、行为层以及反思层,这三个层次分别对应了不同的情绪反应,且三者之间相互作用、相互调节1。三层次理论用科学的方式对人类复杂的情绪反应进行梳理归类,为情感化设计提供了理论依据。二、UI插画组件系统设计UI插画组件系统是一套架构严谨、规则统一的视觉框架体系。该体系以原子设计理论（Atomic Design）为基础,按照原子构成特
7、征将UI插画拆解为不同层次的组件,实现了插画的模块化运作以及元素的统一化管理。UI插画组件系统的具体应用优势主要体现在模块化、系统化和平台化三个特性：首先,模块化的运作模式使得插画素材具有可复用性,能够有效避免界面中相同元素的重复生产,成倍地降低了产品视觉的修改和优化成本;其次,系统化的设计思维保证产品视觉在风格上维持统一,从而打造出具有辨识度的品牌形象,强化用户认知;第三,构建组件系统本质上是将原本单一的素材库拓展为综合性设计平台,实现产品团队全链路、跨职能的高效协作,用设计驱动品牌发展。三、UI插画组件系统的情感化设计思路分析文章基于对情感化三层次理论的研究提出了UI插画组件系统的设计思路
8、,总体思路如图1所示。（一）本能层设计思路本能层根据感官刺激判断环境,帮助生物趋利避害。该层次的情绪反应由生物因素决定,遵从自然法则。由此可知,符合自然规律或人类基本认知规律的感官形式能够给用户带来本能层上的愉悦。例如,自然界中大多数生物拥有对称的生理结构,而非对称的形体通常代表着基因或生长缺陷,因此,用户会对具有对称结构的视觉形式抱有天生的好感。图1 情感化设计思路DOI:10.20055/ki.1003-0069.000426学研探索交互设计DESIGN135本能层对应组件系统中的最小颗粒度单位,即画面中的视觉元素,具体包括造型、形象、颜色和构图。视觉元素决定了UI插画的视觉表现,优秀的视
9、觉表现能够引发用户的审美心理,激发用户对产品的使用兴趣。因此,在本能层应当对视觉元素制定规范,以达到较好的视觉效果。首先,造型设计应当风格统一、外形流畅、比例和谐,给用户留下良好的第一印象;其次,人物形象应当贴合用户审美,提高用的户好感度;第三,在颜色的应用上,尽量选用高明度、高纯度的色彩,打造鲜艳明亮的画面效果,同时色彩搭配上突出冷暖、明暗对比,提升视觉冲击力;第四,构图的布局形式应当贴合页面特点,而景别设置要聚焦于人物组件,突出画面中的主次关系。（二）行为层设计思路维持人类基础行为的部分被称为行为层。在这一层次中,大脑分析刺激信号,并对运动系统发出行动指令。行为层的情绪由行为的完成度和流畅
10、度决定,当行为得以顺利完成,人们便会获得成就感,并随之产生喜悦、开心等正面情绪;反之,若行为受到阻碍,人们则会有挫败感,并随之产生困惑、生气等负面情绪。行为层对应产品的功能和操作,在该层次中需要为UI插画组件赋予功能性和可操作性,使其从单一的元素变为实用的组件。行为层的具体做法为：从角色设定、面部表情和肢体动态三个方面对本能层的人物元素进行延展,形成生动、活泼的系列化人物组件,满足实用需求。角色设计是指为人物组件增添身份、性别、性格等特征点,以适应多角色互动的业务场景,为了增强用户代入感,角色的具体设定应当与用户画像紧密结合;表情设计是情感在人物面部上的具象化表达,在设计时要选取具有代表性的情
11、感指标;动态设计即对人物动作、行为的设计,应符合人体的结构特征。（三）反思层设计思路反思层是大脑进化的最高阶段,是人类独有的行为层次,涉及历史、文化、社会环境等多个领域,因此最为复杂和特殊。反思层的情感是经过大脑深层思考后产生的,具体表现为：当事物符合个人价值观或是能触发美好回忆时,就会在反思层引发积极情绪;反之,若事物违背个人价值观或是引起人的痛苦回忆时,会让人产生消极情绪。反思层的视角是综合性、多维度的,其情感反馈涉及多种环境因素而非独立存在,因此需要创建完整情境承载并引导用户情感2。在组件系统中,情境是对多个组件的合理搭配,最终以模块的形式呈现。在进行情境设计时可以采用逐层递进的发散思维
12、,即从情感主题出发,按照从抽象到具象的顺序逐一确定情境中的事件、行为、实物等元素,做到表里呼应、情景交融。情感、事件、行为、实物共同构成了情境的意象库,四者紧密结合、相互促进,共同建立起插画与用户的情感纽带。四、移动办公平台UI插画组件系统的情感化设计（一）项目背景与设计目标移动办公平台是数字化工作系统,其功能包括智能考勤、即时通讯、共享云盘,可以远程满足个人工作、团队协作、企业管理等多层次商务需求。自疫情爆发以来,移动办公平台需求急剧扩大,各大互联网巨头纷纷入驻移动办公赛道。然而,目前大部分的移动办公平台只注重功能的研发,忽视了对员工的关怀,导致用户产生抗拒心理。基于这一背景,文章展开设计实
13、践,旨在为移动办公平台打造具有情感化的UI插画组件系统,优化用户体验。（二）用户及其情感需求分析移动办公平台目前主要应用于互联网企业。由于企业员工的更新速度快,员工整体呈现年轻化趋势,年龄约在20岁至35岁之间。在价值观上,由于目标群体受教育程度较高且获取信息的渠道多、视野开阔,大多坚持多元、包容、平等的价值取向;在消费态度上,目标群体的经济条件较好,且注重自身感受,愿意为高品质生活买单;在审美上,该群体深受泛娱乐化的影响,喜爱具有冲击力的视觉形式和以二次元为代表的“萌”系形象。为了明确用户的情感需求点,文章采用了访谈调研法,对5名互联网在职员工进行访谈。访谈对象分布于不同互联网企业,工龄在0
14、.5年到3年之间,岗位包括程序员、设计师、HR和产品经理,使用的移动办公平台包括钉钉、企业微信以及企业自研产,具有代表性。本次实践的设计路径是,强化用户工作中的正面情感,引导并转化负面情感,因此,访谈重点聚焦用户在工作时的情绪状态。从访谈中可知,用户工作中的正面情绪主要有：工作取得成果而收获的自豪感;工作中有同事陪伴而产生愉悦心情。工作中产生的负面情绪有：重复性工作消磨积极性,引起厌烦;工作强度、难度大,形成焦虑情绪。根据访谈结果,可将用户的情感需求总结为以下四点：（1）“惊喜”,用惊喜感打破日常工作的沉闷,增强用户对工作的积极性;（2）“陪伴”,以朋友或同事的视角关怀用户,增强用户的愉悦心情
15、;（3）“见证”,对用户的工作成果进行可视化展示,强化用户的自豪心情;（4）“安慰”,在用户遇到困难时给予安慰,化解用户的焦虑情绪。（三）本能层情感化设计：视觉规范1.造型规范。第一,为了确保风格统一,本次实践统一采用扁平设计风格,在外形轮廓上凸显出强烈的几何特征,主要使用圆形和矩形等面性几何元素概括物体。内部用线条简要勾勒结构即可,舍弃细节和装饰,突出用整体感。第二,根据格式塔心理学可知,人类对事物的认知是整体大于局部的,因此造型设计应当按照从整体到局部的顺序,即先用几何图形塑造轮廓再往内细化,保证外观造型的完整流畅,以免细节堆砌导致视觉零散。第三,在比例设计上要以真实比例为基础,以免造成用
16、户的认知偏差。文章以人物组件为例,对造型规范的推演进行说明,具体设计过程如图2所示。首先,分析当前职场上的流行穿搭,可见,当前流行中性风格、宽松舒适的服装,在廓形上可以提炼为“H形”。该廓形削弱了肩、腰、臀之间的差异,化曲为直,外形轮廓更流畅,为人体赋予包容性和延展性,贴合用户追求平等、包容的价值取向。由于“H形”廓形在几何图形中对应矩形,接下来用矩形概括出基本人体,头部则用正圆形表示。第三步,继续用圆形和矩形的组合概括四肢,注意倒角处的圆润感。最后,明确人体部分比例关系。本次实践采用接近模特身材的比例设定,并提高腰线,拉长腿部,迎合用户对身材的追求。比例具体数值为：以头部为基本单位a,身高为11a,腿部高度为7a,躯干与腿部长度比为0.57,接近黄金比例;手臂宽度0.9a,长度4.5a,肩宽2.5a,大腿宽1.25a。2.人物形象规范。文章分析了当前目标群体中普遍流行的IP形象：泡泡玛特、米菲兔和熊本熊,提取其设计的成功之处应用于本次实践。泡泡玛特的五官集中,眼睛较大,面部体现出明显的幼态特图2 人物造型规范缪冬昕等：基于情感化理论的UI插画组件系统设计研究学研探索交互2023年2月
