
UXUI
UXUI
UXUI
FinTech
FinTech
FinTech
TradingApp
TradingApp
TradingApp
ForexDesign
ForexDesign
ForexDesign
PPDE MS 讓交易
更簡單、更直覺
PPDE MS 讓交易
更簡單 更直覺

專案背景
我們需要為客戶打造一款基於 MT5 交易環境的外匯差價交易 App。 當時用戶長期使用 MT5,對既有操作非常熟悉,但 MT5 本身介面資訊密集、操作複雜,新產品如果改動太大,反而容易造成操作失誤與學習成本。
我們需要為客戶打造一款基於 MT5 交易環境的外匯差價交易 App。 當時用戶長期使用 MT5,對既有操作非常熟悉,但 MT5 本身介面資訊密集、操作複雜,新產品如果改動太大,反而容易造成操作失誤與學習成本。
角色:
產品設計師
產品設計師
團隊:
1 總監, 1 產品設計師, 8 App工程師
1 總監, 1 產品設計師, 8 App工程師
客戶:
Phnom Penh Derivative Exchange Plc.
Phnom Penh Derivative Exchange Plc.




設計目標
快速直覺下單
重新設計交易介面的資訊層級,使用預設參數有效縮短交易路徑,提升下單效率。
一體化資金管理
串連餘額、淨值等核心資產數據,以清楚直觀的界面呈現用戶資產狀態,並整合出入金流程,打造流暢的資金管理體驗。
簡易看盤體驗
在個股頁提供輕量化走勢圖與專業技術指標圖,支援不同深度分析需求,讓使用者能快速判斷商品走勢。
資料介面優化
透過資訊分層與版面配置優化,改善大量數據造成的視覺疲勞,引導視覺焦點,提升整體看盤效率與理解速度。
快速直覺下單
重新設計交易介面的資訊層級,使用預設參數有效縮短交易路徑,提升下單效率。
一體化資金管理
串連餘額、淨值等核心資產數據,以清楚直觀的界面呈現用戶資產狀態,並整合出入金流程,打造流暢的資金管理體驗。
簡易看盤體驗
在個股頁提供輕量化走勢圖與專業技術指標圖,支援不同深度分析需求,讓使用者能快速判斷商品走勢。
資料介面優化
透過資訊分層與版面配置優化,改善大量數據造成的視覺疲勞,引導視覺焦點,提升整體看盤效率與理解速度。
快速直覺下單
重新設計交易介面的資訊層級,使用預設參數有效縮短交易路徑,提升下單效率。
簡易看盤體驗
在個股頁提供輕量化走勢圖與專業技術指標圖,支援不同深度分析需求,讓使用者能快速判斷商品走勢。
一體化資金管理
串連餘額、淨值等核心資產數據,以清楚直觀的界面呈現用戶資產狀態,並整合出入金流程,打造流暢的資金管理體驗。
資料介面優化
透過資訊分層與版面配置優化,改善大量數據造成的視覺疲勞,引導視覺焦點,提升整體看盤效率與理解速度。
快速直覺下單
重新設計交易介面的資訊層級,使用預設參數有效縮短交易路徑,提升下單效率。
簡易看盤體驗
在個股頁提供輕量化走勢圖與專業技術指標圖,支援不同深度分析需求,讓使用者能快速判斷商品走勢。
一體化資金管理
串連餘額、淨值等核心資產數據,以清楚直觀的界面呈現用戶資產狀態,並整合出入金流程,打造流暢的資金管理體驗。
資料介面優化
透過資訊分層與版面配置優化,改善大量數據造成的視覺疲勞,引導視覺焦點,提升整體看盤效率與理解速度。
產品挑戰
解決 MT5 高忠誠度用戶的適應門檻
客戶在開發自己專屬 APP 前是使用 MetaTrader 5 (MT5) 軟體下單,確定要開發自家產品後,劇烈的 UI 變動都可能導致操作失誤,我們的策略是「保留 70% 的操作邏輯,優化 30% 的視覺體驗,在維持核心下單習慣的基礎上,融入 PPDE 的品牌視覺。
客戶在開發自己專屬 APP 前是使用 MetaTrader 5 (MT5) 軟體下單,確定要開發自家產品後,劇烈的 UI 變動都可能導致操作失誤,我們的策略是「保留 70% 的操作邏輯,優化 30% 的視覺體驗,在維持核心下單習慣的基礎上,融入 PPDE 的品牌視覺。






