版面配置詞條 3-14

視覺層級Visual Hierarchy

也常叫做：視覺層級、閱讀動線、Visual Hierarchy

你可能會這樣說

頁面裡標題、內文、按鈕的大小都差不多，訪客不知道先看哪裡，三秒內抓不到重點就離開了。

視覺層級是安排「先看什麼、再看什麼」的順序。做法就是故意做出差別：最重要的最大、次重要的次大，靠大小、粗細、顏色、位置四個工具排順位。

健檢方法：把頁面截圖瞇著眼看，或轉成灰階——模糊之後最搶眼的那塊，就該是你最重要的訊息。如果每塊都很搶眼，等於每塊都不搶眼。

通常一個畫面只有一個老大（主標或主要按鈕），其他元素都要甘願當配角。

夏日咖啡祭開跑

全品項買一送一，只到本週日。

查看優惠

主標字級主標字重次要文字顏色

把次要文字調到接近背景色，再瞇著眼看：還能第一眼抓到主標與按鈕，層級就對了。

圖 3-15　大小、粗細、顏色三個旋鈕，決定眼睛先看哪裡。

中文就可以

請幫這頁重建視覺層級：
主標 48px 粗體、副標 20px 一般、內文 16px，三者的差距要明顯。
每個區塊只有一個視覺焦點，次要資訊縮小並轉灰。
主要按鈕是全頁唯一的高對比色，其他按鈕改外框樣式。
順手做一張灰階版本給我檢查，第一眼應該落在主標與按鈕。