编辑推荐: |
本文主要针对三种基本过渡效果(淡入淡出、滑动、缩放)设计了定量实验,为动效设计领域提升用户体验提供了相关指南,希望对您的学习有所帮助。
本文来自于微信公众号智能座舱与HMI设计,由火龙果软件Alice编辑、推荐。 |
|
IVIS屏幕尺寸正变得越来越大,随着时间的推移,在使用IVIS的过程中,由于IVIS的尺寸通常允许不同应用同时显示,屏幕需要在用户开启分屏状态时显示适当的分屏动画过渡。
在本研究中,我们针对三种基本过渡效果(淡入淡出、滑动、缩放)设计了定量实验,操纵了(9种过渡效果组合+无过渡效果)共10种过渡效果组合,在9种不同间隔时间序列中进行测试,31名用户参与了实验。
结果表明,最合适的过渡动效组合为A缩放B淡出、A缩放B滑动、A缩放B缩放,且B延迟150毫秒是分屏过渡效果的最佳间隔时间,此时A应用不应超过400毫秒,B应用不应超过430毫秒。本研究为动效设计领域提升用户体验提供了相关指南。
1. 动画过渡效果
动画运动由速度、空间和模式构成。首先,速度包括持续时间和缓动函数。持续时间是物体开始运动到停止的时间。谷歌最新的Material3设计指南提供了更广泛的动效设计建议,根据不同场景、元素动效和屏幕尺寸推荐不同的持续时间和缓动函数。动效的持续时间可设计为500-700毫秒,入场动效推荐使用(0.05, 0.7, 0.1, 1)的曲线参数。
第二方面是空间,指元素的位置。运动方向由其初始位置决定。动画中元素的位置和运动模式可组合为多种过渡类型。速度、空间和模式元素对用户满意度、情感质量和效率有显著影响。
2. 三种基本模式
动画过渡通常通过改变最终页面的参数实现。常见的三种过渡效果是淡入淡出、滑动和缩放。
研究使用三个参数测试动画过渡:透明度、位置和大小,分别对应淡入淡出、滑动和缩放基本模式。淡入淡出过渡通过改变细节卡片的透明度显示详情页,滑动过渡将位置从相邻边缘移动到目标位置,缩放过渡将细节卡片从0大小调整至全屏尺寸(如图1所示)。
图1. 三种动画变换的可视化
3. 实验设计
实验设计中使用了10种分屏动画过渡模式和9种间隔时间。10种分屏动画过渡模式是基础动画过渡模式的组合(3×3),另设无动画对照作为基线。9种间隔时间指两个应用出现的顺序(如表1所示),间隔时间从0到600毫秒,按A和B各150毫秒的增量进行操纵。
表1. 分屏动画过渡效果变量
动画曲线和持续时间是控制变量。根据谷歌最新的Material 3设计指南,考虑到过渡属于进入屏幕的类型,动画曲线采用Emphasized Decelerate缓动(0.05,0.7,0.1,1),动画持续时间基于屏幕尺寸选择。针对15.6英寸IVIS屏幕,动画持续时间设为600毫秒。
当前大多数IVIS使用地图作为主界面,最常见的车载应用是音乐和空调。如图2所示,我们设计了从状态(1)到状态(2)的分屏过渡视觉刺激。基于当前车载系统设计,实验中A应用设为地图应用,B应用设为音乐应用。在状态(1)时,A应用(地图)全屏显示;在状态(2)时,A应用(地图)和B应用(音乐)分屏显示。
由于A和B应用的初始状态显示差异,实验通过三种基本动画效果总结两者的显示状态,如图3所示。
图2. 动画过渡刺激
图3.使用三种基本动态效果将A和B进行动画过渡
4. 参与者
31名21-39岁参与者(平均年龄23.61岁,标准差1.86)参加实验,男女比例16:15。参与者视力正常或矫正至正常,且能识别毫秒级运动。由于实验任务与驾驶性能无关,并非所有参与者都有驾照,但他们至少有6年移动和网页应用使用经验。每位参与者获得30元报酬,实验时长约40分钟。
5. 设备和材料
实验在实验室使用高保真模拟器进行,包括方向盘、踏板、座椅、显示屏、平板电脑和车辆模型(图4)。方向盘和踏板为罗技G29型号,三个连接的显示屏提供135度驾驶环境视图。正视图右侧是可扩展触摸屏(EHOMEWEI,15.6英寸,4K OLED显示屏),用于呈现15.6英寸(3840×2160像素)IVIS屏幕。IVIS屏幕原型使用FIGMA v116.5.18和PROTOPIE v7.4.0软件创建。
图4. 实验环境
6. 实验任务
实验中,参与者需在车辆临时停靠路边操作IVIS系统时执行任务。任务要求参与者按下音乐按钮,触发从屏幕(1)到(2)的过渡(如图2所示),该过渡产生包含过渡类型和间隔时间的动画过渡效果。随后参与者需通过在线问卷评估每次刺激,评分采用李克特七点量表(1"非常不满意"至7"非常满意")。参与者只能点击屏幕右下角的音乐按钮,并可重复体验直至确定评分。
7. 实验流程
参与者接受实验介绍并签署知情同意书和人口统计问卷。他们将体验三种基本动画模式,练习环节约3-5分钟,并解答问题。主环节中,动画模式以随机顺序在不同间隔时间呈现,参与者通过在线问卷用七点量表评分(1"非常不满意"至7"非常满意")。体验所有间隔时间后,针对每种动画模式组合进行访谈以确定不适起始点。参与者可随时要求短暂休息,整个实验约40分钟。
图5. 实验程序
8. 结果
重复测量方差分析显示:模式组合F(8)=3.621,P<0.05和间隔时间F(3.677)=204.698,P<0.05对满意度有显著影响(表2)。最满意的模式组合是A缩放B缩放(M=4.47, SD=0.165),与A缩放B淡出(M=4.272, SD=0.165)和A缩放B滑动(M=4.409, SD=0.165)无显著差异,但与其他所有模式组合有显著差异。这三种组合的A模式均为缩放模式。
其他组合满意度排序为:A淡出B滑动(M=3.943, SD=0.165)、A淡出B缩放(M=3.817, SD=0.165)、A滑动B滑动(M=3.806, SD=0.165)、A滑动B缩放(M=3.792, SD=0.165)、A淡出B淡出(M=3.753, SD=0.165)、A滑动B淡出(M=3.577, SD=0.165),它们之间无显著差异。
同时,无动画模式(M=2.423, SD=0.165)与所有动画组合有显著差异,证明动画能有效提升用户体验。
表2. 分屏动画过渡效果的描述性结果
注:使用Greenhouse-Geisser校正的组内效应检验F值
9. 结论
研究通过实证实验测试了分屏动画过渡(A模式、B模式和刺激间隔)对IVIS满意度的影响,操纵了9种刺激,31名参与者使用李克特七点量表完成满意度问卷和访谈。
研究发现分屏动画过渡对满意度存在显著差异,但差异程度取决于过渡效果。当A动效为缩放时用户体验更佳,因此建议A采用缩放效果。最后,我们发现毫秒级的A和B刺激间隔对满意度有显著影响,并通过事后访谈确认不同过渡效果下负面情绪表达的间隔时间存在差异。
不同分屏动画组合提供不同的用户体验和理解,适当延迟时间出现的分屏动画效果有助于提升满意度。我们相信这项研究能为分屏动画提供设计指导,并改进现有动效设计指南。
表4. 15.6英寸IVIS屏幕的分屏动画过渡指南
|