理解视觉层级 (上) 如何构思层级 | 深度方法 01

legendgw

南京/平面设计师/3年前/1783浏览

版权

legendgw

视觉层级是设计的基础。做好层级的构思，就完成了好设计的第一步。如何做？本文结合案例，系统介绍了构思三个步骤、九类语法。

引

层级是视觉传达的基础。

我们在使用自然语言时，要依赖正确的 "语序" 才能准确表达含义。对于视觉来说，我们是通过规定信息的 "视觉层级" (visual hierarchy) 来让它们按照我们期望的顺序来表达。

因此，成功设计的关键在于确保层级高的信息优先被观众感知到。例如一个电影海报，设计者希望电影的主题是最高层级的信息，但实际上大部分观众都先注意到了主演的名字，那这样的设计就是失败的——视觉层级与预期不符。

《理解视觉层级》系列共计划三篇文章：上篇介绍如何构思层级；中篇在构思之上讲如何实现层级；下篇规范层级的分析和评审过程。本文是层级分析法系列的上篇，希望能够给大家带来一些新鲜的东西。请保持好奇，持续思考。

正文

在动手做设计之前，如何构思信息的视觉层级？

回想一下我们在做汇报或演讲之前如何构思的。我们可能会先列一个大纲，梳理好先说什么后说什么，哪些要重点强调，哪些可以快速提及，等等。视觉层级的构思也应该遵循一个类似的 "大纲"。因此，本文尝试规范了一套三步式的层级构思法：拆分语义片段，描述层级结构，补充关联信息。我们会用一个案例来完整地演示一遍。

拆分语义片段

这里有一则活动通知[1]：

图1.1

现在，假设我们认为这些内容已经准确且完整了，需要将其加工成一份平面海报。首先，我们必须将这段完整内容拆分为相对独立的语义片段。

为什么要先拆分？因为这段话包含许多信息，但并非所有信息都同等重要。如果不进行拆分，所有信息都在同一层级，无法保证更重要的信息优先被注意到。因此，将信息拆分成更小的片段，并为每个片段分配匹配其重要性的层级，才能确保表达效果最优。在这里，我选择将这段话分为五段：讲座嘉宾、主题、时间地点联系人、费用以及最后的落款。每个段落之间用 "/" 隔开：

图1.2

你当然可以有完全不同的分法，只需要确保遵守以下条规则：

每段信息的语义相对完整。比如有些人名和专业术语，拆分后就失去意义了。
每段的信息量不宜过多。判定过多的简单标准是一次是否能解读完[2]，如果不能，本质上相当于拆分开了。

这里的规则都是经验性的，因此可以在必要的时候挑战规则，获得惊喜的效果。我们这里暂且遵守规则，在下文 "层级与调性分离" 一章中，我们会看到不同的可能性。

描述层级结构

第一步的 "拆分" 完成后，接下来我们将拆好的信息排列成层级式的结构 (hierarchical structure)。同样，我还是用 "/" 来区分不同的层级：

图2.1

这里的排列顺序是怎么定的？重要性？

注意，我们是按照 "视觉先后" 的顺序来排的，而非信息客观上的重要性，这很关键。对于这里的活动来说，尽管时间地点在客观上可能比主题更重要，但是并不一定需要先被看到——如果活动主题无法吸引观众决定参加，可能他们就不会继续了解活动时间地点了。

所以，层级是按照观众先看什么、后看什么的顺序来决定的。如果你有充分的理由认为时间地点应该最先被看到，那么它也可以成为第一层级。因此，设计师想要确保构思合理，要去搞明白观众的兴趣和需求。观众是更熟悉主讲人Alan Cooper么？"免费" 讲座有多大吸引力？这些都可能成为你指定谁为第一层级，谁为第二层级的依据。

视觉层级是观众看的顺序，而不是重要性。

(当然，我这里的例子是虚构的，因此你只要能自圆其说即可。设计师如何去了解需求并非本文探讨的内容)

