Interface Lab
Knowledge RAG

设计知识库

由社区维护、审核后发布,并在 Agent 页面创作前被 RAG 检索为设计约束。

提交新原则
10 条已发布原则 / 全库 192 条
Interaction Responsive Motionoverlay / dialog

浮层焦点与滚动锁契约

浮层不是一层遮罩,而是 modality、初始焦点、焦点循环、关闭规则、背景 inert、滚动锁、portal 层级和移动端安全区的联合契约。

只要浮层改变用户可交互范围,就必须同时治理键盘、读屏、指针、滚动和移动端行为;视觉上盖住背景但语义上仍可达,是最危险的假 modal。96%
Interaction Responsive Motionscroll / horizontal

横向滚动作品集边界

横向滚动适合有限作品集、画廊和项目序列,不适合长正文、文档和核心任务流程。

横向滚动必须是一种明确内容格式:用户看得见下一项、能用键盘和触控操作、能在窄屏重排,并且核心文字不被藏进横轴。95%
Interaction Responsive Motionmotion / scroll

滚动叙事章节契约

滚动叙事的基本单位不是动画帧,而是可读章节:每章要有明确问题、文本锚点、视觉状态、静态 fallback 和可验证的滚动行为。

滚动叙事应把复杂机制拆成用户可停留、可跳过、可回到的证据链;动效只负责连接章节和状态,不应成为唯一内容载体。95%
Interaction Responsive Motionforms / validation

表单错误状态契约

表单错误状态契约把 label、帮助文本、验证时机、内联错误、错误摘要、提交状态、服务端失败、移动键盘和 ARIA 连接放进同一个可实现模型。

表单错误不是某个红色组件,而是字段契约、状态机和恢复路径的组合;它应路由到更细的错误摘要、可访问反馈、标签持久性和事务型恢复知识。95%
Interaction Responsive Motionforms / errors

事务型表单错误恢复

高信任表单的错误处理不是提示用户错了,而是把用户带回可修复、可继续、无需重填的状态。

事务型服务的错误恢复必须同时处理可见位置、屏幕阅读器、焦点、原始输入、错误文案和下一步行动。94%
Interaction Responsive Motionmodal / focus

弹窗焦点管理

弹窗焦点管理把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

弹窗改变了交互上下文,必须管理焦点、背景可达性和关闭路径。87%
Interaction Responsive Motiongesture / mobile

触控手势替代路径

触控手势替代路径把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

滑动、捏合和长按不能成为完成任务的唯一方式。86%
Interaction Responsive Motiondrag-drop / accessibility

拖拽替代控件

拖拽替代控件把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

拖拽适合直接操作,但排序、移动和上传必须有非拖拽路径。86%
Interaction Responsive Motionkeyboard / navigation

键盘优先导航

键盘优先导航把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

可键盘完成的界面通常也更清晰,因为焦点顺序暴露了真实任务结构。86%
Interaction Responsive Motionmotion / animation

克制且有目的的动效

动效应解释状态变化、空间关系或反馈,而不是单纯制造热闹。

过度动效会打断任务,尤其在高密度工具中。82%