【Banner 設計指南 2026】圖文排版與訊息層級：一張 Banner 如何突出核心訴求？ 【Banner 設計指南 2026】圖文排版與訊息層級：一張 Banner 如何突出核心訴求？

尺寸與比例：先開版位單，不要先開設計檔

尺寸由版位決定，不是由設計師的習慣決定。網站自家版位的寬高跟容器走，設計者有決定權；廣告平台的版位規格由平台定，常見尺寸會更新，一切以官方文件為準，不要照抄記憶裡的舊表。實務上先開一張版位單，逐個版位記下寬高、比例、檔案格式、大小上限與最後核實日期，設計、投放與開發都用這張單溝通。設計時以比例思考，超寬、方形、直向，比記死像素更容易延伸到新版位。

先確認版位比例，再安排畫面與素材

廣告素材要交成品圖檔，還是分項素材？

先分清三種做法。第一種是網站上最直接的固定成品圖，一個版位一張完成圖，直接上架；第二種是網站圖像配 HTML 文字或真實按鈕，背景與主角是圖，會變動的字留在頁面上；第三種是分項素材，例如Google 的響應式展示廣告，由圖片、標誌與文字素材組成，系統自動配搭出多個版面組合，一組素材覆蓋多個版位。下表比較的是第一種成品圖檔與第三種分項素材。

交分項素材時，Google 的指引有兩點值得記住：圖片避免後製疊字與標誌，縮小後難讀，也會與自動配搭的標題重複，照片場景中自然存在的字除外；素材不得加入播放、下載、關閉等誤導不存在功能的按鈕。這些是廣告素材的要求，自家網站不受約束，但「縮圖後仍可讀」值得所有 Banner 照做。

同一個活動可以兩種並用：網站橫幅交成品圖，平台廣告交分項素材。

網站 Banner 的文字要放在圖片還是 HTML？

會變動的資訊文字，優先用 HTML 或 CSS 呈現。W3C 的 WCAG 圖片文字準則鼓勵在技術能達到所需視覺效果時，用可調整的文字傳達資訊，令使用者可以自訂字級與色彩，標誌等必要呈現屬例外。留在頁面上的字，改字不用改圖，搜尋引擎與讀屏軟件也讀得到。

把文字做進圖片，圖內字體與相對位置會固定，也不依賴網頁字體載入；取捨在於圖片仍可能被非等比拉伸、縮小或裁切，字隨圖變形，改一個字也要重新輸出圖檔。交付時註明哪些字在圖內、哪些在頁面，修改就不會改錯地方。

什麼情況適合用動態 Banner？

靜態表達得到的訊息，不需要動態。動態形式（GIF、HTML5、CSS 動畫）適合三種情況：要展示步驟或過程，例如花束由材料到完成的畫面；一個版位要輪替多個訊息；畫面需要在靜態版位中被注意到。代價按實作而定，可能增加檔案體積、執行或維護成本，部分版位亦不收動態格式，交稿前按版位單核對。

判斷時把動畫抽走再讀一次，訊息仍完整就用靜態。

核心訴求：一張 Banner 只講一件事

寫 Banner 文案時，可以先列出候選訊息，再按活動目標選出重點。例如花店推廣母親節花束，可能想強調「開放預訂」「即日訂購兩日送達」或「預訂附送心意卡」。主標突出最重要的一項，其餘資訊按用途放在副標或目的頁，讓讀者容易掌握主次。

主標、副標與行動文字怎樣分層？

訊息層級設計的是閱讀順序：主標最大、先被讀到，接着是副標，最後是行動文字（CTA）。各層放什麼內容也有分工：副標補條件與期限，CTA 要最易被點到。三層的資訊量要逐級遞減。主標放核心訴求一句，副標只放條件，不放第二個賣點；CTA 用「動詞＋得到什麼」的寫法，「預訂母親節花束」比「了解更多」具體得多，後者留給低意圖的版位。定稿前把稿縮到實際顯示尺寸看一次，順序仍然是先主標、再副標、最後 CTA，層次才算成立。

以花束預訂為例，分清主標、截止日期與 CTA

CTA 與目的頁怎樣對應？

點擊前後要講同一件事，廣告行話叫 message match，Google 的展示廣告最佳實務亦寫明廣告訊息應與到達頁內容對應。Banner 講「母親節花束預訂」，點進去的第一屏就要見到母親節花束與預訂按鈕；講免運的話，第一屏就要講清楚條件。

