visual-emphasis-and-hierarchy

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Visual Emphasis and Hierarchy

视觉强调与层级设计

Every screen has a most-important thing. Visual hierarchy is the design work that makes sure the user's eye finds it first — without requiring the user to read everything and decide for themselves.

Emphasis is achieved through size, colour, weight, contrast, and position. These tools work because they are relative: an element looks important because it differs from what surrounds it.

每个界面都有其核心重点内容。视觉层级设计的作用就是确保用户的目光第一时间聚焦到该内容上——无需用户通读所有内容再自行判断。

可通过尺寸、颜色、粗细、对比度和位置来实现视觉强调。这些手段之所以有效，是因为它们具有相对性：某个元素看起来重要，是因为它与周围元素形成了差异。

The Hierarchy Ladder

层级阶梯

Design every action group and content area with a clear hierarchy:

Level	Role	Visual treatment
Primary	The one action the user should most likely take	Filled, brand colour, largest button in the group
Secondary	An alternative action of moderate importance	Outlined or ghost, neutral colour, same or slightly smaller size
Tertiary	Rarely needed, destructive, or low-priority	Text link or subtle ghost, smaller, visually recessive
Disabled	Unavailable	Low contrast, no hover state — signals "not yet"

There should be at most one primary action per view or per logical section. Two filled buttons side by side cancel each other out — both feel equally important, so neither guides the user.

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

层级	作用	视觉处理方式
主要（Primary）	用户最可能执行的核心操作	填充样式、品牌色、组内尺寸最大的按钮
次要（Secondary）	重要性中等的替代操作	描边或幽灵按钮样式、中性色、尺寸与主要按钮相同或略小
tertiary（第三级）	很少需要、具有破坏性或低优先级的操作	文本链接或浅幽灵按钮样式、尺寸更小、视觉上弱化
禁用（Disabled）	不可用状态	低对比度、无悬停效果——传递“暂不可用”的信号

每个视图或逻辑区域最多只能有一个主要操作。两个填充按钮并排会相互抵消视觉权重——两者看起来同等重要，无法引导用户做出选择。

Size as Emphasis

尺寸作为强调手段

A larger button, heading, or element draws the eye before a smaller one. Use size deliberately:

The primary CTA is the largest interactive element in its group
Page headings are larger than section headings, which are larger than labels
A featured product, plan, or option can be physically larger than its peers to signal recommendation

Size differences must be perceptible — a 2px difference reads as inconsistency, not hierarchy. Use your modular scale for type; use meaningful size steps for components.

更大的按钮、标题或元素会比小元素更先吸引用户目光。需刻意运用尺寸：

主要CTA是其所在组内尺寸最大的交互元素
页面标题大于章节标题，章节标题大于标签文本
主推的产品、方案或选项可设计得比同类元素更大，以此传递推荐信号

尺寸差异必须清晰可感知——仅2px的差异会被视为设计不一致，而非层级区分。为字体使用模块化比例；为组件设置有意义的尺寸阶梯。

Colour as Emphasis

颜色作为强调手段

Colour is the strongest emphasis signal and therefore the most easily overused.

One brand colour for primary actions — used sparingly so it retains its signal
Secondary and tertiary actions should be neutral (grey, outlined) so the primary colour stands out
Status colours (red, orange, green) should never appear on primary CTAs — they carry their own semantic meaning

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

主要操作使用单一品牌色——需谨慎使用，以维持其强调信号的有效性
次要和第三级操作应使用中性色（灰色、描边样式），让品牌色的主要操作脱颖而出
状态色（红、橙、绿）绝不能用于主要CTA——这些颜色本身带有特定的语义

Brand Colour as Large Areas

品牌色用于大面积区域

Brand primary colours work well as large background regions — hero sections, feature banners, section dividers. This is different from using brand colour on interactive elements.

The rule: pick one role and commit to it per view.

Brand colour as a large area → buttons and links on that section use white or a high-contrast neutral, not the brand colour again
Brand colour on interactive elements → backgrounds stay neutral so the colour retains its signal

Used as a bold background, brand colour communicates identity and energy. Used simultaneously on both backgrounds and buttons, it loses all signal — everything blends together.

品牌主色适合用于大面积背景区域——比如英雄区、功能横幅、章节分隔符。这与将品牌色用于交互元素的场景不同。

规则：每个视图中，品牌色仅承担一种角色。

