付款流程與介面優化

改善舊款付款介面與流程，明細清晰，自動計算金額及折扣，讓您輕鬆結帳

舊版功能

僅提供金額輸入框，缺乏自動計算功能，使用戶在結帳時需手動計算金額。同時，缺乏付款明細，導致結帳資訊不清晰。

優化介面

透過創意的改版，賦予行動端體育賽事預測應用更多趣味性，以增加互動樂趣，吸引使用者更深度參與與預測

確保界面設計清晰易懂，支付按鈕的尺寸設置為較大的比例，有助於提升用戶的支付率和整體用戶體驗。

考慮到平台有兩種代幣，加入自動計算功能納入結帳流程中，並添加折抵上限和不足餘額的提示，將有助於用戶了解適用的折抵情況，避免混淆。

用戶在輸入金額後可以立即看到結帳詳情，增加透明度和清晰度。

‍規劃流程

主色

文字色號

＃D52665

＃000000

＃09437F

＃494A49

＃D52665

＃C7C2C2

＃D52665

主色

＃D52665

＃09437F

文字色號

＃000000

＃C7C2C2

＃494A49

按鈕

默認狀態

border:1.2pt solid #D52665;
background-color:transparent ;
color:#D52665;

默認狀態

border:1.2pt solid #D52665;
background-color:#D52665 ;
color:#ffffff;

不可點擊

border:1.2pt solid #909090;
background-color:#909090;
color:#ffffff;font-weight: 500;

點擊狀態

background-color:#007bff;
border:1.2pt solid #007bff;
color: rgba(255, 255, 255, 0.61);

點擊狀態

background-color:#c3205c ;
color: rgba(255, 255, 255, 0.61);
‍

關閉按鈕

默認狀態

點及效果

按鈕

默認狀態

border:1.2pt solid #D52665;
background-color:transparent ;
color:#D52665;

默認狀態

border:1.2pt solid #D52665;
background-color:#D52665 ;
color:#ffffff;

不可點擊

border:1.2pt solid #909090;
background-color:#909090;
color:#ffffff;font-weight: 500;

點擊狀態

background-color:#007bff;
border:1.2pt solid #007bff;
color: rgba(255, 255, 255, 0.61);

點擊狀態

background-color:#c3205c ;
color: rgba(255, 255, 255, 0.61);
‍

關閉按鈕

默認狀態

點及效果