visual-emphasis-and-hierarchy

视觉强调与层级

每个屏幕都有一个最重要的元素。视觉层级设计的作用，就是确保用户的目光首先落在它上面，而不必要求用户读完所有内容后自行判断。

通过尺寸、颜色、字重、对比度和位置来实现强调。这些手段之所以有效，是因为它们具有相对性：某个元素看起来重要，是因为它与周围元素有所不同。

层级阶梯

为每组操作和内容区域设计清晰的层级：

层级	作用	视觉样式
主要	用户最可能采取的唯一操作	填充样式、品牌色、组内最大的按钮
次要	重要性适中的备选操作	描边或幽灵样式、中性色、尺寸相同或略小
第三级	很少需要、具有破坏性或优先级较低的操作	文本链接或低调的幽灵样式、尺寸较小、视觉上不突出
禁用	当前不可用	低对比度、无悬停状态——表示“暂不可用”

每个视图或逻辑区块中，最多只能有一个主要操作。两个填充样式的按钮并排放置，会互相削弱对方——它们看起来同样重要，因此都无法引导用户。

通过尺寸强调

较大的按钮、标题或元素会比小的更先吸引目光。请有意识地使用尺寸：

• 主要 CTA 是其所属组中最大的交互元素
• 页面标题大于区块标题，区块标题又大于标签
• 特色产品、方案或选项可以比同级内容明显更大，以表示推荐

尺寸差异必须清晰可辨——相差 2px 看起来像不一致，而不是层级。排版使用模块化比例尺；组件则使用有意义的尺寸跨度。

通过颜色强调

颜色是最强的强调信号，因此也最容易被滥用。

• 主要操作使用一种品牌色——谨慎使用，以保留其提示作用
• 次要和第三级操作应使用中性色（灰色、描边），让主要颜色脱颖而出
• 状态颜色（红色、橙色、绿色）绝不应用于主要 CTA——它们本身带有语义

将品牌色用于大面积区域

品牌主色适合用作大面积背景区域，例如主视觉区块、特色横幅和区块分隔区域。这不同于将品牌色用于交互元素。

规则是：每个视图选择一种用途，并坚持使用。

• 品牌色用于大面积区域 → 该区块中的按钮和链接使用白色或高对比度的中性色，不要再次使用品牌色
• 品牌色用于交互元素 → 背景保持中性，让颜色保留其提示作用

品牌色用作醒目的背景时，能够传达品牌形象与活力。如果同时用于背景和按钮，就会失去提示作用——所有内容都会融为一体。

通过对比度和留白打造焦点

强调不仅关乎添加什么（颜色、尺寸），也关乎移除什么（干扰）。

**“对比度 + 空间”规则：要打造强有力的视觉焦点，请将高对比度元素（或醒目的品牌色）与其周围充足的留白（负空间）**结合起来。

• **隔离：**留白如同画框，让主要操作或信息脱颖而出。
• **视觉静谧：**移除附近相互竞争的元素，确保用户的目光只有一个合理的落点。
• **尺度：**在大片空白区域中的小型高对比度按钮，可能比拥挤布局中的巨型按钮更能吸引目光。

有意识地使用留白，将用户的注意力“推向”主要目标。

✓ Dark brand-colour hero section + white CTA button
✓ White page + brand-colour primary button
✗ Brand-colour hero section + brand-colour button on top of it

字重与对比度

字体粗细能传达文本中的重要性，并有助于快速浏览。

• 将承载观点的 2 到 5 个词组成的短语加粗。 加粗是标题之后的第二层浏览线索。只浏览标题和加粗文本的读者，应该能掌握其中的主张，而不是词汇。
• 将标题和标签加粗。 用字重区分信息结构与信息本身。
• 辅助内容使用常规字重。 描述和次要信息保持常规字重，为视线留出「休息区」。
• 元数据使用较浅或较柔和的颜色。 时间戳、次要标签或「小字说明」使用较低的对比度。

