情感化手机端界面动态效果设计研究

邸小松，封姿羽

(长春工业大学 艺术设计学院， 吉林 长春 130000)

数字化科技发展到今天，伴随着以用户为中心的新型人文关怀时代的到来，用户体验与界面交互设计在产品生产与使用中，所涉及的视觉体验越来越受各行业的重视，在各类软件市场中形成了良性的竞争。数据截止到2020年9月末，国内APP总量为349万款，在同类型软件更迭换代如此频繁的环境中，竞争早已从单纯的功能与外观层面，上升到产品整体的体验性、交互性等更深层更细致的设计理念上。为了增强用户的依赖性和建立品牌形象上，需要设计师从各个方面掌握并响应用户的情感诉求，使用户的视觉和功能体验等方面得到满足，探索更加符合用户交互式情感体验的动态效果的设计方法。

一、何谓情感化设计

情感化设计是著名的心理学家唐纳德·诺曼(Donald Norman)在《设计心理学》系列丛书中提出的理论，经过与心理学教授安德鲁·奥托尼(Andrew Ortonyhe)和威廉·雷维尔(William Revelle)的共同研究，最终发现人脑活动分为三个层次：本能层、行为层、反思层。每个层次在整体机能中虽然有着不同的作用，但是无法真正的分割，这三个层次相互联系组建成一个强大的体系，互相影响又互相调节。人的情感是与生俱来的，我们无法忽视它的存在和影响力。情感影响着人脑解决问题时所做出的选择，也可以潜移默化地改变我们的认知系统理解世界。我们所接触的任何事物都需要经过大脑对其认知，以及情感上对其赋予的价值内涵。[1]另外，情感化三个层次的融合协作活动，在对产品设计的解析中扮演着重要角色。从时间顺序上来看，在接触到产品的同时，首先本能层就会对外观先做出视觉感受的反馈，其次，通过实际的操作体验，行为层会对其功能性和易用性等特征有了一定的认知和判断。最后，反思层的体验时间可能会比前两者时间久，从第一眼见到开始到使用很久之后，会通过联系记忆、经历等产生情感共鸣。饱含丰富情感的产品可以更顺利地融入人们的生活，能够让冰冷的数字化产品变得亲切有温度。

二、手机界面中动态效果设计情感化需求分析

用户界面动效是指用户与移动终端通过交互所呈现出的动态效果，可以说是界面设计与交互设计的交集。那么，动态效果与静态页面相比，动态效果的加入，最大的差异是可以让视觉感官更丰富，传递更多的信息内容，并且帮助用户理解与想象，让无限的内容不再局限于有限的屏幕中。以铁路订票APP12306为例，作为国家企业的代表，铁路客户服务面向的用户是全年龄段，定位为实用型工具软件，便捷与高效性便是首要设计原则。但是，其界面设计实际上存在着许多的问题。例如，在车票查询的页面上，下拉刷新并没有像首页那样有着“立即刷新”“正在刷新”“刷新完成”的文字提示，虽然在页面中央添加了载入的动画效果，可是设计者并没有考虑到现在5G时代的网速，已经快到瞬间即可加载完成。如果，刷新前后页面内容没有明显变化，用户在使用过程中就不能清楚地接收到刷新的过程及结束信息，反而造成用户的疑问和困扰。极端的追求速度快，也未必就是最佳的呈现方式，一闪而过的提示，并不能有效地反馈给用户信息，这样就不符合常规的逻辑和认知体验。动效设计应该是解决问题、提升体验的有效工具，并且存在明确的功能性和目的性。它一定是某个元素的功能载体，任何动效都应该具有内涵，从而有效地补充用户获取信息时理解能力的差距。在这里，不得不提到随处可见的弹窗广告，它们常以炫目的色彩、不断闪烁的动态特效来吸引用户的目光。利用动态效果使用户“被迫”注意到广告内容，然而这样粗浅的手段，很容易发现自己的本能层无意识的被利用，继而激发他人厌恶的情绪，效果适得其反。动效作为界面设计中的重要组成部分，确实存在着目的指引不明确、恶意吸引注意力和整体规划不协调等问题，这严重影响到产品的易用性与观赏情绪。关于传递的信息内容，用户不该花时间去学习如何操作，而应该辅助用户更顺利地尽快投入掌握，在保证用户执行任务效率的前提下，可以在和谐的氛围中，体验有温度的交互内容，使动画更加生动、更具趣味性，来正确引导用户的情绪。

