4、视觉层级：通过色彩、大小、位置建立信息层级，引导用户视线流动

做可视化大屏，最怕什么？

最怕用户盯着屏幕看了三秒钟，然后问了一句：「我该看哪里？」

这个问题我遇到过太多次了。早期做的一个智慧城市大屏，我把所有数据都堆上去，觉得信息越全越好。结果甲方爸爸反馈说：「你们这屏看着挺炫，但我找不到重点。」说白了，就是没有视觉层级。

视觉层级是什么？就是通过设计手段，告诉用户「先看这里，再看那里，最后看这里」。让用户的视线按照你预设的路径流动，而不是像无头苍蝇一样乱撞。

4.1 色彩：最直接的注意力钩子

色彩是建立层级最快的方式。人眼对颜色的敏感度天生就高，尤其是暖色系。

我个人的习惯是：核心数据用高饱和度暖色，次要数据用冷色或低饱和度色。举个例子，大屏上最重要的那个数字——比如「今日销售额」，我会用亮橙色或金色。其他辅助指标，比如「昨日对比」、「环比增长率」，用蓝色或灰色。

为什么会这样？因为人眼在扫描画面时，暖色会「跳」出来，冷色会「退」回去。你想想看，一个红色圆点放在灰色背景上，你的视线会不由自主地被它吸引。这就是色彩的力量。

4.2 大小：谁大谁说了算

大小是另一个建立层级的利器。这个道理很简单——大的东西天然吸引注意力。

我在项目中遇到过一个问题：客户要求把十几个指标都放在一屏里，每个指标都要「显眼」。这怎么可能？都显眼就等于都不显眼。后来我给他们画了个图：

层级	字号范围	适用场景
一级（核心指标）	48px - 72px	总销售额、总用户数、核心KPI
二级（重要指标）	28px - 40px	增长率、完成率、分类数据
三级（辅助信息）	16px - 24px	标签、单位、时间戳、图例

你看，有了这个层级，用户一眼就能抓住重点。核心指标用大字号，占视觉主导地位。辅助信息用小字号，乖乖待在角落里。

嗯，这里要注意：大小对比要足够明显。一级和二级之间至少差20px，否则用户分不清谁更重要。我见过有人用32px和28px做层级区分，说实话，那跟没区分一样。

4.3 位置：左上角是黄金位

位置这个东西，跟阅读习惯强相关。我们从小读书都是从左到右、从上到下。所以大屏的视觉起点，天然就在左上角。

我做大屏布局时，会把最重要的信息放在左上或中上位置。次要信息放右侧或下方。最不重要的信息，比如系统状态、更新时间，放右下角。

我曾经犯过一个错：把最重要的数据放在了右下角，因为我觉得那个位置「对称好看」。结果用户反馈说找了半天才找到核心数据。从那以后，我再也不敢跟用户的阅读习惯对着干了。

4.4 组合拳：色彩+大小+位置一起上

单独用色彩、大小或位置，效果都有限。真正的视觉层级，是这三者的组合拳。

举个例子，假设我们要展示三个层级的信息：

• 一级信息：左上角，48px，亮橙色，带发光效果
• 二级信息：中间区域，32px，蓝色，普通样式
• 三级信息：右侧/下方，20px，灰色，无特殊效果

你看，用户视线会先被左上角的亮橙色大数字吸引，然后扫到中间的蓝色图表，最后才去看右侧的灰色辅助信息。这个流动路径是设计好的，不是随机的。

4.5 实战案例：一个销售大屏的层级设计

说个具体的例子。去年我做了一个销售大屏，需求是展示「全国销售额」、「区域排名」、「单品销量TOP10」和「实时订单流」。

我是这么分层的：

1. 一级（视觉焦点）：左上角「全国销售额」——48px金色数字，深蓝背景，带微光效。用户一进来就看到这个。
2. 二级（重要辅助）：中间区域「全国地图」——展示各省销售额热力图，颜色从深到浅。用户看完数字后，视线自然移到地图上。
3. 三级（次要信息）：右侧「区域排名」和「单品TOP10」——32px蓝色文字，列表形式。用户看完地图后，会扫一眼排名。
4. 四级（补充信息）：右下角「实时订单流」——20px灰色滚动列表。用户有需要时才看。

这个层级设计，用户反馈说「很舒服，一眼就知道重点在哪」。说白了，就是让用户的视线按照你预设的路径走，而不是让用户自己去「找」重点。

4.6 总结一下

视觉层级这件事，说白了就是「设计用户的视线路径」。用色彩做钩子，用大小定主次，用位置排顺序。三者结合，就能让用户按照你设计的路线，高效地获取信息。

我个人的经验是：每次做完大屏，自己先盯着看10秒钟。如果10秒内找不到重点，那就说明层级没做好。改，直到一眼就能看出「该看哪里」为止。

嗯，下一章我们会聊「动效与交互设计」，到时候再细说怎么用动效来强化视觉层级。今天就先到这里。