交易操作選單設計
交易操作選單設計
交易操作選單設計
一手掌握交易，打造順手又貼心的選單
一手掌握交易，打造順手又貼心的選單
專案背景
專案背景
專案背景
因應會員權益卡片佈局調整，我們將原本位於首頁上方的核心功能（轉帳、付款、掃碼）改為整合至底部操作區，提升單手操作的便利性，並透過三段式展開高度，讓使用者能依需求快速找到想用的功能，提升首頁的整體操作體驗。
因應會員權益卡片佈局調整，我們將原本位於首頁上方的核心功能（轉帳、付款、掃碼）改為整合至底部操作區，提升單手操作的便利性，並透過三段式展開高度，讓使用者能依需求快速找到想用的功能，提升首頁的整體操作體驗。
定義問題
定義問題
定義問題
操作理解與上手體驗
操作理解與上手體驗
如何引導使用者理解與上手新的 Panel 操作方式？
如何引導使用者理解與上手新的 Panel 操作方式？
如何讓 Panel 配合使用者多元的支付情境，提升交易效率？
如何讓 Panel 配合使用者多元的支付情境，提升交易效率？
限制＆挑戰
限制＆挑戰
限制＆挑戰
操作邏輯與互動設定
操作邏輯與互動設定
如何定義 Panel 在不同切換情境下的展開邏輯與操作機制？
如何定義 Panel 在不同切換情境下的展開邏輯與操作機制？
視覺風格與整體一致性
視覺風格與整體一致性
如何在視覺上凸顯 Panel 的重要性，同時維持首頁風格的整體一致性與平衡？
如何在視覺上凸顯 Panel 的重要性，同時維持首頁風格的整體一致性與平衡？
Before
After
After
After
定義設計目標
定義設計目標
定義設計目標
用戶需求
用戶需求
用戶需求
How might we
How might we
提供一個直覺、好上手的功能 panel，讓使用者快速完成交易操作？
提供一個直覺、好上手的功能 panel，讓使用者快速完成交易操作？
商業目標
商業目標
商業目標
How might we
How might we
設計一個兼具品牌一致性、功能引導性與擴展彈性的操作區塊？
設計一個兼具品牌一致性、功能引導性與擴展彈性的操作區塊？
設計過程
設計過程
設計過程
桌面研究
桌面研究
在設計前，我參考了 LinePay 的操作設計，借鑑其成熟的交互體驗模式：
在設計前，我參考了 LinePay 的操作設計，借鑑其成熟的交互體驗模式：
交互行為設計
交互行為設計
採用使用者習慣的滑動展開／收起模式 → 降低新介面的學習成本
採用使用者習慣的滑動展開／收起模式 → 降低新介面的學習成本
細節動態設計
細節動態設計
加入滑動與點擊雙觸發邏輯，並優化誤觸容錯與回彈，提高操作直覺與穩定性。
加入滑動與點擊雙觸發邏輯，並優化誤觸容錯與回彈，提高操作直覺與穩定性。
UX 操作設計
UX 操作設計
延用用戶熟悉的滑動開合交互設計加入載具條碼功能
延用用戶熟悉的滑動開合交互設計加入載具條碼功能
定義 Panel 三段式高度與展開邏輯，給予用戶更彈性的使用情境
定義 Panel 三段式高度與展開邏輯，給予用戶更彈性的使用情境
UI 視覺定義
UI 視覺定義
使用品牌主色「紅」，提高此區塊在首頁上的視覺重點
使用品牌主色「紅」，提高此區塊在首頁上的視覺重點
融入漸層設計，與八小格 icon 設計保持一致
融入漸層設計，與八小格 icon 設計保持一致
測試情境
測試情境
為驗證新版「交易 Panel」是否能有效提升使用效率與操作直覺性，我設計了一系列任務導向的情境測試，觀察使用者在真實任務中的操作反應與理解方式
為驗證新版「交易 Panel」是否能有效提升使用效率與操作直覺性，我設計了一系列任務導向的情境測試，觀察使用者在真實任務中的操作反應與理解方式
1
1
交易操作的易找性
交易操作的易找性
進入首頁後直接進行轉帳
進入首頁後直接進行轉帳
2
2
活動引導後完成付款
活動引導後完成付款
於首頁找到「會員日活動」後，完成付款流程
於首頁找到「會員日活動」後，完成付款流程
3
3
手機載具使用直覺性
手機載具使用直覺性
於首頁操作並出示手機載具條碼
於首頁操作並出示手機載具條碼
測試方法
測試方法
測試方式
測試方式
指定任務導向的易用性測試
指定任務導向的易用性測試
測試人數
測試人數
5 位
5 位
評估項目
評估項目
使用者是否能成功完成任務
使用者是否能成功完成任務
操作流程是否順暢，是否出現卡關或迷路情形
操作流程是否順暢，是否出現卡關或迷路情形
測試洞察
測試洞察
主要功能易於辨識與操作
主要功能易於辨識與操作
全部受測者能在進入首頁後快速辨識並找到主要操作功能（付款、掃描條碼、轉帳）
全部受測者能在進入首頁後快速辨識並找到主要操作功能（付款、掃描條碼、轉帳）
選單收合與展開提升操作流暢度
選單收合與展開提升操作流暢度
多數使用者反饋選單收合的交互設計有助於讓畫面更清爽、操作更專注
多數使用者反饋選單收合的交互設計有助於讓畫面更清爽、操作更專注
載具條碼入口辨識度偏低
載具條碼入口辨識度偏低
60% 使用者無法直覺找到「載具條碼」功能，普遍不知道首頁選單可以上滑展開
60% 使用者無法直覺找到「載具條碼」功能，普遍不知道首頁選單可以上滑展開
缺乏明確提示與操作引導，導致任務中斷或需他人協助才能完成
缺乏明確提示與操作引導，導致任務中斷或需他人協助才能完成
加強引導設計
加強引導設計
加強引導設計
Onboarding 引導設計
Onboarding 引導設計
為了解決使用者無法直覺發現「手機載具條碼」的問題，同時協助用戶快速理解新版首頁的介面結構與功能操作，我設計了一段首頁引導教學，作為新介面啟用時的 Onboarding 機制，提升新手體驗並強化關鍵功能的辨識度。
為了解決使用者無法直覺發現「手機載具條碼」的問題，同時協助用戶快速理解新版首頁的介面結構與功能操作，我設計了一段首頁引導教學，作為新介面啟用時的 Onboarding 機制，提升新手體驗並強化關鍵功能的辨識度。
採用遮罩設計、滑動切換與關鍵功能標記，幫助使用者視覺聚焦、快速掌握操作邏輯
採用遮罩設計、滑動切換與關鍵功能標記，幫助使用者視覺聚焦、快速掌握操作邏輯
設計交付文件
設計交付文件
設計交付文件
撰寫設計交付規範文件，完整整理元件在各種場景下的使用方式、交互邏輯與動畫細節，幫助工程理解設計意圖，減少開發落差，提升整體協作效率與產品品質。
撰寫設計交付規範文件，完整整理元件在各種場景下的使用方式、交互邏輯與動畫細節，幫助工程理解設計意圖，減少開發落差，提升整體協作效率與產品品質。
學習＆反思
學習＆反思
學習＆反思
技術協作與實作落地
技術協作與實作落地
與工程師密切合作，共同定義 Panel 的交互邏輯與三段式狀態切換的技術可行性與平台差異性（iOS / Android）
與工程師密切合作，共同定義 Panel 的交互邏輯與三段式狀態切換的技術可行性與平台差異性（iOS / Android）
使用者體驗引導與策略思考
使用者體驗引導與策略思考
部分功能無法在第一眼就被「直覺」理解，因此需設計策略性引導機制，讓使用者發現、理解功能的存在與價值。
部分功能無法在第一眼就被「直覺」理解，因此需設計策略性引導機制，讓使用者發現、理解功能的存在與價值。
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！