Interface Lab
Knowledge RAG

设计知识库

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

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

浮层焦点与滚动锁契约

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

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

Forced Colors 与高对比支持

高对比不是暗色模式;forced-colors 会改写许多颜色属性,组件必须用系统颜色、真实 outline 和非颜色冗余保持可辨。

可访问色彩系统要尊重用户代理的高对比渲染,而不是强行保留品牌色。关键状态应在颜色被系统接管、阴影被移除、背景图失效时仍然可理解。95%
Interaction Responsive Motionmodal / focus

弹窗焦点管理

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

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

焦点顺序与阅读顺序

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

可见布局和辅助技术顺序不一致,会破坏导航和理解。86%
Visual Foundationshierarchy / focus

焦点经济

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

焦点越多,真正的重点越弱;视觉强调必须稀缺且服务主任务。85%
Typography Color Accessibilityfocus / keyboard

可见焦点状态

键盘和辅助技术用户需要清楚知道当前焦点在哪里,焦点态不能被 reset 掉。

焦点态是交互路径的一部分,不是浏览器默认样式的瑕疵。82%