11 個網頁排版設計範例：圖文排列技巧與靈感

行動裝置的網頁流量佔比已經長期超過百分之六十。桌機上驚豔的版面，若沒有針對手機重新剪裁，套到你的內容上往往完全不是同一回事：圖片數量對不上、文字長度撐不起那個骨架、手機上看起來整個垮掉。很多人在國外設計靈感網站看到喜歡的版面，存進書籤想著「哪天我也要把網站做成這樣」，真的開始做才發現這個落差。不少時候，問題不在美醜，而在版型與內容量對不起來。

這篇要給你的，不是十一張漂亮的截圖讓你照著畫，而是十一種你能直接對應到自己內容的排版結構，附上每種結構適合什麼樣的內容、圖文要怎麼擺才不會打架、以及實務上最常踩的坑。你看完之後，應該能夠拿著手上的素材，判斷出「我的頁面該用哪一種、為什麼」，打開設計工具時就有明確方向，不會盯著空白畫面發呆。如果你想要先建立更完整的版面設計觀念，可以回頭看這篇網頁版面設計完全攻略，這裡我們直接進入範例拆解。

排版範例的正確使用方式：拆解，不要照抄

很多人把「找範例」跟「找模板」搞混了。模板是讓你填空的，範例是讓你思考的。一個好的排版範例，真正有價值的部分在於它「為什麼這樣排」，也就是那個設計師在面對特定內容、特定使用者、特定商業目標時，做了什麼取捨。

看到一個喜歡的版面，先問三個問題：內容密度是高還是低？視覺動線引導你往哪裡走？它犧牲了什麼來換取效果？把答案拆出來之後，再決定要不要借用其中的排版邏輯。直接整組搬過去，通常很難符合自己的內容量與使用情境。

正因如此，接下來介紹十一種排版結構時，不會只給你「長這樣」的描述。每一種都會告訴你它背後的內容假設是什麼、圖文的排列邏輯是什麼、以及它最常在哪個環節出問題。你拿著這些判斷框架，回去看任何範例都能拆出有用的東西。

十一種實戰網頁排版結構

接下來這十一種是在實務專案裡反覆用到、也確實能解決不同內容需求的排版結構。它們不是互斥的，一個網站的首頁可能用 Bento 排版，商品頁用卡片網格，部落格用 F 型閱讀版面，各自服務不同的頁面目的。先有一個速查表讓你掌握全貌：

編號	排版結構	最適合的內容類型	圖文比例	手機友善度
1	Hero 加 Z 字動線	單一產品或服務頁	圖主文輔	高
2	F 型閱讀版面	長篇文章、部落格	文主圖輔	中高
3	卡片網格	商品列表、作品集	圖文各半	高
4	Bento 區塊排版	首頁、資訊聚合頁	混合	中
5	左右分割畫面	品牌對比、雙主題	圖文各半	中
6	雜誌式編排	內容媒體、策展頁	圖主文輔	中高
7	滿版視覺沈浸	餐飲、攝影、精品	圖為絕對主角	中
8	非對稱破碎網格	創意品牌、設計工作室	混合	低
9	側欄加主內容	文件、知識庫、教學	文主圖輔	中
10	單欄垂直堆疊	行動優先頁、敘事頁	圖文交替	極高
11	固定導覽加錨點跳轉	長篇指南、服務總覽	混合	高

1. Hero 區加 Z 字動線：讓單一產品一進門就被看見

這大概是你最常見到的排版：一進網站，一張全幅的主視覺圖或影片佔滿第一屏，上面疊著一行標題、一句副標、一個按鈕。使用者往下捲，看到產品特色、社會證明、最後再一個行動呼籲收尾。整個視線從左上角的 Logo 滑到右上的選單，再斜向左下的標題，最後落在右下的按鈕，走出一個 Z 字。

