網頁風格、排版與 UI 設計：從作品欣賞到能落地的規範

收藏了幾百張網頁，做自己的站卻只說得出「要有質感」？網頁風格要從喜好轉成能執行、能驗收的規格。下面用四個變數描述風格、四條底線檢查排版，再說明網頁 UI 設計和作品集該怎麼驗收。

把「喜歡」翻譯成四個變數

看參考網頁，記下四個變數：標題與正文的字級對比、元素間的留白密度、整頁的色彩數量，以及圖文比例。是兩三個顏色，還是七八個？存到十張，就能看出偏好集中在哪裡。把這些寫進需求，比「簡約大氣」有效一百倍。設計師也能照著提案，減少第一輪之後的反覆修改；修改輪次會直接影響費用。

網頁排版的四條底線

排版風格可以不同，四條底線仍要守。桌面一行別超過約 35 個中文字，太長容易看錯行。段距要比行距明顯，否則段落會黏在一起。標題和正文至少差兩級，才能看出層級。手機版則用單欄，別讓讀者橫向滑動。這些都能逐頁查，不必先判斷美不美。覺得版面怪，先數一行字、量段落間距，通常就能找到問題。

還有一個容易忽略的排版對象：手機。桌面版排得再好，八成流量在手機上的站，等於只完成了兩成的排版。響應式的完整驗收方法在RWD 驗收清單，這裡只講排版相關的一條：桌面上「左右並排」的區塊，到手機必須自動變上下堆疊，這是排版問題，不只是技術問題。

網頁 UI 設計的可驗收標準

網頁ui設計常被當成「畫圖」，其實 UI 設計的核心是狀態：同一個按鈕，平常、滑過、按下、停用、載入中，長什麼樣都要定義；同一個表單欄位，空的、打字中、填錯、填對，各是什麼樣子。驗收 UI 就驗這個——請設計方交付「四態按鈕」與「錯誤提示」的定義，拿得出來的是做過 UI，拿不出來的只做了視覺稿。再補一條行動端的：手指點擊的目標別小於約 44px，這是可行度指標，不是美感指標。

狀態想清楚的網頁，開發成本反而更低——因為工程師不用猜、不用回頭改。風格走哪條路線（模板或客製）會影響這些細節能做到什麼程度，取捨分析看客製化網頁設計 vs 網頁模板。

作品集網頁：從相簿變證據

作品集網頁最常見的失敗是做成相簿：一張大圖、一個專案名，結束。看的人學不到東西，你也證明不了自己。有說服力的作品集放的是過程與證據：同一個專案的線框圖與完成稿並排（證明思路）、改版前後的數據對比（證明效果）、遇到的限制與取捨（證明經驗）。數據不用驚人——「這個站把首圖從 15MB 壓到能過 Core Web Vitals 門檻（LCP ≤2.5s、INP ≤200ms、CLS ≤0.1，web.dev 官方標準）」就是一條合格的證據。曾經有個站只把一張 15MB 首圖換掉，幾百個產品頁的體驗指標就從全數不及格變成過關——這種故事比任何形容詞都能建立專業感。

公司找架站團隊時，同樣的邏輯反過來用：看廠商的作品集，別只看漂不漂亮，找過程與數據。找到的，是工程與設計都在手上的人。

風格怎麼不被做壞：一次定死設計 token

風格最大的敵人是時間：第一個月上線的站很有系統，第二年東加一個活動頁、西加一個產品區，顏色多了四種、標題多了三種大小，風格就散了。防護的辦法是設計 token：開工前把色票、字級階層、間距級距、圓角做成一張表，之後所有新頁面只准從表裡取值。這張表交付時要寫進文件，不然換人維護，表就失效了。整套流程從需求到上線怎麼走，網頁設計完整流程指南有展開；一頁式呈現怎麼排內容順序，看一頁式網頁的取捨。

延伸閱讀

• 上一篇：網頁程式設計與網頁開發：HTML5、CSS3 與前端技術怎麼選
• 建站服務說明
• 回到首頁
• 諮詢建站方案