網頁設計技巧：版面配置、色彩對比、CTA按鈕與留白的具體判斷標準

作者｜晨星行銷　陳俊鳴執行長（網路流量操盤手．企業行銷顧問）

假設一家提供顧問服務的中小企業，網站前陣子才重新設計過，流量沒有掉，甚至比之前更好看，但詢問表單卻越來越少。老闆通常會先懷疑是不是流量品質不好，或是文案寫得不夠吸引人。但很多時候，問題出在幾個具體的技巧沒做到位——色彩對比不夠、CTA按鈕位置不對、留白亂了層次——而這些技巧其實有客觀標準可以檢查，不是設計師今天心情好不好的問題。

這篇文章會把版面配置、色彩對比、CTA按鈕設計、留白運用、字體排版這五個最基本也最常被做錯的技巧講清楚，每一個都附上具體數字與出處，讀完你可以直接對照自己的網站檢查一遍。

網頁設計技巧不是美感偏好，是有標準可以檢查的

很多人以為「這個網站設計得好不好」是主觀感受，跟穿搭品味差不多，各花入各眼。但版面配置、色彩對比、按鈕設計這幾件事，其實都有國際組織訂出來的具體標準，不是設計師的個人偏好，是有研究依據的判斷標準。

舉例來說，全球網頁無障礙標準 WCAG（Web Content Accessibility Guidelines）明確規定文字與背景的對比度該多高；Google 官方文件與 Material Design 對按鈕的可點擊尺寸有明確的像素規範；使用者研究機構 Nielsen Norman Group（以下簡稱 NN/G）用眼動追蹤儀器記錄了成千上萬名讀者怎麼看網頁，得出視覺動線的規律。這些都不是「感覺應該這樣」，而是有實測數據撐著的結論。更值得留意的是，這些技巧正在從「設計師的專業判斷」慢慢變成「可能被檢查、甚至被要求」的標準——這一點後面色彩對比小節會用一個具體的國際案例說明。

這篇文章接下來要做的，就是把這些藏在研究報告裡的標準，翻譯成你可以直接對照檢查的清單。「好看」跟「好用」是兩件事，一個網站可以很好看卻沒人點得下去，這正是很多企業主改版後流量沒掉、詢問卻變少的常見原因（這個現象背後更完整的預算與規劃邏輯，可以參考網頁設計做得漂亮，為什麼還是沒有詢問？預算取捨、類型與SEO範圍這篇）。

版面配置：視覺層級、動線與網格系統怎麼安排

版面配置決定讀者「先看到什麼、後看到什麼」。做得好，讀者不用思考就知道下一步該做什麼；做不好，讀者會迷路，然後離開。

視覺層級：用大小、顏色、對比、位置排優先順序

視覺層級（Visual Hierarchy）的概念很簡單：重要的東西要讓它「跳出來」，不重要的東西讓它退到後面。做法不外乎四個工具：字級大小（越重要的字越大）、顏色（重點用對比色）、對比（明暗差異）、位置（越靠上、越靠左通常越先被看到）。

網站首頁最上方那一區（設計圈習慣叫「Hero區」）是視覺層級失敗的重災區。很多網站的Hero區只放了一張漂亮的圖片配一句空泛的標語，例如「打造更好的未來」，讀者看完完全不知道這家公司在做什麼、跟自己有什麼關係。Hero區該有的是一句明確的主張——講清楚你提供什麼、給誰用、有什麼好處，讓讀者三秒內判斷「這跟我有沒有關係」。

動線：讀者的眼睛怎麼移動

使用者研究機構 Nielsen Norman Group 在原始眼動追蹤研究中，記錄了兩百多人瀏覽上千個網頁時眼球移動的路徑，發現多數人讀網頁時會呈現「F型」動線：先橫向掃過頂端，往下移一點再橫向掃一次（範圍通常比第一次短），最後沿著左側垂直往下掃。後續研究進一步指出，F型只是常見型態之一，實際上還有Z型、古騰堡對角線等變化，但共通結論是：讀者不會逐字逐句讀完整個頁面，重要資訊要放在動線會經過的地方，尤其是頁面左上到中段這一塊。

這對版面配置的實際影響是：重要的行動呼籲（CTA）、關鍵賣點，要擺在動線自然會掃到的位置，不要指望讀者會滑到頁面最底端才看到你最想講的話。

網格系統：讓元素對齊、有秩序

