SPT术语库

高对比界面 High Contrast UI

当政府服务、运营台账、公共信息或需要高可读性的产品页面必须降低视觉不确定性时,高对比界面用成对的语义颜色和明确结构组织阅读。

设计风格约 8 分钟 · 从真实需求理解

1让下一步一眼可见

CLEAR SERVICE DESKTODAY'S WORKSPACE / 09
Contrast mode is active: every status is stated in words and structure.
TODAY'S TASK · TUESDAY

Make the next step obvious.

A clear task title, explicit status, and reachable action help every person complete the next service step.

PROCESS SELECTED ITEMVIEW SERVICE NOTES
SELECTED ITEMDOCUMENT UPDATE REQUEST
QUEUE STATUS08 OPEN ITEMS
02 items need action today
OPENDOCUMENT UPDATE REQUESTProof of address missing · action required
CURRENT
READYADDRESS CHANGEMaterials received · ready for review
VIEW
UPDATEDAPPOINTMENT UPDATEApplicant confirmed the new time
VIEW
CLEAR STATUS · STRONG BOUNDARIES · REACHABLE ACTION
LEGIBILITY FIRST · SEMANTIC PAIRS · NEVER GUESS BY COLOR16 / 33

高对比界面 High Contrast UI 通过稳定的语义色、清楚的边界、足够的文字对比和明确的操作路径降低辨认成本。它不是把所有区域做成黑底黄字,而是让窗口、文字、链接、选中、按钮和状态彼此有可预测的关系。

  • 先定义窗口、正文、链接、选中、按钮和错误的语义角色,再为这些角色分配成对的颜色和边界。
  • 成功、警告和错误必须同时有文字、图标或结构提示,不能只用颜色区分。
  • 用边框、分组、留白和清楚的行高建立层级,避免用一堆深色卡片和阴影制造黑块感。
  • 在放大文字、窄屏、键盘操作和不同高对比主题下检查标题换行、焦点顺序、表单错误和主要动作。

判断一张页面是否真正高对比,可以先关闭颜色,只看文字、边界和结构是否仍然能说明任务;再切换主题和缩放检查语义是否稳定。如果所有信息都依赖一块颜色或一张黑色面板,说明它只是强烈配色,不是高对比界面。

2设计原则

高对比界面和深色界面、极简设计都可能减少装饰,但它的核心是让语义关系在不同显示和使用条件下保持可辨认。颜色只是其中一层,文字、边框、状态词和焦点路径必须一起成立。

  • 它和深色界面的差别在于高对比关注语义角色和可读性,不要求所有页面都使用深色背景。
  • 它和现代简约的差别在于高对比优先保证状态、链接、错误和操作入口可区分,留白不能替代边界。
  • 它和新粗野主义的差别在于高对比不是追求冲撞的黑块和厚边框,而是让每个视觉变化都能解释任务关系。
  • 检查时要同时看普通主题、高对比主题、文字放大、键盘焦点和窄屏重排;单张桌面截图不能证明页面成立。

最简单的判断是:把颜色换掉之后,用户是否还能知道哪里是标题、哪里是错误、哪一行被选中、下一步要做什么。如果不能,就需要补足文字、结构或边界,而不是继续提高颜色饱和度。

3典型使用场景

  • 公共服务申请表
PUBLIC SERVICE CENTREAPPLICATION / 04
DOCUMENT UPDATE · STEP 2

Correct the application.

Fix the required field before submitting the updated documents.

SUBMIT DOCUMENTSSAVE AND CONTINUE LATER
APPLICATION STATUSACTION REQUIRED
Fix the required field before submitting
1 item needs correctionProof of address is missing. Add a document before submitting.
SAVE AND CONTINUE LATER
  • 运营状态工作台
OPERATIONS STATUS DESKQUEUE MONITOR / 09
TODAY'S QUEUE · NEEDS ATTENTION

Process the most important item first.

Select a record to reveal its status explanation and the next available action.

PROCESS SELECTED RECORDVIEW FULL QUEUE
URGENT02 ITEMSCOMPLETED TODAY16 ITEMS
CURRENT QUEUE08 ITEMS
Status is stated in words and boundaries
HIGH PRIORITYREFUND REVIEWService window exceeded · supervisor approval needed
URGENT
STANDARD QUEUEDOCUMENT UPDATE REQUESTWaiting 18 minutes · materials incomplete
SELECTED
COMPLETEDADDRESS CHANGEReview completed at 09:42 today
CLOSED
  • 公共信息报告
PUBLIC INFORMATION REPORTANNUAL REPORT / 2026
CITY SERVICES · PUBLIC BRIEFING

Make every change understandable.

Use section navigation, clear notes, and comparable data to explain this year's service changes.

Explain what changed first, then show how it affects people.
01WHAT CHANGED THIS YEARService entry points and processing timesREAD
02WHO IS AFFECTEDPaths for different groups of residentsCURRENT
03DATA APPENDIXCompare outcomes by regionCONTINUE
JUMP TO KEY CHANGESDOWNLOAD TEXT VERSION

高对比界面的样张必须覆盖不同的信息任务:表单需要定位错误和完成提交,运营台需要辨认选中项和异常,报告页需要在长文、链接和数据之间保持阅读秩序。下面三张页面使用不同结构,只共享可辨识的语义边界。

  • 公共服务申请表:用标签、错误摘要和明确按钮组织填写与修正。
  • 运营状态工作台:用指标、状态文字和选中行支持快速处理。
  • 公共信息报告:用章节、正文、提示和表格支持连续阅读与比较。

4怎样把高对比界面需求交给 Agent?

请制作一个高对比界面 High Contrast UI 风格的完整中文页面,先确定真实页面任务,例如公共服务申请表、运营状态工作台或公共信息报告,再为窗口、正文、链接、选中、按钮、成功、警告和错误定义清楚的语义关系。请使用足够的文字对比、边框、分组和留白降低辨认成本,不要只做黑底黄字或把所有内容塞进深色卡片;状态必须同时有文字或结构提示。检查 1440px、720px、390px 和 320px,确认标题、表单错误、链接、焦点和主要动作不裁切、不拥挤、不依赖颜色单独传达,也不要在共享背景里再套一张装饰卡片。

社区延伸

看别人真实遇到过什么

社区帖子还没有关联到这个词条。