刘学 李萌

摘要：研究情感化设计的分析方法，探索该方法在加载页面设计中的应用。只有抓住用户在互联网产品体验中的痛点并寻求方法进行解决，才能为用户创造更好的体验感。从情感化设计出发，探索情感化三个水平层次对用户的影响，通过对一些优质的加载页面设计细节的总结，得出加载页面设计中所需注意的要点。基于用户情感体验的三个阶段，梳理得出页面设计可遵循的设计原则。合理运用情感化设计方法，可规避设计中可能出现的问题，同时激发设计师在创作中的灵感，为加载页面的设计提供参考。

关键词：情感化设计 加载页面 用户体验 互动设计 设计方法

中图分类号：TB47

文献标识码：A

文章编号：1003-0069 （2020） 07-0030-03

引言

在互联网技术高速发展的时代，大众享受着越来越快的网络速度，加之网络提速普及而频繁，人们通常对于网页或是APP中的加载过程几乎无感。但当软件需要加载大量的内容时，用户就需要等待頁面完成加载，而不完善的设计可能导致用户直接退出。互联网产品在满足功能性需求的同时，也亟待重视用户的感性需求，因此用户体验设计越来越注重细节，向着情感化和人性化方面发展。目前的加载页面还存在着一些设计痛点，导致等待中的用户产生焦灼心理，因而降低了对产品交互的满意度。本文通过对加载页面情感层次的分析研究，归纳出加载页面设计中可参考的设计原则，以提供设计参考。

一、加载页面概述

1993年的《计算机—一人机界面百分比进度指标的重要性》—文中就提到“如果计算机无法提供快速响应，则应该以百分比的形式向用户提供持续反馈”。在用户对互联网产品进行操作时，产品需要为用提供操作反馈，并及时展示此时自身的运作状态，以使用户清晰地了解自己处于哪一阶段、所执行的操作会获得哪种结果，获得对下一步操作的引导。

加载页面也称为Loading页面，发挥着反馈用户操作信息的作用。若前后页面之间要进行切换，则加载页面可提示用户系统需要一定时间完成加载过程。在系统处理页面转换时，用户此前的操作过程和注意力会被打断，而加载页面则可利用各类视觉形式缓解用户在等待时的焦虑情绪，实现友好的界面交互。

自Web1.0开始，几乎每一个网站都包含了加载页，到2007年左右，用户就可以看到当页面处于loading状态时一些小型国标闪烁于其中，而这些效果通常使用Flash、Fireworks-类的软件制作完成。到了2010年，随着CSS3的快速发展，使用CS53以及Photoshop软件制作加载动画流行起来，使之变得更加普及。设计的风格不断发生着变化，当设计师不再满足于简单的小图标和进度条样式时，加载页面的风格也开始进化，2015年左右时网络上已经形成了良好的共享氛围，许多免费设计教程、插件、项目的推广使越来越多的设计者关注起加载页面的设计来，并且随着之后设计方法和趋势的更替而变化着。除了视觉表达之外，向用户提供有效的反馈，打造良好的用户体验也是恒久的准则，这也是设计者们研究和探索着的。

二、加载页面的设计分类

由于不同产品的属性不同，因此在加载状态下所处的流程、加载的数据内容和需要等待的时间也是不同的。加载页面的基本功能是提醒用户数据正在加载，为了强化用户的体验，还可在页面中提供加载内容、加载进度、等待时常等信息，让用户心中有数，保持对产品的掌控感。加载页面的形式多样，以视觉表现形式为主，可从文字和图形两个方面来归纳。

（一）文字类：在互联网产品中，文字是阐述产品内容的基础工具，也是页面设计的基础单位，能够直观、准确地传递信息，充分表达设计思想。文字层面的设计包含文字的字号、字体、色彩等元素，在页面排版中有时还会辅以线条，底图和小型图标共同构建信息。加载页面的文字信息通常以显示“正在加载”之类表达网页状态的提示为主，文字大小、位置视具体情况而定。

（二）图形类：图形在互联网产品的页面中承担着辅导文字、强化理解和增加可读性等任务，相较文字而言，图形更富活力。加载页面中所使用的图形又包含了不同类别，如简洁图标、插画、矢量动效图形等，使用图形既可辅佐文字表达，丰富视觉效果，还可单独使用，展现多元化的设计风格，提升页面的质感。