網格系統（Grid System）簡單說就是把頁面切成固定的欄位（常見是12欄），所有元素都對齊這些欄位排列。好處是版面看起來整齊、有秩序，不同區塊之間的寬度、間距一致，讀者的眼睛不用一直重新適應新的排版邏輯。沒有網格系統的網站，最明顯的症狀是每個區塊寬度不一、對齊線亂七八糟，看起來會有種說不出的「怪怪的」感覺，即使單獨看每張圖每段文字都沒問題。

版面配置常見錯誤	問題出在哪	該怎麼調整
Hero區只有圖片與空泛標語	讀者不知道你在做什麼	換成一句明確主張：提供什麼、給誰、什麼好處
重要資訊放在頁面最下方	多數讀者的動線掃不到那裡	把關鍵賣點與CTA往前移到動線會經過的區塊
各區塊寬度、間距不一致	版面看起來凌亂、缺乏秩序感	建立網格系統，統一欄寬與間距

色彩對比：不只是好看，是有具體數字標準的

色彩搭配常常被當成純美感問題，但其實有一條清楚的紅線：文字跟背景的對比度不夠，讀者會看不清楚，甚至完全看不見。這不是誇張，是無障礙標準明文規定的門檻。

WCAG 對比度標準：4.5:1 與 3:1

全球資訊網協會（W3C）制定的網頁內容無障礙指南 WCAG 2.2，對文字與背景的對比度訂出了具體門檻：一般大小的文字，對比度至少要達到 4.5:1；大字體（通常指18pt以上，換算成網頁常用的像素單位大約是24像素以上，或14pt、約19像素以上再加粗）與按鈕、圖示這類UI元件，對比度至少要 3:1。（對比度講白話一點，就是文字顏色跟背景顏色的「反差夠不夠大」——4.5:1大概是「深灰字配白底」那種清晰程度，如果讀者要瞇著眼睛才看得清楚，通常就是沒達到這個標準。）W3C 官方文件對此有完整的技術說明，這不是某個設計師的建議，是國際通用的無障礙標準。

聽起來像是給視障或弱視使用者的規定，跟一般讀者無關？其實不然。無障礙研究機構 WebAIM 的調查指出，對比度不足是網頁最常見的錯誤之一，接近半數的網站首頁都有對比度不合格的元素，而這些元素往往也是一般讀者在強光環境、疲勞狀態、或用比較舊的螢幕瀏覽時，會覺得「看不清楚」的地方。對比度不足不是少數人的問題，是多數人都會踩到、只是沒意識到的問題。

元素類型	最低對比度標準	常見踩雷情況
一般內文文字	4.5:1	淺灰字配白底，看起來「高級」但讀起來吃力
大字體標題（18pt以上）	3:1	標準較寬鬆，但很多網站反而在標題上用更誇張的低對比配色
按鈕、圖示等UI元件	3:1	CTA按鈕顏色跟頁面背景太接近，視覺上不夠突出

對比不是「越強烈越好」

也別走到另一個極端。全黑配全白的對比度雖然最高，但長時間閱讀反而容易造成視覺疲勞。實務上的做法是：先確保達到標準門檻，再依品牌調性微調，而不是追求數字上的最大化。這也是為什麼多數專業網站的內文文字用的是深灰而不是純黑——深灰配白底通常就能超過4.5:1的門檻，同時閱讀起來比純黑更柔和。

對比度標準正在從「建議」變成「要求」

中文網頁設計文章多半把色彩對比講成一種美感或體驗建議，但國際上這件事正在起變化。以歐盟為例，《歐洲無障礙法案》（European Accessibility Act，Directive (EU) 2019/882）已經在2025年6月28日起要求會員國開始執行數位服務（包含電商網站、銀行服務、電子書等）的無障礙標準，而WCAG正是這類法規常引用的技術依據。

目前台灣並沒有針對一般民間企業網站的強制性無障礙法規，色彩對比目前仍屬於「最佳實務」而非法律義務。但這個國際趨勢值得留意：對比度不足，未來很可能不只是「使用者體驗不好」，而是逐漸接近合規層級的問題。及早依照WCAG標準把對比度做對，除了讓現在的讀者看得更清楚，也能降低未來因應法規調整時要重新翻修網站的成本。

CTA按鈕設計：文案、顏色、尺寸與位置的四個判斷點

