元伸科技
「我的網站要有品牌感」——這是客戶在 客製化網站設計 訪談時最常說的需求，但「品牌感」到底怎麼做？把 logo 放大、用品牌色當 Hero 背景、首頁寫個 slogan 就完成了嗎？實際上這只是 5%。真正的品牌識別是訪客從進站第一秒到離站最後一秒，每個按鈕、每個過場、每張圖片都在說同一個品牌故事。本文拆解客製化網站設計用來建立視覺一致性的 5 個工程，這些工作多數在建站階段定案，未來 5 年都受用。
工程 1：品牌色彩系統（不只 1-2 個顏色）
業餘的品牌色定義「我的品牌色是橘色（#FF6B35）」就結束了，於是整個網站到處都是這個橘色，視覺像衝鋒陷陣。專業的品牌色彩系統分 4 個分類 × 5-9 階色階，總計 30-50 種色票，每一個都有用途：
| 分類 | 用途 | 階數 | 範例 |
|---|---|---|---|
| Primary（主色） | 品牌核心色、CTA、強調 | 9 階（50/100/200⋯900） | 橘色家族 |
| Secondary（輔助色） | 次要強調、輔助 CTA | 5-7 階 | 藍色家族 |
| Neutral（中性色） | 文字、背景、邊框 | 9 階灰階 | 白到黑漸層 |
| Semantic（語意色） | 成功 / 警告 / 錯誤 / 資訊 | 各 3 階 | 綠 / 黃 / 紅 / 藍 |
為什麼要分這麼細：頁面元素需要不同強度的同色（hover 變深、disabled 變淡、背景超淡），有了色階系統就能「橘色 600 是按鈕、橘色 100 是區塊背景、橘色 50 是 hover」這樣有規則地用色。建站時定下完整色彩系統，未來 5 年新增頁面、新功能都不會偏離。延伸閱讀 網頁配色心理學。
工程 2：字型階層（8 級字級系統）
字型是品牌識別第二重要的視覺元素，但多數網站只決定「中文用什麼字、英文用什麼字」就完成了，字級層級完全混亂。專業的字型階層應該包含：
- 字型家族：中文（思源黑體 / Noto Sans TC）、英文（Inter / Manrope）、品牌字（標題用的特殊字）
- 字級系統：8 級（display / h1 / h2 / h3 / h4 / body-lg / body / caption），每級用 clamp() 響應式縮放
- 字重系統：light / regular / medium / semibold / bold / extrabold（6 級）
- 行高與字距：標題、內文、caption 各有對應的 line-height 與 letter-spacing
- 中英混排規則：中英之間統一加 0.25em 視覺空隙
定下這套系統後，新頁面的所有文字都能對應到「class=heading-h2」「class=body-lg」這類語意化 class，而非各自決定「這個字 24px、那個字 26px」。詳見 字型選擇與 AI 解析。
工程 3：元件設計系統（30+ 元件統一規範）
訪客在你網站看到的每個按鈕、表單欄位、卡片、modal、提示訊息——這些 UI 元件加總約 30-80 個，每個如果各自設計，整體會像「縫合怪」。客製化網站設計建站時應建立的元件規範：
| 類別 | 必要元件 | 變體數 |
|---|---|---|
| 按鈕（Button） | primary / secondary / ghost / danger | 4 風格 × 3 尺寸 = 12 |
| 表單（Form） | input / textarea / select / checkbox / radio / switch | 6 種 × 3 狀態 |
| 卡片（Card） | product / article / testimonial / feature | 4 種 |
| 提示（Alert） | success / warning / error / info | 4 種 |
| 導航（Nav） | topbar / sidebar / breadcrumb / pagination | 4 種 |
| Modal / Dialog | confirm / form / preview / fullscreen | 4 種 |
每個元件有清楚的：尺寸、間距、圓角、陰影、互動狀態（default / hover / active / disabled）。客戶後台新增頁面時，從元件庫拖拉組合而非自由設計，視覺一致性自然維持。這是 Design Token 系統 的核心價值。
工程 4：影像風格的三維度統一
影像佔網站視覺面積最大，但常常一致性最差——首頁 Hero 用攝影、產品頁用插畫、最新消息用免費圖庫，三種風格打架，品牌感瞬間崩潰。專業的客製化網站設計把影像分 3 維度規範：
攝影風格：
- 色調：暖 / 冷 / 中性（要呼應品牌主色）
- 構圖：正面 / 45 度 / 俯視（要統一）
- 光線：自然光 / 棚拍 / 戲劇光（要統一）
- 後製濾鏡：高飽和 / 低飽和 / 黑白（要統一）
插畫風格：
- 線條：細線 / 粗線 / 無線（要統一）
- 配色：用 Primary 色階（避免插畫脫離主色系）
- 風格：扁平 / 立體 / 等距（要統一）
Icon 風格：
- 線條粗細：1.5px / 2px（全站統一）
- 圓角：sharp / rounded / pill（全站統一）
- Filled vs Outline（全站統一，不混用）
建站時就建立完整的「影像規範」並提供示範資產，未來新增內容時客戶或新進設計師都能依規範產出。
工程 5：動效節奏的標準化
動效是最容易被忽略的一致性層級。一個按鈕 hover 過場 200ms 用 ease-out、隔壁卡片用 500ms 用 ease-in，使用者潛意識會感覺「卡卡的」但說不上來——這就是動效不一致的破口。標準化動效系統包含：
- Duration（時長）：fast 150ms / normal 250ms / slow 400ms / extra-slow 700ms
- Easing（緩和曲線）：ease-out（出場）/ ease-in（入場）/ ease-in-out（移動）/ spring（彈性）
- Distance（距離）：subtle 4px / normal 8px / dramatic 16px / hero 32px
- Trigger（觸發）：hover / click / scroll / visible / route-change
建站時把這些定成 CSS variable 或 Tailwind config，未來任何新增的動效都從這套系統選擇，而非「設計師當下隨手填數字」。延伸閱讀 網頁動態效果設計指南。
視覺一致性的商業價值（不只「好看」）
5 個一致性工程加總起來，建站工時約多 10-15%，但回報是長期的：
| 維度 | 一致性高的網站 | 一致性低的網站 |
|---|---|---|
| 訪客信任度 | +23-35% | 基準 |
| 平均停留時間 | +18-27% | 基準 |
| 轉換率 | +10-15% | 基準 |
| 品牌記憶度（一週後） | +40% | 基準 |
| 新增頁面工時（上線後） | -50%（拖拉元件即可） | 基準（每頁從零） |
| 改版成本（5 年後） | -60%（改 Token 即可） | 基準 |
最隱形但最重要的是「新增頁面工時」——上線後 5 年內，客戶會新增無數活動頁、商品頁、Landing Page。如果建站時做了元件系統，未來新頁面拖拉組合即可完成；沒做的話，每個新頁面都從零設計，5 年累積的設計費常常超過建站費。
結語：客製化網站設計的「隱形基建」
這 5 個工程都是「隱形」的——客戶看不到 Design Token 變數，看到的是「網站好順、好專業」。但這個「好順、好專業」的感受，是 5 個工程加總的結果，不是某個漂亮頁面的功勞。
簽約前可以問開發商：
- 你們會建立完整的色彩系統（含色階）嗎？還是只用幾個品牌色？
- 字型階層用 clamp() 還是 media query？
- 元件設計系統會交付給我們嗎？（Figma + 程式碼 Token）
- 動效有標準化的 duration / easing 嗎？
如果開發商答不出細節，多半代表他們的「客製化」只到視覺稿，沒做到系統層。元伸科技 24 年的 客製化網站設計 服務中，這 5 個工程都是 企業形象網站方案 的標配，每個專案上線時會把完整 Design Token 與元件庫交付給客戶，未來品牌調整時改 1 個變數全站同步。延伸閱讀 品牌識別與網頁設計。
