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