层级：一屏只有一个主角
打开一个页面，视线总得先落在某一处。设计者不安排这个落点，读者的眼睛就会自己乱撞。这一节讲层级：怎么用字号、字重、颜色三根杠杆，把「先看哪」安排明白。
注意力是稀缺资源，界面上每个元素都在抢。加粗、标红、放大，单独看每一下都有道理，叠在一起就互相抵消：五个主角同台，观众谁都记不住。层级的做法反过来，先选出一个主角，再让其余角色按重要程度递减。手里的杠杆就三根：
| 杠杆 | 怎么用 | 常见翻车 |
|---|---|---|
| 字号 | 主角比配角大一到两档就够，档位拉开、数量克制 | 三个元素都用最大号，大字互相打架 |
| 字重 | 正文 400、强调 700，两档打天下 | 满屏加粗，粗就失去了「更重要」的含义 |
| 颜色 | 强调色只给一个动作或一个数字 | 标红三处，读者不知道哪个红才是真警报 |
《About Face 4：交互设计精髓》第 17 章讲视觉层级，开头就把用户看界面的第一反应拆成两个下意识的问题：「这里什么重要」，紧接着「这些东西有什么关联」。Cooper 的结论：界面要靠建立层级和关系来回答这两个问题。层级答得好，用户几乎不会留意到它的存在；答得糟，混乱立刻跳出来。
这两个问题就是本节的验收口诀。下面每个案例，你都可以先自问一遍：主角三秒内找得到吗？哪些元素一眼能看出是一伙的？
下面是一张商品卡，三根杠杆都交给你：主标题字号、次要信息颜色、强调色数量。拉动它们，观察卡片的「主角」怎么变。
新手立层级爱走加法：主角不够醒目？加大、加粗、上底色。Cooper 给的建议正好相反：两个元素抢注意力时，调低次要的那个，胜过调高重要的那个。调低给主角腾出了空间；调高只会掀起军备竞赛，这一版标题加大，下一版按钮跟着加大。原书的比方：满屏每个字都是红色粗体时，哪个字凸显得出来？
层级要靠视觉变量传出来，但变量分两种脾气。《About Face 4》沿用 Bertin《图形符号学》的分析：大小和色值（明度）是有序变量，人眼会自动把「更大」「更深」读成「更重要」；色调（红、蓝、绿）没有天然顺序，读者排不出红和蓝谁先谁后，还会往颜色里猜含义。传层级，优先用有顺序的那两根杠杆。
检验层级有个零成本的办法，图形设计师叫它眯眼测试：眯起眼看屏幕，细节糊掉之后，看哪些元素还突出、哪些自动缩成一组。《About Face 4》把它列为检查层级和关系的常规手段，换个角度看，总能发现之前没发现的布局问题。下面两块界面，按住按钮模拟眯眼，自己比一比。
一屏只有一个主角。读者扫一眼就在问「什么重要」「什么相关」，先选出主角，其余按关系递减，两个问题才有答案。
三根杠杆各拉一档就够：字号大一到两档、字重两档、强调色一处。传层级优先用大小和明度这两个有顺序的变量，色调留给分类。
想强调，先做减法。调低配角比调高主角管用；砍戏份从离核心决策最远的元素下手。
交付前眯一次眼。模糊之后还分得出主次，层级才算立住；分不出，回去重拉杠杆。
内容来源：小山学堂「审美工程」专题原创；部分设计原则整理自《About Face 4：交互设计精髓》第 17 章（Alan Cooper 等著）。