在数据密集型 UI（表格、仪表板）中，将主要指标或用于识别行的名称加粗。视线应能在一个个加粗的锚点之间跳转，从而快速定位数据。

短语从哪里开始，到哪里结束

只加粗一个词是突出术语，而不是观点。产品名称或从页面中摘出的行话也是如此。

好	「Figma 现在成了瓶颈。」／「没有标注的截图会让人凭空想象间距」
不好	单独一个词、专业术语、没有承载主张的泛泛短语

• 短语绝不能从「the」「a」或「an」开始。冠词会浪费强调效果。
• 结尾绝不能是无关紧要的词。视线会落在最后一个词上，因此它必须是承载重点的词。
• 加粗一个主张，而不是片段。如果加粗的文本单独读起来不能构成陈述，就调整边界或取消加粗。

只有当单个词本身就是 UI 元素时才加粗：例如徽标、标签、表格标签或统计卡片中的指标。在连贯的正文中，单词加粗总是不妥，因为不存在只有一个词的主张。

加粗应稀疏：每个章节大约一处，绝不要在同一段中出现两处。整页到处加粗，不是强调，只会造成干扰。

这条原则同样适用于正文和 UI：文章、落地页文案，以及 Agent 生成的任何长篇 Markdown 内容。

图像上的文字

文字直接叠加在照片或复杂图案上时，可读性往往会受影响。为保持层次感和可信度：

• 细腻的文字阴影： 使用柔和、模糊范围较大的 text-shadow（例如 0 2px 4px rgba(0,0,0,0.2)），让文字从背景中凸显出来。阴影应当只可感知，而不应明显可见；如果阴影很醒目，就说明效果太重。
• 图像色调与渐变： 在图像上叠加微妙的深色调或线性渐变（例如从透明渐变至 40% 黑色），提高文字背景区域的对比度。
• 选择性背景： 挑选素材时，寻找带有「负空间」或纯色区域的图像（例如晴朗的天空、纯色墙面），让文字能自然地放置其中。
• 遮罩层： 在文字所在的区域使用「遮罩层」（半透明渐变叠加），既保留图像鲜艳的色彩，又确保文字清晰易读。

用位置强调

在从左向右阅读的文化中，用户会先浏览左上方。位置有助于强化层次：

• 主要操作：放在表单或对话框的右下角（符合自然的阅读流程），或页面标题栏的右上角
• 最重要的内容：放在页面顶部、首屏可见区域内
• 落地页的主视觉应承载一个价值承诺，字号大且周围留白；下方内容的顺序请参阅 [[layout-paradigms-and-consistency]] 中的产品叙事框架
• 警告和关键状态：放在受影响章节的顶部，不要埋在底部
• 破坏性操作（Delete、Remove）：与建设性操作在视觉上分开，通常放在一组操作的末尾

在数据密集的视图中突出一个关键信息

当一个视图包含大量数据时，不要把所有内容都放在同一强调层级上呈现——这会把寻找重要信息的工作推给用户。相反，应确定当前使用场景中的唯一关键数字或事实，并将其设置为醒目且一目了然；其他内容则放在次要层级。

• 思考用户打开此屏幕是为了了解或完成什么，并让那项内容在大小、权重和位置上占据主导（例如醒目的标题指标、突出的状态或清晰的主要操作）。
• 可以删除或隐藏不太重要的数据——将其折叠、移到详情视图中或放在“显示更多”后面，也可以彻底删去（这与 [[information-architecture]] 中“不要一开始就呈现，而是隐藏”的做法，以及 [[ui-density]] 中的密度选择相辅相成）。
• **验证被降级或隐藏的内容。**什么是“关键”取决于用户，并非既定事实——最好通过真实终端用户进行测试。如果无法进行 UX 测试，至少应在发布前与业务或领域负责人确认优先级。此处猜错，就会隐藏某个人所需的关键信息。

