审美工程 · 3 / 12 层级：一屏只有一个主角 打开一个页面，视线总得先落在某一处。设计者不安排这个落点，读者的眼睛就会自己乱撞。这一节讲层级：怎么用字号、字重、颜色三根杠杆，把「先看哪」安排明白。 字号 字重 颜色 注意力 一句话速览 什么都想强调等于什么都没强调。字号、字重、颜色三根杠杆怎么分配注意力，A/B 找茬揪出抢戏的界面 什么都想强调，等于什么都没强调 注意力是稀缺资源，界面上每个元素都在抢。加粗、标红、放大，单独看每一下都有道理，叠在一起就互相抵消： 五个主角同台，观众谁都记不住 。层级的做法反过来，先选出一个主角，再让其余角色按重要程度递减。手里的杠杆就三根：
杠杆 怎么用 常见翻车 字号 主角比配角大一到两档就够，档位拉开、数量克制 三个元素都用最大号，大字互相打架 字重 正文 400、强调 700，两档打天下 满屏加粗，粗就失去了「更重要」的含义 颜色 强调色只给一个动作或一个数字 标红三处，读者不知道哪个红才是真警报
读者扫一眼，心里在问两个问题 《About Face 4：交互设计精髓》第 17 章讲视觉层级，开头就把用户看界面的第一反应拆成两个下意识的问题： 「这里什么重要」 ，紧接着 「这些东西有什么关联」 。Cooper 的结论：界面要靠建立层级和关系来回答这两个问题。层级答得好，用户几乎不会留意到它的存在；答得糟，混乱立刻跳出来。 这两个问题就是本节的验收口诀。下面每个案例，你都可以先自问一遍：主角三秒内找得到吗？哪些元素一眼能看出是一伙的？
找茬：哪个看板能让老板三秒看到重点
找茬：哪边更好 点选一边
同一份经营数据，两种排法。哪个看板更容易读？点选你的答案。
方案 A
bi-dashboard.example.com/a
本月营收 ¥286万 新增用户 12,480 客单价 ¥229 退款率 1.8% 转化率 3.2% 月活跃 45.2万
方案 B
bi-dashboard.example.com/b
本月营收 ¥286万
新增用户 12,480 客单价 ¥229 退款率 1.8% 转化率 3.2% 月活跃 45.2万
亲手拉一拉三根杠杆 下面是一张商品卡，三根杠杆都交给你：主标题字号、次要信息颜色、强调色数量。拉动它们，观察卡片的「主角」怎么变。
杠杆试验台 拖动与切换
试试把强调色调到「3 处」，再回到「1 处」，感受主角打架和主角唯一的区别。
soundgear-shop.example.com
限时促销 无线降噪耳机 Pro 40 小时续航，支持双设备连接，附赠收纳盒。 4.8 分 · 2.4 万条评价 · 顺丰包邮
¥899 加入购物车
主标题字号
24px
次要信息颜色 深黑 中灰 浅灰
强调色用在 0 处 1 处 3 处
这就是层级： 玫红只给「加入购物车」一处，全卡只有一个视线落点，价格和标题靠字号字重排出先后。
想让主角突出，先把配角调低 新手立层级爱走加法：主角不够醒目？加大、加粗、上底色。Cooper 给的建议正好相反：两个元素抢注意力时， 调低次要的那个，胜过调高重要的那个 。调低给主角腾出了空间；调高只会掀起军备竞赛，这一版标题加大，下一版按钮跟着加大。原书的比方：满屏每个字都是红色粗体时，哪个字凸显得出来？
配角调低演示 点击切换
一份通知列表，四行都申请了加粗。试试三种策略，观察告警那行什么时候真正突出。
notify.workhub.example.com
服务器告警：支付接口超时 你的文章有 3 条新评论 昨天的分享获得 12 个赞 本周周报已生成
强调策略 都想醒目 调高主角 调低配角
四行都在喊： 字重一律 800，告警和周报平起平坐。读者得逐行读完才知道哪条要紧，层级等于没有。
挑对变量：大小和明度有顺序，色调没有 层级要靠视觉变量传出来，但变量分两种脾气。《About Face 4》沿用 Bertin《图形符号学》的分析： 大小和色值（明度）是有序变量 ，人眼会自动把「更大」「更深」读成「更重要」； 色调（红、蓝、绿）没有天然顺序 ，读者排不出红和蓝谁先谁后，还会往颜色里猜含义。传层级，优先用有顺序的那两根杠杆。
变量试衣间 点击切换
三条任务按重要程度排：故障、工单、纪要。换三种变量给它们分层，看哪种一眼读得出顺序。
tasks.workhub.example.com
修复线上支付故障 回复客户工单 整理会议纪要
分层用什么 大小 明度 色调
大小是有序变量： 16、13、11 三档字号，不用读内容就知道谁排第一。人眼会自动把「更大」读成「更重要」。
眯起眼睛，层级立没立住一试便知 检验层级有个零成本的办法，图形设计师叫它 眯眼测试 ：眯起眼看屏幕，细节糊掉之后，看哪些元素还突出、哪些自动缩成一组。《About Face 4》把它列为检查层级和关系的常规手段，换个角度看，总能发现之前没发现的布局问题。下面两块界面，按住按钮模拟眯眼，自己比一比。
眯眼模拟器 按住按钮
左边有层级，右边没有。按住下面的按钮给两块界面加模糊，松手恢复，看哪边糊了还站得住。
有层级
report.example.com/a
本月营收 ¥286万 较上月 +12%，连续三个月增长 查看明细
没层级
report.example.com/b
本月营收 ¥286万 较上月增长 +12% 连续三个月保持增长 点此查看营收明细
按住模拟眯眼 按住上面的按钮再松开，回来读这一条。
三块界面，挑出层级立住了的那块
同一张课程卡的三种排法，哪种最清楚 单选
先把三块界面各看三秒再选。选项里附了理由，选中会展开解释。
甲
bootcamp.example.com/a
AI 实战训练营 12 周陪跑毕业 限时 ¥199 立即报名
乙
bootcamp.example.com/b
AI 实战训练营 12 周陪跑，作品集毕业 · 限时 ¥199 立即报名
丙
bootcamp.example.com/c
AI 实战训练营 12 周陪跑毕业 限时 ¥199 立即报名
A 甲：三块信息都做大做粗，个个醒目 B 乙：主角唯一，其余按重要程度递减 C 丙：三种颜色把信息区分得明明白白
先砍谁的戏份
一张商品详情页，五个元素都想被强调 单选
价格、购买按钮、标题、退款说明、促销角标，都在申请「加粗标红」。层级要立起来，先砍谁的戏份？
A 价格 B 购买按钮 C 标题 D 退款说明 E 促销角标
本节要点
✓ 一屏只有一个主角。 读者扫一眼就在问「什么重要」「什么相关」，先选出主角，其余按关系递减，两个问题才有答案。 ✓ 三根杠杆各拉一档就够： 字号大一到两档、字重两档、强调色一处。传层级优先用大小和明度这两个有顺序的变量，色调留给分类。 ✓ 想强调，先做减法。 调低配角比调高主角管用；砍戏份从离核心决策最远的元素下手。 ✓ 交付前眯一次眼。 模糊之后还分得出主次，层级才算立住；分不出，回去重拉杠杆。
内容来源： 小山学堂「审美工程」专题原创；部分设计原则整理自《About Face 4：交互设计精髓》第 17 章（Alan Cooper 等著）。