由社区维护、审核后发布,并在 Agent 页面创作前被 RAG 检索为设计约束。
弹窗焦点管理把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
弹窗改变了交互上下文,必须管理焦点、背景可达性和关闭路径。87%Interaction Responsive Motiongesture / mobile触控手势替代路径把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
滑动、捏合和长按不能成为完成任务的唯一方式。86%Interaction Responsive Motiondrag-drop / accessibility拖拽替代控件把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
拖拽适合直接操作,但排序、移动和上传必须有非拖拽路径。86%Interaction Responsive Motionkeyboard / navigation键盘优先导航把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
可键盘完成的界面通常也更清晰,因为焦点顺序暴露了真实任务结构。86%Typography Color Accessibilitymotion / reduced-motion减少动效可访问性把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
动画和过渡需要尊重用户的减少动态偏好,并提供不依赖动效的信息路径。86%Typography Color Accessibilityforms / labels表单标签持久可见把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
表单字段标签应在输入前后都可见,帮助用户确认字段含义和上下文。86%Typography Color Accessibilitycharts / accessibility图表可访问编码把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
图表不能只靠颜色区分类别和状态,需要文字、形状、线型或直接标签辅助。86%Typography Color Accessibilityauthentication / accessibility可访问认证流程把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
安全流程也要降低认知负担,帮助用户完成而不是考验用户。86%Typography Color Accessibilityforms / errors错误摘要模式把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
用户需要先知道有多少错误、在哪里、如何修复,而不是逐行搜索红字。86%Typography Color Accessibilitytarget-size / touch目标尺寸与间隔把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
点击目标要有足够尺寸和间隔,尤其在移动端、工具栏和密集列表中。86%Typography Color Accessibilitylinks / contrast链接对比与可供性把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
链接是导航承诺,用户必须能在阅读流中快速识别可点击文本。85%Typography Color Accessibilitycognitive-load / copy降低认知负担的文案把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
用户不应该为了完成任务记住系统状态、上一屏信息或隐含规则。84%Typography Color Accessibilitycontent / plain-language清晰语言把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
可理解性是可访问性的一部分,复杂文案会增加所有人的认知负担。84%Typography Color Accessibilityicons / aria图标可访问名称把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
只有图标的按钮和状态必须有可访问名称,装饰图标则应从辅助技术中隐藏。84%Typography Color Accessibilitytypography / spacing文本间距韧性把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
界面应能承受用户调整行高、字距、字号或浏览器缩放后仍不遮挡内容。84%Typography Color Accessibilityforms / redundant-entry减少重复输入把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
重复输入增加认知负担、错误率和放弃率,尤其影响辅助技术用户。84%Interaction Responsive Motionmotion / animation动效应解释状态变化、空间关系或反馈,而不是单纯制造热闹。
过度动效会打断任务,尤其在高密度工具中。82%Typography Color Accessibilitytouch-target / mobile按钮、链接、菜单项和图标按钮需要足够命中区域,移动端尤其不能只看视觉尺寸。
视觉小不等于点击区域小;交互目标需要稳定尺寸和明确反馈。82%Typography Color Accessibilityaccessibility / color状态、风险、分类和选中不能只靠颜色表达,必须有文字、图标、形状或位置辅助。
色盲、低视力、打印和弱光场景都会削弱颜色语义。82%Typography Color Accessibilityfocus / keyboard键盘和辅助技术用户需要清楚知道当前焦点在哪里,焦点态不能被 reset 掉。
焦点态是交互路径的一部分,不是浏览器默认样式的瑕疵。82%Typography Color Accessibilityforms / accessibility表单反馈要靠近字段、解释原因,并在提交前后都能被用户理解。
错误信息不是惩罚,而是帮助用户完成任务的导航。82%Typography Color Accessibilitycontrast / accessibility文本对比必须优先服务阅读,尤其是小字号、禁用态、次级说明和按钮文字。
低对比会让精致感变成不可用,特别是在移动端和弱光环境。82%