插画在网页情感化设计中的研究与实践

摘要：随着消费需求的提高和日益激烈的市场竞争，人们不再满足简单的物质需求，而是朝着情感心理需求发展。在这种情况下，使产品易于使用的同时为用户带来良好的情感体验就成了产品成功的关键之一。而插画的特性非常适合作为网页情感化设计的要素，本文将分析插画在网页情感化设计中的作用与原则，并以“社团小镇”网站为例，介绍网站利用插画在情感化设计方面的设计实践。

关键词：情感化设计;社团;网页设计;插画

一、情感化设计

（一）本能层次的设计。决定用户本能层体验的是用户在使用产品过程中的视觉感受、触觉感受、听觉体验、嗅觉体验等感官体验，用户第一次使用产品最先感受到的就是本能层的体验，产品的配色、音效、排版、设计元素、质感、动画效果等都影响着界面的本能层体验。例如电商类APP主色一般都会使用明亮艳丽的暖色，如淘宝选用橙色；京东、天猫、拼多多、网易严选、小红书选用红色；闲鱼选用黄色。暖色给人一种温暖、热烈、活跃、兴奋的视觉感受，能够刺激人们的购物欲望。（二）行为层次的设计。如果说视觉是敲门砖，那么行为水平的设计就决定了用户是否愿意继续使用产品，行为水平的设计需要关注4个方面，（1）功能：产品是否满足了用户的需求（2）易懂性：产品是否能给予用户连续的反馈（3）可用性：产品的呈现模型是否与用户的心理模型相匹配（4）性能：产品是否能很好地完成要实现的功能。（三）反思层次设计。反思水平的设计与物品的意义有关，用户在塑造产品的同时产品也成了用户无声的代言人，代表着用户的形象。用户和产品之间的互动会影响用户的自我形象，满足感，记忆等，并形成对品牌的感知，影响着用户对品牌的忠诚度。但是，反思层受到环境、文化、身份，认同等因素的影响，相较于其他两个层次，它会相对较快地发生变化。

二、情感化设计的重要性

社会文明一直在进步，在这过程中人们对精神上的追求也越来越高，从而产生了人们对于各种事物的情感的需求，所以情感化设计在现在社会环境下至关重要。在产品设计时融入情感要素，产品就会着蕴含的丰富的情感，这样的产品才能更打动人心。使产品与用户有心灵与情感上的互动，建立起产品与用户之间的情感关系，从而让用户对产品产生情感上的依赖，让用户对产品短时间的喜爱和关注变为长期的喜爱。

三、插画在网页情感化设计中的作用

（一）具有冲击力的视觉效果。首先，插画具有多种多样的艺术风格与艺术表现手法，能带来多样、富有美感的视觉体验，能够很好地抓住用户的目光。其次，插画自由灵动，画家可以自由地将自己脑中的想象展现在插画中，利用插画这种灵活的特性还可以摆脱模板化呆板、冷漠的网格式布，创造更有新意的视觉体验。如外国设计团队MADWELL的网站首页（图1），画面中小孩的脑中飘出来许多思想的“碎片”，每一个都充满了奇思妙想，而导航栏与画面有机地融合在一起，打破了中规中矩的界面结构，将网页导航栏散布在插画中，再加上独具风格的插画很容易让观看者产生深刻的印象。（二）营造氛围、传递情感。随着时代的发展人们对精神上的追求越来越高，在网页设计时融入情感要素，才能创造出更符合人们需求，能打动人心的网站，而插画就善于营造氛围、传递情感。创作者可以通过对比、夸张、象征等多种丰富的艺术表现手法，渲染出具有艺术情趣的意境，并通过丰富的视觉语言表现出来，唤起人们的记忆、本能、想象，从而引起人们的情绪。且插画具有多种多样的设计风格，可以是时尚的、卡通的也可以是荒诞的，以满足不同群体的精神追求和视觉偏好。因此，插画可以在现在追求个性化的时代中达到与消费者心灵共鸣的效果，让用户对产品产生喜爱与认同，同时插画还可以向观看者传达网站的价值观，起到建立品牌形象的作用，是一种双赢的设计要素。（三）方便理解。文字是一种抽象的符号，人们要理解文字必须接受相关教育，在理解文字时还需要进行思考和阐述，而图像是具象的、直观的，是一种文盲也能读懂的天生的感官本能，利用图像网页可以更充分地展现信息，使用户的理解更为流畅。此外快节奏的现代生活导致人们的空余时间有限，文字阅读要求人们用较大的心力进行长时间连贯的思维，而通过阅读图形获得信息不仅更加的碎片化、轻松、快捷，所以在可以选择的情况下，人们都更倾向于选择以图像为主的表达方式，而且图像还可以添加动效、声音、交互，进一步的优化了信息传递的效果，而插画就是一种基本的图像表达方式。（四）具有文化属性。插画在不同的地域和不同的时代有不同的表现方式，如中国就产生了众多的艺术形式，如水墨画、剪纸、皮影等，它们是文图文化的结晶，是中国人的集体记忆。所以当具有文化属性的手绘插画出现在网页中时，其中所蕴含文化内涵将转化为网站的文化属性，如果消费者认同喜爱这种文化时，同样也会对网站产生认同与喜爱的情感。