品牌色用作大面积背景 → 该区域内的按钮和链接使用白色或高对比度中性色，不再重复使用品牌色
品牌色用于交互元素 → 背景保持中性，以维持品牌色的强调信号

品牌色用作醒目的背景时，传递品牌辨识度和活力。如果同时用于背景和按钮，会完全失去强调信号——所有元素混为一谈。

Contrast and Whitespace as a Focal Point

对比度与留白作为焦点

Emphasis is not just about what you add (colour, size), but also what you remove (distraction).

The "Contrast + Space" Rule: To create a powerful focal point, combine a high-contrast element (or a bold brand colour) with generous whitespace (negative space) around it.

Isolation: Whitespace acts as a frame, isolating the primary action or message.
Visual Silence: By removing competing elements nearby, you ensure the user's eye has only one logical place to land.
Scale: A small high-contrast button in a large empty field can have more "pull" than a giant button in a crowded layout.

Use whitespace deliberately to "push" the user's attention toward the primary goal.

✓ 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

视觉强调不仅在于添加元素（颜色、尺寸），还在于移除干扰项。

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

隔离效果： 留白如同框架，将主要操作或核心信息隔离出来。
视觉静默： 通过移除附近的竞争元素，确保用户的目光只有一个合理的聚焦点。
比例效应： 在大片空白区域中的一个小尺寸高对比度按钮，可能比拥挤布局中的巨型按钮更具“吸引力”。

刻意运用留白，将用户的注意力“推向”核心目标。

✓ 深色品牌色英雄区 + 白色CTA按钮
✓ 白色页面 + 品牌色主要按钮
✗ 品牌色英雄区 + 叠加在其上的品牌色按钮

Weight and Contrast

字体粗细与对比度

Typography weight communicates importance within text and aids scannability.

Bold for meaning, not just emphasis. Avoid bolding individual words in isolation. Instead, bold the meaningful parts of a sentence or a complete phrase that carries the key information. This allows users to scan and understand the core message without reading the whole block.
Bold headings and labels. Use weight to distinguish the structure of the information from the information itself.
Regular weight for supporting content. Keep descriptions and secondary info in regular weight to provide a "rest area" for the eye.
Light or muted colour for metadata. Use low contrast for timestamps, secondary labels, or "fine print".

In data-heavy UIs (tables, dashboards), bold the primary metric or the row's identifying name. The eye should be able to jump from one bold anchor to the next to quickly locate data.

字体粗细可传递文本内容的重要性，提升可扫描性。

为核心内容加粗，而非单纯为了强调。避免孤立地加粗单个单词。相反，应对句子中承载关键信息的有意义部分或完整短语加粗。这样用户无需通读整段内容，就能快速扫描并理解核心信息。
标题和标签使用粗体。通过字体粗细区分信息结构与信息内容本身。
辅助内容使用常规粗细。描述性文本和次要信息保持常规粗细，为用户的视觉提供“休息区”。
元数据使用浅色或低饱和度颜色。时间戳、次要标签或“小字说明”使用低对比度样式。

在数据密集型UI（表格、仪表盘）中，将主要指标或行的标识名称加粗。用户的目光应能在各个粗体锚点间跳转，快速定位数据。

Text Over Imagery

图像上的文本

Text legibility is often compromised when placed directly over photographs or complex patterns. To maintain hierarchy and credibility:

Subtle Text Shadow: Use a soft, high-blur text-shadow (e.g.
```
0 2px 4px rgba(0,0,0,0.2)
```
) to lift text off the background. It should be felt rather than seen — if the shadow is obvious, it's too heavy.
Image Tints & Gradients: Apply a subtle dark tint or a linear gradient (e.g. from transparent to 40% black) over the image to increase contrast behind the text.
Selective Backgrounds: When selecting stock footage, look for images with "negative space" or solid color areas (e.g. a clear sky, a plain wall) where text can sit naturally.
Scrims: Use a "scrim" (a semi-transparent gradient overlay) specifically in the area where text sits to preserve the image's vibrant colours while ensuring text is readable.

文本直接叠加在照片或复杂图案上时，可读性往往会受损。为维持视觉层级和可信度：