一旦知道这些，划分层级的任务就初步完成了。如果想要做的更细致一些，我们还可以将一些无关紧要的内容去掉或者改写。只要语义不变，设计师大可选择自己认为最有效的表达方式。于是我们有了下面这个版本：

图2.2

这里我不仅用 "/" 区分了层级，还用数量来表示层级与层级之间需要多高的区分度；同时，我们还可以将好几个片段并列，用 "—" 连接，表示它们同属于一个层级。这些都让我们能够更精确地描述自己构思。可以做的还很多，不过层级分析法作为一套指导应用的方法，需要是绝对高效的同时相对精准。这样的精准度已经不错了。

不过这个版本还有一个致命问题。

补充关联信息

当我们把关键信息都各自抽离出来后，这些信息之间的关联却被我们丢失了。比如，Alan Cooper是讲座的主讲人而不是主题，在原文中有，但是上图中无法体现。因此，我们必须在已有信息的层级结构之上，补充它们之间的关联结构，这样等我们做完之后，就可以用这张图来逐一检查：每一个层级是否清晰区分，同时，每条关联是否准确实现。我用弧线来连接被关联的层级：

用户画像是目标导向设计相关概念
Alan Cooper是主讲人
Alan Cooper是《交互设计精髓》作者
讲座是免费的

图3.1

潜在的关联还有很多，比如 "用户画像是Alan Cooper提出的概念" 以及 "王老师是活动组委会成员" 这种其实并不太相关。具体需要在构思中补充几条，设计师根据需要自己来定。想要表达的关联越多，对于实现的要求自然也就越高，而一个明确的原则是宁可少区分一个层级或者少表达一组关联，也要保证已经表达的足够有效。

至此，我们可以认为，自己想要表达的信息层级已经规划清楚了。为了方便指代，我们将上面这样的由 "语义片段-层级结构-关联" 三个要素组成的示意图叫做 "关联式层级图" (interconnected hierarchical diagram)[3]。下面一步就是如何确保图中的层级合关联逐一被实现了，我们会在接下来的《中篇：如何实现层级》里展开讲解。

结构图的形式

有人会问，构思层级时一定需要使用上面这种结构图吗，为什么不用我们更熟悉的思维导图或者树状图？事实上，不同形式的结构图本质上都是由节点与连接线构成的，因此只要确保下面几个条件满足，理论上都可以用：

每一个节点表示一个信息片段
每个节点具备 "层级" 属性
信息片段的关联用节点之间的连接线表示

剩下的只是画起来有多麻烦、适不适合的问题。我这里放一个思维导图的例子。为了满足上面的条件，我们用一个节点表示信息片段 (1)，用节点之间连线表示关联 (3)，最后把同级节点对齐来表示层级 (2)：

图4.1

上面这张图，右边的关联式层级图可以用左边的思维导图很好地对应。但是如果我们想要做如下修改，比如：

取消A-B之间的关联
将C放在第3层级
增加D、C之间的关联

加上这些修改，思维导图画起来就麻烦不少：

图4.2

注意这里，取消A、B的关联直接导致A变成了一个自由节点；而A、B都是1级节点但是不能对齐；增加D、C之间的关联后，必须要手动画一条线把D连到C上，而这种思维导图并不支持一个节点连接多个父级——很麻烦。反观右边的层级图，并不需要任何规则调整，所以更适合。如果各位读者发现更好的做法，欢迎和我讨论。

除此之外，本文的画法还有一个优势，就是可以直接用文本的格式来写，无需作图。图3.1中的结构可以直接写成如下格式：

# 图3.1
# 层级
1 用户画像
/
/
2 目标导向设计
/
3 alan cooper
/
/
/
4 主讲人
5 — 交互精髓作者
/
6 讲座
/
7 2023.4.7周五
8 — 晚19:00-20:00
9 — 地点学校报告厅
10 — 报名请联系王老师
/
11 免费
/
/
/
12 活动组委会宣
# 关联
1 → 2
3 → 4
3 → 5
6 → 11

