網頁風格的起點多半是網頁設計作品欣賞：收藏夾存了幾百張，真要做自己的站，卻只說得出「要有質感」。欣賞跟落地之間差一層翻譯——把「喜歡」換成可以執行、可以驗收的規格。這篇給那層翻譯：四個變數描述風格、四條底線管住網頁排版、一組可驗收的網頁 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：開工前把色票、字級階層、間距級距、圓角做成一張表，之後所有新頁面只准從表裡取值。這張表交付時要寫進文件，不然換人維護，表就失效了。整套流程從需求到上線怎麼走，網頁設計完整流程指南有展開；一頁式呈現怎麼排內容順序，看一頁式網頁的取捨。
常見問題
網頁風格一定要跟別人不一樣嗎？
不一定，但要知道自己要什麼。用四個變數（字級對比、留白密度、色彩數量、圖文比）把偏好寫成規格，比「簡約大氣」這種形容詞更能讓設計師一次做對。
網頁排版有標準可以驗收嗎？
有底線：桌面版一行約 35 字內、段距明顯大於行距、字級對比至少兩級、手機端不出現橫向滾動。這四條不需要美感就能逐頁檢查。
作品集網頁放什麼最有說服力？
放過程與數據，不只放成品圖。線框圖與完成稿對照、改版前後的指標變化、遇到的限制與取捨——證據比形容詞能建立專業感。
網頁 UI 設計怎麼驗收？
驗狀態不驗畫面。請設計方交付按鈕四態（平常、滑過、按下、停用）與表單錯誤提示的定義，拿得出來的是做過 UI，拿不出來的只有視覺稿。
作者：劉宇，河南天問網路技術負責人。公司 2017 年成立（工商登記 2017-05-03），長期維護 30–40 個外貿獨立站，自營 tianwenwangluo.com、waimaodulizhan.com、tianwenseo.com 三個站。本文數據均來自我們自己站台的實測，不承諾排名、流量與詢價數。