豆單
明亮杯
清爽 · 果香方向
醇厚杯
圓潤 · 焙烤方向
形象網站設計
COFFEE STOPOVER
以陶杯、咖啡豆與天然石材探索精品咖啡網站的內容視覺方向。
自主概念，非客戶委託
案例敘事
背景
COFFEE STOPOVER 是以城市停靠與日常沖煮為題的自主精品咖啡網站概念，從一杯咖啡的安靜畫面延伸到豆單選擇、沖煮內容、門市資訊與購買路徑。
案例敘事
挑戰
精品咖啡網站容易只剩氛圍攝影，顧客卻仍找不到現在有什麼豆、如何選擇、店內提供什麼，以及下一步要看菜單、買豆或到店。內容與行動必須在保留節奏的同時更具體。
案例敘事
洞察
訪客不是沿著單一路徑理解咖啡：有人先看風味，有人先讀沖煮方法，也有人只想確認門市。讓三種意圖在首頁即可辨認，再以一致模組深入，比把所有內容塞進品牌故事更有效。
案例敘事
策略
網站以「喝什麼、怎麼沖、在哪停留」三個問題組織首頁與導覽；豆單使用可比較卡片，沖煮故事採編輯式段落，門市頁整合空間、菜單入口與到店行動，並在各裝置保留同一閱讀優先序。
案例敘事
設計
成果包含首頁、豆單、沖煮故事與門市 sitemap，桌面、平板與手機核心畫面，咖啡內容與商品模組，以及購買咖啡豆、查看菜單與到店三條轉換路徑。所有豆款與門市內容皆為設計示意，不代表真實商品、地址或營運資訊。
策略轉化為實質交付
下列系統逐一對應前述策略，並以可閱讀的規格、接觸點或操作結果呈現。
資訊架構
從喝什麼、怎麼沖到在哪停留
首頁先分流豆單、沖煮故事與門市需求，再由每條路徑連接相應內容與主要行動。
- 首頁、豆單、沖煮故事與門市 sitemap
- 跨頁內容層級與導覽關係
首頁讓三種意圖各自找到入口
品牌入口
今天想怎麼停留？
- 首頁01
本週選豆 · 沖煮 · 門市
- 豆單02
風味方向 · 沖煮建議 · 選擇
- 沖煮故事03
器具 · 步驟 · 觀察
- 門市04
空間 · 菜單 · 到店
響應式介面
讓同一杯咖啡在三種螢幕都容易讀
桌面保留編輯式留白，平板收斂欄數，手機固定內容與行動順序，不以縮小桌面版取代響應式判斷。
- 桌面、平板與手機核心畫面
- 跨裝置豆單與主要行動順序
不是縮小畫面，而是保留閱讀順序
Desktop · 1440
本週豆單
Tablet · 768
本週豆單
Mobile · 390
本週豆單
轉換流程
三種意圖，三條清楚路徑
購買咖啡豆、查看菜單與到店各自擁有明確入口、必要資訊與完成狀態，不用同一個按鈕承擔所有目的。
- 購買咖啡豆、查看菜單與到店行動
- 入口、資訊與完成狀態
每個按鈕都承接一個完整意圖
- 01
購買咖啡豆
選豆 → 單品 → 購物車
完成選擇 → - 02
查看菜單
飲品 → 價格 → 今日供應
準備點單 → - 03
到店
空間 → 服務 → 交通
規劃到店 →
內容系統
讓豆單、沖煮與空間各有內容節奏
可比較豆單卡回答選擇問題，沖煮故事解釋方法，門市模組補充座位與服務情境，三者共用同一版面語言。
- 豆單與咖啡商品模組
- 沖煮故事與門市內容模組
選豆、學習與到店使用不同節奏
沖煮故事
器具、比例、步驟與觀察
門市空間
吧台、座位與到店準備
豆單與到店原型
比較豆單，再安排到店時間
咖啡豆單
所有門市名稱、營業時間、席次與可用時段皆為示意。
可逐項檢查的交付標準
驗收證據
概念操作示範，不會送出訂單、詢問或預約。
內容完整性
案例以背景、挑戰、洞察、策略與設計說明每項交付的決策依據。
獨立美術
視覺系統以獨立的色彩、材質、字體節奏與資訊層級呈現，不與其他案例混用。
跨裝置
桌機、平板與手機閱讀均不應產生水平溢位或遺失關鍵交付資訊。
鍵盤操作
所有連結與適用控制項均可用鍵盤到達，並具有可見焦點。
真實揭露
此案為自主概念；案例不宣稱客戶委託、真實交易或未經證實的商業成果。
內容完整性
豆單、風味篩選、沖煮內容、門市資訊與到店確認均可閱讀或操作。
實際操作
此案的概念原型可直接操作，並明確呈現閒置、載入、空白、錯誤與完成狀態。
分享內容