设计界面视觉层级时，如何让最重要的操作和内容一眼可见

在设计按钮组、CTA、仪表盘、卡片或任何操作/内容有轻重之分的布局时，用尺寸、颜色、字重、对比和位置建立清晰的视觉层级。

适用场景

解决思路

1. 按层级阶梯设计每个操作组和内容区：Primary（填充、品牌色、组内最大按钮）、Secondary（描边或幽灵、中性色、同尺寸或略小）、Tertiary（文字链接或低调幽灵、更小、视觉后退）、Disabled（低对比、无 hover，表示“尚不可用”）。
2. 每个视图或每个逻辑区块最多只有一个 primary 操作；两个并排的填充按钮会互相抵消，谁都无法引导用户。
3. 用尺寸制造强调：primary CTA 是组内最大的交互元素；页面标题大于区块标题，区块标题大于标签；被推荐的产品/方案/选项可以比同类更大；尺寸差异必须可感知，2px 的差别只会显得不一致而非有层级。
4. 用颜色制造强调：只用一个品牌色给 primary 操作，且要克制使用以保留信号；secondary 和 tertiary 用中性色（灰、描边），让品牌色突出；状态色（红、橙、绿）绝不用在 primary CTA 上，它们自带语义。
5. 品牌色作为大面积背景（hero、feature banner、区块分隔）时，遵循“每个视图只选一个角色并坚持”：品牌色做大面积背景，则该区块的按钮和链接用白色或高对比中性色；品牌色用在交互元素上，则背景保持中性。
6. 用“对比 + 留白”规则制造焦点：把高对比元素（或醒目的品牌色）与周围充足的留白结合，用留白作为画框隔离 primary 操作或信息，移除附近竞争元素，让视线只有一个落点；大空白中的小高对比按钮可能比拥挤布局中的大按钮更有吸引力。
7. 用字重和对比表达文本重要性：加粗承载观点的 2–5 个词（标题之后的第二层扫读层）；加粗标题和标签以区分信息结构；正文和次要信息用常规字重作为眼睛的休息区；时间戳、次要标签、细则用浅色或低对比。
8. 在数据密集界面（表格、仪表盘）中加粗主要指标或行的标识名，让视线能从一个个加粗锚点快速跳转定位数据。
9. 加粗的文本簇必须能独立读作一个主张：不要以 the/a/an 开头，不要以废话词结尾（最后一个词是视线落点，必须是承载信息的那一个）；单个词只有在它本身就是 UI 元素（徽章、chip、表格标签、统计卡片指标）时才加粗，正文中永远不对单个词加粗。
10. 加粗密度要稀疏：大约每节一处，一段内绝不超过两处；整页都加粗等于没有强调，只有噪音。此规则同样适用于文章、落地页文案和任何长文 markdown。
11. 文字叠在图片上时保证可读性：用柔和的高模糊 text-shadow（如 0 2px 4px rgba(0,0,0,0.2)），应被感觉到而非看到；在图片上加轻微暗色 tint 或线性渐变（如从透明到 40% 黑）；选图时优先选有负空间或纯色区域（天空、素墙）的素材；在文字所在区域用 scrim（半透明渐变遮罩）既保留图片色彩又保证可读。
12. 用位置强化层级：primary 操作放在表单/对话框右下（阅读流自然终点）或页头右上；最重要内容放页面顶部、首屏内；警告和关键状态放受影响区块的顶部而非埋到底部；破坏性操作（Delete、Remove）与建设性操作视觉分离，通常放在操作组末尾。
13. 在数据密集视图中突出唯一关键信息：先确定用户来这个屏幕最想知道或做什么，把那个单一关键数字或事实做得大而好找，其余数据放在支撑性的低层级；可以折叠、移到详情视图、“显示更多”或直接删掉次要数据。
14. 验证被降级或隐藏的内容：什么是“关键”是关于用户的假设而非既定事实，最好用真实用户测试；无法做 UX 测试时，至少在发布前与业务/领域负责人确认优先级，猜错会藏掉某人真正需要的东西。
15. 优先级是每个视图相对的而非绝对的：同一个操作在自己的页面是 primary，旁边有更大的操作时就是 secondary，要按当前上下文重新排序；“primary/secondary/tertiary”只是你的命名，用户只看到填充、颜色、尺寸、位置；需要 tertiary 层级通常意味着视图太复杂，应先简化。
16. 所有可点击或交互元素必须使用 cursor: pointer（button, a, [role="button"], [onclick], label { cursor: pointer; }），绝不要让交互元素停留在默认 cursor: auto；唯一例外是文本输入框，它正确使用 cursor: text。
17. 发布前逐项检查：每节是否最多一个填充品牌色按钮；primary 操作周围留白是否足够；secondary/tertiary 是否视觉后退；最重要内容是否位置最高/最大；层级间尺寸差异是否可感知；品牌色是否克制到仍保留强调信号；破坏性操作是否与建设性操作区分并分离；所有交互元素是否 cursor: pointer；每段加粗是否可独立读作主张、2–5 词、每段最多一处；图片上的文字是否清晰可读。
18. 避免常见反模式：两个以上并排填充 primary 按钮（改为一个 primary 一个描边 secondary）；品牌色同时用在背景、页头和按钮（只保留一个角色）；数据屏所有文字同字重（每组加粗关键指标或标签）；Cancel 和 Confirm 同尺寸同颜色（primary 填充、Cancel 幽灵或文字链接）；白字叠在亮或杂的图片上（加 text-shadow、tint 或选纯色区素材）；重要警告放在首屏以下（移到受影响区块顶部）；按钮在交互时改变尺寸或位移（保持布局稳定，只用颜色和内部反馈）。

适用边界 · 注意事项

• 当界面本身没有重要性差异、所有操作确实同等重要时，不必强行制造层级。
• 当品牌规范或平台组件库已强制规定了按钮层级和颜色角色时，应遵循既有规范而非另起一套。
• 当无法验证“什么是关键”且没有业务/领域负责人可确认优先级时，不要贸然隐藏或降级数据。