四、插画在网页设计中的应用原则

（一）以用户为中心。一般的艺术作品中艺术家着重表现其个性和精神世界，而网页的插画创作具有目的性和制约性。具有目的性是因为这些应用在网页中的插画本身是为网站服务的，而网站的建立都有着自己的目的，将插画应用在网页设计中就是为了帮助网站达到自身的目的，而网站的目的往往又是指向顾客的，如电商网站的目的有吸引用户购物或让用户相信产品是可靠的，公益类网站的目的有引起观看者对某个社会现象的关注等。所以网页中插画的诉求对象是社会大众，又因为不同的群体在视觉风格偏好、情感需求等方面都有所不同，所以插画的风格一定要与根据目标群体的需求、喜好为导向来进行插画的创作，用观看者喜欢、能接受并且乐于接受的方式向观看者传递网站的情感、价值观。（二）整体性。保持插画与整个网页的视觉效果统一可以强化网站在用户心中的印象，同时整体统一的网页有规范，能让网站更加具有说服力和可靠的感觉，因此插画需要有统一的视觉语言，并且这种视觉语言要与网站的视觉风格保持一致。要让插画形成统一的视觉语言可以利用这些方法：明度的近似、饱和度的近似、使用的颜色的统一、文字样式的统一、传达的情感价值观的统一、绘画表现方式统一。如jazzfm一个关于爵士音乐的网站中的插画（如图2、3），从色彩上来看，网页中的插画使用的颜色都是高饱和度颜色，插画的颜色虽然丰富但是每幅插画都有的同样的黄色、蓝色、红色，这几个颜色将这些插画从视觉上串联起来。从表现方式来看，插画的质感与表现方式也是统一的，都是由色块组成，没有线条描边的矢量插画。从传递的情感来看，插画给人的感觉都是恶搞的、反叛的。（三）个性化。随着世界人民的生活水平逐渐提升，对生活消费的态度也发生了转变，人们有了追求差异化和个性化的心理诉求，大众化与个性化之图1MADWELL网站的首页图2网站jazzfm中的插画图3网站jazzfm中的插画间的矛盾越来越突显，所以个性化的插画才能更好地获得观看者的认同、引起与观看者的共鸣。同时个性化和差异化还可以使网站在观看者心中留下独特的印象，找到存在感，如果网站的视觉表现和其他同类产品差别不大，就会很容易会被用户遗忘，难达到从众多网站中脱颖而出的效果。当然差异化不是没有根据的寻求差异，而是以网站的目标以及目标群的审美为依据，在相同中寻找不同。（四）易用性。如果网站上有大量的插画、文字、动效等元素会对用户造成过度的刺激，争抢观看者的注意力，让用户无法高效舒适的阅读网站内容。在网页中特别是一个网页的每一屏中，需要注意插画使用不在多而在精，在将插画与网页融合的过程中要营造页面的主次关系和平衡和谐的视觉感受，做到简洁、精确、无可删减。

五、插画在网页情感化设计中的实践