圖文排列的重點在於節制。主視覺要夠大夠清楚，但上面的文字不能多：標題控制在一行、副標兩行以內、按鈕文字四個字以內最好。主視覺圖如果太花，文字就要加一層半透明底色確保對比度。CTA 按鈕用品牌色或高對比色，不要跟背景融在一起。如果你在這一塊卡關，CTA 行動呼籲按鈕設計指南有更細的拆解。

最常見的坑是主視覺圖片沒壓縮，第一屏載入要三四秒，手機上更慘。再來就是 CTA 被擠到折疊線下方，使用者進來看完一張圖就以為頁面結束了就離開。這兩個問題一個是效能、一個是動線，都會直接吃掉你的轉換。圖片壓縮這件事，可以參考圖片壓縮工具實測推薦，挑一個順手的整合進製作流程。

2. F 型閱讀版面：長文章的標準骨架

當你的頁面主要是文字內容（一篇兩三千字的教學、一篇深度分析），使用者的眼球其實不會逐行讀完。Nielsen Norman Group 多年前的眼動研究就指出，人在掃讀網頁文字時，視線會先沿著左側由上往下掃，在每個段落開頭的水平區塊停留，形成一個類似字母 F 的軌跡。這就是 F 型排版的由來。

實作上，左側放主內容（佔大約三分之二寬度），右側放側欄，包含目錄、相關文章、作者資訊之類的。主內容區裡，靠小標（h2、h3）、粗體關鍵字、段落間的圖片或表格來製造水平停頓點，引導視線在每一段稍微駐足。圖片不要只是裝飾，要能補充或示範文字在講的東西。如果你寫的是資訊密度高的長文，排版設計實戰技巧裡的行距、字級、視覺層次設定會幫上忙。

這個版型在手機上會遇到一個問題：側欄放哪？答案是把它往下推，放到文章結束之後，或者做成可折疊的目錄按鈕固定在頂部。千萬不要在手機上還硬留一個右側欄，那只會擠壓主內容的閱讀寬度。

3. 卡片網格：讓商品和作品自己說話

電商商品列表、作品集展示、部落格文章列表，這些場景有一個共同特徵：你有很多個「同質性的單元」，每個單元都有一張圖、一個標題、一小段描述。卡片網格就是為這個而生的。每個單元裝在一張等寬的卡片裡，以兩欄、三欄或四欄排列，每張卡片都是一個獨立的可點擊區塊。

以家具電商的商品頁為例，一開始通常就會卡在這個選擇。商品圖的比例要不要統一？標題放幾行？價格要放在按鈕旁邊還是獨立一行？這些看起來是小事，但決定了使用者能不能快速掃過一整頁商品、找到要點進去的那一張。實務上的建議是：圖片比例一定要統一（建議 4:3 或 1:1），標題最多兩行超過就截斷，價格獨立一行用粗體，整張卡片都可點擊而不只是按鈕。

卡片網格的坑通常出在高度不齊。如果每張卡的文字長度不同，會導致整排卡片底部參差不齊，視覺上很亂。解法是用 CSS flexbox 的 align-items: stretch 讓卡片等高，或者直接限制描述文字的字數。桌面上四欄、平板兩欄、手機一欄，這是基本款的斷點設定。想做作品集的話，作品集網站設計指南有更針對性的版面建議。

4. Bento 區塊排版：把不同資訊塞進一個和諧的畫面

如果你關注近幾年的網頁設計趨勢，一定看過 Bento Grid，靈感來自日式便當盒，用不同尺寸的方塊拼接成一個完整的畫面。大格放主視覺或最重要的資訊，小格放次要的數據、連結、圖示。Apple 從 iPhone 發表會到產品頁都大量使用這個手法，它有一種「資訊很多但井然有序」的質感。

