清潔
雲霧潔顏
凝露 · 燕麥資訊示意 · 步驟 01
電商品牌
HUE 保養品
以純白容器、柔和光線與留白探索保養品電商品牌的視覺秩序。
自主概念，非客戶委託
案例敘事
背景
HUE 是一個以日常保養選擇為題的自主電商品牌概念。它不設定真實配方或功效，而是探索當系列擴充成不同容器與使用步驟時，品牌如何幫助顧客看懂差異並完成購買。
案例敘事
挑戰
極簡白色包裝在形象照中很一致，進入商品列表後卻容易彼此相像。核心挑戰是同時建立系列感與差異感，並讓顧客從集合頁走到商品頁時不必重新理解資訊。
案例敘事
洞察
電商顧客先用「這是哪一類、適合哪一步」縮小選擇，再尋找使用方式與完整資訊。若系列命名、容器形式、商品卡與詳情模組使用相同順序，購物就不需要依賴長篇說明。
案例敘事
策略
我們以使用步驟組織 SKU，讓容器輪廓負責第一層辨識、鼠尾草綠色塊負責家族一致性，再以固定的商品卡、比較提示與詳情順序連接瀏覽和決策。
案例敘事
設計
成果涵蓋產品系列、集合到詳情的購物路徑、商品資訊模組與內容拍攝系統。每個介面負責一個問題：列表協助比較，詳情解釋角色與使用，內容素材則在不同版位維持同一套視覺語言。
策略轉化為實質交付
下列系統逐一對應前述策略，並以可閱讀的規格、接觸點或操作結果呈現。
商品組合系統
看得出角色的產品家族
潔顏、精華、乳霜、軟管與補充包以不同輪廓表達使用角色，再以固定色塊位置維持同系列辨識，讓商品縮小成列表卡片時仍可區分。
- 依保養步驟組織的 SKU 家族
- 容器形式與產品角色區分
購物流程
從系列瀏覽到單品決策
集合頁先依步驟分組並保留比較線索；進入商品頁後沿用同一套名稱、色塊與角色說明，避免顧客在頁面切換時失去上下文。
- 集合頁到商品頁的購物路徑
- 比較提示與購買行動層級
01
依步驟探索
02
比較系列
03
確認單品
商品詳情
先說用途，再展開完整資訊
商品頁首屏先回答產品角色、適用步驟與容量選擇，再依序展開使用方法、資訊欄位與搭配步驟；這裡展示資訊結構，不宣稱任何真實成分或功效。
- 用途與使用方式資訊層級
- 資訊欄位與保養步驟模組
02｜日常精華
日常精華
以使用步驟與容量快速辨識單品。
- 保養步驟
- 精華
- 使用時段
- 早晚
- 容量
- 30 ml
內容系統
一次拍攝，延伸多種版位
以固定紙景、石材平台、柔光與鼠尾草綠背景建立拍攝規則，再預先規劃商品頁橫幅、列表縮圖與社群直式裁切，減少每個渠道重新造型。
- 電商商品影像組
- 可重複使用的社群裁切
可操作電商原型
篩選保養步驟、查看規格，完成概念結帳
保養
日常精華
流動質地 · 菸鹼醯胺資訊示意 · 步驟 02
保濕
屏障乳霜
乳霜 · 神經醯胺資訊示意 · 步驟 03
概念購物車
0 件商品
可逐項檢查的交付標準
驗收證據
概念操作示範，不會送出訂單、詢問或預約。
內容完整性
案例以背景、挑戰、洞察、策略與設計說明每項交付的決策依據。
獨立美術
視覺系統以獨立的色彩、材質、字體節奏與資訊層級呈現，不與其他案例混用。
跨裝置
桌機、平板與手機閱讀均不應產生水平溢位或遺失關鍵交付資訊。
鍵盤操作
所有連結與適用控制項均可用鍵盤到達，並具有可見焦點。
真實揭露
此案為自主概念；案例不宣稱客戶委託、真實交易或未經證實的商業成果。
內容完整性
商品架構、篩選、商品規格、購物車與完成狀態可逐項檢查。
實際操作
此案的概念原型可直接操作，並明確呈現閒置、載入、空白、錯誤與完成狀態。
延伸探索
繼續探索相關內容
分享內容