设计知识库
由社区维护、审核后发布，并在 Agent 页面创作前被 RAG 检索为设计约束。
浮层焦点与滚动锁契约
浮层不是一层遮罩，而是 modality、初始焦点、焦点循环、关闭规则、背景 inert、滚动锁、portal 层级和移动端安全区的联合契约。
只要浮层改变用户可交互范围，就必须同时治理键盘、读屏、指针、滚动和移动端行为；视觉上盖住背景但语义上仍可达，是最危险的假 modal。96%Interaction Responsive Motionscroll / horizontal横向滚动作品集边界
横向滚动适合有限作品集、画廊和项目序列，不适合长正文、文档和核心任务流程。
横向滚动必须是一种明确内容格式：用户看得见下一项、能用键盘和触控操作、能在窄屏重排，并且核心文字不被藏进横轴。95%Interaction Responsive Motionmotion / scroll滚动叙事章节契约
滚动叙事的基本单位不是动画帧，而是可读章节：每章要有明确问题、文本锚点、视觉状态、静态 fallback 和可验证的滚动行为。
滚动叙事应把复杂机制拆成用户可停留、可跳过、可回到的证据链；动效只负责连接章节和状态，不应成为唯一内容载体。95%Interaction Responsive Motionmotion / reduced-motion动效可访问与性能分诊
动效上线前要先分清目的、触发、可关闭性、性能属性和验证证据，不能只凭“看起来顺滑”通过。
好的动效解释变化，坏的动效制造额外负担。分诊的核心是把每个动画变成可说明、可降级、可测试、可清理的界面行为。95%Interaction Responsive Motionbulk-actions / tables批量操作预览与 Diff
批量操作需要先建立选择范围、动作对象、影响数量、失败分支和撤销/审计路径，危险批量修改必须在提交前展示 diff。
批量操作提升效率，也会放大错误。界面必须把当前选择、动作范围、不可处理项、危险后果、异步进度和完成后恢复路径全部显性化。95%Interaction Responsive Motionforms / validation表单错误状态契约
表单错误状态契约把 label、帮助文本、验证时机、内联错误、错误摘要、提交状态、服务端失败、移动键盘和 ARIA 连接放进同一个可实现模型。
表单错误不是某个红色组件，而是字段契约、状态机和恢复路径的组合；它应路由到更细的错误摘要、可访问反馈、标签持久性和事务型恢复知识。95%Interaction Responsive Motion3d / storytelling沉浸式 3D 叙事关卡
WebGL/Three.js/3D 动效应被拆成可理解的叙事关卡：每一段都回答一个问题，并提供静态、低动效和可跳过路径。
沉浸式 3D 的价值不是把用户困在场景里，而是把抽象概念变成可暂停、可理解、可继续的证据链。94%Interaction Responsive Motionforms / errors事务型表单错误恢复
高信任表单的错误处理不是提示用户错了，而是把用户带回可修复、可继续、无需重填的状态。
事务型服务的错误恢复必须同时处理可见位置、屏幕阅读器、焦点、原始输入、错误文案和下一步行动。94%Interaction Responsive Motionmotion / scroll获奖站点的滚动叙事动效
滚动动效应帮助用户理解产品状态和叙事推进，而不是把信息藏在不可控的表演里。
叙事型页面的滚动动效必须服务因果、层级和节奏：每个运动段落都要解释一个状态变化或价值证据。92%Interaction Responsive Motionportfolio / motion作品集里的安静动效
作品集动效应突出选择、进入、比较和记忆点，而不是让每个元素都表演。
作品集的交互价值在于帮助用户判断作者能力：项目选择、视觉细节、案例跳转和上下文过渡要比装饰动画更重要。90%Interaction Responsive Motionempty-state / recovery空状态恢复契约
空状态要先说明系统状态和原因，再给出解决当前原因的主行动，而不是只用插图填补空白。
空状态是一种已完成的系统反馈：用户需要知道内容为什么没有出现、当前请求是否已经结束、自己能做什么，以及是否需要权限、配置、重试或等待。90%Interaction Responsive Motionmodal / focus弹窗焦点管理
弹窗焦点管理把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
弹窗改变了交互上下文，必须管理焦点、背景可达性和关闭路径。87%Interaction Responsive Motiongesture / mobile触控手势替代路径
触控手势替代路径把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
滑动、捏合和长按不能成为完成任务的唯一方式。86%Interaction Responsive Motionloading / skeleton骨架屏层级
骨架屏层级把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
骨架屏应预告真实内容结构，而不是制造额外视觉噪音。86%Interaction Responsive Motiontables / bulk-actions表格批量操作模型
表格批量操作模型把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
批量操作需要清楚表达选中数量、作用范围、风险和完成反馈。86%Interaction Responsive Motiondrag-drop / accessibility拖拽替代控件
拖拽替代控件把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
拖拽适合直接操作，但排序、移动和上传必须有非拖拽路径。86%Interaction Responsive Motiondanger / confirmation破坏性操作确认
破坏性操作确认把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
确认只应保护不可逆或高影响动作，且必须说明对象和后果。86%Interaction Responsive Motionkeyboard / navigation键盘优先导航
键盘优先导航把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
可键盘完成的界面通常也更清晰，因为焦点顺序暴露了真实任务结构。86%Interaction Responsive Motionmobile / actions移动端底部行动栏
移动端底部行动栏把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
移动端关键行动应靠近拇指区域，但不能遮挡内容、错误或系统导航。85%Interaction Responsive Motionfeedback / toastToast 与行内反馈选择
Toast 与行内反馈选择把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
反馈位置应匹配反馈对象；toast 适合全局短状态，行内反馈适合字段和局部修复。85%Interaction Responsive Motionwizard / progress向导步骤进度
向导步骤进度把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
向导需要让用户知道当前位置、剩余工作、可返回性和保存状态。85%Interaction Responsive Motionfilters / state筛选与查询状态保留
筛选与查询状态保留把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
筛选结果是用户构建的工作上下文，刷新、返回和分享时应尽量保留。85%Interaction Responsive Motionresponsive / navigation响应式导航折叠
响应式导航折叠把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
导航折叠不是隐藏所有入口，而是按任务频率和当前位置重新排序。85%Interaction Responsive Motionundo / editing撤销与可逆性
撤销与可逆性把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
可逆操作让用户敢于探索，减少确认弹窗和中断。85%Interaction Responsive Motionlatency / microinteraction低延迟微交互
低延迟微交互把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
微交互的目标是确认输入和状态变化，而不是让界面显得忙碌。84%Interaction Responsive Motionpagination / scroll无限滚动与分页选择
无限滚动与分页选择把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
浏览型列表可连续滚动，任务型列表通常需要定位、选择、返回和总量感。84%Interaction Responsive Motionrealtime / collaboration实时协作存在感
实时协作存在感把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
协作界面需要让用户知道谁在场、谁在编辑、冲突如何处理。84%Interaction Responsive Motionfeedback / latency乐观更新反馈
乐观更新反馈把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
乐观更新要让界面快起来，同时让失败和回滚不会让用户困惑。84%Interaction Responsive Motioncommand / shortcuts命令面板安全性
命令面板安全性把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
命令面板适合快速行动，但必须让作用对象、风险和结果足够明确。84%Interaction Responsive Motioninputs / controls输入模式与控件匹配
控件类型应匹配决策方式：开关用于二元，分段用于模式，菜单用于多选项，滑杆用于连续数值。
错误控件会增加理解成本，并让用户不确定选择是否可逆。82%Interaction Responsive Motiontables / responsive响应式表格与比较
表格用于比较，响应式处理必须保留列关系、排序和关键操作。
把表格随意改成卡片会损失比较能力，需要按数据任务选择模式。82%Interaction Responsive Motionloading / performance感知性能与加载结构
加载状态应保留布局骨架，让用户知道将出现什么，而不是只显示孤立 spinner。
稳定骨架能降低等待焦虑并避免内容出现时的布局跳动。82%Interaction Responsive Motionmotion / animation克制且有目的的动效
动效应解释状态变化、空间关系或反馈，而不是单纯制造热闹。
过度动效会打断任务，尤其在高密度工具中。82%Interaction Responsive Motionbreakpoints / responsive断点重组而非缩放
响应式设计应在断点重组布局关系，而不是用 viewport 比例缩放所有元素。
缩放字号和容器会带来不可控溢出，重组结构更稳定。82%Interaction Responsive Motionmobile / responsive移动端优先堆叠
移动端不是桌面的缩小版，应按任务优先级重新堆叠内容和操作。
小屏空间有限，最重要的信息、控件和反馈需要靠前且不重叠。82%Interaction Responsive Motionprogressive-disclosure / complexity按任务风险渐进披露
低频、危险或高级设置应延后展示，高频任务保持直接可达。
渐进披露不是隐藏功能，而是按决策时机安排复杂度。82%Interaction Responsive Motionfeedback / states系统连续性的反馈状态
加载、保存、生成、审核、失败都需要可见状态，让用户知道系统仍在响应。
缺少反馈会让用户重复点击或以为数据丢失。82%Interaction Responsive Motioncards / panels卡片与面板的密度和可供性
卡片应表示对象，面板应表示工具或上下文；两者需要不同密度和交互提示。
可点击对象必须可识别，纯信息容器不应伪装成按钮。82%Interaction Responsive Motionbuttons / actions按钮优先级与操作分离
主操作、次操作、危险操作和导航链接要有清晰差异，避免用户误点。
按钮样式体现决策成本和风险，而不只是视觉偏好。82%Interaction Responsive Motionforms / workflow表单流程与校验
表单应按用户心智顺序组织字段，并在关键节点给出可恢复反馈。
好的表单把复杂任务拆成可完成步骤，而不是把所有字段平铺给用户。82%Interaction Responsive Motionnavigation / wayfinding导航地标与当前状态
用户需要知道自己在哪里、能去哪、当前筛选或页面属于哪个范围。
导航不是链接堆砌，而是产品结构和当前位置的持续提示。82%