（三）其他感官类：文字与图形均属视觉类表现方式，是最常用的提示工具。但也有一些互联网产品在其他感官上进行了尝试。如用于下载文件的迅雷软件，在加载完成时会发出“叮”的声音，提示人们查看结果;一些游戏在加载页面结束时，会将信号传送到游戏手柄中，以手柄的震动做出提示。随着技术的发展，多感官的页面交互将更普遍地应用到设计中来。

三、加载页面的情感化设计

认知心理学家唐纳德·诺曼（Donald Norman）提出产品的情感化设计理念。情感化设计即满足人们对产品的内在精神需求，它能够赋予产品以性格，充分考虑用户在使用过程中可能会出现的痛点，使用户在使用产品的过程中获得积极的体验，强化用户和产品的联系，从感性的角度优化产品以获得用户的认可与黏性，同时也是设计师通过产品传达创意思维与产品情感的方式。唐纳德·诺曼在《情感化设计》一书中，从心理学角度提出用三种水平层次来对产品进行评价：本能水平、行为水平和反思水平，三种水平又对应着本能、互动和反思三个设计阶段，下面从这三个阶段对加载页面的设计进行分析。

（一）本能阶段：对于用户而言，设计发挥作用的第一步，就是形成对产品的初步印象。产品看上去如何，听上去如何，这些感官刺激即用户的初次情感反应。如果用户没有对加载页面产生良好的第一印象，那便是感官刺激出了问题。一些低成本的加载页面设计往往过于简单，或使用了与产品调性不合的视觉元素，令用户产生疲态。加载页面是完整产品中的一个小环节，虽然并不属于产品的重要功能页，但其色彩、样式等设计，都反映着产品的性格。加载页面的本能阶段设计，就是要让用户能够对页面的视觉元素产生良好的情感反应。

在本能阶段，文字和图形是人们在寻找产品提示时的首要注意对象之一，文字的大小、数量、位置在用户理解内容之前就发挥了视觉引导作用。在没有图形甚至是国标的情况下，文字的内容也直接影响着用户的情感体验，只有站在等待者的角度进行文案设计，才能够顺利地减轻用户地认知负载。

合适的文字属性能够满足用户的审美需求，由于加载页面的文字量较少，文字本身不需要进行层级划分，但文字和当页其他原本的内容就要考虑层次性。如图1中第一个实例，加载的文字信息所处的位置是标题栏，这和用户为了刷新页面的下滑行为指令是一致的，且不与该页面的其他信息冲突。而当页面进行跳转时，页面可呈现空白而在中间位置放置加载文字信息，在醒目的同时也使页面的视觉达到了平衡。此外，恰当的语调能够塑造亲和的体验氛围。某些网页或是APP在加载数据时会用到“正在拼命加载中”或是“感谢您的耐心”这类字眼，仿佛用户面对的是一个有着感情的页面，因此会萌生出理解和包容。

在用户理解图形前，色彩又占据了视觉体验的第一位。色彩是人们对进入眼中的事物首要察觉要素，不同的色相、饱和度、明度会使人们产生不一样的情感体验。如暖色调使人感到温暖、热情，但过于鲜艳的色彩可能使用户无形中产生焦虑;冷色调使人感到冷静、沉稳，而过之又会使人沉闷，没有生趣。搭配适当的色彩，不仅能够吸引用户的注意，还可以唤醒人们积极的情绪。此外，色彩的使用也要对应产品本身的主题色，维护其整体感。

加载页面最常用的视觉元素就是国标，形式简明的图标不易与页面中其他要素发生视觉冲突。目前较为常见简洁国标有环状与条状国标，如图2所示。由于多种版本的运用和传播，类似花形的环状国标在用户心中形成了约定俗成的“加载”含义，国标的明度变化或是大小的变化即可反映出加载状态，且因其空间占用率低，便于根据实际情况进行摆放。同样运用较广的条状国标具有可读性，用户可通过读条的数据了解加载进程及加载所需时间，保证了产品的可控性。在本能阶段，优秀的设计使用户无需思考即可了解自己所处的状态，同时通过对页面细节的把控，为用户留下良好的第一印象。

（二）互动阶段：“互动”一词在中文释义中本指人和人之间的作用，在技术发展之后，“互动”既可包含行动间的交互，也包含了精神层面的沟通。互动是交互设计的核心，一般而言，互动设计能够提高产品的使用效率，关注用户的使用感受。