常見的斷裂有兩種：Banner 講優惠、目的頁卻是品牌總頁，讀者要自己找優惠在哪裡；CTA 寫「立即預訂」，頁面卻要求先登記成為會員。檢查方法：CTA 文字、Banner 主訴求、目的頁首屏標題，三者的關鍵詞要對得上。

主視覺與構圖怎樣安排？

主視覺是畫面的主角：一張產品照、一個人物、一個場景，或者一組做主角的字，構圖、留白、字級全部圍繞它安排，所以它要第一個定。花束預訂的主視覺是那束花，不是花店的標誌。選主視覺看三點：與核心訊息直接相關；品質撐得起大圖，低解像照片放到首頁寬度會明顯失真；主體輪廓清楚，裁成窄版仍然認得出。

一個畫面只有一個焦點。常見構圖有三種：置中最穩，主體集中，窄版好裁；左右三分最常用，一邊放主體、一邊放字，層次自然出現；對角構圖有動感，適合動態或多元素的畫面。焦點還要夠大，把稿縮到實際顯示尺寸，第一眼見到的仍然要是主體，構圖才算合格。

文字要放在畫面平靜的位置，照片的純色位、暗位、天空位都適合壓字；細節多的位置要放字，就加半透明色塊，但色塊不能蓋住主體。主要文字與標誌離邊一段明顯距離，為裁切預留安全範圍，實際多少按各版位最進取的裁切比例計。花店的橫幅稿，花束放右三分、文字放左，日後裁成窄版要保住花束與主標，靠的就是這段距離。

服裝橫幅中的人物位置、文字與背景對比

畫面層次：字級、色彩與留白怎樣配合？

主標、副標、CTA 的字級要拉開明顯差距，全部接近等於沒有層次。色彩上，對比決定閱讀：深字淺底或淺字深底最穩，品牌色留給 CTA 做強調；彩色底配彩色字特別容易出事。留白令主體被看到、令文字有呼吸位，塞滿的 Banner 在手機上特別容易變成一團；背景複雜到與主體爭注意力時，換背景或加深的遮罩。整站配色與對比、轉換的關係，另見網站配色與 CRO／SEO一文的拆解。

品牌元素與版面參考怎樣用？

標誌、標準色與標準字的作用，是令讀者認得這是誰；原則是品牌元素出現，但不必最大。LOGO 縮小放在角落，標準色用在背景或 CTA，已經足夠維持識別；活動有自己的視覺（例如節日主題）時，活動視覺做主，品牌元素退到支撐位置。反過來的稿並不罕見：LOGO 放到最大、活動訊息被壓到角落，讀者認得你，卻不知道你想講什麼。

參考稿的來源不缺：同行網站、大品牌的活動頁、設計工具的模板庫。要用得對，就要拆解它的結構，把主視覺位置、字級關係、留白比例記下來，套到自己的訊息上；配色與素材屬於別人的品牌，照搬只會不像自己。

把字體、配色與版面參考放在一起，觀察品牌元素的延伸

搶眼的代價：注意力與使用干擾

增加搶眼度的手段，高對比閃動、自動播放、蓋版彈出，代價是干擾讀者正在做的事：難關掉的蓋版、擋住內容的彈窗、自動有聲的廣告，都是讀者最反感的做法。自家網站的橫幅放在閱讀動線上，例如內文之間、列表頂部，訊息清楚，讀者可以輕鬆略過，不會阻擋當下的閱讀或操作。

BINGO (HK) 的網站 Banner 設計服務

BINGO (HK) 的度身網頁設計服務包括圖像設計、UI/UX 管理與跨裝置響應式設計，設計師一對一跟進。網站 Banner 在這個範圍內與整個版面一併規劃：首頁橫幅的字級、裁切與手機表現，可以在網站設計階段同步處理，不需要分兩次做。

AI 構思與素材生成可以快在哪裡？

構思階段用 AI，是把它當選項生成器：同一個核心訊息，叫 AI 寫五到八種語氣的版本，挑一個方向再人手修；描述活動的氣氛與場景，也可以拿到幾組配色與構圖方向做參考，版面骨架同理。素材環節是生成式 AI 目前最實際的位置：生成背景圖與插畫元素、按版位調整現有照片的構圖、局部修改畫面，例如換走背景裡分散注意的雜物。

界線在於 AI 的輸出只是起點：生成圖像中的文字、標誌與細節要人手核對，品牌色與 LOGO 由設計師把關；素材的商用授權按所用工具的條款確認，轉換工具時要重新看一次。