（一）用户需求调研。“社团小镇”网站的使用角色主要分为三种：1.学校管理方：在校任职的老师和社团联合会，主要的工作有引导、管理、协调、服务、监督和考核全校的学生社团。2.社团管理方：社团主席团以及各个部门的部长副部长等，负责运营与管理自己所在的社团。3.普通用户：一般活动为在网站上寻找自己感兴趣的活动、交流互动。项目小组采用了用户访谈的形式分别对三类用户进行了调研，访谈的目标主要是了解用户的办公流程，以及用户在参与社团活动或管理社团事务时遇到的问题，以此来完善网站功能、发掘用户的需求（图4）以及痛点。基于以上调研结果项目小组对网站的功能进行了完善，图5是基于用户访谈完成的信息框架。（二）选取情感化关键词。社团小镇的主要功能有三方面：1.针对于社团的社团活动、招新管理功能2.针对于个人用户的社团活动查询、报名功能3.针对于校方的办公中心。社团活动作为丰富大学生日常生活的元素是偏向娱乐化，所以网站选用了愉悦、活力作为情感化关键词，向用户传递出社团活动与社团生活是充满欢乐、充满活力的氛围。“社团小镇”网站通过“我的社团”功能将每个社团的用户聚集了起来，网站希望传递出社团是一个温暖的大家庭的氛围因此选用了温暖作为第三情感化关键词。最终选取了活力、温暖、愉悦三个关键次作为情感化关键词后，网站进行情感化设计将以这些关键词为导向。（三）插画的设计。1.本能层。“社团小镇”网站是围绕大学社团而建立的，主要使用人群是大学生。针对这些特点网站的视觉设计希望传达出一种充满活力与自由的视觉感受，在迎合年轻人审美的同时也营造出社团中充满活力氛围。因此界面的主色选用了水蓝色，配合上网页留白处大量的白色，可以营造出一种阳光、明快、年轻清新的氛围，并使用了洋红、玉米色、苹果绿、琉璃绿作为点缀穿插在插画中。2.行为层。在文字信息较多的页面，插画位置一般放在网页的头部保证网页的信息阅读不被干扰，如图6社团动态页面背景的头部加入了小镇风景的插画，插画中景色横穿整个网页好像还没有展现出全貌，这样能让网页的空间好像变得更加开阔，地面则与下方背景色彩用一种颜色，从而产生一种空间的延伸感让插画更自然的融入页面，网页的其他部分则保持简洁，主要使用白色或灰色。“社团小镇”网站的通过对页面加入插画的方式向用户展示了一个虚拟的小镇，虚拟小镇以南宋风格建筑为主，网站的“首页”（图7）的景色会随着现实世界中时间的变化而变化，网站首页的景色会产生由凌晨到白天到黄昏再到黑夜的变化，通过页面的变化营造一种真实小镇的场景将用户代入小镇的情境中。每次进入或刷新“社团小镇”首页时，首页里的人物都会变化好像他们在不停地走动，在不同的节日或发生大事件时小镇的人们形象也会更换，比如国庆节时小人们会拿上国旗，让小镇的形象更加的生动，也让网站更加充满趣味与惊喜。3.反思层。网站利用各页面的插画构成了一个小镇的全貌，网站的“首页”（图7）是社团小镇的大门，首页展示的场景是社团小镇的日常生活场景，街道上人们在运动、摄影、聊天，而建筑里各个社团正在进行活动。社团动态（图6）则展示了小镇的远景，“所有社团”页面（图8）展示的是俯瞰下的社团小镇，小镇在湖中的岛上，岛上排列着建筑，每个建筑就是一个社团，用户每加入一个社团，则进入相应的“社团小镇”的一个家庭（社团），由“家”（社团）组成整个“社团小镇”（学校），在这个虚拟社区中用户进入自己的社团就是进入了属于自己的一个家，让用户联想到家的温暖。结语从用户的层面来看，在物质生活日益丰富的今天，用户越来越看重情感上的体验，不再满足于与冰冷的机械进行互动，而是更希望在使用产品时能够获得情感上的满足。从产品的角度来看，情感化设计能增加用户黏性，形成良好的品牌形象，促进产品的自传播，还可以提高用户对产品的容忍度。在商业的层面来看，随着产品的发展，同类产品的基础功能大致都相同，而情感化设计就成了形成产品差异化的一个突破口。而插画善于营造氛围、传递情感、具有视觉冲击力等特点非常适合进行情感化的设计，同时还可以弥补人文精神的欠缺，丰富人们的精神世界。

参考文献

[1]（美）唐纳德·A·诺曼，设计心理学3：情感化设计[M].北京：中信出版社，2015.

[2]丁怡伟，李健，基于场景化设计思维的交互设计研究[J].设计，2019（08）：128-129.

[3]楚孔闯，认知心理学下的移动端产品中反馈设计的情感化研究[D].北京：北京交通大学，2017：35-40.

[4]郭彦彤，王佳，游戏化思维在包装设计中的可实施性研究[J].设计，2019（08）：112-114.

[5]李曼，插画在网页界面设计中的应用价值研究[D].浙江：浙江理工大学，2016：18-22.

[6]周吉，商业插画在APP用户界面设计中的应用研究[D].浙江：浙江农林大学，2018：15-19.

作者:潘卓 章晨利 汤程心 单位:杭州电子科技大学数字媒体与艺术设计学院