动效与交互
Motion & Interaction 处理界面里的动作和反馈。它关心什么触发了变化，界面怎么回应，状态怎么转移，用户是否能判断下一步会发生什么。
动效不是单独的装饰。按钮按下、列表加载、页面进入、菜单展开、卡片拖拽、错误提示出现，这些变化都需要时间、方向、节奏和反馈。
1. 动效基础与时间 (Motion Basics & Timing)
Motion (动效)
Motion 是界面里可见的运动。它可以是元素移动、淡入淡出、缩放、展开、收起，也可以是加载、同步、成功反馈这类状态变化。
动效的作用是让变化更容易理解。没有动效，界面可能显得突然；动效太多，用户会被分散注意力。
Animation (动画)
Animation 是按时间播放的一段视觉变化。它通常有起点、终点和中间过程，例如按钮被收藏后变成实心图标，卡片从列表里滑出。
动画可以由用户操作触发，也可以由系统状态触发。它需要有明确目的，不能只为了让界面动起来。
Transition (过渡)
Transition 是两个状态之间的变化过程。常见例子包括 hover 到 active、关闭到展开、浅色主题到深色主题。
过渡让用户知道状态已经变了，也能减少突兀感。表单错误、弹窗出现、导航切换这类变化尤其需要清楚的过渡。
Duration (时长)
Duration 是一个动效持续多久。短时长显得直接，长时长会显得更柔和，也更容易拖慢操作感。
小元素和简单反馈通常用较短时长。页面切换、抽屉展开、复杂内容重排可以稍长，但不能让用户等动效结束才能继续操作。
Delay (延迟)
Delay 是触发之后多久才开始变化。它常用于 tooltip、菜单、分步进入和错峰动画。
延迟太短会造成误触发，太长会让界面显得迟钝。需要快速反馈的操作，比如按钮按下和错误提示，不适合明显延迟。
Stagger (错峰)
Stagger 是让一组元素按顺序进入或变化。列表项、卡片组、菜单项经常使用错峰。
错峰能让用户看出内容之间的顺序，但要克制。项目很多时逐个播放会拖慢阅读，也容易显得花。
Easing (缓动)
Easing 描述速度如何变化。元素可以匀速移动，也可以先快后慢、先慢后快，或带一点弹性。
缓动会影响界面的手感。自然的界面运动通常不会一直匀速，进入和停止都需要一点速度变化。
Linear (线性)
Linear 是匀速变化。进度条、循环加载和某些机械运动可以用线性。
线性动效清楚，但常用于状态变化时会显得生硬。按钮、菜单、卡片这类界面元素一般更适合带缓动的过渡。
Ease-in-out (渐入渐出)
Ease-in-out 是开始较慢，中间较快，结束再放慢。它适合展开、收起、页面进入、卡片移动这类完整状态变化。
这种节奏比较稳定，用户容易感知开始和结束。缺点是用得太多会让所有动效都像同一种速度。
Keyframe (关键帧)
Keyframe 是动画过程里的重要时间点。它定义某个时刻元素的样式，例如位置、透明度、缩放或旋转。
复杂动画通常需要多个关键帧。简单状态变化可以直接用 transition，不一定要写成完整 keyframe 动画。
Timeline (时间轴)
Timeline 描述多个动效在时间上的排列。它决定哪个元素先动，哪个后动，哪些同时发生。
弹窗出现时，背景遮罩、面板、标题、内容和按钮可能有不同时间点。时间轴处理不好，界面会显得散。
Frame Rate (帧率)
Frame Rate 是每秒显示多少帧。界面动效通常希望接近 60fps，才能看起来顺滑。
帧率不足时，用户会看到卡顿、跳帧或拖拽不跟手。复杂阴影、滤镜、大面积重排和主线程阻塞都可能影响帧率。
2. 交互状态与反馈 (Interaction States & Feedback)
Trigger (触发)
Trigger 是让界面变化开始的原因。点击、悬停、聚焦、拖拽、滚动、加载完成、请求失败，都可以是触发。
触发要和用户预期匹配。用户点了按钮，界面应该马上给出反应；后台状态变化，也要让用户知道发生了什么。
Response (响应)
Response 是界面对触发的回应。它可以是按钮变色、菜单展开、输入框高亮、加载指示出现，也可以是错误信息显示。
响应越接近用户动作，因果关系越清楚。点击之后如果没有任何反馈，用户可能会重复点击。
Feedback (反馈)
Feedback 是界面告诉用户结果或进度的方式。它可以是颜色、文字、图标、声音、动效，也可以是组件状态变化。
反馈要足够快，也要足够明确。保存中、保存成功、保存失败是三种不同状态，不能都用同一个模糊提示。
Hover (悬停)
Hover 是鼠标停在元素上时的状态。按钮、链接、菜单项、卡片都可以用 hover 提示可交互。
Hover 适合桌面端。触屏设备没有稳定的悬停行为，重要操作不能只靠 hover 暴露。
Pressed (按下)
Pressed 是用户按住按钮或控件时的状态。它通常比 hover 更强，用来表示操作已经被接收。
按下状态要短而明确。按钮颜色、阴影、位移或缩放都可以表达 pressed，但不要让元素跳动太大。
Disabled (禁用)
Disabled 表示控件暂时不可操作。它常用于未满足条件的提交按钮、不可选菜单项或没有权限的操作。
禁用状态要能看出来，但不能只靠降低透明度。必要时要告诉用户为什么不能操作。
Focus (聚焦)
Focus 表示元素正在接收键盘或辅助技术操作。输入框、按钮、链接、菜单项都需要清楚的 focus 状态。
Focus 不是装饰状态。没有可见焦点，键盘用户很难知道自己在哪里。
Loading (加载)
Loading 表示系统正在处理，结果还没回来。它可以出现在按钮、页面、列表、卡片或局部区域。
加载反馈要靠近触发位置。用户点了提交按钮，按钮本身显示 loading，比页面角落出现一个小图标更清楚。
Progress (进度)
Progress 表示任务已经完成了多少。上传、导入、生成、安装、批量处理这类任务适合显示进度。
进度可以是百分比、步骤、进度条或状态文本。任务时间较长时，进度比单纯 loading 更能降低不确定感。
Skeleton (骨架屏)
Skeleton 是内容加载前的占位结构。它用灰块或简化形状提前显示页面布局。
骨架屏适合列表、卡片、详情页这类结构稳定的内容。结构变化很大的页面，用骨架屏可能会误导用户。
Success (成功)
Success 表示操作完成并得到预期结果。它可以用文字、状态色、图标、toast 或局部状态变化表达。
成功反馈不一定要很强。频繁的小操作，比如收藏、开关、保存草稿，用轻量反馈更合适。
Error (错误)
Error 表示操作失败、输入不合法或系统异常。它需要说明问题在哪里，最好也给出可恢复路径。
错误反馈不能只靠红色。表单字段、错误文案、图标和焦点位置要一起帮用户找到问题。
Undo (撤销)
Undo 让用户回退刚刚的操作。删除、归档、移动、批量修改这类操作常用撤销降低风险。
撤销反馈通常和 toast、snackbar 或状态栏一起出现。它需要在合适时间内可见，过快消失会让用户错过。
3. 状态转移与空间连续性 (State Change & Spatial Continuity)
State Transition (状态转移)
State Transition 是界面从一个状态变到另一个状态的过程。展开、关闭、选中、完成、失败、加载结束都属于状态转移。
好的状态转移能让用户知道哪里变了。变化越大，越需要清楚的过渡路径。
Morphing (变形)
Morphing 是一个元素从一种形态变成另一种形态。比如加号变成叉号，播放按钮变成暂停按钮，卡片变成详情面板。
变形适合表达两个状态之间的关系。形状差异太大时，强行变形会让用户看不出原来的对象。
Crossfade (淡入淡出)
Crossfade 是一个元素淡出，另一个元素淡入。它常用于图片切换、文案变化、状态替换。
淡入淡出很柔和，但空间关系不强。需要让用户知道元素从哪里来、到哪里去时，位移动效会更清楚。
Enter (进入)
Enter 是元素进入界面的方式。弹窗出现、列表项新增、菜单打开、toast 出现都需要进入状态。
进入动效要让用户看出新内容属于哪里。比如 toast 从底部出现，菜单从按钮下方展开，关系会更清楚。
Exit (离开)
Exit 是元素离开界面的方式。关闭弹窗、删除列表项、隐藏提示、收起菜单都属于离开。
离开动效要短。用户已经完成操作，不应该等太久才看到界面恢复稳定。
Presence (存在状态)
Presence 描述元素是否在界面中存在。进入和离开之间，元素可能需要保留一小段时间，让动画完整播放。
前端实现里，presence 常用于处理弹窗、菜单、toast、列表项删除这类需要 exit 动画的组件。
Shared Element (共享元素)
Shared Element 是两个界面状态里都出现的同一个视觉对象。比如列表里的缩略图，在详情页里放大成主图。
共享元素动效能把两个页面连接起来。用户会感觉自己跟着同一个对象进入了下一层界面。
Continuity (连续性)
Continuity 是变化过程中的空间和视觉连接。它让用户知道对象没有凭空消失，也没有突然换成无关内容。
连续性来自位置、方向、尺寸、颜色和时间。布局变化很大时，连续性尤其重要。
Object Permanence (对象恒常性)
Object Permanence 指用户能感觉同一个对象在变化前后仍然是同一个对象。卡片放大成详情页、图标变成加载状态，都依赖这种感知。
如果对象突然消失再出现，用户要重新判断发生了什么。连续的运动可以减少这种认知成本。
Expand (展开)
Expand 是内容或控件从收起状态打开。常见于手风琴、菜单、筛选面板、详情区。
展开要让用户看出新增内容从哪里出现。高度变化、箭头旋转、周围内容重排都需要协调。
Collapse (收起)
Collapse 是内容或控件从打开状态回到收起状态。它通常和 expand 成对出现。
收起时要保留入口位置。用户需要知道内容被收到了哪里，之后还能从哪里打开。
Reflow (重排)
Reflow 是布局因为内容变化而重新排列。新增卡片、删除列表项、筛选结果变化、窗口尺寸变化都会引起重排。
重排如果太突然，用户会丢失阅读位置。列表和网格变化时，适度的位移动效能帮助用户跟上。
4. 手势与滚动 (Gestures & Scrolling)
Tap (轻点)
Tap 是触屏上的一次轻触，通常对应按钮、卡片、列表项或导航入口。
轻点目标需要足够大，也要有即时反馈。触屏上没有 hover，用户只能靠可见样式和点击后的反应判断元素是否可操作。
Double Tap (双击 / 双击轻点)
Double Tap 是连续两次轻点或点击。它常用于放大图片、点赞、地图缩放或特定编辑操作。
双击不适合作为唯一入口。很多用户不会猜到它存在，移动端还可能和系统缩放、滚动产生冲突。
Swipe (滑动)
Swipe 是快速横向或纵向滑动。它常用于切换页面、删除列表项、打开操作菜单或浏览轮播。
滑动手势要有可发现性。隐藏操作不能只依赖 swipe，最好有可见入口或提示。
Click (点击)
Click 是鼠标或触控板上的点击操作。它是桌面端最常见的触发方式。
点击反馈要清楚。按钮按下、菜单打开、链接跳转、复选框切换，都应该让用户马上看出状态变化。
Drag (拖拽)
Drag 是按住元素并移动。排序、拖文件、调整大小、拖动滑块、移动地图都属于拖拽。
拖拽需要清楚的起点、过程和落点。元素被拖动时要有跟手反馈，放下后要显示结果。
Pan (平移)
Pan 是持续拖动画布或内容区域。地图、图片查看器、时间轴、白板经常用 pan。
平移要跟手。手指或鼠标移动和内容移动之间的延迟越明显，操作越难受。
Scroll (滚动)
Scroll 是内容在容器里上下或左右移动。页面、列表、表格、聊天窗口都依赖滚动。
滚动区域要清楚。页面里有多个 scroll container 时，用户容易不知道当前滚动的是哪一层。
Sticky (吸附 / 固定)
Sticky 是元素在滚动到某个位置后固定住。表头、导航、筛选栏、操作栏常用 sticky。
Sticky 可以减少来回滚动，但会占据屏幕空间。移动端尤其要控制高度。
Parallax (视差)
Parallax 是不同层以不同速度移动，制造空间层次。营销页、封面区、插画场景常见。
视差容易吸引注意，也容易影响阅读。内容密集的工具界面通常不需要强视差。
Gesture Threshold (手势阈值)
Gesture Threshold 是系统判断一个手势成立所需的距离、速度或时间。比如滑动多远才算 swipe，拖动多久才开始排序。
阈值太低会误触，太高会显得不灵敏。拖拽、滑动删除、下拉刷新都依赖合适的阈值。
Hit Area (点击热区)
Hit Area 是用户实际可以点击或触摸的区域。它通常要大于视觉上的图标或文字。
小图标需要足够大的热区。否则视觉上看得见，手指却很难点准。
Affordance (可供性)
Affordance 是界面元素让用户感觉“这里可以操作”的线索。按钮形状、阴影、光标、把手、箭头、文字都可以提供这种线索。
可供性不足时，用户不知道哪里能点、哪里能拖。手势操作尤其需要可见线索。
5. 可用性、性能与无障碍 (Usability, Performance & Accessibility)
Reduced Motion (减少动态)
Reduced Motion 是系统或应用提供的减少动效模式。它会降低大幅移动、闪烁、视差和循环动画。
有些用户会对强动效敏感。减少动态不等于删除所有反馈，而是把大幅运动改成更温和的状态变化。
Motion Sensitivity (动效敏感)
Motion Sensitivity 指部分用户对运动、闪烁、视差或快速缩放感到不适。
全屏位移、强视差、快速旋转和循环闪烁都可能造成问题。重要功能不能依赖这些动效才能理解。
Latency (延迟)
Latency 是用户操作到界面响应之间的等待时间。延迟越明显，界面越像没有接收到操作。
按钮、拖拽、输入、滚动这类交互对延迟很敏感。即使真实任务很慢，也应该先给出即时反馈。
Responsiveness (响应性)
Responsiveness 描述界面对用户操作的反应是否及时、稳定。它不只看速度，也看反馈是否跟手。
响应性差时，用户会重复点击、误以为系统卡住，或者放弃当前操作。
Perceived Speed (感知速度)
Perceived Speed 是用户感觉到的速度。真实加载时间相同，反馈方式不同，感受也会不同。
骨架屏、局部 loading、乐观更新和渐进展示都能改善感知速度。空白等待通常最糟。
Jank (卡顿)
Jank 是动画或滚动过程中出现的不顺滑。它可能表现为跳帧、停顿、拖拽不跟手。
卡顿会破坏操作信任。滚动列表、拖拽排序、页面切换和大面积动画都需要特别注意。
Dropped Frames (掉帧)
Dropped Frames 是本该显示的帧没有按时渲染出来。用户看到的结果就是动画不连续。
掉帧常见于重计算、大量 DOM 更新、复杂阴影、滤镜和频繁布局重排。动效越依赖连续运动，掉帧越明显。
Compositor (合成器)
Compositor 是浏览器把图层合成到屏幕上的部分。某些 transform 和 opacity 动画更容易交给合成器处理。
合理使用合成器可以减少卡顿，但不是所有属性都适合动画。频繁改变宽高、位置和布局，通常更容易影响性能。
Microinteraction (微交互)
Microinteraction 是很小的交互片段，例如开关切换、收藏、复制成功、输入校验、下拉刷新。
微交互的重点是反馈清楚。它不需要很花，通常只要让用户知道操作被接收、结果是什么。
Delight (愉悦感)
Delight 是界面里让人觉得顺手或有趣的小细节。比如收藏时的轻微弹性、完成任务后的短反馈。
愉悦感要服务操作。它适合低风险、低频或情绪性场景，不适合打断高密度工作流。
Restraint (克制)
Restraint 是控制动效强度和频率。它让界面保持安静，避免每个变化都抢注意力。
高频操作、专业工具、后台系统更需要克制。用户在做事时，动效应该帮助判断状态，而不是要求用户欣赏它。