2026年UI动效测试题及答案

2026年UI动效测试题及答案

一、单项选择题，(总共10题，每题2分)1.在MaterialDesign中，默认的缓动曲线“标准缓动”对应的时间-数值插值函数是A.cubic-bezier(0.4,0.0,0.2,1)B.cubic-bezier(0.0,0.0,0.2,1)C.cubic-bezier(0.4,0.0,1,1)D.cubic-bezier(0.0,0.0,1,1)2.当界面需要表达“元素从离线状态进入视野”时，首选的动效语义是A.fadeOutB.slideExitC.fadeIn+slideUpD.scaleDown3.在AfterEffects中导出LottieJSON时，为保证矢量形状不被栅格化，必须勾选A.“ConverttoBitmap”B.“Glyphs”C.“ConvertShapestoPaths”D.“MergePaths”4.根据Fitts定律，按钮动效放大10%后，其有效点击时间理论上A.增加3%B.减少5%C.减少10%D.不变5.iOSHumanInterfaceGuidelines建议，页面转场时长超过多少毫秒会让用户感知迟钝A.200B.300C.500D.7006.在Web动画中，使用will-change:transform的主要目的是A.触发重排B.创建合成层C.禁用GPUD.强制同步刷新7.下列哪一项不是“动效十二原则”中直接列出的原则A.缓入缓出B.跟随动作C.夸张D.反馈8.当帧率为120fps时，单帧停留时间约为A.8.33msB.16.67msC.33.33msD.41.67ms9.在Figma原型中，SmartAnimate无法自动补间A.圆角半径B.图层透明度C.矢量路径节点数不同的对象D.旋转角度10.用于描述“系统对用户输入响应速度”的指标是A.DohertyThresholdB.JankRateC.FirstInputDelayD.TimetoInteractive二、填空题，(总共10题，每题2分)11.在CSS中，同时设置animation-fill-mode为________可使动画结束后保持结束状态。12.当使用spring物理模型时，若阻尼系数dampingRatio=0，系统处于________状态。13.在AE中，表达式“loopOut('pingpong')”会让属性在关键帧结束后________循环。14.若动效需满足WCAG2.3，闪光次数每秒不得超过________次。15.在Android的MotionLayout中，关键帧集合的标签名称是________。16.当帧预算为16.7ms时，若脚本执行占用10ms，留给浏览器绘制与合成的时间仅剩________ms。17.在Principle中，实现“拖拽回弹”需将拖拽结束事件绑定到________动画。18.为了降低MotionBlur带来的性能开销，可优先开启________通道而非全屏模糊。19.在Lottie中，________字段用于声明动画的总帧数。20.当使用“stagger”顺序延迟时，若子项间隔为50ms，第6个子项的延迟为________ms。三、判断题，(总共10题，每题2分)21.在视网膜屏下，1px边框动画无需考虑物理像素对齐。22.动效时长与用户年龄呈正相关，年龄越大所需时长越短。23.使用requestAnimationFrame实现的动画，在页面不可见时会自动暂停。24.在Figma中，矢量路径的布尔运算结果可以被SmartAnimate自动补间。25.根据“动作语义一致性”原则，删除确认动效应使用放大弹跳效果。26.在iOS的UIViewPropertyAnimator中，fractionComplete属性可读写。27.当GPU内存不足时，Chrome会主动降级Canvas2D动画到CPU渲染。28.在AE中，将帧速率从30fps改为60fps，已打关键帧的时长会自动减半。29.对于无障碍用户，prefers-reduced-motion媒体查询返回reduce时应关闭非必要动效。30.在Web动画中，transformZ(0)可以强制元素提升到独立图层，但可能增加内存占用。四、简答题，(总共4题，每题5分)31.简述“时间重映射”在UI动效中的三种典型应用场景。32.说明为何“弹性动画”在移动端支付按钮中比“线性动画”更能提升信任感。33.列举并解释影响Web动效帧率稳定的四大主线程阻塞来源。34.概述在DesignToken体系中如何为动效参数建立可维护的命名规范。五、讨论题，(总共4题，每题5分)35.讨论在折叠屏设备展开瞬间，应用该如何利用动效降低用户的“视觉跳变”不适。36.结合神经科学中的“预测编码”理论，探讨微动效如何减少界面认知负荷。37.分析当系统级“省电模式”开启时，设计师应如何权衡动效降级与品牌一致性。38.辩论“动效自动化生成工具”是否会削弱设计师对时间节奏的直觉把控能力。答案与解析一、单项选择题1.A2.C3.C4.B5.C6.B7.D8.A9.C10.C二、填空题11.forwards12.无阻尼/等幅振荡13.往返14.315.KeyFrameSet16.6.717.Spring18.Alpha19.op20.250三、判断题21.×22.×23.√24.√25.×26.√27.√28.×29.√30.√四、简答题31.答案：其一，将标准时长动画映射为慢速展示，用于新手引导；其二，通过倒放实现“撤销”动效，保持语义一致；其三，在循环loading中利用重映射随机化相位，避免视觉疲劳。32.答案：弹性动画模拟物理世界回弹，符合用户关于“真实材质”的心理模型；支付场景需要传递“确认—回弹—落定”的安全隐喻，线性动画缺乏生命感，无法形成正向情绪共振。33.答案：1.样式计算与重排，2.大尺寸位图解码，3.JavaScript驱动的尺寸查询，4.未节流的输入事件回调；四者均占用主线程帧预算，导致合成器无法及时拿到新帧。34.答案：采用“类别-属性-程度”三段式，如motion.duration.fast=200ms，motion.easing.enter=standard，token值与平台无关，设计师通过语义名称即可调用，便于后期主题化与自动化替换。五、讨论题35.答案：可采用“无缝扩展”策略：先冻结展开前帧，再用遮罩扩张动画将旧布局平滑过渡到新比例，同时让关键元素沿贝塞尔路径位移至新位置，全程控制在300ms内，利用连续轨迹预测降低跳变感。36.答案：预测编码认为大脑持续对比输入与预期，微动效提前揭示状态变化方向，减少预测误差信号；当按钮轻微放大提示可点击，用户无需二次确认，降低了P300脑电成分出现强度，从而减轻认知负荷。37.答案：应先识别品牌核心动效，如logosplash保留，转场与微交互降级为opacity+transf