图形图标是人机界面关键组成部分, 在信息识别和分辨方面具有不可取代的优势, 使用户更高效的与应用程序、系统和设备进行交互[1]. 动态图标是一种其属性会随着时间改变的交互式元素, 以此将特定情况下的程序运行所处状态和功能传达给用户[2]. 在认知心理学领域, 动态图标对于认知绩效影响的研究表明, 动态图标不仅能够帮助用户更好的理解人机界面[3]与任务需求[4], 还可以增加用户使用界面时的愉悦感, 增强界面的交互活力[5], 用于吸引用户或观察者的注意力[6]. 用户对于动态图标的认知会随着动态形式的改变而改变. 因此分析图标动态形式特征, 研究在不同的动态形式下用户满意度, 并针对动态图标进行优化设计, 以此增强动态图标传达状态的效率.

在认知心理学领域, 相关学者主要关注图标对人类感知能力与认知绩效的影响. 早期学者发现动态图标对增强用户对于当下系统的任务理解有积极作用[4]; 不同复杂度的图标动画对用户的理解以及偏好会导致不同的认知绩效, 因此应该在图标设计中应该就采用复杂还是简单动画的问题建立准则[7]; 在视觉搜索实验中, 也有文献指出不同形状复杂度的形状[8]、图标颜色数量和一致性均对人类的认效率存在影响[9], 结果表明, 认知绩效的增长幅度随形状特征而变化, 且利用颜色增大图标之间的差异, 能够更有效地提升图标的视觉搜索效率. 对于图标形式对于用户体验的研究发现, 图标能否准确传达目的与意图直接影响用户对产品的使用效率和满意度, 因此图标的设计应该达到用户的期望, 并遵循于用户的认知、习惯及需求[10].

综上所述, 人与动态图标的交互过程中, 图标的动态形式与形状特征均会影响用户认知绩效、用户偏好与用户满意度. 以上研究从图标的几何形状、抽象性、复杂度、颜色等方面对人体的生理及心理的影响, 发现了动态图标可以增强用户对于人机界面的理解性与认知绩效, 而图标形式则会影响用户的满意度. 研究图标动态形式的设计准则对提高用户满意度及体验具有实践价值和理论意义, 但是以上研究大多只是基于人类视觉系统对于图标设计的感性判断, 并没有形成量化分析模型, 尚缺乏对图标动态形式的量化研究, 未深入探讨图标动态形式与用户的使用感受之间的关联性.

本文在已有研究的基础上首先考量Kineticons[11]类动态图标4种物理属性——路径、范围、方向与速度并加以描述, 并通过阈限测量方法调查动作时间阈值, 利用回归分析建立动作幅度与动作时间的预测模式, 获得图标最佳动作时间的量化模式, 最后通过动态范围适合度调查提供最佳动作幅度的设定依据, 提供人机界面动态图标形式设计的参考依据.

动态图标的应用广泛多元, 众多学者提出了不同的动态效果, 而这些动态效果所参照的动作来源也不尽相同, 有的是简单的移动、旋转, 有些则是依照物理和自然运动进行设计[12]. 因此按照动态图标的设计来源, 可以将动态图标分为常规图标、动画式图标、动作式图标、情绪图标四类.

常规图标(Conventional Icon)的内容通常是象形文字或表意文字, 它们的视觉属性也可以沿着其他维度进行修改以传递额外的信息; Chen等[13]提出了情绪式图示(Empatheticons), 此类动态图示模拟用户情绪, 在一款音乐推荐系统Group Fun中加上不同情绪的动态图标来推荐音乐; Baecker等[1]和Bodner等[14]率先使用了动画图标(Icon with Animated Graphics), 动画图标是一种其图形内容随着时间的改变而改变的一类图标, 并且用动画序列来描述变化; Harrison等[11]依照自然界中的动作给予图像动态效果, 并且定义了一种基于运动的图像方案——Kineticons, 它是一系列几何操作(例如: 缩放、旋转、变形、平移)的结果, 与静态图标和带有动画图形的图标相比, 动态行为不会改变视觉内容、像素、RGB值.

