UI DESIGN LAB
  • 首页
  • 社区
  • 资源库
  • 知识库
  • 文档
EN登录
知识库社区设计原则只发布审核通过的知识进入 Agent RAG。
投稿

分类

全部Typography Color Accessibility

标签

accessibilityariaauthenticationbrandchartscognitive-loadcolorcontentcontrastcopydark-modeemphasiserrorsfeedbackfocusfont-pairingfont-weightformatting
Knowledge RAG

设计知识库

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

提交新原则
30 条已发布原则
Typography Color Accessibilityforms / input

触控键盘与输入目的

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

移动端输入字段应匹配正确键盘、自动完成和输入目的,减少错误和操作成本。86%
Typography Color Accessibilitymotion / reduced-motion

减少动效可访问性

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

动画和过渡需要尊重用户的减少动态偏好,并提供不依赖动效的信息路径。86%
Typography Color Accessibilityforms / labels

表单标签持久可见

表单标签持久可见把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

表单字段标签应在输入前后都可见,帮助用户确认字段含义和上下文。86%
Typography Color Accessibilitycharts / accessibility

图表可访问编码

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

图表不能只靠颜色区分类别和状态,需要文字、形状、线型或直接标签辅助。86%
Typography Color Accessibilitystatus / aria

状态消息公告

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

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

可访问认证流程

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

安全流程也要降低认知负担,帮助用户完成而不是考验用户。86%
Typography Color Accessibilityforms / errors

错误摘要模式

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

用户需要先知道有多少错误、在哪里、如何修复,而不是逐行搜索红字。86%
Typography Color Accessibilitytarget-size / touch

目标尺寸与间隔

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

点击目标要有足够尺寸和间隔,尤其在移动端、工具栏和密集列表中。86%
Typography Color Accessibilityfocus / keyboard

焦点顺序与阅读顺序

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

可见布局和辅助技术顺序不一致,会破坏导航和理解。86%
Typography Color Accessibilitylinks / contrast

链接对比与可供性

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

链接是导航承诺,用户必须能在阅读流中快速识别可点击文本。85%
Typography Color Accessibilitycognitive-load / copy

降低认知负担的文案

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

用户不应该为了完成任务记住系统状态、上一屏信息或隐含规则。84%
Typography Color Accessibilitycontent / plain-language

清晰语言

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

可理解性是可访问性的一部分,复杂文案会增加所有人的认知负担。84%
Typography Color Accessibilitylocale / language

语言与本地化格式

语言与本地化格式把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

日期、数字、货币、单位和语言方向要符合用户地区习惯并避免歧义。84%
Typography Color Accessibilityforms / placeholder

占位符不能替代标签

占位符不能替代标签把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

占位符适合展示格式示例,不适合作为唯一说明或关键指导。84%
Typography Color Accessibilityicons / aria

图标可访问名称

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

只有图标的按钮和状态必须有可访问名称,装饰图标则应从辅助技术中隐藏。84%
Typography Color Accessibilitydark-mode / contrast

深色模式对比调校

深色模式对比调校把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

深色模式不是反转颜色,需要重新检查文本、边框、状态色和阴影层级。84%
Typography Color Accessibilitytypography / spacing

文本间距韧性

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

界面应能承受用户调整行高、字距、字号或浏览器缩放后仍不遮挡内容。84%
Typography Color Accessibilityforms / redundant-entry

减少重复输入

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

重复输入增加认知负担、错误率和放弃率,尤其影响辅助技术用户。84%
Typography Color Accessibilitytouch-target / mobile

可访问交互目标

按钮、链接、菜单项和图标按钮需要足够命中区域,移动端尤其不能只看视觉尺寸。

视觉小不等于点击区域小;交互目标需要稳定尺寸和明确反馈。82%
Typography Color Accessibilityaccessibility / color

颜色不能单独传达含义

状态、风险、分类和选中不能只靠颜色表达,必须有文字、图标、形状或位置辅助。

色盲、低视力、打印和弱光场景都会削弱颜色语义。82%
Typography Color Accessibilitysurface / color

表面上的可读颜色

背景表面变化时,文字、边框、图标和状态色都要随表面重新校准。

同一个色值在不同背景上会有不同视觉强度,不应机械复用。82%
Typography Color Accessibilityfocus / keyboard

可见焦点状态

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

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

可访问表单反馈

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

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

语义色与状态色

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

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

可读性对比

文本对比必须优先服务阅读,尤其是小字号、禁用态、次级说明和按钮文字。

低对比会让精致感变成不可用,特别是在移动端和弱光环境。82%
Typography Color Accessibilitycolor / tokens

色彩角色系统

颜色应先定义角色,再选择具体色值,避免一个颜色承担太多含义。

主色、背景、边框、文字、状态和强调色都应有稳定职责。82%
Typography Color Accessibilitytypography / font-pairing

按功能配对字体

字体配对应从产品功能出发:品牌表达、长文阅读、数字比较和控件标签各有任务。

字体差异要有明确用途,避免为了风格混搭造成阅读负担。82%
Typography Color Accessibilitytypography / font-weight

字重强调

字重用于建立强调,而不是把每个标签都加粗。

粗体过多会失去强调能力,并让密集界面显得沉重。82%
Typography Color Accessibilitytypography / readability

行高与行长

长文本需要舒适行高和可读行长;密集界面也要避免文本互相压迫。

行长太宽会丢行,行高太紧会拥挤,行高太松会破坏信息密度。82%
Typography Color Accessibilitytypography / hierarchy

字号层级

字号层级应服务页面结构,避免在小面板里使用 hero 级标题。

清楚的字号阶梯能让标题、标签、正文、数字各司其职。82%