在后面的案例里，为了便捷，我们都用这种文本的格式来表示层级构思，而这里的 "/" "—" "→" 分别指代的 "分级" "同级" 和 "关联"，我们可以叫做层级语法 (hierarchy syntax)。定义这样的语法之后，我们就将这个层级构思的过程形式化了——形式化就让这套方法在高效、准确之上，增加可靠性 (reliability)[4]。

保证高效、绝对可靠、相对准确。这是我们对于一个好的应用理论 (practical theory) 的要求。

现在这三种语法还不齐全，我们在下文中会借助案例来做一轮拓展。

层级与调性分离

在进入案例之前，需要正式声明一点：优秀的作品除了需要考虑层级，还需要考虑视觉调性 (visual tone)。层级表达语义，调性表达情绪，两者缺一不可。而这两个谁更重要视具体场合而定，例如简历、演示PPT对于语义精准的要求大于情感表达；而概念海报、装饰壁纸则相反。当层级和调性出现冲突时，选择适当的牺牲更不重要的一方来成就另一方是很正常的事情——设计本就是一个权衡的过程。

下面我选取了两个为了调性而牺牲层级的案例。这两者的思路可以简单地概为省略、压缩。先看省略的例子：

Karl Gerstner是谁？作者应该是要在海报上说明的，只留一个人名语义显然不完整。然而，作者最后出于调性的考量，选择了省略不说。看一下[5]，那是一张Karl Gerstner的作品，你或许会明白作者为何这么选择了。

相比于省略是该说的没说，压缩则是该区分的层级没区分。这个作品上的字并不少，依据作者给的介绍，一共30个词，都是关于 "幸福" 的，我放在了下面的层级结构表里。这些信息不仅全部压缩在了一个层级里，而且混杂在干扰项之中，让整张海报变成一个寻字游戏。"寻找" 和 "幸福”？

# 图5.2
# 层级
1 Sunrise —— miracles —— faith —— confidence —— moments —— consciousness —— feelings —— experiences —— moments —— life —— dreams —— magnanimity —— respect —— choices —— gratitude —— laroc —— music —— dance —— feelings —— energy —— friends —— family —— peace —— harmony —— meanings —— universe —— nature —— beat —— love
# 上述信息全部在同一层级！

上面这两个例子很显然都挑战了我们在 "拆分语义片段" 里定义的经验规则，即每个片段信息不能过少，也不能过多。但是这样的挑战本质是出于调性和层级间妥协需要。因此我们在设计作品时，如果没有足够的调性动机，不要去挑战这两条规则。

实际上，除了省略和压缩，还有第三种思路，但是涉及到占位层级的概念，我们在放案例里面说。

层级与调性可以分离，我们可以做出层级完全一致，但是调性完全不同的作品的，反之亦然。比如，下面这两张海报都是按照上面活动通知的层级来做的，层级关系完全一致。但是后一张比前一张的调性表达清晰很多，高亮、符号、材质、几何图形、线条都丰富了调性，但是在层级上并没有太多影响。因此，如果你觉得后一张更好，那大概率和层级无关——是调性决定的。

图5.3

图5.4

理解层级与调性的关系，可以让我们在评审作品时更明确问题根源。而本系列的文章只讲解如何系统性构思、实现和分析层级，不涉及过多调性的讨论，有机会单独再开一篇深度系列来讲。最后，关于上面两张海报在层级实现上一致的结论是如何得出的，我们会在《下篇：如何分析层级》里，借助标准化的分析工具 (基于视觉信息加工的分析法) 来详细讲解，敬请期待。

案例

接下来会用案例来探索层级语法更多的可能性。当前我们只定义了 "/" 分级、"—" 同级和 "→" 关联，接下来我们会依次接触图像标记、同级-合作，同级-竞争，以及占位层级。案例的选择方面，我也考虑了除了平面海报之外的载体，比如书籍装帧和用户界面，希望大家能对这套层级构思法有更深刻的理解。

图像

我们上面出现的案例，最终的呈现大多是文字。那些有图像的作品怎么使用结构图规划层级？

