Knowledge RAG
提交新原则设计知识库
由社区维护、审核后发布,并在 Agent 页面创作前被 RAG 检索为设计约束。
6 条已发布原则 / 全库 192 条
Frontend Implementationupload / dropzone
文件上传状态与校验契约
上传组件不是一个虚线框,而是一套从选择、校验、上传、暂停、失败、重试到最终文件记录的状态机器;拖放只能是增强,不能替代可访问文件选择和服务端校验。
文件上传同时涉及交互、网络、隐私、安全和可访问性。健康上传体验先定义文件目的、限制、API、状态和失败恢复,再选择 react-dropzone、Uppy、FilePond、tus-js-client 或原生 input。96%Interaction Responsive Motionfilters / state筛选与查询状态保留
筛选与查询状态保留把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
筛选结果是用户构建的工作上下文,刷新、返回和分享时应尽量保留。85%Interaction Responsive Motionfeedback / latency乐观更新反馈
乐观更新反馈把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
乐观更新要让界面快起来,同时让失败和回滚不会让用户困惑。84%Interaction Responsive Motionnavigation / wayfinding导航地标与当前状态
用户需要知道自己在哪里、能去哪、当前筛选或页面属于哪个范围。
导航不是链接堆砌,而是产品结构和当前位置的持续提示。82%Typography Color Accessibilityaccessibility / color颜色不能单独传达含义
状态、风险、分类和选中不能只靠颜色表达,必须有文字、图标、形状或位置辅助。
色盲、低视力、打印和弱光场景都会削弱颜色语义。82%Typography Color Accessibilitysemantic-color / state语义色与状态色
成功、警告、错误、信息、选中和待处理状态应有明确且稳定的视觉语言。
状态色是系统反馈,不应被随意用于装饰或品牌强调。82%