三、手机界面中动态效果的情感化设计

(一)设计要素

人类本能地会被运动的物体吸引。[2]在界面设计中，可以充分利用这一点，用动态元素吸引视觉注意力，来达到引导用户视觉焦点的作用。人眼会首先捕捉到界面中的动态元素，其元素的运动方式、形态变化直接影响视觉感官反馈。在设计一套内外兼修的动效时，既要了解目标用户群的审美需求，也要找到交互体验中每个元素相对和谐的运动方式，就可以从形变、旋转、缩放、位移、路径、时间、速度、不透明度等众多要素进行综合搭配。

在界面交互中，可以利用动效展示让用户关注到某一模块的变化，让变化区域成为视觉焦点来有效传达信息，让用户更清晰地感知到各个元素之间的层级关联。为了用户能更好地读懂动效的含义，设计时就要考虑整体与局部的关系，在有限的视觉空间内建立运动秩序，分清主次内容，从而清楚表现运动过程中元素间的逻辑层级。

当点击底部标签栏的图标切换页面时，图标会有一系列的动效变化进行信息反馈。例如，当下流行的直播型软件“花椒直播”的Tab Bar设计，图标从默认状态的线性图标切换到激活状态的线性图标(如图1所示)，这个过程时间是550ms。太短的动效如果变化太快，可能会造成用户无法捕捉到这个运动变化，无法成功吸引到注意力，而由于速度太快所造成反复看不清的经历(例如前文提到的12306APP的下拉刷新功能)，会给用户带来阅读的压力，降低产品易用性；而动效时间过长，会让用户陷入焦虑的等待，消磨好奇心。那么效果比较简单的Tab Bar动效案例，例如站酷、爱奇艺的时间一般控制在450ms以内；而细节比较复杂的动画，例如花椒直播、土豆视频的时间也在600ms以内，既保障了效果流畅的同时，又不会造成学习负担。在过渡两种状态的动效设计中，通过观察图标自身特点，结合本身的独特细节加入动画，会比单纯统一的缩放、弹性、透明度的变化增加了识别性，有助于品牌视觉的建立。比如代表首页的图标中间有圆角三角形，在点击的瞬间会形变成点到线，运动路径绕图标一周，结束的位置紧接着从无到有地出现粉色的面性元素，放大后再回弹到正常大小，符合物理学的回弹效果，让整体的设计更加具有趣味性，与简单的线性路径缩放相比，也更有视觉张力。这样调整运动曲线，可以避免单一的线性变化速度，致使物体的运动看起来机械呆板。在点击后变化的图标周围，背景还有一层透明度不高的灰色圆圈，这期间的效果如水波扩散放大直至消失，人眼完全可以捕捉到，补足了形式上的视觉反馈。其他几个底栏图标点击反馈的动效原理相同，并且做到了运动方式、空间与时间三方面的衔接与统一。由于每个图标的样式细节不同，所以可引导绕圈的路径轨迹也有所不同，从而有效地区分了各个不同模块。在整体与局部之间找到了平衡，既做到样式独特、风格统一，又为产品增添了秩序感，并满足了人们对产品个性化与趣味的需求，这样真正言之有物的动态效果，才能提升品牌认同感。

图1 花椒直播TabBar(图片来源：花椒直播手机版APP界面设计截图)

采用类似设计的还有当下比较流行、关注度比较高的哔哩哔哩APP。其在视频缓冲时加载的动画，无论是过去抖动的小电视，还是演变到今天循环的路径动画，其设计目的都是希望用户耐心等待，吸引用户的注意力，来模糊人们对等待时间的感知，使用户感受到的时间流逝快于真实等待的消耗时间。相比于缓冲加载动画，下拉刷新的实际使用则更为频繁，因为下拉的操作可以拥有更丰富的手势操控路径，可操作性的区域比点击响应更大，可以轻松地在屏幕的任何区域完成上下左右的滑动操作，在这里动态效果也有更广阔的设计空间。哔哩哔哩的下拉刷新是可以根据手势操作方向改变形态的半透明波纹，用力程度和拖拽幅度的不同，所反馈的形态效果也不同，通过变换速度与节奏，都可以控制显示效果，这样贴合生活的物理性质，会让用户在使用过程中产生舒适的愉悦感，减少违和，这样细腻的交互动效，一定程度上能增强科技感和品质感。