柔和文本阴影： 使用柔和、高模糊度的文本阴影（例如
```
0 2px 4px rgba(0,0,0,0.2)
```
），让文本从背景中“凸显”出来。阴影应隐约可见而非过于明显——如果阴影很醒目，说明效果过重。
图像色调与渐变： 在图像上添加柔和的深色色调或线性渐变（例如从透明过渡到40%黑色），提升文本背后的对比度。
选择性背景： 选择素材图片时，寻找带有“负空间”或纯色区域的图像（例如晴朗的天空、纯色墙面），让文本可以自然放置。
遮罩层： 在文本所在区域专门使用“遮罩层”（半透明渐变叠加层），既能保留图像的鲜艳色彩，又能确保文本可读。

Position as Emphasis

位置作为强调手段

Users in left-to-right reading cultures scan top-left first. Position reinforces hierarchy:

Primary action: bottom-right of a form or dialog (natural end of the reading flow), or top-right of a page header
Most important content: top of the page, above the fold
On a landing page the hero carries one value promise, large and with air around it — for the sequence below it, see the product narrative framework in [[layout-paradigms-and-consistency]]
Warnings and critical status: top of the affected section, not buried at the bottom
Destructive actions (Delete, Remove): visually separated from constructive actions, often at the end of an action group

在从左到右阅读的文化中，用户会首先扫描页面的左上角。位置可强化视觉层级：

主要操作：位于表单或对话框的右下角（符合阅读流程的自然终点），或页面页眉的右上角
最重要的内容：位于页面顶部、首屏范围内
着陆页的英雄区承载一个核心价值主张，尺寸大且周围留有充足空间——下方内容可参考[[layout-paradigms-and-consistency]]中的产品叙事框架
警告和关键状态：位于受影响区域的顶部，而非隐藏在底部
破坏性操作（删除、移除）：与建设性操作在视觉上分离，通常位于操作组的末尾

Surface the One Key Thing in Data-Heavy Views

在数据密集型视图中突出核心信息

When a view has a lot of data, don't present it all at one flat level of emphasis — that pushes the work of finding the important thing onto the user. Instead, decide the single key figure or fact for this use context and make it large and immediately findable; let everything else sit in a supporting, lower tier.