以 Canva 為例，這類 AI 功能仍在分階段開放：Canva 在 2026 年的發布資料介紹對話式設計、分層可編輯物件與局部修改，並註明先以 research preview 推出；自己的帳戶見到哪個階段，用之前先確認。

Banner 設計工具

• Canva

  Canva 以模板起稿、改模板為主，適合推廣人員快速出圖，上文提到的對話式設計等功能，是它的 AI 部分。想正式學，香港生產力學院的 Canva 課程教授 Canva 與 AI 的商業圖像製作，包括宣傳圖、模板修改與產品圖，並備有粵語版本。

• Adobe Express 與 Firefly

  Adobe 的 Banner 製作工具提供可編輯模板、圖像與字體色彩的修改、尺寸調整，以及生成式 AI 圖像功能；Firefly 是 Adobe 的生成式圖像工具，可用於素材生成，兩者與字體、品牌資產在同一個生態內流轉，適合已在使用 Adobe 工具的團隊。數碼港 2026 年的活動亦有 Adobe Express 與 Firefly 的工作坊。

AI 與人工設計怎樣配合？

分工線畫清楚，AI 才是幫手：AI 負責選項生成，包括文案方向、配色、背景素材與初稿變化；人負責判斷與把關，包括核心訊息是否只有一個、層級是否清楚、品牌是否正確、窄版是否仍可讀。流程可以分四步：AI 出選項，按訊息層級篩選，設計師構圖定稿，輸出前在實際尺寸檢查一次。

手機閱讀的實際條件

手機上判斷文字，看實際顯示尺寸：桌面稿上看得舒服的字，到了手機可能只剩十幾像素高，這要在實機或瀏覽器的裝置預覽才見得到。檔案大小同樣計入體驗，載入慢的橫幅在流動網絡下吃虧。

檢查標準只有一條：主標在窄版仍然一眼讀到。讀不到的副標，先判斷它承載什麼，次要的宣傳語可以刪；若是理解優惠必需的條件、日期或限制，就縮短文字、重新編排，或者移到橫幅鄰近的頁面文字，不能為了保住主標而令條件消失。花店的例子：窄版保住「母親節花束開放預訂」與 CTA；「5 月 5 日截止」屬於必要條件，要另找位置交代。

觸控與誤觸：可點區域怎樣設計？

Banner 內有按鈕或連結時，可點區域要按觸控條件設計。WCAG 2.2 的目標尺寸準則（AA 級）為手指或滑鼠點按的目標訂出 24×24 CSS 像素的最小尺寸，並設間距、行內文字等例外；它衡量的是可操作區域，不是 Banner 圖檔的像素，符合最低尺寸也不等於觸控一定舒適，相鄰的操作區域拉開距離，誤觸自然減少。

誤觸的位置要主動避免：廣告橫幅貼着內容或菜單，讀者想點文章卻點到廣告；自家網站同樣適用，按鈕與其他可點元素保持距離，讀者點下去，就到達承諾的地方。

觀看情境先於設計

實體 Banner 要先答三個問題：在哪裡看、距離多遠、看多久，然後才輪到畫面上放什麼。店內易拉架，讀者兩三步內經過，可以放多一點細節；商場中庭或街外橫額，遠距離、幾秒掃過，訊息要壓到最少，機構名、一句主題、聯絡方式是常見組合。字級按觀看距離定；戶外光線順光、逆光、夜間各異，同一組配色的可讀性可以差很遠，配色要連同文字對比、材質反光與現場照明一起檢查。

材質怎樣選？

常見選項有三類，選之前先分清材質與表面處理：PVC 是材質，啞面是表面處理。材料商 HEXIS 的 Banner 材料目錄列有 PVC 塗層聚酯的啞面與亮面款，亦有帶網孔的網格布；透風是材料特性，安裝穩妥與否仍屬工程範圍。

旗布方面，布料商 FabricVision 的布料產品目錄列有輕身旗布與沙灘旗用布，適合旗幟與活動現場的動態展示；實際隨風擺動的效果，按現場風向與懸掛方式而定。

版面比例與輸出規格

版面比例跟懸掛位置定，橫額、直幅、圍板各有常見比例，量好位置再開稿。輸出的解像度、出血、打孔與包邊，按印刷商的製作單為準，每間廠的要求可以不同，不要拿上一次的規格照抄。屏幕與印刷可呈現的色彩不同，交稿的色彩空間與描述檔按印刷商的流程確認，付印前先看色稿，比重印便宜；安裝屬印刷及安裝商的工程範圍，設計階段把對方規格拿進來對齊，比完工後改稿省錢得多。