Bento 排版的圖文排列邏輯跟前面的卡片網格不同。卡片網格裡每張卡是平等的，Bento 裡每個格子是有層級的，你刻意讓某些格子大、某些格子小，來暗示使用者「先看這裡、再看那裡」。留白和圓角是統一視覺的關鍵：格子之間留足夠的間距、統一的圓角半徑，就算格子裡的內容五花八門，整體看起來還是一個系統。想知道怎麼實作，Bento Grid 網頁排版設計教學有完整的步驟拆解。

Bento 最大的挑戰是斷點設計。桌面上六七個格子拼出一個漂亮的版面，到了手機全部要重排。你不能只是把它們通通堆成一欄，那會失去 Bento 的層級感。比較好的做法是手機上保留兩到三個層級（大格放最上方，中格放中間，小格放底部），維持視覺的輕重關係。

5. 左右分割畫面：用對比說一個有張力的故事

當你的內容有兩個對等的面向（兩種產品線、兩種服務方案、前後對比、問題與解答），左右分割畫面是一個很有力道的選擇。畫面從中間垂直切開，兩邊各自獨立，可以有不同的背景色、不同的圖片、不同的 CTA。使用者一眼就看到兩個選項並列，視覺上的對比本身就是訊息。

圖文排列上，兩邊可以是「圖 vs 文」（一邊放產品照、一邊放文字說明），也可以是「圖 vs 圖」（兩種情境的照片對比）。中間的分隔可以用一條細線、一個漸層過渡、或者純粹靠留白和背景色差來暗示。兩邊的文字量和圖片比例要盡量對稱，不然視覺會歪向一邊。

手機上這個版型幾乎一定要改成上下堆疊，但堆疊的順序要想清楚。如果兩邊是有先後邏輯的（例如「問題」在上、「解答」在下），直接上下就好。如果兩邊是平等選項，你可能需要在上方加一個引導文字，讓使用者知道下面有兩個並列的選擇。

6. 雜誌式編排：讓內容策展有層次感

如果你的網站是一個內容媒體、一個有大量文章的策展頁，雜誌式編排能讓資訊密度高的頁面不至於變成一堵文字牆。核心想法跟實體雜誌一樣：有一個主頭條佔據最大視覺面積，周圍圍繞著次要的文章，靠圖片大小和標題字級來建立清楚的層級。

圖文排列的重點是層級分明。主頭條用一張大圖配大標題，占頁面視覺的六七成；次要文章用縮圖配中等標題，排在主頭條下方或側邊；更次要的可以純文字列表。讀者的眼睛會自然被最大的圖吸引，然後順著層級往下掃。這跟卡片網格的差別在於：卡片網格裡每張卡是平等的，雜誌式編排刻意製造不平等來引導閱讀優先順序。

要小心的是主頭條會過時。如果你的內容更新頻率不高，一篇掛了三個月的主頭條會讓網站看起來沒在維護。設定一個更新排程，或者讓主頭條連動最新發布的文章，可以解決這個問題。

7. 滿版視覺沈浸：讓圖片扛起整個頁面

餐廳、攝影師、精品品牌，這類網站的共通點是產品本身就是視覺。滿版視覺沈浸排版把圖片或影片推到極致：整個第一屏就是一張全螢幕的視覺，上面只疊極少量的文字（可能就一個品牌名和一個向下捲的提示），讓使用者一進來就被畫面包圍。

這個版型的圖文排列邏輯跟其他都不同。在這裡，文字是配角中的配角，存在的目的是不打擾畫面。如果你非得放標題或 CTA，用 overlay 的方式（半透明的深色底層加白色文字）確保在任何圖片上都讀得到。字數能少一個字就少一個字。

兩個一定要處理的問題。第一，大圖或背景影片的檔案大小。在手機網路下，一張未壓縮的四千畫素照片可能要五秒以上才載入完，使用者早就離開了。務必做響應式圖片（srcset）和壓縮。第二，圖片上的文字可讀性。不要假設每張圖的明暗都一樣，用漸層遮罩或動態偵測背景亮度來調整文字顏色。做餐飲類的話，餐飲網站設計實戰教學有更多針對性的排版建議。

