交易操作選單設計
交易操作選單設計
交易操作選單設計
一手掌握交易，打造順手又貼心的選單
一手掌握交易，打造順手又貼心的選單
專案背景
專案背景
專案背景
這次首頁改版的其中一個商業目標，是透過放大會員等級的曝光，帶動交易頻次與金額成長。但會員權益要被看見，就必須佔據首頁主要視覺位置，這直接擠壓到原本位於上方的三個核心交易功能（轉帳、付款、掃碼）。因此這個專案的挑戰在於：如何讓出首頁主要位置給會員制度，同時不犧牲核心交易功能的曝光與使用率。
這次首頁改版的其中一個商業目標，是透過放大會員等級的曝光，帶動交易頻次與金額成長。但會員權益要被看見，就必須佔據首頁主要視覺位置，這直接擠壓到原本位於上方的三個核心交易功能（轉帳、付款、掃碼）。因此這個專案的挑戰在於：如何讓出首頁主要位置給會員制度，同時不犧牲核心交易功能的曝光與使用率。
定義問題
定義問題
定義問題
操作理解與上手體驗
操作理解與上手體驗
如何引導使用者理解與上手新的 Panel 操作方式？
如何引導使用者理解與上手新的 Panel 操作方式？
如何讓 Panel 配合使用者多元的支付情境，提升交易效率？
如何讓 Panel 配合使用者多元的支付情境，提升交易效率？
限制＆挑戰
限制＆挑戰
限制＆挑戰
操作邏輯與互動設定
操作邏輯與互動設定
如何定義 Panel 在不同切換情境下的展開邏輯與操作機制？
如何定義 Panel 在不同切換情境下的展開邏輯與操作機制？
視覺風格與整體一致性
視覺風格與整體一致性
如何在視覺上凸顯 Panel 的重要性，同時維持首頁風格的整體一致性與平衡？
如何在視覺上凸顯 Panel 的重要性，同時維持首頁風格的整體一致性與平衡？
Before
After
定義設計目標
定義設計目標
空間策略
空間策略
提供一個直覺、好上手的功能 panel，讓使用者快速完成交易操作？
當主要功能從首頁上方移到下方，如何讓「位置下移」反而成為操作效率的優勢，而不是傷害？
當主要功能從首頁上方移到下方，如何讓「位置下移」反而成為操作效率的優勢，而不是傷害？
提供一個直覺、好上手的功能 panel，讓使用者快速完成交易操作？
學習成本
學習成本
空間策略
用戶已經建立「上方付款」的肌肉記憶，如何讓「下方 panel」這個新模式能被快速理解，而不引發負面情緒？
當主要功能從首頁上方移到下方，如何讓「位置下移」反而成為操作效率的優勢，而不是傷害？
當主要功能從首頁上方移到下方，如何讓「位置下移」反而成為操作效率的優勢，而不是傷害？
用戶已經建立「上方付款」的肌肉記憶，如何讓「下方 panel」這個新模式能被快速理解，而不引發負面情緒？
視覺權重
視覺權重
當會員權益卡片是首頁的視覺主角，panel 如何強化自身存在感、又不打架？
當會員權益卡片是首頁的視覺主角，panel 如何強化自身存在感、又不打架？
設計過程
設計過程
設計過程
決策 1：交互模式的取捨
決策 1：交互模式的取捨
問題
問題
想要沿用像 LinePay 熟悉的模式雖然安全，卻容易被質疑「為什麼跟競品一樣」，想要在交互上做出差異化，但擔心學習成本會影響任務完成率
想要沿用像 LinePay 熟悉的模式雖然安全，卻容易被質疑「為什麼跟競品一樣」，想要在交互上做出差異化，但擔心學習成本會影響任務完成率
做法
做法
Panel 功能的核心價值是「讓用戶在最短時間內完成任務」。因此我沿用滑動展開的熟悉交互降低學習成本，把設計的差異化空間留在「三段式高度切換」上，讓 panel 能根據用戶當下的使用情境彈性調整展開程度。
Panel 功能的核心價值是「讓用戶在最短時間內完成任務」。因此我沿用滑動展開的熟悉交互降低學習成本，把設計的差異化空間留在「三段式高度切換」上，讓 panel 能根據用戶當下的使用情境彈性調整展開程度。
決策 2：紅色主色 vs 漸層設計
決策 2：紅色主色 vs 漸層設計
問題
問題
想使用品牌紅色最大化 panel 在首頁的視覺權重，但會讓整體首頁下方視覺感太重，整體風格失衡。完全捨棄紅色又會弱化 panel 的品牌識別與功能重要性
想使用品牌紅色最大化 panel 在首頁的視覺權重，但會讓整體首頁下方視覺感太重，整體風格失衡。完全捨棄紅色又會弱化 panel 的品牌識別與功能重要性
做法
做法
以「紅色 + 漸層 + 毛玻璃」三層疊加：紅色凸顯品牌識別、漸層化解純紅帶來的壓迫感、毛玻璃增加 panel 的通透感，並與上方功能 icon 的漸層語言保持一致。這個組合讓 panel 在維持品牌存在感的同時，融入首頁整體系統
以「紅色 + 漸層 + 毛玻璃」三層疊加：紅色凸顯品牌識別、漸層化解純紅帶來的壓迫感、毛玻璃增加 panel 的通透感，並與上方功能 icon 的漸層語言保持一致。這個組合讓 panel 在維持品牌存在感的同時，融入首頁整體系統
易用性測試
易用性測試
為驗證新版「交易 Panel」是否能有效提升使用效率與操作直覺性，我設計了一系列任務導向的情境測試，觀察使用者在真實任務中的操作反應與理解方式
為驗證新版「交易 Panel」是否能有效提升使用效率與操作直覺性，我設計了一系列任務導向的情境測試，觀察使用者在真實任務中的操作反應與理解方式
1
1
交易操作的易找性
交易操作的易找性
進入首頁後直接進行轉帳
進入首頁後直接進行轉帳
2
2
活動引導後完成付款
活動引導後完成付款
於首頁找到「會員日活動」後，完成付款流程
於首頁找到「會員日活動」後，完成付款流程
3
3
手機載具使用直覺性
手機載具使用直覺性
於首頁操作並出示手機載具條碼
於首頁操作並出示手機載具條碼
測試方法
測試方法
測試方式
測試方式
指定任務導向的易用性測試
指定任務導向的易用性測試
測試人數
測試人數
5 位
5 位
評估項目
評估項目
使用者是否能成功完成任務
使用者是否能成功完成任務
操作流程是否順暢，是否出現卡關或迷路情形
操作流程是否順暢，是否出現卡關或迷路情形
測試洞察
測試洞察
主要功能易於辨識與操作
主要功能易於辨識與操作
全部受測者能在進入首頁後快速辨識並找到主要操作功能（付款、掃描條碼、轉帳）
全部受測者能在進入首頁後快速辨識並找到主要操作功能（付款、掃描條碼、轉帳）
選單收合與展開提升操作流暢度
選單收合與展開提升操作流暢度
多數使用者反饋選單收合的交互設計有助於讓畫面更清爽、操作更專注
多數使用者反饋選單收合的交互設計有助於讓畫面更清爽、操作更專注
載具條碼入口辨識度偏低
載具條碼入口辨識度偏低
60% 使用者無法直覺找到「載具條碼」功能，普遍不知道首頁選單可以上滑展開
60% 使用者無法直覺找到「載具條碼」功能，普遍不知道首頁選單可以上滑展開
缺乏明確提示與操作引導，導致任務中斷或需他人協助才能完成
缺乏明確提示與操作引導，導致任務中斷或需他人協助才能完成
加強引導設計
加強引導設計
Onboarding 引導設計
Onboarding 引導設計
測試發現 60% 用戶不知道載具條碼藏在 panel 裡
測試發現 60% 用戶不知道載具條碼藏在 panel 裡
我認為這是資訊架構大調整造成的「暫時性認知斷層」，用戶需要時間重建操作心智模型
我認為這是資訊架構大調整造成的「暫時性認知斷層」，用戶需要時間重建操作心智模型
我決定透過 Onboarding 設計，因為 Panel 的主功能是付款、轉帳、掃碼，載具條碼只是為重度用戶提供的便利捷徑，不該為了 60% 的暫時性陌生感就重設入口、擠壓真正的主功能。Onboarding 是過渡期的低成本解法，後續再搭配上線數據驗證這個判斷。
我決定透過 Onboarding 設計，因為 Panel 的主功能是付款、轉帳、掃碼，載具條碼只是為重度用戶提供的便利捷徑，不該為了 60% 的暫時性陌生感就重設入口、擠壓真正的主功能。Onboarding 是過渡期的低成本解法，後續再搭配上線數據驗證這個判斷。
設計交付文件
設計交付文件
撰寫設計交付規範文件，完整整理元件在各種場景下的使用方式、交互邏輯與動畫細節，幫助工程理解設計意圖，減少開發落差，提升整體協作效率與產品品質。
撰寫設計交付規範文件，完整整理元件在各種場景下的使用方式、交互邏輯與動畫細節，幫助工程理解設計意圖，減少開發落差，提升整體協作效率與產品品質。
專案成果
專案成果
改版上線半年後，三個核心交易功能點擊率皆顯著成長：
改版上線半年後，三個核心交易功能點擊率皆顯著成長：
改版上線半年後，三個核心交易功能點擊率皆顯著成長：
Panel 的設計並未犧牲核心交易功能，反而透過 Panel 整合提升了可及性
轉帳
轉帳
67%
67%
出示付款碼
出示付款碼
50%
50%
掃描 Qrcode
掃描 Qrcode
35%
35%
出示載具條碼
出示載具條碼
+2%
+2%
量化
量化
量化
APP + 客服反饋
APP + 客服反饋
操作更方便、彈性提高
操作更方便、彈性提高
質化
質化
質化
學習＆反思
學習＆反思
多目標介面，先拆解目標再分配視覺權重
多目標介面，先拆解目標再分配視覺權重
這個案子的核心矛盾，是首頁要同時承載「會員等級曝光」與「三個核心交易功能」。視覺權重要回到各自的目標去推導：等級權益要的是「被看見」，核心交易功能要的是「被快速使用」。成功指標不同，視覺策略自然不同。釐清這層，設計判斷才有依據，而不是在兩個需求之間妥協。
這個案子的核心矛盾，是首頁要同時承載「會員等級曝光」與「三個核心交易功能」。視覺權重要回到各自的目標去推導：等級權益要的是「被看見」，核心交易功能要的是「被快速使用」。成功指標不同，視覺策略自然不同。釐清這層，設計判斷才有依據，而不是在兩個需求之間妥協。
資訊架構大幅調整時，過渡期設計是必要的
資訊架構大幅調整時，過渡期設計是必要的
60% 用戶找不到載具條碼，事後回看是可預期的，因為高頻功能位置一改，肌肉記憶本來就需要時間重建。我當時的盲點，是把設計範疇限縮在「新架構本身好不好用」，沒把「用戶如何從舊架構過渡」也視為設計問題的一部分。Onboarding 不該是測試後的補丁，而是 IA 大調整時就該同步思考的設計節點。
60% 用戶找不到載具條碼，事後回看是可預期的，因為高頻功能位置一改，肌肉記憶本來就需要時間重建。我當時的盲點，是把設計範疇限縮在「新架構本身好不好用」，沒把「用戶如何從舊架構過渡」也視為設計問題的一部分。Onboarding 不該是測試後的補丁，而是 IA 大調整時就該同步思考的設計節點。
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！