样式与 CSS · 视觉设计
视觉层级
Visual Hierarchy
也叫:信息层级、视觉层次、主次关系
用大小、粗细、颜色、位置和留白区分信息的主次,让用户一眼看出先看什么、再看什么、该点哪里。
详细解释
页面上的信息重要程度不同。视觉层级就是让最重要的东西最显眼:更大的字号、更粗的字重、更深或更鲜艳的颜色、更靠上的位置、周围更多的留白;次要信息则缩小、变浅、往后放。
按钮也有层级:一个区域里通常只有一个主要按钮(实心主色),其他是次要按钮(描边或浅色背景)和文字按钮。三个按钮都做成醒目的实心蓝色,用户就不知道该点哪个。
自测方法是「眯眼测试」:眯着眼看页面,只剩模糊的色块,这时最突出的应该就是最重要的内容。AI 生成的页面经常所有东西一样大、一样粗,可以明确告诉它哪个是第一重点。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
style-visual-hierarchy- DOM 选择器
- 没有 DOM 线索,这个概念不在页面上直接识别。
- 优先级
- 1 · 同一层有多条命中时,优先级高的胜出
- 版本
- v1 · 更新于 2026/09/29