Ask what the user came to this screen to know or do, and give that the size, weight, and position (a big headline metric, a prominent status, a clear primary action).
You may drop or hide the less important data — collapse it, move it behind a detail view or a "show more", or cut it entirely (this pairs with the hide-don't-serve-up-front decision in [[information-architecture]] and density choices in [[ui-density]]).
Validate what you demote or hide. What's "key" is a claim about the user, not a given — ideally test with real end users. If UX testing isn't possible, at least validate the priority with the business / domain owner before shipping. Guessing wrong here hides the one thing someone needed.

当视图包含大量数据时，不要将所有内容都放在同一层级的视觉强调上——这会把寻找重要信息的工作推给用户。相反，应确定该使用场景下的单一核心指标或事实，并将其设计得醒目且易于立即找到；其他内容则作为辅助信息，放在较低层级。

思考用户进入该界面想要了解或执行的核心内容，为其赋予合适的尺寸、粗细和位置（例如大标题式的指标、醒目的状态标识、清晰的主要操作）。
你可以隐藏或移除次要数据——将其折叠、放在详情视图或“显示更多”按钮后，或直接删除（这与[[information-architecture]]中的“先隐藏而非直接展示”决策，以及[[ui-density]]中的密度选择原则相契合）。
验证你降级或隐藏的内容。“核心”是基于用户需求的判断，而非既定事实——理想情况下应与真实终端用户进行测试。如果无法进行UX测试，至少在上线前与业务/领域负责人确认优先级。判断错误可能会隐藏用户真正需要的内容。

One Primary Action Per View

每个视图仅保留一个主要操作

The biggest hierarchy mistake is giving everything equal emphasis. When every button is filled, every heading is bold, and every card is highlighted, the user has no signal about where to start.

Rule: In any view, ask "what is the single most likely next action for most users?" Make that one thing visually dominant. Everything else recedes.

Priority is per-view, not absolute. The same action is primary on its own page, secondary beside bigger ones — re-rank for the current context. "Primary/secondary/tertiary" are your names; the user sees only fill, colour, size, position. Needing a tertiary tier usually means the view is too complex — simplify first.

最常见的层级设计错误是给所有内容同等的视觉强调。当每个按钮都是填充样式、每个标题都是粗体、每个卡片都被高亮时，用户无法得到任何关于从何处开始操作的信号。

规则： 在任何视图中，思考“大多数用户最可能执行的下一个单一操作是什么？”让该操作在视觉上占据主导地位，其他所有内容都弱化处理。

优先级是基于视图的，而非绝对的。同一个操作在其专属页面上是主要操作，在更大的操作组旁可能是次要操作——需根据当前上下文重新排序。“主要/次要/第三级”是我们的命名，用户看到的只是填充样式、颜色、尺寸和位置。需要第三级操作通常意味着视图过于复杂——应先简化。

Cursor

光标样式

Every clickable or interactive element must use

cursor: pointer

. Users rely on the cursor changing to confirm that an element is actionable — without it, buttons and links feel broken or unresponsive.

css

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

Never leave interactive elements on the default

cursor: auto

. The one exception is text inputs, which correctly use

cursor: text

所有可点击或交互的元素都必须使用

cursor: pointer

。用户依赖光标样式的变化来确认元素可交互——如果没有该样式，按钮和链接会显得失效或无响应。

css

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

绝不要让交互元素保留默认的

cursor: auto

样式。唯一的例外是文本输入框，它应使用

cursor: text

样式。

Review Checklist

审核清单

Is there at most one primary (filled, brand-coloured) button per section?
Is the primary action framed by enough whitespace to stand out from surrounding content?
Are secondary and tertiary actions visually recessive compared to the primary?
Is the most important content positioned highest and/or largest?
Are size differences between hierarchy levels perceptible, not just 1–2px?
Is brand colour used sparingly enough that it retains its emphasis signal?
Are destructive actions visually distinct and separated from constructive actions?
Do all buttons, links, and interactive elements use
```
cursor: pointer
```
?
Does bold text appear only on genuinely important labels, values, or meaningful phrases?
Is text overlaid on images easily legible (using shadows, tints, or smart image selection)?

每个区域是否最多只有一个主要（填充样式、品牌色）按钮？
主要操作周围是否有足够的留白以与周围内容区分开？
次要和第三级操作在视觉上是否比主要操作弱化？
最重要的内容是否位于最高位置和/或尺寸最大？
层级间的尺寸差异是否清晰可感知，而非仅1-2px？
品牌色的使用是否足够克制，以维持其强调信号的有效性？
破坏性操作是否在视觉上与建设性操作区分开并分离？
所有按钮、链接和交互元素是否都使用了
```
cursor: pointer
```
？
粗体文本是否仅用于真正重要的标签、数值或有意义的短语？
叠加在图像上的文本是否易于阅读（使用了阴影、色调或合适的图片选择）？

Common Anti-Patterns

常见反模式

Anti-pattern	Problem	Fix
Two or more filled primary buttons side by side	Both feel equally important — no guidance	One primary, one secondary (outlined)
Brand colour used on backgrounds, headers, AND buttons	Colour loses emphasis signal	Reserve brand colour for one role
All text the same weight on a data-heavy screen	No visual entry point for the eye	Bold the key metric or label per group
"Cancel" and "Confirm" buttons the same size and colour	User must read to distinguish	Primary = filled, Cancel = ghost or text link
White text over a bright or busy image	Text is illegible or "vibrates"	Add a subtle text-shadow, image tint, or select images with solid-color areas
Important warnings placed below the fold	Users miss them	Surface critical status at the top of the affected section
Buttons changing size or shifting on interaction	Feels unstable and unpolished ("squishy" UI)	Maintain rock-solid layout; use color and internal feedback only

反模式	问题	修复方案
两个或更多填充样式的主要按钮并排	两者看起来同等重要——无法引导用户	保留一个主要按钮，另一个改为次要（描边样式）按钮
品牌色同时用于背景、页眉和按钮	颜色失去强调信号	品牌色仅用于一种角色
数据密集型界面上所有文本粗细相同	视觉上没有入口点	为每组的核心指标或标签加粗
“取消”和“确认”按钮尺寸和颜色相同	用户必须阅读文本才能区分	主要操作使用填充样式，取消操作使用幽灵按钮或文本链接
白色文本叠加在明亮或复杂的图像上	文本难以阅读或产生“视觉抖动”	添加柔和的文本阴影、图像色调，或选择带有纯色区域的图片
重要警告位于首屏下方	用户会错过	将关键状态放在受影响区域的顶部
按钮在交互时改变尺寸或位置	感觉不稳定且不够精致（“软塌”的UI）	保持布局稳定；仅使用颜色和内部反馈效果