Buddy House

專案定位

以手機決策為核心的溫暖餐飲體驗

Buddy House 是一個餐飲網站概念。我的重點不是只做溫馨的品牌視覺，也要讓使用者能在手機上快速看菜單、找到訂位入口並完成預約。

角色與範圍

負責品牌 UI、行動端 UX 與元件規則

我負責定義品牌感、建立 Figma 色彩與元件系統、重整手機訂位流程，並整理成可以接到 Vue 與 Tailwind 實作的介面規則。

問題背景

餐飲網站常在手機訂位流程流失使用者

很多餐飲網站很有氣氛，但手機上不好用：訂位入口藏太深、頁面跳太多、菜單也不好讀。使用者可能還沒決定要不要去，就已經離開了。

設計目標

保留品牌溫度，同時縮短訂位時間

我的目標是保留餐廳親切、溫暖的感覺，同時讓手機操作更順。畫面要好讀、按鈕要好點、訂位步驟也要盡量少。

流程洞察

手機訂位流程一旦要求太多就容易中斷

我檢查餐飲網站流程後發現，菜單、日期選擇和確認常被拆得太散。這會讓手機訂位變慢。所以我先用線框圖整理步驟，再套入溫暖的品牌視覺。

困難與取捨

讓品牌柔和，但不削弱可用性

取捨在於：品牌要柔和，但操作不能變得模糊。我用比較清楚的色彩對比、固定的元件規則和適合拇指操作的位置，讓網站看起來溫暖，但訂位仍然明確。

關鍵設計決策

圍繞訂位任務設計，而不只美化首頁

• 把訂位按鈕放在手機上比較容易按到的位置。
• 用一致的色彩規則，讓品牌維持溫暖，同時保留足夠對比。
• 把訂位流程整理成較少、較清楚的步驟，並讓使用者知道目前進度。