根据Harrison等[11]提出的Kineticons图标的定义, Kineticons图标为一系列动力学行为的结果; 同时, 有研究指出影响动态图标形式的4种物理属性, 分别是路径(path)、范围(area)、方向(direction)以及速率(speed)[15]. 也有实验表明, 用户会因为移情作用对动态效果存有特定的情绪, 动态形式(速率、范围、方向、路径)的细微变化也会引起用户的感受变化[16]. 速率是指图标运动发生的速度, 如果图标动作速度太慢, 可能会使用户感到厌烦或沮丧; 而速度太快会导致用户来不及反应而丢失交互目标或正在进行的交互任务, 适当的过渡速度可促进用户跟随人机界面交互, 而不会使任务复杂化[17]. Google Material Design建议在满足持续时间尽可能短的条件下, 同时避免太过突然或震颤; 有研究指出动态图标的方向能够向用户传达正确的信息, 方向是制作动态图标中最重要以及最有用的设计原则, 当动态图标从一种状态切换到另一种状态应该总是在一个方向上的. 但是, 当一个人想要取消或者撤销一个操作, 移动的方向应该是相反的[18]; 路径指图标的运动轨迹, 范围指元素在动画的两个帧之间移动的距离, 图标运动一般依照自然界中的物体运动, 例如对角线运动看起来就是自然的弧线运动, 动态图标的设计应根据重要级别使用简单或复杂的运动[19].

上述围绕图标动态形式的设计与研究大多是基于相关设计人员根据经验和感觉的设计, 缺少一定的理论模型. 在已有的研究基础上, 本文依照Kineticons类图标左右移动、上下移动、缩放、旋转4种动力学行为, 通过对动态图标的4种物理属性(路径、范围、方向与速度)的适合范围调查, 从而确定动态图标设计的基本准则.

本文采用阈限测量法测量图标动作时间的上阈、下阈、舒适阈值, 从中调查动态图标动作幅度与动作时间的相互关系. Darley等[20]认为物理刺激和人的感觉之间存有一致性关系, 这种关系常被称为心物关系(psychophysical relation), 感觉器官接受的刺激在引起任何感觉之前必须达到最低强度, 这种刺激感觉系统所需的最低物理能量即刺激强度称为绝对阈. 阈限测量法主要有上下法(up-and-down method)、阈限追踪法、定值刺激法等. 上下法主要由实验人员操作, 调整刺激量至受测者第一次发现刺激时则终止测试, 其中不断增加刺激量, 该方法称为提升试验(ascending trial), 也可以搭配刺激量降低的方式进行, 称为下行试验(descending trial); 定值刺激法的操作方式主要由实验者给定刺激强度的最大值及最小值, 并且定义每次刺激变化量的值, 此变化量的值在两极端刺激量之间. 进行阈值测验时, 以随机的方式呈现各个刺激量并纪录感觉阈值.

本文参考相关研究与感觉测量方式, 探讨动态图标的动作幅度与动作时间舒适阈值之间的相互关系, 并考虑受测者自行调整可能造成的数值记忆问题, 将采用上下法与定值刺激法的拓展使用, 从而测量出用户所能接受的图标动作时间的上阈值、下阈值, 最佳阈值, 为进一步测量图标动作幅度提供数据支撑.

实验依据Kineticons图标所定义的动力学行为, 定义了图标左右移动、上下移动、缩放与旋转4种基本动态形式, 并以路径、范围、方向与速度[15]描述动态图标. 本研究中的实验设计采用Illustrator软件进行图形设计, 使用After Effects软件生成gif动画, 最后使用Proto.io开发应用程序原型. 该原型是为模拟在线社交而开发的移动应用程序.

如图1所示, 考虑到动态图标的特性与时下动态图标设计软件的偏好设置, 范围即为动作幅度, 速率修改为动作时间. 4种图标动态形式的定义如下: 如图1(a)、图1(b)所示, 左右/上下移动的图标沿着X/Y轴来回匀速移动, 图标以坐标轴原点为基点, 图标的移动幅度不断增加, 在一定的移动幅度下动作时间不断增加, 动作幅度与动作时间决定了图标运动速率.

图标以圆心为原点进行前后缩放, 并以对角线放大后与放大前的半径增幅△R: △R=R2–R1为图标缩放前后的半径增量, R1为原始图标半径, R2为放大之后的图标半径. 即图标按照设定好的倍率增大随即缩小至原有大小, 在一定的缩放倍率中动作时间不断增加, 缩放倍率与动作时间决定了图标缩放速率, 如图2(c)所示. 图标旋转以坐标轴原点为旋转中心, 图标的旋转角度按照一定的增量变化, 在一定的旋转角度中动作时间不断增加, 旋转角度与动作时间决定了图标旋转速率, 如图2(d)所示.