8. 非對稱破碎網格：用刻意的不規則傳達品牌個性

當你的品牌調性是實驗性的、創意的、反主流的，太整齊的版面反而顯得無趣。非對稱破碎網格故意打破對齊規則：元素錯落排列、互相重疊、甚至微微旋轉，製造一種手作感和動態感。設計工作室、藝術家作品集、獨立品牌常見這種手法。

圖文排列上，這是最難拿捏的一種。看起來隨性，其實每一個元素的位置都是精心安排的，你要在不規則中維持一種平衡感，讓畫面有張力但不混亂。色彩和字體是統一調性的工具：就算位置是錯落的，只要顏色系統和字體家族一致，整體還是讀得出「這是同一個設計」。

最大的風險是可用性。破碎網格很容易讓導覽變難找、讓重要資訊被視覺噪音淹沒。建議你做這種版型時，先讓一個完全沒看過這個網站的人花十秒鐘找出「怎麼聯絡」或「產品在哪」，如果找不到，你的設計就跨過了創意的線、踩進了難用的區域。

9. 側欄加主內容：給需要反覆查閱的內容

技術文件、知識庫、長篇教學，這類內容的使用者行為跟一般網頁不同。他們往往跳著找特定的段落、來回對照，很少從頭讀到尾。側欄加主內容的排版就是服務這個需求：左側固定一個導覽欄（分類或目錄），右側是主內容區，使用者可以隨時從側欄跳到任何章節。

圖文排列上，主內容區以文字為主，搭配程式碼區塊、截圖、表格。側欄的設計重點是「扁平」，不要超過兩層的巢狀結構，不然會變成樹狀迷宮，使用者反而更難找到東西。側欄的項目標題要跟主內容的標題完全一致，這樣使用者跳過去之後不會懷疑自己跑錯地方。

手機上側欄要收成一個漢堡選單或一個浮動的目錄按鈕，點擊後展開覆蓋在主內容上方。展開的目錄要標示目前所在章節（用高亮或粗體），讓使用者在長文件裡隨時知道自己讀到哪了。

10. 單欄垂直堆疊：把複雜留給敘事來處理

如果你的頁面是要說一個故事、帶使用者走一個流程（產品發表、品牌故事、活動頁面），單欄垂直堆疊是最直接的選擇。所有內容從上到下依序排列，使用者只要往下捲，不需要在頁面上做複雜的導覽決策。這也是行動裝置上最自然的閱讀方式。

圖文排列上，每個段落是一個獨立的內容單元，圖文交替出現，這段是文字、下段換一張全寬圖片、再下段是一個表格或引用。靠 section 之間的背景色切換（白底跟淺灰底交替）來製造分段感，而不需要靠複雜的邊框或分隔線。文字區塊的寬度要限制在大約六百到七百畫素，超過這個寬度單行會太長、眼球換行時容易跳行。

要處理的問題是頁面長度。單欄堆疊很容易讓頁面拉得很長，使用者不知道還有多少內容、不知道自己讀到哪了。加一個回到頂部的浮動按鈕是基本款；更好的做法是加一個閱讀進度條（頂部一條隨捲動填滿的色條），讓使用者對「還剩多少」有感。

11. 固定導覽加錨點跳轉：讓長篇指南可以被導航

當你的內容是一篇超長的指南、一個服務總覽、一個 FAQ 彙整，單純的單欄堆疊會讓使用者在茫茫內容海裡迷路。這時候在頂部加一個固定的導覽列，列出各主要章節的錨點連結，使用者點下去就平滑捲動到對應區塊。這個排版其實是單欄堆疊的加強版，差別在於它給了使用者一張地圖。