MetaTrader 5 (MT5) 介面
減少認知負荷,互動路徑優化
MT5 原有介面過於擁擠,資訊權重不明。我重新定義了資料分層,在不影響主要流程前提下對資料做層級優化,讓看盤過程更輕鬆、專注。
MT5 原有介面過於擁擠,資訊權重不明。我重新定義了資料分層,在不影響主要流程前提下對資料做層級優化,讓看盤過程更輕鬆、專注。
展現 PPDE 品牌精神,打造新的產品體驗
展現出品牌穩重、專業、國際化的形象,提供使用者更好的交易體驗,在保持穩定度的前提下,深藍色在色彩心理學中象徵穩定與權威,能有效緩解交易者的焦慮,與數據視覺化優化,強化金融科技帶來的信任與效率感。
展現出品牌穩重、專業、國際化的形象,提供使用者更好的交易體驗,在保持穩定度的前提下,深藍色在色彩心理學中象徵穩定與權威,能有效緩解交易者的焦慮,與數據視覺化優化,強化金融科技帶來的信任與效率感。



設計重點
01
01
習慣與品牌的平衡,建立交易信任感
習慣與品牌的平衡,
建立交易信任感
衍生品交易是一個高壓且分秒必爭的環境。在視覺設計上,我們專注於傳達品牌的安全感與穩定性,透過深沉的色調與極簡佈局營造專業氛圍。為了降低用戶進入市場前的焦慮,登入後的操作介面完整保留了用戶在 MT5 上的一覽商品看盤習慣,確保數據瀏覽無須重新學習。
衍生品交易是一個高壓且分秒必爭的環境。在視覺設計上,我們專注於傳達品牌的安全感與穩定性,透過深沉的色調與極簡佈局營造專業氛圍。為了降低用戶進入市場前的焦慮,登入後的操作介面完整保留了用戶在 MT5 上的一覽商品看盤習慣,確保數據瀏覽無須重新學習。

02
02
24/5 不間斷,讓交易與生活無縫接軌
24/5 不間斷,
讓交易與生活無縫接軌
考量衍生品交易 24 小時不間斷的特性,用戶頻繁需要在移動或通勤等非辦公場景下進行即時決策。為了降低環境限制導致的操作失誤,針對單手下單的情境進行了介面重構。
透過模組化設計區分資訊權重,我們將核心交易操作集中於大拇指易觸及的熱區,並建立清晰的視覺層級以利快速閱讀。這讓用戶在戶外單手操作時,仍能維持高度的下單精確度與反應速度。
考量衍生品交易 24 小時不間斷的特性,用戶頻繁需要在移動或通勤等非辦公場景下進行即時決策。為了降低環境限制導致的操作失誤,針對單手下單的情境進行了介面重構。
透過模組化設計區分資訊權重,我們將核心交易操作集中於大拇指易觸及的熱區,並建立清晰的視覺層級以利快速閱讀。這讓用戶在戶外單手操作時,仍能維持高度的下單精確度與反應速度。

03
03
高度自定義的交易圖表,將數據直覺化
高度自定義的交易圖表,
將數據直覺化
在衍生品交易中,市場走勢往往在瞬間發生劇烈變化。為了滿足高強度的數據分析需求,我將圖表系統設計為可高度自定義的模組,允許用戶根據個人交易習慣,自由切換資訊維度並調整參數。
透過強化的資訊層級與流暢的縮放體驗,複雜的 K 線與指標被轉化為直觀的視覺引導。這讓用戶都能在冷靜且流暢的看盤體驗中,快速做出精準判斷。
在衍生品交易中,市場走勢往往在瞬間發生劇烈變化。為了滿足高強度的數據分析需求,我將圖表系統設計為可高度自定義的模組,允許用戶根據個人交易習慣,自由切換資訊維度並調整參數。
透過強化的資訊層級與流暢的縮放體驗,複雜的 K 線與指標被轉化為直觀的視覺引導。這讓用戶都能在冷靜且流暢的看盤體驗中,快速做出精準判斷。



04
04
個性化功能,適應多元交易習慣
個性化功能,
適應多元交易習慣
目標是在嚴謹的看盤架構中,加入高度的自定義功能像是漲跌紅綠切換、語言與自選清單等,能適應不同用戶看盤習慣,提高操作的流暢度。







專案總結
這個專案對我來說,是將複雜邏輯轉化為直覺體驗的過程。看著設計稿變成真實的產品,不僅完成了從 0 到 1 的挑戰,也能展現對我們對細節的堅持。這是一次完整的實踐,證明了設計真的能讓繁雜的交易變得更簡單、流暢。
這個專案對我來說,是將複雜邏輯轉化為直覺體驗的過程。看著設計稿變成真實的產品,不僅完成了從 0 到 1 的挑戰,也能展現對我們對細節的堅持。這是一次完整的實踐,證明了設計真的能讓繁雜的交易變得更簡單、流暢。
這個專案對我來說,是將複雜邏輯轉化為直覺體驗的過程。看著設計稿變成真實的產品,不僅完成了從 0 到 1 的挑戰,也能展現對我們對細節的堅持。這是一次完整的實踐,證明了設計真的能讓繁雜的交易變得更簡單、流暢。