图像分两种，表达语义的和不表达语义的。背景图、无意义几何图形、抽象图案、填充材质都可以视为纯粹调性的表达，完全不涉及语义，因此我们在层级构思时完全不要考虑。剩下只要考虑具象前景中具象的图像即可，比如下面这本书封面中的眼睛：

# 图6.1
# 层级
1 eyes [p]
/
2 how to see
/
/
3 phaidon
4 — george nelson
/
5 visual adventures in a world god never made
# 关联
1 → 2
2 → 5

我们直接将 "眼睛" 作为独立的语义片段写在了第一层级上，并且用 [p] 标记该层级需要用图像表达。同时，眼睛的图案融在了书名 "HOW TO SEE" 里，因此两者之间的关联也要补上。

当然，这里的图像语义单一且清晰。有的时候图像本身包含的语义就很复杂，甚至图像内部的元素都可划分成好几个层级，这样的作品在构思层级时的思路就不太一样了。我会单独开一起继续说。

同级语义：并列，合作，竞争

大家可能没有注意到，我们之前只标记了不同层级信息之间的关联。原因很简单，我们默认同级信息之间都是并列关系。而除了并列，其实同级之间还可以有合作或者竞争关系。为了区分，我们用 "—" 特指同级-并列，而用 "+" 指代合作，"|" 指代竞争。

构成合作关系的信息本身都不完整，必须合在一起后，才算共同占据了这个层级。相反，构成竞争关系的信息各自都是完整的，无法合并；但它们每次只允许有一个能够占据这一层级，而其余的则要被挤到下一层级。我们来看下面这个例子：

图7.1 ant design 表单页模板 - 基础分步表单

这是一张Ant Design表单页的范例。这里面我们关心下面两组同级信息：

步骤提示 "1.创建实验" 和主按钮 "下一步"。下一步按钮必须结合当前步骤，语义表达才算完全，因此两者之间是合作关系。
页标题 "分布表单" 和主按钮 "下一步"。用户界面设计中，页标题和主按钮之间是最典型的竞争关系。设想一下，进入页面的用户分为两种：一部分关心自己在哪里，另一部分关心自己要做什么。那么如果我们只让页标题的层级高于主按钮，那我们相当于牺牲了一半用户体验，反过来同理。因此，最优办法是让两者同级竞争，依赖用户自上而下的预期来自动决定谁占据第一层级。

# 图7.1
# 层级
1 页表题分步表单
2 | 下一步
3 + 第一步·创建实验
/
4 返回
5 | 填写所属项目 — 输入用户角色 — 输入实验名称 — 可选输入实验描述
6 | 第二步·设置参数 — 第三步·发布实验
# 关联
1 → 4
3 → 6

占位层级

思考一下，每一个层级的信息必须要被有语义的信息占据么？如果我把最高的几层都放上无意义的几何图形，而将语义信息压到最低层级会怎样？大致的体验会是："这是什么？这又是什么？——哦，原来是这样"。这也就是我们之前提到了除了省略、压缩之外，第三种为了调性而适应层级的方法：悬疑。

这张图的视觉层级被大量无意义的直线和圆弧占据。仔细看，这里的占位元素一共有四组，最大的两组都比内容部分的 "prague school of design" 的层级高。我们用 "[ ]" 来指代占位用的元素，于是图8.1的层级构思可以写成这样：

很显然，这些占位元素向观众设置了悬念——作者到底在这些元素里藏了什么？其实，作者还做了下面这个版本：

乍一眼看，这张和上面一张几乎一样，最高层级都是占位元素。但是看到内容部分的 "prague school of design" 时，是不是立刻发现最高层级其实就是 "prague"? 这样就实现了在悬疑之上实现了惊喜。

# 图8.2
# 层级
1 [] # prague
/
/
2 [] # school
/
3 prague school of design
/
4 19-25.06.15
/
5 prague school of design
/
6 [] # design
# 关联
2 → 6 → 13 → 15

至此为止，我们已经有了一套相对完整的层级语义，可以将各种需要表达的内容形式化。这其中甚至包括合作、竞争、悬疑和惊喜这样复杂的表达效果。我们最后做一些汇总。