返回知识库

产品与设计 · 视觉基础

视觉层级Visual Hierarchy

用字号、字重、明度、间距和位置排出阅读顺序,让最重要的先被看到。

节目单排版:让观众先认出演出

先看这张真实节目单,再修复它的扫读顺序;操作结果会直接长在标题、场次分组与选座入口上。

真实物件:剧场门厅与购票页都会出现的节目单。默认所有信息同权重,观众第一眼找不到演出名。

! 当前是等权误排
山海剧场秋季首演 · NO. 07

荒诞喜剧 / 110 分钟

夜航船

在城市熄灯以前,和陌生人共乘一段海上的夜。

场次
9 月 21 日 19:30
地点
海风厅 · 二层
第一眼在四处游移立即选座 ↗

失败状态:节目名、说明、场次和选座几乎一样醒目;即使内容齐全,观众仍要来回寻找。

从节目单里读出的三条原则

视觉层级不是把所有东西做大,而是把同一屏的信息排成可预测的先后。

  • 体量先定第一眼:字号、字重与占据面积共同决定主角,节目名应先被认出。
  • 位置和距离续写顺序:日期与地点靠近成组,再与标题和行动拉开层次。
  • 强调必须稀缺:每项都醒目就等于没有重点,色彩只能加强已经成立的结构。

什么时候要重排层级

当用户总先看到错误信息、找不到下一步或必须反复扫视时使用;层级已经清楚的单一信息页不必为了热闹继续加重。

适合

活动海报、新闻封面、商品详情、支付确认等需要明确“先看什么、再做什么”的页面。

不适合单独解决

内容本身缺失或文案含糊时,放大标题不能补回信息;应先修内容,再排顺序。

怎么从任务排出顺序

先写阅读任务,再用最少的视觉变量把它翻译到真实版面。

  1. 写下用户离开这一屏前必须知道的一件事,以及紧接着要做的动作。
  2. 只给第一信息最高体量;相关信息靠近,辅助信息降低字号、字重或明度。
  3. 在手机和桌面各扫一遍,复述实际看到的前三项;与任务不一致就回调层级。

同一节目单:正例与反例

目标相同,只改变信息是否等权。

正例 · 只保留一条扫读主线

演出名最大,场次地点紧随其后,选座入口在阅读末端接住行动。

结果:三次扫视就能完成“认节目—看时间—去选座”。
反例 · 每条信息都争第一

节目名、宣传语、日期和按钮字号接近,边距也相同。

后果:用户不是看不到信息,而是不知道该先看哪一条。

快速自测

一张展览海报要先让路人认出展名,再知道日期,最后扫码预约。哪种排法最合适?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。