Open u 賣｜線上訂餐系統・UX/UI 設計｜Hello Hedi

Open u 賣

APP / PRODUCT DESIGN / UI / UX

Open u 賣線上訂餐系統作品集展示主視覺：黃與青綠的訂餐介面設計 — 01 / OPEN U 賣 · PORTFOLIO HERO (2026 REINTERPRETATION)

REAL PRODUCT DEVELOPMENT / 實際開發專案

從找到想吃的，到完成一張訂單。

Open u 賣是我曾參與設計並實際進入開發的線上訂餐產品，涵蓋餐廳探索、料理分類、餐牌瀏覽與訂單操作等使用情境。

本次作品集保留原始設計資料，以更清晰的方式整理設計思考。新版畫面中的店家、價格及訂單資料均為展示示意。

Real Development Project · Online Food Ordering · UI/UX Design · Restaurant Discovery · Menu & Orders

DESIGN DECISIONS / 設計判斷

訂餐體驗，需要選得快，也要看得懂。

從留存的 App 介面可以看到，這個真實開發專案需要整合不同餐廳、餐點與下單狀態。作品集將設計重點整理成三個方向：降低探索成本、讓點餐判斷更清楚，以及維持訂單流程的連續性。

01 / DISCOVERY

從料理類別找到對的餐廳

用分類、列表與餐廳資訊幫助使用者快速縮小選擇範圍。

02 / DECISION

餐牌和餐點資訊要好比較

讓照片、名稱、價格與加入操作維持一致的視覺節奏。

03 / CONTINUITY

確認訂單前後都有明確回饋

串連已選品項、購物車、訂單確認與後續狀態。

Open u 賣原始設計：餐廳探索與分類列表手機介面 — 02 / ORIGINAL RESTAURANT DISCOVERY · ARCHIVAL UI

Open u 賣當年黃色系的完整 App 介面設計總覽 — 03 / ORIGINAL UI BOARD · SOURCE RESOLUTION

Open u 賣產品流程整理：探索餐廳、瀏覽餐牌、選擇餐點、購物車、確認訂單、訂單追蹤 — 04 / SCREEN-BASED USER JOURNEY · PORTFOLIO RECONSTRUCTION

2026 VISUAL REINTERPRETATION / 重新設計展示

延續 Open u 賣的黃與青綠，重新整理 20 張訂餐介面。

以當年專案保留的素材及使用情境為基礎，重新整理 20 張訂餐操作介面，呈現從餐廳探索到訂單追蹤的使用脈絡。

Open u 賣 2026 作品集二十張訂餐系統介面重構總覽 — 05 / 20-SCREEN UI REINTERPRETATION · 2026

SCREEN DETAILS / 逐張畫面

20 張介面以一致比例呈現，點擊即可放大檢視。

Open u 賣重新設計畫面 01：品牌啟動 — 01品牌啟動

Open u 賣重新設計畫面 02：探索引導 — 02探索引導

Open u 賣重新設計畫面 03：配送引導 — 03配送引導

Open u 賣重新設計畫面 04：登入 — 04登入

Open u 賣重新設計畫面 05：註冊 — 05註冊

Open u 賣重新設計畫面 06：探索首頁 — 06探索首頁

Open u 賣重新設計畫面 07：分類搜尋 — 07分類搜尋

Open u 賣重新設計畫面 08：餐廳列表 — 08餐廳列表

Open u 賣重新設計畫面 09：餐廳詳情 — 09餐廳詳情

Open u 賣重新設計畫面 10：餐牌內容 — 10餐牌內容

Open u 賣重新設計畫面 11：餐點詳情 — 11餐點詳情

Open u 賣重新設計畫面 12：購物車 — 12購物車

Open u 賣重新設計畫面 13：結帳 — 13結帳

Open u 賣重新設計畫面 14：下單成功 — 14下單成功

Open u 賣重新設計畫面 15：訂單追蹤 — 15訂單追蹤

Open u 賣重新設計畫面 16：收藏餐廳 — 16收藏餐廳

Open u 賣重新設計畫面 17：主題推薦 — 17主題推薦

Open u 賣重新設計畫面 18：訂單紀錄 — 18訂單紀錄

Open u 賣重新設計畫面 19：個人中心 — 19個人中心

Open u 賣重新設計畫面 20：客服中心 — 20客服中心

2026 年作品集重新整理畫面，非當年產品原始截圖；店家與交易資料均為展示示意。

原始設計素材與 2026 年重新整理畫面已分別標示；使用流程圖為本次作品集整理，非當年的正式交付文件。

APP / UI / UX / PRODUCT DESIGN /