導覽列的設計有幾個細節。第一，它是固定在頂部的（position: sticky），不管你捲到哪都看得到。第二，錨點連結的標題要夠短，五六個章節還行，超過十個就太擠了，考慮用下拉選單或折疊式導覽。第三，點擊錨點跳轉後，目標標題不能被固定的導覽列遮住，要用 CSS 的 scroll-margin-top 補償導覽列的高度。

一個進階的細節：隨著使用者捲動，導覽列上對應目前所在章節的項目要高亮。這需要一點 JavaScript（Intersection Observer 是最輕量的做法），但它讓使用者在長文件裡隨時知道「我在哪」，體驗差距很大。

挑版型前，先診斷你的「內容體質」

看完十一種排版結構，你可能還是會問：那我到底該選哪一種？答案不在於哪一種「最好看」，而在於你的內容是什麼體質、吃哪一種版面配置。實務上常用一個三步診斷流程來決定。

先問你的頁面主要目的是什麼。是要讓使用者看完一大段文字內容？那就是 F 型或側欄加主內容。是要讓他對一個產品或服務採取行動？那就是 Hero 加 Z 字動線或單欄堆疊。是要展示很多個同類的東西？那就是卡片網格。是要把多元資訊聚合在一個畫面？那就是 Bento 排版。

再問你的圖文比例是什麼。如果你的內容本質上是視覺的（攝影、餐飲、精品），往滿版視覺沈浸或非對稱網格靠。如果是文字為主（教學、分析、文件），往 F 型或單欄堆疊靠。如果圖文參半（商品、作品），卡片網格或左右分割是基本盤。

第三個要問的是使用者在看這個頁面時，處於什麼樣的狀態。他是坐下來專心閱讀，還是走在路上用手機快速查一個資訊？前者可以接受資訊密度高的版面（側欄加主內容、F 型閱讀），後者需要一眼就能找到答案的版面（Hero 加 CTA、單欄垂直堆疊配上清楚的標題層級）。這聽起來很直覺，但很多網站的問題就出在：用了一個需要專心閱讀的排版，去服務一個只想花十秒鐘找答案的使用者。

這三個問題交叉之後，你的選擇通常會收斂到兩三種。再從手機友善度和製作難度去篩，就能定下來。不要企圖用一種版型解決所有問題，不同的頁面本來就該有不同的排版邏輯。一個二十頁的網站裡，可能就用了五六種不同的排版結構，每一種都在服務它那個頁面特定的使用者和內容。

圖文排列的三個底層功夫

不管你選了哪一種排版結構，最後決定畫面質感的，是三個底層功夫：網格系統、視覺層次、留白。這三個東西搞好了，就算用最簡單的單欄排版也會看起來專業；這三個東西隨便來，再炫的版型也救不回來。

網格系統是你的排版骨架。它決定了每一個元素在水平方向對齊到哪些隱形的線上。十二欄網格是最常見的選擇（Bootstrap、Tailwind 都用這個），因為它可以被整除成各種組合：兩個六欄、三個四欄、四個三欄。在設計工具裡先把網格開出來，所有元素都貼著網格放，畫面自然會有一種秩序感。如果你用 Figma 製作原型，Figma 網格系統教學有完整的設定方式；轉成網頁之後，CSS Box Model 完全圖解能幫你搞清楚 padding、margin、border 怎麼配合網格。

視覺層次是讓使用者知道先看什麼、再看什麼。靠三個變數來控制：大小（大標題比小標題大、小標題比內文大）、對比（粗體比細體顯眼、深色比淺色搶眼）、空間（元素之間留越多空間，視覺上越重要）。一個好的檢驗方法是：把你的頁面截圖轉成黑白、然後瞇著眼睛看。如果還能分辨出哪些是標題、哪些是內文、哪裡是 CTA，你的視覺層次就過關了。

