UX：流程如何運作
比較客房
花園客房
已選擇
選擇日期
住宿日期
查看住宿摘要
花園客房
住宿日期
日期有空房？
有空房
換個日期
- 用戶希望完成甚麼工作？
- 每次作決定前，需要知道哪些資料？
- 出錯或改變主意時，可以怎樣修改？
- 能否使用鍵盤及輔助工具完成操作？
- 用戶可能在哪裡猶豫？哪些地方需要測試？
由畫面結構、介面設計到開發交接，看看同一個選房畫面如何逐步成形。你也可以開啟示範，試用預訂流程。
先釐清操作路徑，以及需要修改時如何返回。
交付：已審視的用戶流程圖
01 / 了解
把客房資料放在一起，讓住客比較後再選擇日期。
花園客房
特大雙人床 · 花園景觀
庭園客房
特大雙人床 · 庭園景觀
有合適客房？
沒有客房 → 修改日期 → 再次瀏覽
需要修改？返回客房及日期選擇。
先安排資訊次序，再處理配色和圖片。
交付：低保真畫面結構
示例畫面 · 日期僅供示範
把字體、照片和視覺層次套用到同一個預訂流程。
交付：響應式介面設計
示例畫面 · 日期僅供示範
試選客房和日期，再查看住宿摘要。
交付：可供審視的互動原型
示例畫面 · 日期僅供示範
互動示範 · 不會預訂或付款
交代元件狀態和操作規則，供開發團隊跟進。
交付：元件、狀態及開發註釋
示例畫面 · 日期僅供示範
UX 處理用戶如何完成工作，包括流程、所需資料和每一步決定；UI 則把這些選擇在畫面上清楚表達。無障礙操作和響應式設計兩邊都要兼顧。
比較客房
花園客房
選擇日期
住宿日期
查看住宿摘要
花園客房
住宿日期
日期有空房？
有空房
換個日期
特大雙人床 · 花園景觀
以上概念示意只用作說明設計決定，並非用戶測試結果。
以下為設計概念，並非客戶項目。畫面屬靜態示意，名稱及數據均為虛構。
設計概念 01
精品酒店 · 網站及手機預訂
設計概念 02
業務營運 · 儀表板及工作單
設計概念 03
生活會籍 · 手機 App
實際交付內容會按項目確認；研究及用戶測試的範圍會另行商定。
在視覺設計前，先整理用戶要完成的工作、重要決定、權限和畫面流程。
把已確認的重點流程製作成互動原型，供團隊審視。
按已確認的螢幕尺寸，設計版面、內容層次和主要狀態。
交付附有註釋的元件、響應式規則和實作說明，供開發團隊跟進。
相關項目
瀏覽與這項方案相關的客戶案例。
正在顯示相關案例第 1 頁，共 2 頁。
我們的客戶是一家傳統金融服務公司，希望透過提供市場新聞及匯率資訊的會員 App，與現有及新用戶保持更緊密聯繫。
會員可在 App 查看個人 QR Code、預約會所設施和接收活動資訊。雲端管理後台連接現有會員數據庫，讓管理團隊設定各項預約規則、發布活動內容，以及匯出預約和出席記錄。
會員可透過網站預約網球場、匹克球場、燒烤場和足球場等會所設施，並在提交前查看可預約日期和時段。職員則可設定各項設施的預約規則、查看整體時間表，以及代會員建立或更改預約。
