元伸科技
「我的網站要有品牌感」——這是客戶在客製化網站設計訪談時最常說的一句話。但講白一點，「品牌感」到底怎麼做？把 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 個工程加總的結果，不是某個漂亮頁面的功勞。
我會建議簽約前直接問開發商這 4 題：
- 你們會建立完整的色彩系統（含色階）嗎？還是只用幾個品牌色？
- 字型階層用 clamp() 還是 media query？
- 元件設計系統會交付給我們嗎？（Figma + 程式碼 Token）
- 動效有標準化的 duration / easing 嗎？
如果開發商答不出細節，多半代表他們的「客製化」只到視覺稿，沒做到系統層。元伸科技 24 年累積 3,000+ 企業實績，這 5 個工程是企業形象網站方案的標配，每個專案上線時會把完整 Design Token 與元件庫交付給客戶，未來品牌調整時改 1 個變數全站同步。延伸閱讀品牌識別與網頁設計。
📞 03-366-1000 ｜ 🌐 www.ozchamp.com ｜ 免費諮詢，24hr 內回覆
