跳到主要内容

样式与 CSS · 视觉设计

视觉层级

Visual Hierarchy

也叫:信息层级、视觉层次、主次关系

用大小、粗细、颜色、位置和留白区分信息的主次,让用户一眼看出先看什么、再看什么、该点哪里。

示例

详细解释

页面上的信息重要程度不同。视觉层级就是让最重要的东西最显眼:更大的字号、更粗的字重、更深或更鲜艳的颜色、更靠上的位置、周围更多的留白;次要信息则缩小、变浅、往后放。

按钮也有层级:一个区域里通常只有一个主要按钮(实心主色),其他是次要按钮(描边或浅色背景)和文字按钮。三个按钮都做成醒目的实心蓝色,用户就不知道该点哪个。

自测方法是「眯眼测试」:眯着眼看页面,只剩模糊的色块,这时最突出的应该就是最重要的内容。AI 生成的页面经常所有东西一样大、一样粗,可以明确告诉它哪个是第一重点。

开发者信息
术语 ID
style-visual-hierarchy
DOM 选择器
没有 DOM 线索,这个概念不在页面上直接识别。
优先级
1 · 同一层有多条命中时,优先级高的胜出
版本
v1 · 更新于 2026/09/29