每个视图只设置一个主要操作

层级设计中最大的错误，就是让所有内容都同等醒目。当每个按钮都使用填充样式、每个标题都加粗、每张卡片都突出显示时，用户就无法判断从哪里开始。

**规则：**在任何视图中，都要问：“对大多数用户来说，最可能进行的下一步操作是什么？”让这项操作在视觉上占据主导地位，其他内容则退居次要位置。

**包含多个工作流步骤的视图，每个步骤都设置一个主要操作。**搜索、对搜索结果执行操作以及保存，属于三个步骤；每个步骤都应有一个填充样式的按钮，并按阅读顺序排列。页头工具和每行操作保持次要地位。例外情况是只有一行处于活动状态，例如正在编辑的行：该行的确认操作就是此步骤的主要操作。

**优先级取决于视图，而非绝对不变。**同一操作在自己的页面中可以是主要操作，在更重要的操作旁边则可能是次要操作——应根据当前场景重新排序。“主要／次要／第三级”是你的命名；用户看到的只有填充样式、颜色、大小和位置。若需要设置第三级，通常说明视图过于复杂——应先简化。

光标

所有可点击或可交互的元素都必须使用 cursor: pointer。用户依靠光标变化来确认元素可以操作——如果没有这种变化，按钮和链接就会显得失灵或没有响应。

button, a, [role="button"], [onclick], label { cursor: pointer; }

不要让交互元素使用默认的 cursor: auto。唯一的例外是文本输入框，它们正确的设置是 cursor: text。

判定结果下方的说明应补充数量，而非重复同义信息

判定词下方的那行文字，应补充判定词未表达的信息：有多少、多少个、从何时开始。“无变化”放在“稳定”下面是在重复同一事实，会降低读者对卡片的信任。如果没有内容可补充，就将该行留空并保留其位置，避免布局高度变化。

检查清单

• 每个分区是否至多只有一个主要按钮（填充样式、品牌色）？
• 在包含多个步骤的屏幕中，每个步骤是否都恰好有一个主要操作，同时将每行操作和页头操作降为次要操作？
• 主要操作周围是否留有足够的空白，使其从周围内容中脱颖而出？
• 次要和第三级操作在视觉上是否弱于主要操作？
• 最重要的内容是否位于最上方和／或尺寸最大？
• 各层级之间的尺寸差异是否足够明显，而非只有 1–2px？
• 品牌色的使用是否足够克制，能保留其强调效果？
• 破坏性操作是否在视觉上与建设性操作区分开，并与其分隔？
• 所有按钮、链接和交互元素是否都使用 cursor: pointer？
• 每段加粗文字是否都能独立表达一个观点，长度为 2 至 5 个词，并且每段至多一处？
• 图片上的叠加文字是否易于辨认（使用阴影、色调处理或智能选图）？
• 判定结果下方的每条说明是否都补充了数字或细节，或者留空并保留其位置？

常见反模式

反模式	问题	修正方法
两个或更多实心主按钮并排	两者看起来同等重要，缺少引导	一个主按钮，一个次要按钮（描边样式）
在背景、标题和按钮上都使用品牌色	颜色失去了强调作用	将品牌色保留用于一种用途
数据密集型屏幕上的所有文本字重都相同	眼睛没有视觉切入点	加粗每组中的关键指标或标签
“取消”和“确认”按钮的大小和颜色相同	用户必须阅读文字才能区分	主按钮使用实心样式，“取消”使用幽灵按钮或文本链接
在明亮或杂乱的图片上使用白色文本	文本难以辨认或产生“振动感”	添加淡淡的文本阴影、图片色调，或选择带有纯色区域的图片
将重要警告放在首屏以下	用户会错过警告	在受影响区域的顶部显示关键状态
按钮在交互时改变大小或移位	感觉不稳定、不够精致（UI 显得“软塌塌”）	保持布局稳固不变；仅通过颜色和内部反馈进行变化