用户在等待信息加载时注意力均放在页面上，若页面表现是枯燥、苍白的，便极易使人产生厌烦心理。在互联网产品的实际开发中，要面对的可能是缓慢的网络，未经优化的代码，长时间的操作或过量的数据等待处理，因此，产品的运行速度可能没有用户预期的那么迅速。尽管早期用户可能会给予新产品第二次机会，但大多数人会选择直接退出页面。情感化的互动阶段就是在这种情况下，为产品创造留住用户的机会。

图形的使用为设计师提供了发挥创意的平台，多元化的创作也丰富了用户的视觉感受，将传统网络信息的单项线性传播方式转变成双向互动体验。因此要为用户建立积极的情感化互动，首先可从加载页面的图形设计着力。如图3所示，左侧的实例是对条状图标进行了改造，绘制了工作者和死神的形象。当死神随着进度条一步步逼近背对着他的人时，用户不禁想知道，当加载完成时，死神会和他的“獵物”发生什么样的反应，便可能耐心地、甚至怀有期待地等待下去。如图3右侧加载页面的插画便是被拟人化了的饮料杯，看它迈着小脚轻快地跑步，人们的注意力会被吸引到插画的细节部分，观察饮料杯的跑步姿势，心情也会随之变得轻快。有趣的设计可以唤醒人们的情感反应，在初步刺激用户的感官之后，获取其更久的视觉停留。

除插画之外，越来越多的加载页面尝试使用矢量动效图形来填补页面间的转接。如图4所示，加载页面的动态图形被设计为变化中的小球，球体的色彩和球与球之间的连线，构成了复杂的动效，然而似乎又有规律可循。不断变化的动态矢量图吸引着用户的兴趣，将他们从无趣的等待中吸引出来，转而研究起图形的运动规律。

由于加载页面不需要用户进行操控，所以就要采用其他方式使用户与页面发生互动。从简洁的图标到丰富的动效图形，加载页面视觉表达形式的变化与设计趋势的发展同步进行。互联网产品为动效设计提供了应用之地，使许多设计师着力研究新的展陈方式，不断发展的动效又创造了更有趣的视觉互动，助力打造越来越舒适的用户体验。可见，加载页面的设计还将不断推陈出新，而无论运用了哪种元素，互动阶段的情感化设计核心就是要尽可能抵消用户等待时产生的负面心理，保持产品体验中的流畅感。

（三）反思阶段：反思阶段建立在本能和互动阶段的基础之上，一旦页面的设计达到了基本的要求，就要考虑对本能和互动层次进行进一步优化。反思阶段旨在使用户获得更进一步的情感体验，甚至为产品增加附加价值，制造意外的惊喜。如在设计加载页面时，形式与加载的内容需匹配，若加载容量大且所需时间长，此时使用小型图标作加载提示可能会导致用户的厌倦情绪，反之添加一些用于过渡的动效图形、文字信息或是广告、视频，则更符合用户的心理预期，例如某款游戏在更新版本时，会播放出精致的版本动画，既为游戏的版本内容做了预告，又使用户乐意去等待。如图5所示，若Chrome浏览器在遇到如断网的情况而加载失败，页面上会出现一只像素风格的小恐龙彩蛋，用户只要按住空格键就可以操控小恐龙在断网界面玩一个横版小游戏，用来打发无聊的断网时光。人们往往能够记住使自己感到惊喜的事物，如像素恐龙这样超出预期的正向行为，就能够使用户对产品做出积极的评价。

然而，如果使用过量的信息元素堆叠到加载页面上，使本来用于过渡的加载页称为用户的视觉负担时，会产生负面效果。恰到好处的页面信息就要把控好用户的视觉停留时间，同时借助趣味性的创意，深度契合产品的特性和触发用户需求，进而使用户产生深刻的印象。

四、加载页面的情感化设计原则

人们情感的复杂性决定了情感化设计的多层次、多阶段。情感化设计能够创造美观而易用的产品，同时赋予产品一定的价值，通过对前文情感化设计三个阶段的论述及对案例的分析，总结出加载页面的情感化设计原则如下。

（一）本能阶段：图文并重，优化用户即刻认知：在加载页面设计的本能阶段，设计要考虑产品的“外观”，即给人的第一印象，以向用户准确地传递情感信号。设计时可充分利用文字或图形的指示性，快速而有效地吸引用户的注意力，同时也要把控好文字数量和大小、色彩的对比、图形的位置等要素，通过对形式美法则的应用增强页面的美感，给用户留下深刻印象。

