一張 banner 同時放上主視覺圖片、一句活動標語、一段輔助說明文字，還加了一個行動按鈕，每個元素都想被使用者看到，結果使用者的視線匆匆掃過去，卻抓不到該先停在哪一塊。這種矛盾在 banner 設計裡幾乎天天發生，想讓所有東西都被看到，往往等於全部都沒被看到。
banner 視覺主從，談的正是這個判斷，版面上誰該先被看見、誰又該甘願退讓一步，而不是配色深淺、文案字數、尺寸怎麼切這些技術細節。使用者判斷一張畫面的第一印象，其實比多數人以為的更快，卡爾頓大學（Carleton University）研究團隊在 2006 年的研究就發現，即使畫面只曝光短短 50 毫秒，使用者對網頁視覺吸引力的判斷已經跟看得更久時高度一致，快到 banner 根本沒機會讓使用者一個個元素慢慢比較、慢慢找重點。
也就是說，主從順序得在使用者眼睛落上去的那一刻就成立，不是靠使用者自己花時間找出來的。先從主從這個概念本身該怎麼理解講起，再一路拆到怎麼判斷、怎麼排、怎麼驗證。
banner 不是每個元素都同等重要
一齣戲如果每個演員都站在舞台正中央搶戲，觀眾反而不知道該看誰，banner 的道理一樣。視覺主從（visual hierarchy）指的是版面上該有一個主角，也就是使用者第一眼就落下去的焦點，其餘元素依序退讓成配角，而不是圖片、標題、按鈕互相搶戲、誰都不讓誰。banner 視覺主從要處理的，正是誰先被看見、誰甘願退讓這個順序問題，不是把每個元素都塞好塞滿就算完成。
Nielsen Norman Group（Kelley Gordon，2021）在〈Visual Hierarchy in UX： Definition〉裡，把 visual hierarchy 定義為引導使用者的視線依照重要程度，依序消化畫面上的每一個設計元素。換句話說，如果使用者盯著一張 banner 卻很難判斷該先看哪裡，問題通常不是內容不夠精彩，而是版面根本沒有排出清楚的主從關係。
這也是 banner 最容易被誤解的地方，多數人以為重要的東西都放大加粗才安全，結果每個元素都用同一種強調手法，等於誰都沒被強調。主從不是要你砍掉內容，而是把留下來的內容排出先後順序，誰第一眼被看到，誰接著被看到，誰可以晚一點，甚至完全不需要被特別注意到。
Banner 做得很滿，為什麼使用者反而看不出重點？
知道主從是什麼是一回事，搞懂它為什麼常常做不出來，是另一回事。把 banner 做得很滿，幾乎是每次上稿都會遇到的壓力，主視覺要夠大、活動標語要夠醒目、按鈕要夠好按，於是標題、圖片、按鈕全部用差不多的字級、差不多的對比、差不多的留白去處理。人眼沒有任何線索可以判斷先後順序，使用者要嘛整張慢慢掃過一遍（多數人沒有這個耐性），要嘛乾脆整張跳過。
這正好呼應開頭那個情境，banner 做得很滿，本身從來不是問題，滿到每一個元素都同樣搶眼，才是真正的問題。Nielsen Norman Group（Kelley Gordon，2020）在〈5 Principles of Visual Design in UX〉裡，把對比定義為刻意讓視覺不相似的元素並列，藉此傳達這些東西不一樣；Nielsen Norman Group 在〈Visual Hierarchy in UX： Definition〉一文裡也提醒，對比變化不宜用得太多，一旦每個元素都做出強烈對比，等於誰都沒有真正被凸顯出來。Canva 的視覺主從指南也提出相同提醒，當太多元素同時被賦予視覺重要性，最終每個都很搶眼，等於沒有東西真的搶眼。
使用者面對一張 banner 時，並不會像逛型錄一樣，把每個元素攤開來一一比較誰比較重要。沒有明顯的重點，他們只會覺得看不出重點，然後視線滑過去，找下一個更容易讀懂的畫面。這也是為什麼把整張 banner 塞好塞滿，看起來很用心，結果卻常常換來使用者完全沒印象。
問題的根源，其實是排版之前沒有先決定誰該先被看到。與其等做完才回頭檢查哪裡搶戲，不如在動手排版之前，先把這個問題想清楚。
先決定這張 banner 的主角是誰
這張 banner 真正想讓使用者第一眼看到什麼，不是憑感覺挑一個看起來最漂亮、或素材品質最好的元素就能決定，而是取決於 banner 的目的，是要塑造品牌形象、衝一檔活動促銷，還是要導購使用者點擊。目的不一樣，該站上舞台中央的主角也完全不同。
Canva 的視覺主從指南建議，設計之前先問自己三個問題：
- 使用者第一眼該看到什麼
- 接著看到什麼
- 最後看到什麼
放到 banner 上，這三個問題可以轉化成一個更具體的判斷順序，先想清楚這張 banner 的主角是誰、配角是誰，以及收尾的動作是什麼。而且同一張 banner 只挑一個主角，不是每個目的都各給一個焦點，不然又會回到誰都想搶戲的老問題。
banner 的目的大致可以分成三種，主角人選也各自不同。
品牌形象類 banner，讓畫面說話
以塑造品牌印象、單純曝光為目的的 banner，像是首頁大圖或形象宣傳，主角通常不是文字，而是情境視覺本身，也就是產品情境照、場景照，或是一張精心設計的插畫。標題文字這時候退為輔助說明，不必用最搶眼的字級去跟圖片搶焦點。舉例來說，一個做戶外用品的品牌，如果把首頁大圖放上使用者在山林間使用產品的情境照，畫面本身就已經在說故事，標題只需要補一句簡短的品牌主張就夠。
不過圖像退居主角，不代表標題可以隨便寫。Crazy Egg（Hiten Shah）在探討 hero image 的文章裡提醒，圖像不該搶過標題，也不該蓋過按鈕，理想的動線是使用者先讀到標題傳達的意念，圖像再強化同一個意念，而不是圖像自己搶走全部注意力，標題反而被晾在一邊。
促銷活動類 banner，讓數字或主張說話
換成檔期活動、優惠訊息這類促銷型 banner，主角就從畫面換成了文字，通常是折扣幅度、活動名稱這類短文案，圖片這時候退居輔助，負責烘托氣氛，而不是搶第一眼。舉例來說，一檔週年慶活動 banner，如果把折扣幅度放在畫面中最顯眼的位置，其餘活動說明文字明顯縮小，使用者一眼就能抓到這檔活動在賣什麼優惠，不需要先看完整張圖才搞懂重點。
判斷主角的方法跟上一節一樣，先想清楚這張 banner 真正要讓使用者記住的是什麼。促銷型 banner 要記住的通常是優惠有多划算，而不是背景圖片有多漂亮，主角自然就落在數字或主張身上。
導購轉換類 banner，視覺最終要帶向按鈕
以促使使用者點擊、前往下一步為目的的 banner，主角未必是按鈕本身，而是整體版面的視線動線最終要停在按鈕上。標題先讓使用者理解這在賣什麼，圖片強化這個訊息，按鈕則是動線收尾，功能上該是最終最顯眼的落點。Monet Design 在整理高轉換 hero 區塊的設計重點時也提到類似的處理順序，視線依序落在標題、次要說明，最後才是按鈕，按鈕是整組動線的終點，也是最需要促使使用者行動的角色。
這裡只談按鈕在整體主從裡的位置角色，它該是視線最後落下的地方，不深入按鈕本身的顏色、形狀、文案該怎麼寫，那是另一個層面的設計技巧。
主角確定後，其他元素才輪到退讓
決定主角是誰，只解決了一半的問題。剩下的一半，是怎麼讓配角看起來真的像配角，而這需要靠幾個具體的排版工具。
把大小、對比、留白這幾種工具集中疊加在主角身上，而不是每種工具都平均分給每個元素，是讓配角看起來像配角最直接的做法。Nielsen Norman Group（Kelley Gordon，2021）在〈Visual Hierarchy in UX： Definition〉裡談到 scale（大小）原則時建議，把最重要的元素做得明顯大，其餘元素依序縮小，而且同時特別大的元素數量要有限制，不能大家都放大，否則就失去了對照的效果。
換句話說，工具要疊加在同一個元素上才會發揮強化效果，分散在不同元素上只會互相打架，誰都沒被強化。配角也不是要從畫面上消失，只是要明顯比主角弱一階，弱一階的意思是字級小一號、對比低一階、留白少一點，讀者仍然看得到，只是不會第一眼被吸過去。
大小和對比只留給主角，別平均分配
大小與對比，是最直覺的兩種強調工具，理論上該集中用在唯一的主角身上。如果標題、圖片、按鈕同時都被放大、同時都用高對比色處理，讀者反而會失去判斷依據，每個東西看起來都在喊看我，結果等於誰都沒喊。判斷的邏輯很單純，哪一個元素該相對明顯大、相對高對比，先把它想清楚，再讓其他元素依序退讓一階，不必糾結該用多少像素或哪一組色碼，那是另一個層次的技法問題。
留白幫主角清出一塊安靜的空間
留白常常被誤解成沒放東西的浪費空間，實際上它是主動用來凸顯主角的工具。Interaction Design Foundation 在說明 visual hierarchy 時提到，適當的空白能框住並強調畫面中真正重要的內容，效果往往比塞滿更多元素更好。主角周圍如果留出夠明顯的空白，使用者的視線會自然被留在那個區塊，這也是 banner 做得很滿最常忽略的一招，把每一寸空間都塞滿資訊，等於順手拿掉了讓主角被看見的安靜空間。
標題和按鈕靠緊一點，讓配角像同一組
距離近的東西，大腦會自動當成一夥的，標題、副標、按鈕這幾個配角元素，只要彼此靠得夠近、風格一致，使用者就會把它們視為同一組訊息，而不是各自獨立、各自搶眼的物件。Nielsen Norman Group 在同一篇文章裡談到 grouping（分組）時指出，元素周圍留白越多、彼此距離越近，越容易被視為同一群組，並一起被賦予相近的注意力層級；Interaction Design Foundation 的說明也指出同樣的原理，放得靠近的元素會被視為彼此相關，分得越開就越像各自獨立的資訊。這背後其實是格式塔心理學裡「鄰近性」的概念，不需要記住這個術語，只要記得一件事，配角想要一起退讓給主角，彼此就得先靠緊一點、長得像同一組。
視線在 banner 上怎麼移動，主從才會順暢？
主從關係在版面上排好了，還只是靜態的結果。使用者實際盯著 banner 看的時候，眼睛是怎麼移動的，又是另一個要顧到的層面。
比起長文章或長版型，banner 通常資訊量不算多，使用者的視線多半不是逐行閱讀，而是快速掃過幾個點。Interaction Design Foundation 提到，在資訊量較少的畫面裡，使用者的視線常會依循一種左上到右上、再斜向掃到左下、右下的路徑；Canva 的視覺主從指南也提到類似的現象，資訊量較少的版面比較常見這種掃視型態，而且多數西方閱讀習慣下，logo 或品牌識別經常落在視線最先經過的位置。
這對 banner 的主從安排有直接的意義，主角要放在視線路徑會優先經過的位置，而不是使用者視線根本不會先掃到的角落。按鈕作為整組動線的終點，通常安排在視線路徑的後段，呼應前面談過的按鈕是收尾動作這個角色。位置和主從順序如果對不起來，就算大小、對比、留白都做對了，使用者的視線還是可能先繞去別的地方，才勉強繞回主角身上。
排完之後，怎麼知道主從真的分出來了？
主角選對了、配角退讓了、視線動線也對齊了，接下來還有一個問題，怎麼確定這一切真的有效，而不是自己一廂情願覺得排得很好。
有一個不需要任何設計軟體、不需要任何工具，任何人都能立刻用的方法，把 banner 縮小，或是把螢幕稍微往後退一點，再瞇起眼睛看。細節會模糊掉，只留下大致的形狀與色塊，這時候第一眼還抓得住視線的東西，就是這張 banner 實際上的主角。Canva 的視覺主從指南把這個方法稱為 squint test（瞇眼測試），建議設計者退遠一點、瞇著眼看設計，觀察哪個部分依然清楚可辨，藉此檢驗版面的視覺主從是不是真的成立。
瞇眼後看到的第一個焦點，應該要對應前面決定好的主角。如果瞇眼看完發現分不出誰先被看到，或是每個色塊都一樣搶眼，代表前面的主從還沒真正排出來，該回頭檢查大小、對比、留白這幾個工具是不是又被分散使用，而不是集中疊加在同一個元素上。
把 banner 的每個元素都塞好塞滿、都做強調處理，看起來很用心，但真正的專業判斷，是清楚決定誰先被看到、誰甘願退讓。banner 視覺主從真正考驗的，不是素材夠不夠多，而是敢不敢在動手排版之前先做出取捨。下一次排 banner 之前，先問自己這張圖的主角是誰，排完再瞇眼看一次確認，這會比一次把所有東西都放大，更能讓使用者在第一眼就看懂你想讓他看到的重點。