在动作幅度的设定上: 上下/左右移动的图标自原点上下移动15 px开始, 动作幅度以15 px的变化量增加至135 px (自0 px开始), 每段动作幅度的运动时长以50 ms的变化量增加至2000 ms, 一共得到360(40×9)个上下/左右移动样本, 如图1、图2; 图标旋转阈值测量以15°的变化量旋转至360°位置(自0°开始), 每段动作幅度的动作时间以50 ms的变化量增加至2500 ms, 一共获得1200 (50×24)个样本; 前后缩放的半径增幅量为2 px, 半径增量自2–40 px, 每段动作幅度的动作时间以50 ms的变化量增加至2000 ms, 总共800 (40×20)个样本.

据中国互联网络信息中心《2018年中国互联网络发展状况统计报告》报告称, 出生于1981~1991年之间, 年龄在19~29岁之间的青年人群是网民占比最多的且中国网民中学生群体最多, 占比达24.8%. 在这种情况下, 在贵州大学现代制造技术教育部重点实验室学习的19~29岁的互联网用户被选为该研究的样本. 16男, 14女, 年龄19~29岁(描述性统计如表1), 视力或矫正视力正常, 无色盲色弱, 实验开始之前熟悉实验程序, 被试距离屏幕中心300~350 cm.

实验调查动态图标的最佳、上阈、下阈动作时间, 以被试的舒适感为判断标准, 分别测量被试在不同幅度下四种动态图标形式的最佳动作时间(被试感觉上最舒适的图标运动时长)、动作时间上阈和动作时间下阈, 上阈/下阈的测量均在不引起被试不舒适感的前提下, 被试能够忍受的动作最长/最短时长.

本文不考虑手机外观对于被试的影响, 仅限于具有屏幕尺寸和图形设计限制的手机屏幕, 且关注动态图标本身的运动形式对于用户满意度的影响, 因此不考虑界面中的其他因素[21]. 实验1的样本呈现在15英寸(38.1 cm)的显示器中央, 设定样本背景颜色为白色(RGB: 255 255 255), 显示屏分辨率为2560×1600 px, 亮度为180 cd/cm2, 移动端的尺寸采用目前市场占比较多的750×1334 px, 界面显示为灰色(RGB: 62 62 62)位于屏幕中央. 为了避免情感效应[15]以及熟悉度对图标动作时间阈值选择的影响, 动态图标4种样式均选用生活中常用样式: 其中图标的上下、左右移动与前后缩放形式设定参考iOS设计规范与Material Design[16]建议的44×44 px的圆形; 为了方便测量观察旋转角度的动作时间阈值, 旋转图标选用2×35 px的圆角矩形. 所有图标刺激采用蓝色(RGB: 62 159 255), 以降低刺激背景与前景一致性所产生的视觉疲劳, 如图2所示.

实验1开始前由实验人员向被试阐述实验注意事项, 实验第一阶段由实验人员控制图标动作幅度与动作时间的升降, 并记录受测过程中每段动作幅度下被试感觉最舒适的动作时间. 为防止被试受记忆值影响, 每次受测前将数据归零. 受测过程中被试需要每10 min休息一次, 以避免被试产生生理性疲劳. 每段动作幅度均由最短动作时间提升至被试感觉最佳动作时间, 在被试感觉达到最佳动作时间时, 在此基础上再次增加50~100 ms动作时间供被试选择最佳动作时间; 接着在最长动作时间的测量中, 实验由最佳动作时间逐步增加动作时间, 直至被试感觉无法忍受时记录该数值便终止实验; 而在测量动作时间下阈时, 实验由最佳动作时间以50 ms的变化量逐渐下降至被试无法忍受的最短动作时间并记录该数据.

实验2在实验1的基础上进行, 调查动态图标的最佳动作幅度. 首先利用实验1中所得的线性回归方程求出每个动作幅度下最合适的动作时间的预测值, 动作幅度搭配对应的最佳动作时间获得调查图标动作幅度适合度的样本. 实验样本根据动作形式被分为上下/左右移动、缩放与旋转四种, 每种形式下的样本依据动作幅度从小到大、从上到下排列, 被试依次对实验样本的动作幅度进行Likert量表评分, 以1–5分为舒适度评判等级, 分值越高舒适度越大, 实验1–2整体流程如图3所示.

根据实验1所获得的图标沿X/Y轴方向的动作幅度与动作时间的数据, 实验结果动作时长反映了3种阶段下用户能接受的上阈、下阈、最佳动作时间. 图4、图5显示了沿X轴/Y轴移动的动作幅度与动作时间的上阈、舒适值、下阈的线性回归, 图标的动作时间为因变量y, 动作幅度为自变量x. T检验的结果显示不同性别的被试在感知X/Y轴上的动作时间和动作幅度方面无显著性差异(P=0.0921