Interface Lab
Knowledge RAG

设计知识库

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

提交新原则
8 条已发布原则 / 全库 192 条
Design Systems Page Patternsnotifications / inbox

通知收件箱分诊模型

通知中心需要区分即时反馈、可延后阅读的通知、需要处理的任务和系统级告警,并用读取状态、严重度、来源和批量操作组织分诊。

通知不是消息列表。它是一套注意力分配系统:什么时候打断、什么时候静默、何时进入收件箱、如何归档、如何回到原始对象,都需要明确规则。95%
Typography Color Accessibilitystatus / aria

状态消息公告

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

状态变化只靠颜色、toast 或视觉位置变化,会让部分用户错过关键反馈。86%
Interaction Responsive Motionfeedback / toast

Toast 与行内反馈选择

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

反馈位置应匹配反馈对象;toast 适合全局短状态,行内反馈适合字段和局部修复。85%
Interaction Responsive Motionlatency / microinteraction

低延迟微交互

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

微交互的目标是确认输入和状态变化,而不是让界面显得忙碌。84%
Interaction Responsive Motionfeedback / latency

乐观更新反馈

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

乐观更新要让界面快起来,同时让失败和回滚不会让用户困惑。84%
Interaction Responsive Motionfeedback / states

系统连续性的反馈状态

加载、保存、生成、审核、失败都需要可见状态,让用户知道系统仍在响应。

缺少反馈会让用户重复点击或以为数据丢失。82%
Typography Color Accessibilityforms / accessibility

可访问表单反馈

表单反馈要靠近字段、解释原因,并在提交前后都能被用户理解。

错误信息不是惩罚,而是帮助用户完成任务的导航。82%
Typography Color Accessibilitysemantic-color / state

语义色与状态色

成功、警告、错误、信息、选中和待处理状态应有明确且稳定的视觉语言。

状态色是系统反馈,不应被随意用于装饰或品牌强调。82%