高对比界面 High Contrast UI
当政府服务、运营台账、公共信息或需要高可读性的产品页面必须降低视觉不确定性时,高对比界面用成对的语义颜色和明确结构组织阅读。
1让下一步一眼可见
Make the next step obvious.
A clear task title, explicit status, and reachable action help every person complete the next service step.
高对比界面 High Contrast UI 通过稳定的语义色、清楚的边界、足够的文字对比和明确的操作路径降低辨认成本。它不是把所有区域做成黑底黄字,而是让窗口、文字、链接、选中、按钮和状态彼此有可预测的关系。
- 先定义窗口、正文、链接、选中、按钮和错误的语义角色,再为这些角色分配成对的颜色和边界。
- 成功、警告和错误必须同时有文字、图标或结构提示,不能只用颜色区分。
- 用边框、分组、留白和清楚的行高建立层级,避免用一堆深色卡片和阴影制造黑块感。
- 在放大文字、窄屏、键盘操作和不同高对比主题下检查标题换行、焦点顺序、表单错误和主要动作。
判断一张页面是否真正高对比,可以先关闭颜色,只看文字、边界和结构是否仍然能说明任务;再切换主题和缩放检查语义是否稳定。如果所有信息都依赖一块颜色或一张黑色面板,说明它只是强烈配色,不是高对比界面。
2设计原则
高对比界面和深色界面、极简设计都可能减少装饰,但它的核心是让语义关系在不同显示和使用条件下保持可辨认。颜色只是其中一层,文字、边框、状态词和焦点路径必须一起成立。
- 它和深色界面的差别在于高对比关注语义角色和可读性,不要求所有页面都使用深色背景。
- 它和现代简约的差别在于高对比优先保证状态、链接、错误和操作入口可区分,留白不能替代边界。
- 它和新粗野主义的差别在于高对比不是追求冲撞的黑块和厚边框,而是让每个视觉变化都能解释任务关系。
- 检查时要同时看普通主题、高对比主题、文字放大、键盘焦点和窄屏重排;单张桌面截图不能证明页面成立。
最简单的判断是:把颜色换掉之后,用户是否还能知道哪里是标题、哪里是错误、哪一行被选中、下一步要做什么。如果不能,就需要补足文字、结构或边界,而不是继续提高颜色饱和度。
3典型使用场景
- 公共服务申请表
Correct the application.
Fix the required field before submitting the updated documents.
- 运营状态工作台
Process the most important item first.
Select a record to reveal its status explanation and the next available action.
- 公共信息报告
Make every change understandable.
Use section navigation, clear notes, and comparable data to explain this year's service changes.
高对比界面的样张必须覆盖不同的信息任务:表单需要定位错误和完成提交,运营台需要辨认选中项和异常,报告页需要在长文、链接和数据之间保持阅读秩序。下面三张页面使用不同结构,只共享可辨识的语义边界。
- 公共服务申请表:用标签、错误摘要和明确按钮组织填写与修正。
- 运营状态工作台:用指标、状态文字和选中行支持快速处理。
- 公共信息报告:用章节、正文、提示和表格支持连续阅读与比较。
4怎样把高对比界面需求交给 Agent?
请制作一个高对比界面 High Contrast UI 风格的完整中文页面,先确定真实页面任务,例如公共服务申请表、运营状态工作台或公共信息报告,再为窗口、正文、链接、选中、按钮、成功、警告和错误定义清楚的语义关系。请使用足够的文字对比、边框、分组和留白降低辨认成本,不要只做黑底黄字或把所有内容塞进深色卡片;状态必须同时有文字或结构提示。检查 1440px、720px、390px 和 320px,确认标题、表单错误、链接、焦点和主要动作不裁切、不拥挤、不依赖颜色单独传达,也不要在共享背景里再套一张装饰卡片。
社区延伸
看别人真实遇到过什么
社区帖子还没有关联到这个词条。