先問內容，再選版型
你想讓讀者怎麼看？
假設你要介紹一場小型設計展。四個展區都有圖片、名稱和簡介：你可以把它們排成一條長走道，也可以放在同一面作品牆上，或把其中一區做得特別醒目。
沒有一種版型適合所有內容。讀者需要依序理解、比較選項，還是跳到特定章節？這個問題，比「最近流行什麼版型」更能幫你決定。
第一篇認識「網頁有哪些零件」；這一篇學「零件怎麼排」。版型可以混用：首頁用左右分欄開場，作品區用網格，案例內文再用單欄。
01 · 動手比較
固定內容，只換排列
這是虛構的「週末設計小展」。五種版型使用同樣四張圖、四段文字與展區目錄。先選一種，再按「固定目前作對照」，就能保留它，試另一種排列。
選一種排列 LAYOUT TYPE
單欄 · Single column
像沿著一條走道，依序看完一場展覽。
- 畫面改了哪裡
- 四個展區由上到下排列，每次先看一張圖，再讀它的說明。
- 適合什麼
- 長篇文章、步驟教學、需要依序說清楚的故事。
- 小心什麼
- 項目很多時要一直往下捲，不適合快速比較大量選項。寬螢幕也要限制文字行長。
窄畫面的安排：通常延續上下閱讀，只調整留白與圖片大小。
目前：單欄。你可以固定它，再選另一種比較。
固定對照：
目前選擇：單欄
咖啡與包裝
用紙盒、字體和杯身，認識一個品牌的個性。
刊物與閱讀
從封面到內頁，看看文字與圖片怎麼一起說故事。
海報與訊息
比較標題大小與留白，找出第一眼會看到的重點。
物件與日常
把熟悉的小物重新設計，讓功能和外觀互相配合。
預覽依實際可用空間重排；對照模式的每一欄較窄，可能提早變成單欄。手機上兩個版本上下呈現。縮窄是教學預覽，不是完整手機模擬器；選擇不會保存。
使用單欄，讓內容依序向下閱讀，限制文字寬度；不要把桌機螢幕整個填滿文字。
02 · 依內容挑選
五種排列，各有擅長的工作
下面是選擇的起點，不是硬性規定。互動區刻意使用相同內容，方便比較；實際製作時，還要依頁面的任務調整文字長度與資訊順序。
單欄 · Single column
像沿著一條走道，依序看完一場展覽。
- 適合什麼內容
- 長篇文章、步驟教學、需要依序說清楚的故事。
- 什麼時候要小心
- 項目很多時要一直往下捲，不適合快速比較大量選項。寬螢幕也要限制文字行長。
- 手機上怎麼辦
- 通常延續上下閱讀，只調整留白與圖片大小。
左右分欄 · Split layout
像一本打開的畫冊，一邊看圖、一邊讀介紹。
- 適合什麼內容
- 作品案例、產品介紹、需要圖文互相解釋的內容。
- 什麼時候要小心
- 如果兩邊都塞很多文字，讀者會不知道先看哪裡；不必把每一區都硬拆成左右兩半。
- 手機上怎麼辦
- 本例改成圖片在上、介紹在下；閱讀順序仍然一致。
卡片網格 · Card grid
像一面整齊的作品牆，方便一次掃過多件作品。
- 適合什麼內容
- 作品列表、文章列表、商品目錄等重複格式的項目。
- 什麼時候要小心
- 卡片內放長文會難以掃讀。使用一致的欄位與圖片比例，但不要為了等高就裁掉重要文字。
- 手機上怎麼辦
- 欄數隨可用空間減少，本例在窄畫面排成一欄。
大小格混排 · Bento
像便當裡的主菜與配菜，每格大小可以不同。
- 適合什麼內容
- 有一個明確主角、搭配少量輔助內容的功能總覽或精選作品。
- 什麼時候要小心
- 先確認內容真的有主次。若每項都一樣重要，硬做大小格可能誤導讀者；別為填滿格子而加內容。
- 手機上怎麼辦
- 本例回到原本的項目順序，排成單欄；不把桌機便當格整張縮小。
側欄＋主內容 · Sidebar
像把展場導覽圖放在旁邊，邊看邊找目的地。
- 適合什麼內容
- 有章節的教學、文件、分類較多且需要跳著找的內容。
- 什麼時候要小心
- 側欄會吃掉正文寬度。若只有幾段短文，不一定需要常駐目錄；手機也要重新安排。
- 手機上怎麼辦
- 本例把側欄移回內容上方，目錄仍可點選。
這些名稱不是五種互斥的技術。卡片網格和 Bento 都能用 CSS Grid 排列；「側欄＋主內容」裡，也可以再放卡片網格。先決定內容關係，再選實作方式。
03 · 選擇方法
先回答三個問題
- 要一段一段讀，還是一次看很多項？
一段一段讀，先試單欄；多個項目需要比較，先試卡片網格。圖和說明必須一起看，試左右分欄。
- 內容真的有主角嗎？
有一個值得優先看的重點，可以試 Bento。若每一個項目都同等重要，等寬網格可能更清楚。
- 讀者需要常常跳章節嗎？
文件、操作教學或有很多分類的內容，可以加側欄目錄。若只是一頁短介紹，簡單的頁首或區內連結可能就夠了。
再用真實內容壓力測試
把範例短標題換成你真的會用的名稱，放進比例不同的圖片，再縮窄畫面。若一換內容就擠在一起，應調整欄數、留白或圖片比例，而不是把所有文字縮小。
手機上的閱讀順序也要檢查。桌機用大格子凸顯的主角，在單欄裡仍應清楚；目錄移到上方後，要能正常跳到內容。
04 · 小練習
這一頁，你會怎麼排？
你要做一個作品列表，放十二個同樣重要的品牌設計案，希望客戶先快速瀏覽，再選一個深入看。哪種版型最值得先試？
選一個答案，看看它和需求的關係。
看答案與理由
先試等寬卡片網格：項目同樣重要，而且讀者要快速掃過多個作品。單欄也能呈現，但瀏覽可能更長；Bento 會拉開主次，這個題目沒有要求某一案更重要。
把選擇寫成一句具體需求
「我要讓客戶快速比較十二個設計案，所以作品列表使用等寬卡片網格。每張卡放圖片、名稱與類別。長標題可以換行；窄畫面減少欄數，保留完整內容。」
現在回到比較面板，試著固定網格，再切到 Bento。觀察第一張圖變大之後，視線是否也改變了？你是否真的希望讀者先看它？
第三篇已介紹首屏如何安排主訊息、圖片與行動入口，可從下方繼續閱讀；這一篇也可以獨立練習。
參考與延伸閱讀
本篇的選擇建議、展覽例子與比較面板由本站整理製作，不是固定設計標準，也不是原影片逐字翻譯。
技術資料查閱：2026.10.29。影片來源沿用使用者提供的連結，本文沒有引用影片原話。