作業封面.png

平台首頁 Web Mockup.png

平台首頁 App Wireframe.png

顏色

綠色是與自然、健康和平衡相關聯的顏色,呈現食安、新鮮有機食材的意象。

橘色是一種活潑、溫暖和引人注目的顏色,展現舒適感、親和力、充滿活力的用餐環境。

暖色系灰階,減少使用純黑色及無彩度灰階,給人暖心的親近感。

元件風格

圓角可以營造柔和、友好和溫暖的感覺,讓網頁看起來更加親切和舒適。這種視覺效果可以使用戶感到歡迎和放鬆,增加對餐廳的好感度。

圓角卡片式設計則更加舒適和易於點擊,提升用戶體驗,使操作更加自然和順暢。線條式icon更輕盈舒適感,減少視覺權重,專注在內容區塊上。

資訊架構

新增:

主選單新增 Orders 方便使用者回顧上次點了什麼 、 Favorite 方便使用者記錄喜愛餐廳。

新增 Customer Review 可以讓使用者填寫用餐心得,作為其他用戶參考評價。

餐廳資料卡片 新增類別標示「fastfood」 呼應 「category」

左側篩選 新增 Max Delivery Fee 並以漸層色代表運送費用價格高低。

搜尋bar左邊新增篩選功能,手機版「左側篩選」收起來時也能使用。而電腦版也讓慣用在搜尋bar操作的使用者方便使用。

刪減:

專屬推薦。這塊是經由最近點餐數據而出現相關餐廳資訊資訊,類似電商”你可能也感興趣...”,而新增的Favorite,亦代表使用者最感興趣的餐廳,所以整併移動至 Favorite 列表頁 底下。

視覺階層

「主題探索」移動到最上方並放大了視覺,就像Spotify 有時候不知道要聽什麼,歌單名稱卻很有意思「夏日午後的微風」。不知道吃什麼時候,就可試著點點看說不定有意外驚喜。 「category」以生動圖片取代圖畫icon更活潑歡愉,用餐本就是讓人血糖增加而令人快樂的事。並且在fatfooter提供文字連結,方便使用者以 Ctrl + F 方式去搜尋關注的類別。

<aside> 🖼️ 使用素材來源: https://www.foodpanda.com.tw/

https://www.ubereats.com/tw/

https://www.shutterstock.com/image-vector/set-tapioca-drinks-vector-realistic-illustration-1471220639

https://www.shutterstock.com/image-photo/fillet-red-fish-lemon-rosemary-plate-1942254817https://www.shutterstock.com/image-vector/fresh-summer-salad-greens-vegetables-sprinkled-1649234116

https://www.shutterstock.com/image-vector/fast-food-3d-realistic-render-vector-2137266793

https://www.shutterstock.com/image-photo/seafood-platter-lunch-by-sea-greece-2065198373

https://www.shutterstock.com/image-photo/hanoi-vietnam-oct-02-2019-restaurants-1530495608

https://www.shutterstock.com/image-photo/greek-salad-beautiful-sea-view-santorini-2305881317

https://www.shutterstock.com/image-vector/simple-set-shop-modern-thin-line-1930949594

</aside>

自我檢核表


項目 分數(1 分為非常不熟悉,5 分為非常熟悉)
基本 UI 美感與資訊層級 4
規劃出不同載體 (Web / App) 的設計方式 4
使用小工具檢測 UI 對比度符合 WCAG 標準 4

班長回覆區