品牌一致性設計系統
High Contrast
Dark Mode
Light Mode
Sepia
Forest
6 min read1,173 words

品牌一致性設計系統

品牌一致性是讓買家記住你的關鍵。當一個人在 Instagram 看到你的圖片,然後進入你的網站,再看到你寄來的包裝——如果每一個接觸點都「說著同樣的話」,品牌就深深烙印在買家心中。

什麼是品牌設計系統

graph TD BRAND[品牌設計系統] BRAND --> COLOR[色彩系統] BRAND --> TYPO[字體系統] BRAND --> LOGO[Logo 使用規範] BRAND --> PHOTO[攝影風格] BRAND --> COPY[文案語氣] BRAND --> ICON[圖標風格] COLOR --> C1[主色:品牌核心色] COLOR --> C2[輔色:搭配和點綴] COLOR --> C3[中性色:背景和文字]

色彩系統

建立三層色彩

一:主色(Primary) 品牌最代表性的顏色,用於:CTA 按鈕、Logo、主要強調

示例:
奢侈品牌 → #1A1A1A(深黑)
環保品牌 → #2D6A4F(深綠)
年輕品牌 → #FF6B35(活力橙)

二:輔色(Secondary) 和主色搭配,用於:次要按鈕、標籤、裝飾元素

三:中性色(Neutral) 灰色系,用於:背景、邊框、正文文字

在 Shopify 設置品牌色彩

路徑: 主題 → 自訂 → 主題設置 → 色彩

在這裡設置: - 背景色 - 文字色 - 按鈕色(即 Primary 色) - 連結色

重要: 在這裡設置一次,整個店鋪的對應元素都會更新,不需要逐個修改。


字體系統

電商常用字體配對

風格 標題字體 內文字體
極簡現代 Futura / Montserrat Inter / Roboto
高端奢侈 Playfair Display Cormorant Garamond
自然有機 Josefin Sans Lato
年輕活潑 Poppins Open Sans

字體使用規範

用途 字號(桌面) 字重
主標題(H1) 40-56px Bold(700)
次標題(H2) 28-36px SemiBold(600)
小標題(H3) 20-24px Medium(500)
正文 16-18px Regular(400)
說明文字 14px Regular(400)

在 Shopify 設置字體

路徑: 主題 → 自訂 → 主題設置 → 字體

大多數現代主題支持: - Shopify 字體庫(免費) - Google Fonts(免費,但加載速度稍慢) - 系統字體(最快,但選擇有限)


Logo 文件清單

你應該準備以下 Logo 版本:

版本 用途 格式
深色背景版 深色主題、深色背景 SVG / PNG(透明)
淺色背景版 淺色主題、白色背景 SVG / PNG(透明)
正方形版 社交媒體頭像、Favicon PNG 1:1
橫向版 網站 Header SVG
純圖標版(無文字) App 圖標、很小的空間 SVG

Favicon 設置

路徑: 主題 → 自訂 → 主題設置 → Favicon

上傳一個 32×32px 或 16×16px 的 PNG 圖片(通常是你的 Logo 圖標部分)


攝影風格指南

商品攝影的一致性

設定固定的拍攝規範:

背景: - 白底(乾淨、搜尋結果友好) - 生活場景(有溫度、故事感) - 品牌色背景(強烈的品牌辨識度)

燈光: - 自然光(柔和、有機感) - Studio 燈(可控、一致)

角度: - 主圖:正面或 3/4 角(統一) - 輔圖:細節、使用場景、反面

工具(AI 生成場景照): - Pebblely($19/月):上傳商品圖,AI 自動生成各種場景背景 - Photoroom(免費起):去背 + AI 場景生成


文案語氣(Tone of Voice)

定義你的品牌語氣

你的品牌文案應該:

維度 例子 A 例子 B
正式 ↔ 輕鬆 我們提供優質服務 我們讓你的生活更美好
距離感 ↔ 親近 此商品特性如下 這個設計是因為你值得
保守 ↔ 大膽 優質材料製作 懂的人才買得到

練習: 用 3 個形容詞描述你的品牌聲音,例如:「溫暖、直接、有趣」。之後所有文案都以這 3 個詞為準。


品牌規範文件

建議建立一個品牌規範文件(Brand Guide),記錄上述所有設定:

工具: - Notion(免費,簡單) - Figma(免費,適合設計師) - Canva Brand Kit(付費計劃)

內容: 1. Logo 使用規範(何時用哪個版本) 2. 色彩代碼(HEX / RGB) 3. 字體名稱和授權 4. 攝影風格示例(好/壞示例對比) 5. 文案語氣示例

有了品牌規範文件,即使你雇用設計師或文案,也能確保輸出的內容符合品牌標準。


本章執行清單


下一章App 堆棧設計——為你的店鋪選擇正確的應用程序組合。