留白是被最多人略過的功夫。很多自架網站的問題不是東西太少，而是塞太滿。元素跟元素之間、段落跟段落之間、區塊跟區塊之間，都需要呼吸的空間。留白不是「空的空間」，它是設計元素，它引導視線、它建立群組關係、它降低認知負擔。一個簡單的原則：當你覺得兩個元素之間的距離「好像可以再大一點」的時候，通常就真的應該再大一點。

手機版排版：行動裝置早就不是次要裝置

如果你到現在還把桌面版當主要設計、手機版當「之後再調」的附屬品，這個觀念要改了。根據 Statcounter 的全球統計，行動裝置的網頁流量佔比已經長期超過百分之六十，桌面加平板加起來才佔剩下的不到四成。

Google 已全面採用行動優先索引（Mobile-First Indexing），主要使用手機版內容進行檢索與索引。這是索引方式，不是手機版自動獲得排名加分。如果桌面版內容完整，但手機版因排版或互動載入而缺少主要內容，Google 可能無法從手機版取得同等資訊（見 官方對行動優先索引的說明）。

在行動流量高的專案裡，從手機版開始規劃，再往上擴展到桌面版，通常比較容易控制內容優先順序。先決定手機上的單欄、圖片、導覽與操作目標，再在大螢幕拆開欄位或加入側欄。不過，這是設計流程選擇，不是行動優先索引的技術要求；無論從哪個尺寸開始，最後都要確保各版本的主要內容一致。想深入了解響應式的觀念和實作，可以看響應式網頁設計 RWD這篇。

手機排版還有幾個跟桌面完全不同的物理限制要記住。觸控目標（tap target）的最小尺寸建議是四十八乘四十八像素，按鈕之間至少留八像素的間距，不然使用者在大拇指點一個按鈕的時候會誤觸隔壁那個。正文字級不要小於十六像素，再小使用者就得放大才能讀，體驗立刻打折。還有所謂的「拇指熱區」：手機螢幕的右下角和底部是最容易被拇指自然觸及的範圍，重要的操作按鈕放這裡最順手；螢幕頂端反而最難按到，特別是大螢幕手機。這些細節看起來微不足道，但疊加起來就是「用起來順手」跟「用起來卡卡」的差距。

排版會影響 SEO 嗎？版型跟排名的真實關係

很多人問過這個問題：排版好不好看，Google 真的會管嗎？嚴格來說，Google 的演算法不會因為你的網站「比較美」就給你加分。但排版間接影響排名的路徑是實實在在存在的，而且不只一條。

第一條路徑是網頁載入速度。排版結構會影響資源用量：滿版背景影片通常比適當壓縮的靜態圖片更重，卡片網格的成本則取決於圖片、腳本與渲染方式，不能只憑版型判斷。Google 會把頁面體驗納入眾多排名訊號，但 Core Web Vitals 的作用有限，主要仍應拿來改善使用體驗（見 2020 年 11 月的 頁面體驗時程說明）。Google 引用的既有行動網站資料曾觀察到，載入時間從一秒增加到三秒時，跳出機率增加百分之三十二（資料出自 web.dev 的說明）；這是特定資料集的觀察，不是每個網站都會得到相同比例。

第二條路徑是內容可用性。排版太亂會讓使用者找不到資訊，影響閱讀、導覽與轉換；排版清楚、動線順暢，則比較有機會改善站內互動。不能把分析工具裡的停留時間或跳出率直接當成 Google 排名訊號，也不能用「快速返回搜尋結果」就斷定某頁一定降名次，仍要回到搜尋意圖、內容品質與技術狀態一起判讀。

第三條路徑是行動可用性。前面說過 Google 看的是手機版，如果你的排版在手機上有水平捲動、按鈕太小點不到、文字被擠到變形，這些都會被判定為行動可用性問題。累積太多這類問題，整個網站在行動搜尋的排名會受到拖累。

所以排版跟 SEO 不是簡單的直接因果。它會影響內容是否容易閱讀與操作，也可能改變載入成本和行動裝置體驗；這些工作應以可用性與頁面品質為目標，不能保證排名提升。想避開常見的自架地雷，自架網站常見錯誤整理了更多實際案例。

