SPICE & SHADOW
SPICE & SHADOW 以「Color here is a spice. Breathe it.」為核心，將品牌敘事、決策資訊與主要行動組織成一條清晰路徑。
01 · 專案方向
讓視覺吸引力與商業目標在同一條使用者旅程中成立。
這個設計把 SPICE & SHADOW 視為內容與轉換系統，而不是一組漂亮畫面。結構先回答使用者為何在意，再提供比較所需的證據，最後在合適時機提出行動。
真實版本需要用業務內容、資料、法規要求與使用者測試取代所有假設，並為每個模組指定負責人與更新節奏。
“設計只有在幫助使用者看見證據、理解差異並放心行動時，才真正具有商業價值。”
- 類型
- 目的地與旅宿平台 網站概念
- 受眾
- 正在比較並準備行動的目標使用者
- 核心證據
- 清晰內容、真實資料與可驗證流程
- 主要行動
- 充分理解後完成主要轉換
02 · 體驗觸點 1
體驗觸點 1：讓視覺敘事成為可驗證的資訊。
本章透過 SPICE & SHADOW 的體驗觸點 1畫面，回答使用者在比較過程中遇到的一個具體問題。圖像建立興趣，文字則提供判斷所需的背景與證據。
在真實專案中，這部分內容應成為可維護的模組，並標明負責人、更新日期與衡量方式，使「Color here is a spice. Breathe it.」不只停留在一句宣傳語。
原則：每個畫面都應增加一個相信或行動的理由。
03 · 體驗觸點 2
體驗觸點 2：讓視覺敘事成為可驗證的資訊。
本章透過 SPICE & SHADOW 的體驗觸點 2畫面，回答使用者在比較過程中遇到的一個具體問題。圖像建立興趣，文字則提供判斷所需的背景與證據。
在真實專案中，這部分內容應成為可維護的模組，並標明負責人、更新日期與衡量方式，使「Color here is a spice. Breathe it.」不只停留在一句宣傳語。
原則：每個畫面都應增加一個相信或行動的理由。
04 · 體驗觸點 3
體驗觸點 3：讓視覺敘事成為可驗證的資訊。
本章透過 SPICE & SHADOW 的體驗觸點 3畫面，回答使用者在比較過程中遇到的一個具體問題。圖像建立興趣，文字則提供判斷所需的背景與證據。
在真實專案中，這部分內容應成為可維護的模組，並標明負責人、更新日期與衡量方式，使「Color here is a spice. Breathe it.」不只停留在一句宣傳語。
原則：每個畫面都應增加一個相信或行動的理由。
05 · 體驗觸點 4
體驗觸點 4：讓視覺敘事成為可驗證的資訊。
本章透過 SPICE & SHADOW 的體驗觸點 4畫面，回答使用者在比較過程中遇到的一個具體問題。圖像建立興趣，文字則提供判斷所需的背景與證據。
在真實專案中，這部分內容應成為可維護的模組，並標明負責人、更新日期與衡量方式，使「Color here is a spice. Breathe it.」不只停留在一句宣傳語。
原則：每個畫面都應增加一個相信或行動的理由。
06 · 行動邀請
行動邀請：讓視覺敘事成為可驗證的資訊。
本章透過 SPICE & SHADOW 的行動邀請畫面，回答使用者在比較過程中遇到的一個具體問題。圖像建立興趣，文字則提供判斷所需的背景與證據。
在真實專案中，這部分內容應成為可維護的模組，並標明負責人、更新日期與衡量方式，使「Color here is a spice. Breathe it.」不只停留在一句宣傳語。
原則：每個畫面都應增加一個相信或行動的理由。
設計語言
不看標誌，也能認出 SPICE & SHADOW。
頁面採用旅程地圖方向，並從概念配色與影像節奏建立規則。重點不是讓每一屏都不同，而是讓新內容仍然一致。
- 01
有任務的對比
SPICE & SHADOW 的強調色只用於關鍵資訊與主要行動。
- 02
符合產業的節奏
版面節奏來自 目的地與旅宿平台 的真實瀏覽方式，而不是通用作品集模板。
- 03
先證據，後邀請
行動邀請出現在證據之後，讓轉換成為敘事的自然結果。
色彩系統
#080000
#301008
#503020
#987860
#a83808
顏色來自概念的視覺方向；上線前需驗證正文、狀態與圖表的 WCAG 對比度。
落地方向
把概念轉化為可維護、可衡量的產品系統。
視覺稿只是起點。上線版本必須驗證內容來源、核心流程、效能、無障礙與衡量方式。
- 01
內容與資料盤點
確認 SPICE & SHADOW 每類內容與資料的來源、負責人及更新頻率。
- 02
核心流程原型
在真實裝置上測試主要行動，包括錯誤、缺少資料與中斷後返回的狀態。
- 03
效能與無障礙
依顯示尺寸提供影像，使用語意化 HTML，並支援鍵盤與減少動態效果。
- 04
有意義的衡量
先統一事件定義並排除內部流量，再結合業務結果解讀資料。
常見問題
開發 SPICE & SHADOW 前需要回答的問題。
- SPICE & SHADOW 是為誰設計的？
- 正在比較並準備行動的目標使用者。所有版面決策都服務於一個主要行動：充分理解後完成主要轉換。
- 為什麼詳情頁採用不同版面？
- 因為旅程地圖方向更符合該產業的資訊密度與視覺語言。
- 可以開發為真實網站嗎？
- 可以，但必須以真實內容、資料、法規和業務流程取代假設。
- 應如何衡量效果？
- 應以核心流程完成、合格詢問與業務結果為起點，並依真實目標調整。
繼續瀏覽
