浅析时距估计在加载页面设计中的应用

王莹莹　侯琳琦

摘 要：引入时间心理学中时距估计的概念，探讨时距估计在网页加载设计中的应用价值，结合时距估计理论分析现有加载页面设计中的不足和亮点，提出相应的设计方法，指导加载页面的设计，提升用户加载程中的时间体验。

关键词：网页加载设计；时距估计；用户体验

0 引言

近些年来，互联网产品领域对“用户体验”的关注日益加强，以传统的三大可用性因素（效率、效益和主观满意度）为重要指标，逐渐将用户体验涵盖到用户与产品交互的方方面面，其中王坚在《结网》中将用户体验的三要素概括为：别让我等，别让我想，别让我烦，“别让我等”是影响用户体验的重要因素之一，可用性研究表明，用户能够忍受的最长等待时间大约在6～8秒之间，但是通过分析用户在信息加工过程中时间感知的心智模型，对用户等待过程中网页的加载页面进行优化设计，造成不同的时间错觉感知，可以减少用户的等待感以及因時间因素产生的负面情绪。本文就以时间错觉的产生根源——时距估计的心智模型作为切入点进行分析和讨论，研究时距估计在网络加载页面设计中的应用，提升交互设计中的心理体验。

1 时距估计在加载页面中的应用分析

1.1 时距估计

时间心理学包括三种时间现象：时序、时距和时点，时距指客观现象的持续性，也就是事件持续的时间长短；时间错觉是人的主观时间感知与客观时间感知发生偏离的一种时间知觉，其中时距是最容易激发时间错觉的要素，在接收时间信息刺激的过程中，时距估计的心智模型有4个：容量模型，加工时间模型，变化/分割模型和时间认知的分段模型。

1.2 时距估计策略

时距估计策略是指根据进展速度和事件的容量来推算事件持续时间，用户会根据事件发生过程中的当前速度和规律，来预估事件完成的时间，如果个体或环境变量改变，用户的时距估计也会发生变化。

图1 加载状态图

图2 加载状态图

如上图所示，图2利用绿色加载条将时间可视化，根据时距估计策略可知，加载条的设计帮助用户完成了对时距的估计，可控性增强，减少了等待的焦虑感，图2的设计优于图1。

1.3 加工时间模型

加工时间模型指：人类的信息加工系统存在两个加工器：一个是认知计时器，专门负责对时间信息加工和编码，另一个是刺激加工器，专门对刺激信息进行加工和编码，时距的判断取决于两者的输出，在信息加工的过程中，如果分配在刺激加工器中的注意资源比较多，那么投入认知计时器的注意资源就减少，时间的估计就会变短，反之时距估计就变长。

图3 加载动画案例图

可通过一些外部的影响因素如声音、颜色、图形等作为刺激信息获得更多的注意资源。如图3所示，加入有趣的图形元素，分配更多的资源给刺激加工器，减少对响应时间的感知，提升用户的时间体验。

1.4 变化分割模型

变化分割模型认为用户根据注意到的心理和环境变化的数量判断时间量，注意的外部事件数量越多，时距越长，强调信息内容分段的多少给用户时距估计带来的影响，主要针对用户的回溯式估计。

图4 手机IE浏览器加载页面图

如图4所示，IE浏览器将加载的变化分成4个不同的阶段，阶段一的加载采用蓝色方形回旋加载，如左一，跳转到蓝色圆形形式加载（左二），接着是空白页面（左三），绿色进度条一直在上方显示，虽然各阶段的变化能够增加对刺激加工器的分配，但是可分割的片段太多，给用户造成了时间比较长的回溯式估计，影响了一个页面加载的整体体验。

1.5 预期——解释心理模型

预期——解释心理模型包括四个环节：预期建构、预期确定、预期失败以及对预期失败的解释。

图5 手机UC浏览器加载页面图

如图5所示，UC浏览器的加载设计是通过一个蓝色渐变的加载条，主要来表达时间的极速感和流畅感，色彩采用蓝色，通过色彩的渐变隐喻光速，视觉的联想带来的心理效应给人造成时间错觉，UC进度条的加载策略是很快——慢——快，超出用户在预期建构阶段的时间估计，在预期确定阶段，制造出惊喜的效果，预期解释即反思阶段给人极速、流畅的用户体验。

图6 手机QQ浏览器加载页面图

如图6所示，QQ浏览器加载条的设计采用的是在输入栏里缓冲大面积的绿色，加载条的速度完全按照系统加载的算法，给用户一直在打开的感觉，没有变化，网络稍微不稳定，用户就会失去信息，关掉浏览器。UC浏览器的加载设计的更好一些。

2 基于时距估计的加载页面设计方法

2.1 加载进度可视化

加载页面进度的设计不能单纯地只反应现在系统的加载状态，还要建立在产品的信息变化上，通过色彩或图形隐喻，将加载的进度时间可视化、加载状态可视化，符合用户时距估计策略的心智模型。

2.2 增加刺激元素，分配注意资源

加载页面的设计可以增加一些外部的刺（下转第页）（上接第页）激元素，如有趣的图形设计、声音等，在信息加工的过程中，使更多地注意资源分配到刺激加工器中，减少等待的焦虑。

2.3 减少加载过程的碎片化分割，保持连贯性

加载页面的过程不要出现过多的时间分割，给用户碎片化的信息记忆片段，用户进行回溯式估计时，会觉得加载过程很繁复，没有顺畅的体验。

2.4 超出预期，给予惊喜

可通过运用预期——解释的心理模型，预期建构阶段给用户长的时间估计，在预期确定和预期解释给用户制造极速、流畅的用户体验。

2.5 图标隐喻符合用户的心理模型

视觉上的心理效应会给人不同的时间知觉感受，加载页面的图标设计可根据色彩和图形的隐喻、联想和象征。例如，采用代表速度的赛车、瀑布、光速元素映射时间快速。

3 结论

以时间心理学中时距估计理论为切入点，运用时距估计的心智模型——加工时间模型、变化分割模型、预期——解释心理模型结合相关案例对网络加载设计做出指导和理论层面的阐释，提出了5条加载页面设计方法，对加载页面的设计有重大的指导意义，本文也具有一定的局限性，主要研究了基于时间感知层面对加载页面的优化设计，但在实际的运用中还需要综合考虑其他因素，最终才可达到加载页面最好的用户体验。

参考文献：

[1] 张慧忠.时间错觉在交互设计中的应用研究[D].无锡：江南大学，2012.

[2] 王颖，张侃.时距估计在人机交互中的应用[J].人类工效学，2009，15（13）：58-60.

[3] 钱家渝.视觉心理学[M].上海：学林出版社，2006.

[4] 黄希庭，张志杰，风四海.时间心理学的新探索[J].心理科学，2005，28（6）：1284-1287.

[5] 徐青，魏琳.时间知觉与估计的认知理论综述[J].应用心理学，2002，8（2）：58-64.

[6] c.s.Loading，让烦躁少一些[OL]. 2012-1-4 . http：//uedc.163.com/8809.Html.