網站設計的一致性怎麼達成？31 份設計稿共用一套設計系統的做法

網站做到第十頁的時候，通常會出現一個問題：新的頁面看起來跟前面幾頁不太像。

字級差了一點、間距寬了一些、按鈕的圓角不太一樣。單獨看每一頁都沒問題，但放在一起就是有種拼湊感。

這不是美感問題，是方法問題。這篇文章用一個實際案例說明：31 份頁面設計稿如何共用同一套設計語言，以及這對後續的維護成本有什麼影響。

案例為順霏供應鏈管理顧問有限公司官方網站，由文網股份有限公司承製，已正式上線：順霏供應鏈管理顧問有限公司。作品大綱與技術規格見作品頁。

一致性不是「看起來比較整齊」而已

先說為什麼要在意這件事。

一、新增頁面時不用重新做決定

如果設計語言是明確的，新增一頁時幾乎不需要做任何設計決策——標題用哪一級、間距多少、按鈕用哪個顏色，都已經有答案。

反過來，如果每一頁都在重新決定，那每一頁都是一次設計工時，而且結果會越來越發散。

二、調整樣式時改一個地方

「所有內頁的標題想再大一點」——如果樣式是共用的，改一處即可；如果每頁各自寫死，就要改十幾個地方，而且很容易漏掉。

三、使用者的學習成本降低

看完第一頁之後，使用者已經知道「銅色的線代表這是一個新段落」「靛藍色的按鈕是現在該按的」。第二頁他不需要重新學一次。

四、改版時內容可以延續

設計語言統一的網站，日後換一套版型時，既有內容可以直接套用新樣式。版型會過時，內容是資產。

這個原理見版型與內容的分離：為什麼改版不用重打內容。

本案的規模：31 份設計稿

這個案子共產出 31 份頁面設計稿，涵蓋首頁、13 個長篇內容頁、常見問答、關鍵字索引、網站地圖、聯絡表單、商品列表與內頁、購物車兩步驟、訂單查詢兩種畫面，以及三顆側欄元件、同意面板與浮動通知。

逐檔核對的結果：

檢查項目	一致率
三款字型堆疊完全相同	31／31
六個核心色票數值完全相同	31／31
具備窄螢幕的獨立處理	31／31

這 31 份不是「風格接近」，而是同一份設計語彙的 31 種應用。

色彩：先決定語彙，再決定顏色

跨境物流的網站有一套很典型的視覺公式：藍色貨櫃、飛機、地球、速度線。但那套語彙傳達的是「我們送得快」。

本案業主的定位是供應鏈管理顧問——賣的是判斷與規劃，不是運輸速度。所以我們選了另一組語彙：紙、鋼、銅、靛。

角色	用途	選擇理由
紙	底色	帶冷調的米白，長時間閱讀較不刺眼
鋼	表頭、步驟條、摘要條	帶綠的近黑，有工業重量感，避開一般企業網站的正黑
銅	強調線、標籤邊框	全站的品牌記號
靛藍	唯一的主要動作色	只給「現在該按的那一顆」

最重要的紀律：只有一種主要動作色

很多網站的問題是畫面上有三四顆顏色鮮豔的按鈕在互相搶焦點——結果使用者不知道該按哪一個。

本案的做法是：全站只有靛藍代表主要動作，其餘的次要操作一律用低對比的樣式。每個畫面上，使用者一眼就知道要按哪裡。

狀態色不與品牌色混用

成功綠與警示紅另外定義，不使用品牌色系。

理由很實際：如果「成功」用的是品牌銅色，那使用者看到銅色時無法分辨這是狀態訊息還是裝飾。狀態必須一眼可辨。

字型：中文用黑體，數字換窄體

全站三款字型，各有明確職責：

字型	負責什麼
襯線黑體（900 字重）	區段標題、金額合計——需要份量的地方
無襯線黑體	內文、按鈕、表單標籤
窄體西文	數字、日期、英文小標

第三款是關鍵

中文段落用黑體沒有爭議，但數字與日期一律換成窄體西文，這個決定帶來兩個效果：

• 表格的金額欄位對齊乾淨——等寬的數字讓每一列的位數整齊排列
• 數字不會在中文行裡忽胖忽瘦——中文字型內建的數字寬度常與中文字等寬，夾在句子裡會顯得鬆散

另外，英文小標採用寬字距的窄體，成為版面上的節奏記號——讀者掃過版面時，這些小標會形成視覺的停頓點。

四個一眼認得出的視覺記號

設計系統要能被辨識，需要幾個重複出現的手法。本案有四個：

一、銅色標題引線

每個區段標題正上方一道短短的銅色細線，取代傳統的置中標題加底線。

標題左對齊、引線在上，版面自然帶出由左至右的閱讀動線。這也是全站辨識度最高的一個記號。

二、鋼色斜向漸層帶

深色的斜向漸層，用於表格表頭、步驟條、訂單摘要條，底部收一道銅色細線。

31 份設計稿中有 14 份使用——它是所有深色區塊的統一語言。

三、極長極淡的陰影

大位移、大範圍的柔和陰影，讓卡片看起來像「浮」在紙上，而不是「貼」上去。

這避開了一般網站常見的廉價重投影——短距離的深色陰影會讓元件顯得笨重。

四、膠囊標籤

全圓角標籤用於狀態、分類、必填標記，31 份中有 27 份使用。

訂單狀態、分類標記、表單的必填提示全部共用同一種形狀——使用者一看就知道「這是一個標記」。

排版：連續變化，不是分段跳格

這是本案在技術上最值得說明的設計決策。

多數網站的做法