CTA（Call to Action，行動呼籲）按鈕是整個網站最需要被看見、被點擊的元素，卻也是最常被做錯的地方。判斷一個CTA按鈕做得好不好，可以拆成四個點來檢查。

文案：動作明確、價值導向、降低心理壓力

好的CTA文案通常有三個特徵：動作要明確（讀者知道點下去會發生什麼）、要傳達價值（讀者知道自己會得到什麼）、要降低心理壓力（不會讓人覺得點下去就要掏錢或被推銷）。「立即購買」比「馬上點我」清楚，但「免費試算」又比「立即購買」更沒有壓力。文案怎麼選，取決於讀者當下處在決策的哪個階段。

顏色：跟背景形成強對比，不是跟隨品牌色

前面色彩對比小節已經講過原則，這裡要補充的是CTA按鈕特有的取捨：CTA的顏色任務是「被看見」，優先順序高於「跟品牌色系一致」。很多網站的失誤，是設計時把CTA按鈕硬塞進品牌的主色調裡（例如品牌是淺藍色系，按鈕也用淺藍），結果按鈕跟周圍元素融為一體，訪客根本沒注意到那是一個可以點的按鈕。

尺寸與間距：觸控裝置跟滑鼠裝置的標準不一樣

這是中文網頁設計文章最常忽略的細節。Google 官方文件 web.dev 對可觸控目標的建議，以及 Material Design 的無障礙設計規範都明確指出：觸控裝置（手機、平板）的可點擊目標建議至少要有 48×48 像素，滑鼠與觸控筆這類指標裝置則是44×44像素。差異的原因很直覺——手指觸控的準確度本來就比滑鼠游標低，目標太小容易點錯或點不到。除了尺寸，多個可點擊目標之間也建議保留約8像素的間距，避免手指按到相鄰的按鈕。

這個「按鈕要大」的建議，其實有將近七十年的人因工程理論撐腰。心理學家 Paul Fitts 早在1954年就提出後來被稱為 Fitts’s Law（費茨定律） 的規律，Nielsen Norman Group 對此的解析指出：移動到一個目標所需要的時間，跟目標的距離成正比、跟目標的大小成反比——目標越大、離游標或手指越近，點擊需要的時間越短、出錯率也越低。這正是為什麼CTA按鈕不只要夠大，位置也很重要：一個又大又對比強烈、卻放在讀者視線很難掃到的地方的按鈕，效果仍然會打折扣。換句話說，尺寸標準與前面提到的動線設計，其實是同一套原理的兩個面向。

位置：往前移，不要只放在頁面最底端

呼應前面版面配置提到的動線研究，CTA按鈕如果只出現在頁面最底端，很多讀者根本滑不到那裡就已經離開了。比較好的做法是讓CTA在讀者看完關鍵資訊後就自然出現，而不是逼讀者滑完整個頁面才看得到行動呼籲。

CTA按鈕檢查項目	及格標準	常見失誤
文案	動作明確＋價值導向	用「馬上點我」這類沒有資訊量的文字
顏色對比	至少3:1（大字體／UI元件標準）	跟隨品牌色，融入背景
觸控裝置尺寸	至少48×48像素	沿用桌機尺寸，行動裝置點不準
位置	動線會經過的位置，不只放頁尾	只出現在頁面最底端

留白運用：三個層次，不是「留多一點」這麼簡單

留白（White Space，也叫負空間）常被簡化成一句話：「多留一點空間，網站會比較高級。」這句話不算錯，但太籠統，實務上留白要分三個層次來處理，不是整體「留多一點」就結束。

三個層次：段落間距、區塊間距、按鈕周圍留白

第一層是段落間距，文字段落之間要有足夠的空白，讓讀者能把內容分成一塊一塊來理解，而不是一整片文字黏在一起。第二層是區塊間距，不同功能的區塊（例如服務介紹區跟客戶見證區）之間要有明顯的間隔，讓讀者知道「這裡換主題了」。第三層是按鈕周圍的留白，CTA按鈕周圍如果留白足夠，會讓它自然變成視覺焦點，讀者的眼睛會被吸引過去——這聽起來有點反直覺，明明是「留空」，卻能讓一個元素更顯眼，但這正是留白最實際的用途：把注意力集中在你想讓讀者看到的地方。

憑感覺留白 vs 系統化留白

