訂單明細頁Redesign
重新梳理 Agoda 訂單明細架構，透過資訊分層與視覺降噪提升閱讀體驗。
Year
2024
Feature
資訊結構重組
Type
App Redesign
Approach
提升閱讀效率
訂單明細頁Redesign
重新梳理 Agoda 訂單明細架構，透過資訊分層與視覺降噪提升閱讀體驗。
Year
2024
Feature
資訊結構重組
Type
App Redesign
Approach
提升閱讀效率
透過資訊內容重新排列及整理
優化『訂單詳細頁』使用體驗
Pronlem
相同資訊內容過於分散
頁面內容資訊層級不清
01.Pain Points
資訊分散
Tab
頁面篇幅不足，導致錨點跳轉位移感過低。
層級不清
元件狀態
元件active 和default 狀態太過於相似
層級不清
CTA
動作按鈕與一般資訊缺乏層次差別
層級不清
關鍵資訊
資訊優先級模糊，核心內容淹沒在次要細節中
層級不清
字體
缺乏字級規範，導致資訊層次混亂
資訊分散
資訊碎片
同性質元件未有效整合，且重複
02.Solution
| 住宿資訊 | 訂單資訊 | 線上留言 |
運用鄰近原則整合元件，提升資訊掃視效率。
建立一致性的元件規範，強化介面識別度。
定義品牌主色運用規範，強化視覺以引導使用者行為。
03.Redesign
A
住宿資訊
將原本分散的飯店基礎資料、時程與房型整合於同分頁，確保使用者進入頁面即可完成資訊校對。
分頁Tabs
3個分頁 住宿資訊 | 訂單資訊 | 線上留言
統一狀態顏色分別
資訊
統整飯店資訊與客房資訊
CTA統一形式
聯絡資訊統整以icon方式呈現
B
訂單資訊
整合住客資訊、取消政策、付款資訊
C
線上留言
將『線上留言』和『聯絡Agoda客服中心』同樣性質整合在同一個分頁
04.Prototype
透過資訊內容重新排列及整理
優化『訂單詳細頁』使用體驗
Pronlem
相同資訊內容過於分散
頁面內容資訊層級不清
01.Pain Points
資訊分散
Tab
頁面篇幅不足，導致錨點跳轉位移感過低。
層級不清
元件狀態
元件active 和default 狀態太過於相似
層級不清
CTA
動作按鈕與一般資訊缺乏層次差別
層級不清
關鍵資訊
資訊優先級模糊，核心內容淹沒在次要細節中
層級不清
字體
缺乏字級規範，導致資訊層次混亂
資訊分散
資訊碎片
同性質元件未有效整合，且重複
02.Solution
| 住宿資訊 | 訂單資訊 | 線上留言 |
運用鄰近原則整合元件，提升資訊掃視效率。
建立一致性的元件規範，強化介面識別度。
定義品牌主色運用規範，強化視覺以引導使用者行為。
03.Redesign
A
住宿資訊
將原本分散的飯店基礎資料、時程與房型整合於同分頁，確保使用者進入頁面即可完成資訊校對。
分頁Tabs
3個分頁 住宿資訊 | 訂單資訊 | 線上留言
統一狀態顏色分別
資訊
統整飯店資訊與客房資訊
CTA統一形式
聯絡資訊統整以icon方式呈現
B
訂單資訊
整合住客資訊、取消政策、付款資訊
C
線上留言
將『線上留言』和『聯絡Agoda客服中心』同樣性質整合在同一個分頁
04.Prototype
透過資訊內容重新排列及整理
優化『訂單詳細頁』使用體驗
Pronlem
相同資訊內容過於分散
頁面內容資訊層級不清
01.Pain Points
資訊分散
Tab
頁面篇幅不足，導致錨點跳轉位移感過低。
層級不清
元件狀態
元件active 和default 狀態太過於相似
層級不清
CTA
動作按鈕與一般資訊缺乏層次差別
層級不清
關鍵資訊
資訊優先級模糊，核心內容淹沒在次要細節中
層級不清
字體
缺乏字級規範，導致資訊層次混亂
資訊分散
資訊碎片
同性質元件未有效整合，且重複
02.Solution
| 住宿資訊 | 訂單資訊 | 線上留言 |
運用鄰近原則整合元件，提升資訊掃視效率。
建立一致性的元件規範，強化介面識別度。
定義品牌主色運用規範，強化視覺以引導使用者行為。
03.Redesign
A
住宿資訊
將原本分散的飯店基礎資料、時程與房型整合於同分頁，確保使用者進入頁面即可完成資訊校對。
分頁Tabs
3個分頁 住宿資訊 | 訂單資訊 | 線上留言
統一狀態顏色分別
資訊
統整飯店資訊與客房資訊
CTA統一形式
聯絡資訊統整以icon方式呈現
B
訂單資訊
整合住客資訊、取消政策、付款資訊
C
線上留言
將『線上留言』和『聯絡Agoda客服中心』同樣性質整合在同一個分頁
04.Prototype