如图6所示，加载页面采用蓝色为主色调，以宇航员的跳跃和星球旋转的动态表示页面的加载状态，给予用户的第一视觉感受是精致且有趣的。宇航员上方的文字处于显眼和易读的位置，且清晰地告知用户系统正在下载文件而非崩溃，因此“请勿退出”。星球下方的进度条及文字则提示加载进行到了什么阶段以及剩余需要等待的时间。综上，优质的画面配以详尽的信息提示，使用户在产品情感化的本能阶段即获得了掌控感。

（二）互动阶段：个性彰显，打造用户趣味互动：在加载页面设计的互动阶段，设计要注重加载页面操作的流畅性，满足用户对产品的基本需求。产品的个性是情感化体现的平台，产品的个性影响感知，因此可利用各类感官元素打造页面的个性，强化用户与页面的互动，减少甚至避免用户的不满情绪，传达出产品的趣味性和专业性。

如图7所示，该页面在不同的色块间切换，同时各个主题色所对应的贴纸会弹出放大，并做出动态的表情变化。每一副贴纸都十分可爱且吸睛，使用户的眼睛保持忙碌的状态。根据页面上的文字可知，加载的内容是可爱主题的贴纸，正与加载动画中的图片相符，也强化了产品的个性。一旦人们在等待的过程中发现了足够吸引自己注意力的事物，如丰富的色彩搭配、有趣的故事情节等，都会感觉时间过得更快，便不急于获得加载的结果了。

（三）反思阶段：细节完善，推动用户情感延伸：在加载页面设计反思阶段，设计要完善页面的细节，使页面的风格与结构、信息的传递方式、与整体环境的关系达到和谐统一，同时调查用户在体验页面时的隐性需求，创造诸如惊喜一类的情感延伸体验，提升用户使用产品时的满足感和愉悦感，从细小处塑造产品的完整性。

如图8所示是BCG公司的车票应用加载页面。页面的背景细即看可发现是地图，而中央的图形在各种车头的样式间变化，两种元素的结合便巧妙地将品牌的声音融入到了加载动画之中。设计师不仅使产品服务于用户，也充分利用了用户的等待时间，传达该公司的品牌形象。

盡管加载页面并非用户的目标页面，但作为互联网产品的一个必要环节，它需要与整个产品氛围融契合。现今，情感化设计是打造品牌核心竞争力的重要途径，许多品牌开始追求以情感打动用户，讲述品牌故事、塑造品牌形象以满足用户的情感需求。如图9是一款为酒类网站设计的加载页面，设计师将酒类产品制作的过程用动画的形式呈现出来，与品牌特色充分结合。可见，在加载页面的设计中若结合产品、公司甚至是品牌特色，添加产品或相关事物的形象、产品制作流程，亦或是展示品牌文化，不仅能够大概率地留住用户，还能够加深用户对品牌的印象，将用户情感延伸到产品的背后。

结语

加载页面是互联网产品的重要组成部分，良好的页面设计能够提升产品整体形象，优化用户体验。设计师们越来越关注用户心理，使设计满足其易用性、易读性等要求，而当使用者已经体验到优质的产品时，产品便更由细节赢得用户的肯定和青睐。情感化设计为产品搭建了更富有人情味的交互框架，设计者若从本能、互动及反思三个阶段去审视产品、打磨加载页面，便可能使用户和产品的沟通更加顺畅、高效且令人愉悦，从而在两者之间形成一种持久而积极的联系。.

基金项目：201 8年度安徽省哲学社会科学规划项目资助，项目批准号：AHSKY2018D73。

参考文献

[1]唐纳德.诺曼情感化设计[M]北京：电子工业出版社，2005

[2]谢传伟.情感化设计在用户体验中的运用[J]设计' 2014 （02）：21-22

[3]张校君，张宇红.Loading页面设计中反馈机制的研究[J]设计， 2017 （05）：20—22

[4]李梦颖.情感化设计下交互设计方法探究[J]设计，2017 （23）：39-40

[5]安德森.《怦然心动—情感化交互设计指南》[M]北京：人民邮电出版社，2012

[6]陈晶，肖丽萍.产品中交互设计的用户体验研究综述[J]设计， 2014 （06）：13-14