設計重點
- 設計系統：依 Material 3 規範在 Figma 建立完整系統，確保跨平台實作的一致性
- 無障礙色彩：以捷運綠線為靈感，開發符合 WCAG 2.1 AA 標準的調色盤
- 流程設計：以拇指熱區重整訂位流程，把路徑收斂成更少、進度可見的步驟
專案定位
以手機決策為核心的溫暖餐飲體驗
Buddy House 把品牌識別與實際訂位行為接在一起。重點不只是溫馨的視覺，而是讓使用者能在手機上快速看菜單、找到訂位入口並完成預約。我負責定義品牌感、在 Figma 建立色彩與元件系統，並重整訂位流程，整理成可直接接到 Vue 與 Tailwind 的介面規則。
問題與目標
保留品牌溫度，同時縮短訂位時間
很多餐飲網站很有氣氛，但手機上訂位入口藏太深、頁面跳太多、菜單也不好讀，使用者常在決定之前就離開。目標是保留親切溫暖的用餐感受，同時降低操作阻力：畫面要好讀、按鈕要好點、步驟要盡量少。
關鍵設計決策
圍繞訂位任務設計，而不只美化首頁
- 先用線框圖收斂菜單、資訊與訂位的優先順序，再套入溫暖的品牌視覺。
- 把訂位按鈕放進拇指熱區，並將流程整理成較少、進度可見的步驟。
- 用 Material 3 色彩角色而非逐區配色，讓品牌維持溫暖，同時守住 WCAG AA 對比。
主要畫面展示
讓手機流程與品牌系統成為同一個體驗
這些畫面呈現我如何先整理訂位流程，再把品牌視覺套進可用的手機介面裡。
品牌識別案例
將溫暖感轉換成可重複的介面規則
品牌系統用在地色彩、柔和但受控的元件與清楚對比，讓網站看起來親近，資訊卻仍然好讀。
- 定義固定的色彩角色，而不是每個區塊重新配色。
- 用清楚的字級與間距，避免溫暖風格影響閱讀。
設計系統案例
可直接落地實作的設計 Token
把字級、色階與色彩角色整理成一套系統，讓同樣的規則能一路帶到實作階段，而不是每個畫面重新決定一次。
這是自主概念專案，以下是我自己設定並逐項檢查的設計目標——屬於設計假設，而不是使用者測試量測出的結果。
- WCAG AA
- 色彩對比目標
- Material 3
- 以 token 為基礎的色彩與元件系統
- 拇指熱區
- 主要訂位操作的擺放規則
反思與下一步
下一版應把訂位流程接到營運管理
目前版本主要處理顧客端訂位。下一版可以補上店家端管理、可預約時段規則，以及訂位完成後的通知訊息。
- 補上空狀態、錯誤狀態與客滿狀態，讓訂位情境更接近真實使用。
- 檢查手機小螢幕中，菜單瀏覽與訂位按鈕會不會互相搶注意力。