(二)设计形式

在提升界面交互设计中用户的感知体验，除了完善其功能性、增强易用性，动效原型的形式设计也尤为重要。使其既具备优良的外观审美，又能与其对应的功能设计和内容展示相辅相成。同时界面外观作为品牌形象、内容信息传递和理念表达的重要符号，在造型、色彩、布局等方面都应尽量简约大方，符合产品整体调性又能让人眼前一亮。

哔哩哔哩APP的主要用户群体是年轻人，图标和界面主要以粉色和白色为主色调。进入软件的登录界面，点击账号输入时，页面上方的品牌IP形象2233娘是睁大眼睛可爱期待地望着你；而在点击下方密码输入时，2233娘的表情会瞬间变成双手捂住眼睛的形象，细微动作却传递出希望用户放心使用的保证与安抚的信息。从本能层来看，这样的交互设计，品牌IP漫画形象动作可爱调皮，蓝色头发、时尚的穿搭造型，都符合年轻人的审美喜好。最难得的设计是在反思层，不仅使用户加深了对品牌IP形象的记忆，增强了产品整体感，起到了强调突出洗脑的效果；更是在信息安全隐患频频曝光的高科技时代，对用户不安的心进行安抚，用可爱的方式作出保护的承诺，使用户对品牌产生认同感和增加信任度。让形式不拘泥于外观，更赋予了深刻的内涵。

另外，哔哩哔哩投币功能在点击之后，也会出现Q版造型的22娘，上划或点击22娘，会挑起碰到头顶的方块进行投币(如图2所示)，这个动作和音效，会使用户回忆起超级马里奥这个游戏吃金币的场景，对大多数用户来说，这个游戏是童年的回忆，联想起来是轻松愉悦的，情感反映的是个人的体验、联想和记忆。通过形式上的适当提取运用，用户可以在使用的同时，将过去的情感带入其中，可以说，在反馈层的精巧设计为产品注入了灵魂。

图2 哔哩哔哩弹幕网投币功能图(图片来源：哔哩哔哩视频号博主——popo的动态森林)

(三)交互体验

2020年初，在新冠肺炎疫情席卷全国、日本乐队RADWIMPS为身处抗疫中的人们创作了一首歌曲《Light The Light》，在网易云音乐上架并发起了光源行动。这首歌的播放界面有一个特殊彩蛋(如图3)。其顶部导航栏的右侧有一个图标按钮，默认状态是写着歌名缩写的白色圆圈，外侧是动态的两个细圆环通过缩放和不透明度的改变，模拟水滴落扩散至消失的效果。当音乐播放时点击图标，圆圈的颜色会变成暖黄色并散发着光晕，如圆月般柔和明亮，有无数个向外运动的光斑，宛若星空。在点击图标发生动态效果变化之后，手机后侧的闪光灯会随着音乐的节奏闪烁，每一次的灯光闪烁都照亮了身处黑暗的我们，这一系列的交互设计，由本能层到反思层传递着一个信念——光终将驱散黑暗。一个并不复杂、没有过多技巧的动效，却做到了通过简单交互操作传递出了最震撼的内容，无限的感动与希望触动着观看者的情感。

图3 网易云音乐《Light The Light》歌曲界面(图片来源：网易云音乐手机版APP歌曲播放界面截图)

四、结语

用户对产品的预期中，情感内涵和品牌精神价值的重视度逐渐占据重要地位。对于界面设计的需求也更加全面细致。在满足功能性与实用性的需求后，交互体验与情感价值逐渐成为设计重点，有温度的交互设计，往往是与用户情感共鸣的桥梁。产品终归是服务于人的，设计时要站在用户体验的角度上，揣摩其情感体验、审美喜好，研究用户行为习惯和生活经历，这样的设计更能抓住用户的需求痛点，所表达传递的信息也能被更好的接受。