排版靈感哪裡挖：實務上常用的來源

講了這麼多結構和原則，你還是需要看實際的範例來刺激靈感。這部分提供三個方向，幫你建立自己的判斷力，光靠一份網站清單照單全收是培養不出眼光的。

第一個方向是去看你同業做得好的網站，但不是為了抄，而是為了拆。用前面說的三個問題（內容密度、視覺動線、取捨邏輯）去分析他們為什麼這樣排。你會發現同一個產業裡，排版邏輯其實有共通的東西，因為面對的是同一群使用者的同一種需求。這比看一堆跨產業的炫技網站有用得多。

第二個方向是設計靈感聚合站。這類網站每天更新世界各地的網頁設計作品，你可以按風格、按產業、按配色去篩選。好處是量大、種類多，容易找到跟你的調性接近的參考；缺點是很多作品是概念性的展示，並沒有考慮真實的內容量和效能。看的時候要帶著批判：這個版型換成我三倍的文字量、換成我手機上的載入限制，還成立嗎？我們自己也整理了一份網頁設計靈感網站清單，可以從那裡開始挖。

第三個方向是你每天都在用的大網站。Apple、Amazon、Airbnb、各大媒體，這些網站的排版是經過海量使用者測試打磨出來的，每一個決定背後都有數據支撐。你不需要做出跟他們一樣精緻的版面，但你可以觀察他們怎麼處理跟你類似的問題：商品列表怎麼排、長文章怎麼分段、CTA 放在哪。這是免費且高品質的參考來源。

五步驟把參考範例變成你自己的版型

底下是一個可執行的流程，讓你從「看到一個喜歡的範例」走到「做出適合自己內容的版面」。

1. 盤點你的內容素材。在打開設計工具之前，先列出頁面需要的文字、圖片、表格、CTA 與相關連結。這份清單能幫你選擇排版結構，也可提早發現內容量與版型不相容的問題。
2. 用前面十一種結構做初步配對。拿著你的內容清單，對照前面的速查表和診斷流程，選出兩到三種候選排版。不要只選一種，給自己比較的空間，你會發現某些結構放進你的內容後立刻就會卡住。
3. 拆解你收集的參考範例。把你存下來的靈感範例拿出來，用那三個問題（內容密度、視覺動線、取捨邏輯）拆解它們。把拆解出來的「排版邏輯」（不是視覺樣式）跟你在第二步選的結構做對照，看看哪些可以借過來用。
4. 從手機版開始做灰階原型（Wireframe）。不要一開始就開彩色、開圖片。先用灰階方塊把手機版的排版骨架排出來：哪裡是圖、哪裡是標題、哪裡是按鈕、彼此的間距多大。確認動線順了之後，再擴展到桌面版，最後才填入真實的圖片和文字。
5. 找一個沒看過的人測試。把做好的頁面給一個完全不知道這個網站的人看，給他十秒鐘，然後問他三個問題：這個網站在講什麼、你會想點哪裡、你覺得最重要的資訊是什麼。如果他的答案跟你的預期不一樣，你的排版就有問題，回去調整，再測一次。這個步驟比你看一百篇教學文章都有效。

排版這件事，說到底是在幫使用者節省腦力。每一個清楚的層級、每一處恰到好處的留白、每一條順暢的動線，都是在幫他更快找到他要的東西。當你能持續從使用者的角度去檢驗自己的版面決定，你做的網站就會越來越接近「看起來舒服、用起來順手」這兩個看似簡單其實不容易的標準。如果你想把整體的網頁設計能力再往上拉一個檔次，網頁設計必備的關鍵元素跟最新網頁設計趨勢會給你更全面的視角。現在，就從打開你自己的網站、用一個陌生訪客的眼睛重新看一遍開始吧。