同一個版型，怎麼長出自己的品牌感？

先認識這次練習

品牌感，不只是一個顏色

兩家店使用一樣的架子，還是可以有不同感覺：一間用淺色木頭和柔和照片，另一間用深色金屬與鮮明圖形。網站也一樣，重點是選出的規則能否一起支持內容。

這篇使用虛構的「小島設計」與「山間咖啡」教學作品，圖片是原創示意，不是真實客戶案例。三個版本保持同一段文字、圖片與排列，只改變視覺設定。

01 · 動手看看

先選一套方案，觀察背景、文字與按鈕顏色。按「固定目前作對照」再切換另一套；接著一次開關一個細節，看它對卡片造成的改變。

淺色背景、深色文字與青綠重點。

虛構品牌及圖片僅供教學。方案同時改變多個視覺規則，不代表單一變數的測試；可用下方三個開關分別觀察細節。設定不會永久儲存，重新整理會還原。

02 · 色彩分工

背景色像展牆，給內容一個空間；文字色負責讓人看清；重點色像路標，用在主要按鈕或需要注意的地方。三者不必同樣鮮豔。

例如清爽方案讓青綠色只出現在按鈕，暖色方案用焦糖色作為主要行動。色彩可以支持氣氛，但也要在實際畫面上檢查文字是否足夠清楚，不能只看漂亮的色票。

顏色的意義會隨對象與情境改變；沒有一個顏色能保證傳達「專業」或「溫暖」。先選適合內容的方向，再請讀者實際試看。

03 · 圖片與裁切

同一張圖放進比較窄的框，左右兩邊可能被切掉。這就像把照片放進相框：框的比例固定，移動照片可以決定留下哪一部分。

面板裡選左側可看見太陽與環境，選右側可看見包裝；它們是同一張圖，不是換了一張照片。手機畫面、卡片縮圖和桌機首圖比例不同時，都應重新檢查重要內容是否還在。

先決定圖片要幫讀者理解什麼：作品、產品、使用情境，還是單純裝飾。真實網站請使用自己有權使用的素材，並為有意義的圖片提供文字說明。

04 · 表面細節

邊框像幫卡片畫一條界線，讓它從背景中分出來；陰影可以讓卡片看起來稍微浮起；半透明則讓下方顏色透出。它們都不是越多越好。

極簡、描邊、玻璃感是方便討論的名稱，並沒有唯一配方。試著改成具體描述：「白色卡片、細邊框、無陰影」，比只說「做得高級」更容易讓協作者理解。

同一個網站裡，如果每張卡片都用不同的圓角、陰影與邊框，看起來可能像來自不同地方。先選一兩條規則，套用到相似的部件。

05 · 做一張自己的風格卡

我的視覺需求（可以直接修改）

文字只在目前頁面，不會送給 AI 或永久儲存；重整會恢復範例。

想試色，可以使用 Realtime Colors；想看不同網站如何搭配，可參考 Land-book。回到自己的網站後，仍要用真實內容及手機畫面檢查。