浅谈以用户为中心的网页缓冲界面设计

税梦瑶（攀枝花学院艺术学院 617000）

大部分网页都会有缓冲界面设计，但常听到这样的抱怨：“好慢！”“图标一直转啊转”，这种情况让人心里莫名的焦躁。据统计，用户等待网页打开的时间大约在6～8秒之间。如果超过8秒，会有超过50%的用户放弃访问，选择离开该页面，除非该用户必须打开此网页。

一、用户体验与界面设计

用户体验的英文全称是User Experience，它指用户在使用一个产品、系统或者服务时建立起来的纯主观感受。界面设计是人与使用对象之间传递和交换信息的媒介。不同用户对同一个界面的需求是不一样的，通过研究用户的使用方式、感受，能够更好的设计界面，让产品更加易用、乐用。

二、以用户为中心的缓冲界面设计形式

网页缓冲界面俗称“loading界面”，包括确定性界面、非确定性界面。常见的非确定性缓冲界面有以上三种表现形式：图形重复闪烁型、文案等待型、进度条提示型。根据市场调研，大部分使用者更希望看到第三种进度条形式，因为第一种“图形重复闪烁型”，人们不确定图形圆圈要转多久才算加载成功，也不知道第二个“文案等待型”后面的点要闪烁到猴年马月。

但如果在等待缓冲的同时，界面能够看到一些其他的东西，在一定程度上可以转移用户的注意力。就好比在网上看视频前，总有几十秒的广告，如果广告做得好，能够让用户觉得不无聊，适当减缓用户焦躁的情绪。常见的网页缓冲界面设计有以下五种表现形式。

（一）图形化缓冲界面设计

页面的局部加载时常能看到“图形重复闪烁型”设计的身影，视觉表现形式上像一个不停旋转的“风火轮”，这样的表现形式非常适合做不确定等待时间的缓冲界面设计。但每次看到的图形都差不多，如果换一种表现的形式，也许会觉得“这个图形跟别的好像不太一样”，通过好奇减少用户等待的焦躁。

以圆形为例，除了以简单线段重复排列构成圆形以外，还可以使用星形、多边形、不规则图形等视觉变化丰富的图形排列组成圆形，并将这些单体图形的颜色由浅到深渐变，由小到大排列等形式组成。同样是构成形式简单的缓冲界面，却能让用户感受到更多新意。

（二）数字与图形相结合的缓冲界面设计

为了减少用户等待界面显示的焦虑，设计缓冲界面时可以给用户一个时间提示，示意该界面的缓冲进度。如在“图形化缓冲界面设计”形式上加入时间、百分比等数字显示方式。在数字与“进度条提示型”缓冲设计相结合中，为了减弱用户的焦躁，“增强用户的其他方面期待值”是一种好的缓解方法，让用户在对网站怀有期待的同时，增加对缓冲进度条的设计期待。比如对不同的百分点设置不同颜色，用户在等待过程中视觉上不易疲劳。

（三）品牌趣味性缓冲界面设计

以上两种表现形式都起到提示进度的作用，但它们的差别是：“图形化缓冲界面”表现形式简单，“数字与图形相结合缓冲界面”内容有动画效果。在此基础上，很多品牌网站为了加强品牌宣传力度，在缓冲界面设计上加入了品牌元素。如：墨西哥奶酪网站的loading界面由一瓶带有投影的奶酪瓶构成，瓶内的奶酪会随着进度条度数的上升而逐步充满整个瓶身。瓶身上的标签是该奶酪公司的商标和简介。

类似的缓冲界面设计还有很多，如：环保类网站会使用绿色植物元素、货运网站会使用轮船环绕地球元素，某外国品牌动画网站则直接使用老旧电视屏幕倒计时的方式。这样的缓冲界面设计，在显示加载进程的同时，还加深了品牌印象，别有一种欣赏的意味。

（四）文案化缓冲界面设计

除了对图形、进度条变形外，缓冲界面设计还可以与文案相结合。 好比看电影前，都有一些预告片，不仅能使人对电影产生兴趣，还能知道大概内容。缓冲界面设计，也可利用缓冲的时间，在界面上设置一些该网站的流动图片和介绍文案。

如：热门游戏水果忍者登陆界面，其缓冲界面设计是一个移动的西瓜，可以增加用户的亲切感，知道缓冲进度，同时在缓冲条上方还有游戏玩法介绍图，小窍门，让用户在等待的同时更了解游戏，增加游戏期待值。这样的展现方式如今被众多在线销售商家所亲睐。

（五）分类式缓冲界面设计

如果一个网页加载的内容太多，其加载进度相对会比较缓慢，让缓冲界面呈现龟速，甚至不动的局面，如果产生这种现象，设计师可以把进度条分成多个进度条多次加载，以安抚用户焦躁的心。但在每个进度条相应的位置最好设有匹配的解释说明文字，以诠释加载的内容，以免用户对大面积进度条产生恐慌、不耐烦心理。

三、缓冲界面、图标放置位置方法：

打开网页，当用户需要等待时，采用确定性缓冲界面是首选。但对于一些网页加载内容较少，耗时短，网速快的情况下，多使用非确定性缓冲图标这类成本较低的设计表现形式。其在网页中的放置位置都有一定的规则：确保用户可以注意到。

（一）靠近点击区域

用户在网页中进行某项指令后，需要等待加载这种情况，缓冲图标位置必须靠近最后一步命令的点击区域附近，这样能够让用户在等待网页缓冲反馈时看到最直接的呈现，缓冲进度也最容易被注意到。如果能配合按钮进行切换下一步命令，会得到更好的视觉使用反馈。

（二）位于内容刷新区域上层

当页面内某区域内容需要被刷新时，用户的视线焦点会聚焦在此区域，如果缓冲图标此时不适合设置在此区域的刷新按键旁，那么可以将缓冲图标放在被刷新内容的上层，如发表qq邮箱广播的评论展开区域，这样的设计让人一目了然。

（三）固定区域

将缓冲图标安置在固定区域，此区域最好是页面浏览器窗口附近，要让用户在即使不习惯浏览器窗口构成情况下，也能凭借浏览习惯很容易找到缓冲图标。比如Gmail这款邮箱应用一样，缓冲图标设置在浏览器窗口顶部位置。

缓冲图标虽然是网页界面设计中很小的一个组成部分，但如果不以用户为中心考虑其设计，会给用户带来焦虑等负面情绪，造成网站用户的流失。

四、总结

网页缓冲界面设计是网站设计的重要组成部分，优秀的缓冲界面设计会给网站加分增彩，吸引潜在用户，但对于国内来说很少设计师做到这些水平。国内网页设计相对于国外还有一定的差距，一是这方面投入的不够，二是设计师设计意识有待提高，通过以上搜集的这些设计方式及分析，希望对今后网页缓冲界面设计具有参考价值。

[1]张静.论网页界面的交互性设计[J].长春师范学院学报，2013.06.

[2]熊科军.网页设计中的提示信息设计研究[J].美与时代，2015.02.

[3]季芳磊.网页设计中的细节交互[J].科技风，2011.

[4]王育.网页交互界面中反馈替代的研究[J].中国制造业信息化，2011.