留白最常出的問題不是「留太少」，是留得不均勻。今天這一段留20像素，明天那一段留35像素，整個網站看起來就會有種說不出的不協調感。比較穩妥的做法是訂一個基準值（例如8像素），所有間距都是這個基準值的倍數（8、16、24、32……），這樣不同區塊之間的間距即使不完全一樣，也會有一致的節奏感。

比較項目	憑感覺留白	系統化留白
做法	每次調整時目測「感覺夠不夠」	訂一個基準值，間距都是它的倍數
結果	容易留白不均、視覺不穩定	各區塊間距一致，有節奏感
維護	每次改版都要重新拿捏	之後新增內容照基準值套用即可

字體排版：字級、行高、行寬與標題層級怎麼定

字體排版影響的是讀者能不能舒服地把一段文字讀完。這個小節聚焦在通用的字級、行高、行寬原則；如果你的網站有大量中文內容，字型授權與中英文混排間距這類更細節的問題，可以另外參考中文網頁設計眉角：字型授權、排版行高與中英文混排怎麼處理這篇，這裡不重複。

字級：內文至少16像素

網頁內文字級的普遍建議是至少 16像素，小於這個尺寸，長時間閱讀容易造成眼睛疲勞，尤其是中高齡讀者。次標題通常落在24至26像素，大標題可以到36像素以上，重點是不同層級的字級要拉開明顯差距，讀者才能一眼分辨出「這是大標題」還是「這是內文」。

行高：至少1.5倍字級

行高（Line Height）是行與行之間的距離。多篇國際排版研究都指向類似的結論：Smashing Magazine 的排版研究指出，行寬越長，需要的行高就要越寬，才能讓讀者的眼睛順利換行、不會讀錯行；一般建議行高至少設定在字級的 1.5倍。行高太窄，行與行擠在一起，讀者的眼睛容易「跳行」；行高太寬，段落又會顯得鬆散、缺乏凝聚感。

行寬：一行50到75個字元最好讀

行寬（每一行文字的長度）也有研究支持的最佳範圍。使用者研究機構 Baymard Institute 的可讀性研究指出，一行文字落在 50到75個字元之間最容易閱讀，太長的行讓眼睛需要移動更遠的距離才能找到下一行的開頭，容易造成疲勞；太短的行則會打斷閱讀節奏，眼睛要更頻繁地換行。這也是為什麼很多網站的內文區塊不會做滿整個螢幕寬度，而是限制在一個固定寬度之內，尤其在寬螢幕的桌機上更明顯。

標題層級：字級與字重的差距要夠明顯

H1（主標題）、H2（次標題）、H3（小標題）之間，字級跟字重（粗細）的差距要夠大，讀者才能單靠視覺掃過去就分辨出文章的架構。如果H1只比H2大兩三個像素，讀者滑過頁面時很難感覺到「架構」，會覺得整篇文章是同一個層級的內容堆在一起。

技巧會互相影響，好的設計是取捨後的結果

看完前面五個技巧，可能會有種「全部都要做到最好」的衝動——留白越多越好、對比越強越好、字級越大越好。但實務上，這些技巧彼此之間是有取捨關係的，不是每一項都拉到極限就是最好的設計。

留白多會讓頁面變長，讀者要滑更多次才能看完關鍵內容；對比強烈的CTA如果整頁用太多次，會失去原本的強調效果，讀者反而分不清哪個才是真正該點的按鈕；字級太大又會壓縮到一個畫面能顯示的資訊量，讀者要更頻繁地滑動才能看到完整內容。好的設計不是把每個技巧都做到極致，而是根據這個頁面最重要的目標，決定哪些技巧要優先做對。

這也是為什麼有些企業主的網站，明明每個小細節都做了「業界建議」，整體看起來卻還是不對勁——因為技巧被當成獨立的檢查清單各自套用，沒有人回頭看整體是不是還協調。

實務上還有一筆帳可以算：如果在設計階段就把色彩對比、CTA尺寸、留白層次這幾項標準抓對，通常只需要在原本的設計流程裡多花一點時間確認；但如果等到網站上線後才發現問題，往往要重新調整版型、搬動區塊，所花的時間通常是設計階段抓對的好幾倍，因為改動一個元素常常會牽動旁邊的排版，變成連鎖修改。這也是設計技巧值得在動工前就講清楚標準的原因。

如果你正在檢視自己的網站、想知道這些技巧有沒有真的落地成詢問與成交，晨星行銷長期協助中小企業從SEO與網路行銷的角度檢視網站表現，可以作為你判斷時的參考。

常見問題