網站配色與品牌識別怎麼定？

配色不是挑喜歡的顏色

網站的視覺風格若與企業形象不一致，會讓訪客感到違和——精密機械公司用粉嫩色系、兒童教育機構用深黑色調，都會產生認知落差。

配色與字體的選擇，應該從品牌想傳達什麼、客戶是誰反推，而不是從個人喜好出發。

先確認品牌既有的規範

如果公司已經有 Logo 與標準色，網站應該延續，不要另起爐灶。開始設計前請準備：

• Logo 的原始向量檔——放大不會失真的檔案格式。只有一張從舊網站另存的小圖是不夠的
• 標準色的色碼——如果只有印刷用的色票，需要轉換成螢幕用的色碼
• 既有的應用範例——名片、型錄、招牌，讓設計師理解品牌的既有調性

如果這些都沒有，那網站設計其實是順便建立品牌視覺系統的機會，值得在這個階段一併規劃。

一套完整的配色系統包含什麼

不是挑一個顏色就結束。實務上需要規劃：

其中中性色最常被忽略但用量最大——網站上大部分的面積是文字與背景，這幾階灰的選擇直接決定整體質感。

色彩對比要足夠

淺灰字配白底看起來很有設計感，但在手機戶外使用時可能完全看不清楚。年長的訪客更明顯。

建議原則：

• 內文與背景要有足夠對比，這不只是照顧特定族群，對一般使用者的閱讀體驗也有幫助
• 不要只用顏色傳達資訊——例如「紅色是缺貨」，色覺障礙的使用者會看不出來，應同時加上文字或圖示
• 重要按鈕要明顯——「聯絡我們」「立即詢價」這類行動按鈕，對比不足會直接影響轉換

公部門與特定產業的網站另有無障礙法規要求，需在規劃階段確認。

字體的選擇

中文字體的現實限制

中文字數多，字型檔案比英文大得多。整套中文字型可能達到數 MB，直接載入會明顯拖慢網站。

處理方式：

• 使用系統內建字體——載入最快，但各裝置呈現略有差異
• 使用網頁字型服務——外觀統一，但需注意載入策略
• 標題用特殊字體、內文用系統字體——兼顧特色與速度的常見做法

字體數量要克制

建議整站不超過兩種字體：一種給標題、一種給內文。超過三種通常會顯得雜亂，而且每多一種就多一份載入負擔。

字級與行距

中文的閱讀舒適度很依賴行距。行距太緊會讓長段文字難以閱讀，尤其在手機上。這是設計稿階段就該確認的細節——看設計稿時請特別留意內文區塊，不要只看首頁主視覺。

依行業調整視覺調性

不同產業的訪客期待完全不同。設計的第一步永遠是搞清楚「誰會看這個網站，他在意什麼」：

• 醫療、診所——要讓人安心，通常偏向明亮、乾淨、留白多
• 法律、專業服務——要讓人信服，偏向穩重、對稱、深色系
• 建材、工業——要讓人快速找到規格，資訊密度可以高，重點是清楚
• 精品、觀光——要讓人嚮往，視覺占比大，文字精簡
• B2B 形象官網——決策者可能是主管或老闆，要能在會議上被打開來看

深色模式要不要做

深色模式不是把顏色反過來就好——需要重新調整對比、陰影、圖片處理，等於多一套配色系統。

建議做的情況：內容以視覺作品為主、目標客群偏年輕、或品牌調性本身偏深色。
可以不做的情況：一般企業形象網站，多做一套的成本與效益不一定成正比。

怎麼跟設計師溝通風格

形容詞很難執行。「要簡約大方」「要有質感」對設計師來說資訊量幾乎為零。

比較有效的做法：

1. 提供兩三個您喜歡的網站，並說明喜歡它哪裡——是配色、留白、字體，還是動態感
2. 提供不喜歡的例子，排除法往往比正面描述更精準
3. 說明使用情境——「客戶通常是在會議中用投影機打開」跟「客戶多半在通勤時用手機看」，設計方向完全不同

詳細的溝通方式見設計階段怎麼進行。