專案定位
以手機決策為核心的溫暖餐飲體驗
Buddy House 是結合品牌識別與實際訂位行為的餐飲網站概念。設計在溫馨視覺語氣與清楚菜單瀏覽、訂位路徑之間取得平衡。
角色與範圍
負責品牌 UI、行動端 UX 與元件規則
我負責定義品牌情緒、在 Figma 建立色彩與元件系統、重設訂位流程，並整理可轉換為 Vue 與 Tailwind 元件的介面規則。
問題背景
餐飲網站常在手機訂位流程流失使用者
許多餐飲網站重視氛圍，卻把訂位入口藏得太深、要求過多頁面跳轉，或讓手機菜單閱讀負擔過高。
設計目標
保留品牌溫度，同時縮短訂位時間
設計目標是在保留親切餐飲氛圍的同時，透過更清楚的層級、觸控目標與較少決策點降低手機流程阻力。
關鍵設計決策
圍繞訂位任務設計，而不只美化首頁
- 將訂位操作放在拇指友善區域，降低手機操作的伸手成本。
- 使用 Material 3 色彩角色，在維持溫暖色調的同時確保 WCAG AA 對比。
- 將訂位路徑縮減為少量清楚步驟，並提供可見進度。
主要畫面展示
讓手機流程與品牌系統成為同一個體驗
畫面組合說明流程、線框與系統決策如何協作，而不是把品牌與 UX 當成分離交付物。
品牌識別案例
將溫暖感轉換成可重複的介面規則
品牌系統運用在地色彩靈感、克制圓角元件與柔和對比，讓餐廳感受親近，同時不犧牲資訊清楚度。
- 定義色彩角色而不是一次性配色，讓調色盤能延伸到不同區塊。
- 以清楚字級與間距平衡餐飲品牌的溫暖氛圍。
行動端 UX 案例
針對單手操作優化的訂位流程
手機流程優先考量拇指可及範圍、可見狀態與較少跳轉，讓使用者不必跨多頁掃描即可完成訂位。
可用性測試聚焦於使用者是否能更快完成手機訂位任務，同時仍理解餐廳品牌語氣。
- 150 秒 -> 90 秒
- 行動端訂位任務時間
- 100%
- 受測者完成率
- WCAG AA
- 色彩對比目標
反思與下一步
下一版應把訂位流程接到營運管理
目前設計已處理顧客端流程。更完整的下一版可補上店家端訂位管理、可預約規則與訂位後訊息。
- 補上空狀態、錯誤狀態與客滿狀態，讓訂位情境更完整。
- 驗證手機小螢幕中，菜單瀏覽與訂位操作是否互相搶焦點。