層級：一屏只有一個主角
打開一個頁面，視綫總得先落在某一處。設計者不安排這個落點，讀者的眼睛就會自己亂撞。這一節講層級：怎麼用字號、字重、顏色三根槓桿，把「先看哪」安排明白。
注意力是稀缺資源，介面上每個元素都在搶。加粗、標紅、放大，單獨看每一下都有道理，疊在一起就互相抵消：五個主角同台，觀眾誰都記不住。層級的做法反過來，先選出一個主角，再讓其餘角色按重要程度遞減。手裏的槓桿就三根：
| 槓桿 | 怎麼用 | 常見翻車 |
|---|---|---|
| 字號 | 主角比配角大一到兩檔就夠，檔位拉開、數量剋制 | 三個元素都用最大號，大字互相打架 |
| 字重 | 正文 400、強調 700，兩檔打天下 | 滿屏加粗，粗就失去了「更重要」的含義 |
| 顏色 | 強調色只給一個動作或一個數字 | 標紅三處，讀者不知道哪個紅才是真警報 |
《About Face 4：交互設計精髓》第 17 章講視覺層級，開頭就把用戶看介面的第一反應拆成兩個下意識的問題：「這裏什麼重要」，緊接着「這些東西有什麼關聯」。Cooper 的結論：介面要靠建立層級和關係來回答這兩個問題。層級答得好，用戶幾乎不會留意到它的存在；答得糟，混亂立刻跳出來。
這兩個問題就是本節的驗收口訣。下面每個案例，你都可以先自問一遍：主角三秒內找得到嗎？哪些元素一眼能看出是一夥的？
下面是一張商品卡，三根槓桿都交給你：主標題字號、次要信息顏色、強調色數量。拉動它們，觀察卡片的「主角」怎麼變。
新手立層級愛走加法：主角不夠醒目？加大、加粗、上底色。Cooper 給的建議正好相反：兩個元素搶注意力時，調低次要的那個，勝過調高重要的那個。調低給主角騰出了空間；調高只會掀起軍備競賽，這一版標題加大，下一版按鈕跟着加大。原書的比方：滿屏每個字都是紅色粗體時，哪個字凸顯得出來？
層級要靠視覺變數傳出來，但變數分兩種脾氣。《About Face 4》沿用 Bertin《圖形符號學》的分析：大小和色值（明度）是有序變數，人眼會自動把「更大」「更深」讀成「更重要」；色調（紅、藍、綠）沒有天然順序，讀者排不出紅和藍誰先誰後，還會往顏色裏猜含義。傳層級，優先用有順序的那兩根槓桿。
檢驗層級有個零成本的辦法，圖形設計師叫它瞇眼測試：瞇起眼看螢幕，細節糊掉之後，看哪些元素還突出、哪些自動縮成一組。《About Face 4》把它列為檢查層級和關係的常規手段，換個角度看，總能發現之前沒發現的佈局問題。下面兩塊介面，按住按鈕模擬瞇眼，自己比一比。
一屏只有一個主角。讀者掃一眼就在問「什麼重要」「什麼相關」，先選出主角，其餘按關係遞減，兩個問題才有答案。
三根槓桿各拉一檔就夠：字號大一到兩檔、字重兩檔、強調色一處。傳層級優先用大小和明度這兩個有順序的變數，色調留給分類。
想強調，先做減法。調低配角比調高主角管用；砍戲份從離核心決策最遠的元素下手。
交付前眯一次眼。模糊之後還分得出主次，層級才算立住；分不出，回去重拉槓桿。
內容來源：小山學堂「審美工程」專題原創；部分設計原則整理自《About Face 4：交互設計精髓》第 17 章（Alan Cooper 等著）。