設定三到四個固定寬度，在這些寬度之間「跳格」縮放。問題是：兩個斷點之間的寬度，版面可能突然變得擁擠或空曠。

本案的做法

字級與間距隨視窗寬度連續變化，31 份設計稿中有 29 份採用。

從手機到寬螢幕的整個過程中，版面是平順地伸縮，不會在某個寬度突然改變比例。

另一個細節：標題的孤字

28 份設計稿處理了標題結尾的孤字問題——避免標題最後只剩一個字掉到下一行。

這個細節單獨看很小，但在中文標題上特別明顯，處理過與沒處理過的版面精緻度差異可見。

螢幕尺寸的測試方法見不同螢幕尺寸與比例的呈現，斷點的檢視原則見斷點與設計稿的檢視。

表格在窄螢幕轉成卡片，但結構沒變

全站六張資料表——訂單明細、費用明細、訂單清單、留言紀錄等——在窄螢幕上會轉成堆疊卡片，欄位名稱補回每一列前方。

關鍵在於：底層的結構完全沒有改變。

為什麼這件事重要

常見的做法是為手機另外做一套簡化版面。代價是：

• 要維護兩套版面
• 功能可能在其中一套缺漏
• 日後修改要改兩次，容易不同步

本案的做法讓桌機版的功能與程式邏輯在手機上照樣運作，不需要第二套版面。

互動狀態做得比一般網站細

以購物車的物流選項為例，同一組選項設計了六種狀態：預設、滑過、選中、鍵盤聚焦、停用、驗證未通過。

「停用」的處理值得單獨說

多數網站的做法是把選項變半透明就結束了。使用者只知道「不能選」，但不知道為什麼。

本案改成虛線邊框並附上「目前不可選」的說明——例如超過材積限制時，使用者會知道是因為包裹尺寸的關係。

讓使用者知道原因，而不只是知道結果。

金額變動的提示

金額欄位在數值改變時會有一次短暫的高亮，提醒使用者剛才的操作改變了總計。

這在有多種物流與付款組合的購物流程中特別有用——使用者常常沒注意到換了選項之後費用變了。

尊重使用者的系統設定

這一節是設計系統中容易被忽略、但實際影響一部分使用者的部分。

處理項目	份數	意義
減少動態效果的偏好	18／31	使用者若在系統中關閉動畫，網站跟著停用動態效果
元件的文字說明	25／31	螢幕閱讀器可辨識的說明
鍵盤焦點的獨立處理	11／31	鍵盤操作時顯示焦點框，滑鼠點擊時不出現

第一項的實際意義

部分使用者會因為前庭功能障礙或偏頭痛，在系統設定中關閉動態效果。網站若忽略這個設定，動畫可能造成不適。

處理方式其實很簡單，成本也低——但多數網站沒有做。

第三項的實際意義

鍵盤使用者需要看到焦點在哪裡，但滑鼠使用者不需要——過去常見的做法是把焦點框整個關掉，這對鍵盤操作者是災難。

正確的做法是區分兩種操作方式，各自給予適當的呈現。

無障礙的完整檢查見無障礙網站的實作檢查清單。

設計系統與模組化是一體兩面

這一點值得說明：設計一致，區段才能共用。

本案的 13 個內容頁是由 17 種區段版型組合而成的。而這個做法能成立的前提，正是這 31 份設計稿共用同一套語彙——積木要能互相搭配，前提是它們用同一套規格。

如果每頁的字級、間距、色彩都不同，那就沒有「可重複使用的區段」這回事。

模組化的實作見模組化網站設計案例：17 種區段版型如何組出整站內容頁。

怎麼驗收一致性

設計一致性是可以檢查的，不必只憑感覺。發包或驗收時可以這樣做：

一、把幾頁並排比對

挑三到四個不同類型的頁面（首頁、內容頁、表單頁、列表頁），並排看：

• 標題的樣式一致嗎
• 按鈕的樣式與顏色一致嗎
• 間距的節奏一致嗎
• 卡片、標籤的形狀一致嗎

二、拖曳視窗寬度

把瀏覽器從最寬慢慢拖到最窄，觀察變化的過程——有沒有某個寬度突然破版或變得擁擠。

這是最快發現問題的方法。

三、找出主要動作色

每個畫面上，能不能一眼看出「現在該按哪裡」？ 如果有多顆按鈕在搶焦點，那是設計問題。

四、用鍵盤走一次

用 Tab 鍵在頁面上移動，看得到焦點在哪裡嗎？ 順序合理嗎？

五、實機測試

用實際的手機操作，不要只用電腦縮小視窗模擬。

發包時可以問的三個問題

1. 會提供設計規範嗎？——色票、字級、間距的定義
2. 日後新增頁面，樣式從哪裡來？——是共用的還是各自寫死
3. 手機版是同一套結構還是另一套？

第二題最能看出對方的做法。 如果答案是「到時候再設計」，那日後的一致性就很難保證。

設計方式的取捨見版型、模組化與客製設計的差別。

本案數字彙整

項目	數量
頁面設計稿	31 份
字型堆疊一致	31／31
核心色票一致	31／31
窄螢幕獨立處理	31／31
流體尺寸	29／31
標題孤字處理	28／31
膠囊標籤	27／31
元件文字說明	25／31
減少動態效果的偏好處理	18／31
深色漸層帶	14／31
外觀版型檔 ／ 品牌樣式	66 支 ／ 3,244 行

延伸閱讀

• 順霏供應鏈管理顧問有限公司官方網站——作品大綱與技術規格
• 模組化網站設計案例：17 種區段版型如何組出整站內容頁