金融科技應用程式 UI 設計：讓金錢任務清楚又安心
金融科技應用程式 UI 設計實用指南，涵蓋餘額脈絡、交易狀態、金融表單、確認步驟、無障礙錯誤提示與檢查清單。
金融介面要求使用者在小螢幕上解讀數字並做出影響重大的選擇。餘額即使正確，缺少脈絡仍可能令人困惑；轉帳表單即使看起來簡單，也可能讓人不確定手續費、處理時間或最後一步的意義。實用的金融科技應用程式 UI 設計會讓目前狀態清楚可讀，並給使用者機會檢查輸入內容。
本文是設計指南，不是財務、投資或法律建議。範例均為假設情境，介面模式本身無法證明符合法規或具備安全性。從任務出發，使用淺白文字，讓狀態變化與下一步容易找到。
重點摘要
- 在餘額旁清楚標示帳戶名稱、幣別，以及相關的時間或可用金額脈絡。
- 以文字描述交易狀態，並說明使用者接下來能做什麼。
- 讓金融表單保持聚焦，標籤清楚可見，並在格式或欄位需要修正時提供協助。
- 在執行操作前檢查關鍵資訊，之後提供明確回饋；結果尚未確定時也一樣。
- 善用文字、結構和無障礙控制項，避免只靠顏色或視覺位置傳達意義。
讓餘額在脈絡中清楚可讀
大數字本身無法說明意義。請指出它屬於哪個帳戶，並使用熟悉的符號或代碼顯示幣別。如果產品區分目前、可用、待處理或已投資金額，請直接標明這些概念，必要時加以解釋。避免用幾乎相同的樣式呈現兩種不同餘額，卻不提供定義。
脈絡也可能包括金額的最後更新時間，或哪些活動仍待處理。選擇能幫助使用者理解畫面的細節，而不是加入裝飾性數字。使用一致的數字格式和足夠的間距，讓數字、小數點與負號容易區分。帳戶名稱很長時，應保留足以辨別不同帳戶的文字，而不只依靠顏色或圖示。
- 在金額附近明確標示帳戶與幣別。
- 以淺白文字解釋「可用」或「待處理」等專門術語。
- 放大文字及使用輔助技術時，金額和狀態仍應容易理解。
將交易狀態呈現為持續變化的狀態
交易是一個過程，不只是歷史清單中的一列。視情況為每筆交易提供簡潔的狀態、日期、金額及交易對象或目的地。狀態標籤必須以文字顯示；顏色或圖示可以輔助，但不能單獨承載意義。依照產品的實際狀態，區分等待中、已完成、遭拒絕或需要注意的活動。
例如，假設有一筆轉給 Alex 的 45.00 歐元轉帳，可能先顯示「預定於 11 月 4 日」，接著是「處理中」，最後是「已完成」。如果送出後連線逾時，在沒有證據時不要斷言成功或失敗。應說明狀態尚不可用、如何再次查詢，並讓使用者清楚知道重試是否可能建立另一筆請求。確切措辭與可用操作取決於產品真實的交易行為。
| 狀態範例 | 畫面可以說明的事 | 有用的下一步 |
|---|---|---|
| 已排程 | 預定日期與目的地 | 若產品允許，可檢視或編輯 |
| 處理中 | 請求仍在進行中 | 等待或查看詳細資訊 |
| 已完成 | 已記錄的結果與日期 | 開啟收據或交易明細 |
| 需要注意 | 無法完成的事項 | 檢視所述問題或尋求協助 |
設計能避免不必要困惑的金融表單
在任務需要時才要求資料，並將相關欄位分組，讓表單順序合理。使用「收款人」或「金額」等持續顯示的標籤；預留位置文字只是範例，不能取代標籤。如果欄位要求特定格式，請在輸入前說明，例如金額是否接受小數位，或欄位應填入哪種識別碼。Apple 的資料輸入指南建議清楚說明所需資訊、減少不必要的輸入，並在使用者輸入時驗證數值。
選擇符合資訊類型的輸入控制項，並允許使用者修正輸入。讓選填欄位明確標示為選填，必填欄位也容易辨識。如果某個選擇會帶來後果，請用淺白文字描述各選項，而非讓使用者從簡短代碼猜測意義。欄位指引應靠近相關控制項，以便畫面重排或放大後仍可理解。
提供實用的檢查與確認步驟
在執行影響重大的操作前，摘要使用者即將送出的資訊：來源、目的地、金額、日期，以及流程中相關的任何已顯示費用或時間。將最重要的決策資訊放在一起，讓編輯路徑容易找到。主要操作應描述實際行為，例如「安排轉帳」，而不是模糊的「繼續」。
確認畫面應回答「發生了什麼？」以及「我現在能做什麼？」參考編號或收據檢視可方便日後查找。不要把按下按鈕當作底層操作已成功的證據；介面應反映產品回傳的實際結果。
- 確保摘要與輸入值及所選選項一致。
- 可行時，讓返回及編輯操作保留使用者已輸入的內容。
- 送出後，說明請求是已收到、處理中，還是已有確認結果。
- 回應結果不確定時，先說明如何查詢目前狀態，再邀請使用者重新送出。
讓錯誤與更新具備無障礙性
偵測到輸入錯誤時，指出欄位並用文字描述問題。「金額無效」不如說明可接受的格式或缺少的值有用。保留有效的輸入，讓使用者修正單一問題時不必重頭開始。W3C 的 WCAG 2.2 指引要求辨識並描述偵測到的輸入錯誤，且在需要輸入時提供標籤或說明。
狀態更新同樣重要。如果頁面從「處理中」變為「已完成」，但焦點沒有移動，仍應讓輔助技術可以辨識這項更新。WCAG 2.2 將狀態訊息描述為無須變更情境，就能傳達結果、等待、進度或錯誤的變化。警示應與重要程度相稱：宣告有意義的變化，但不要因每次視覺重新整理而反覆打斷使用者。
在實作後的介面中，檢查對比度、文字縮放、鍵盤或切換開關操作，以及螢幕閱讀器讀出的名稱。使用清楚的標題和控制項標籤，不要只靠顏色表示成功、錯誤或交易方向。Apple 的設計原則強調明確回饋與協助使用者從錯誤中復原；這些是有用的目標，但實際無障礙性仍須評估完整產品。
金融科技介面檢查清單
從起始餘額到最後狀態，走過一個典型任務。檢查一般路徑、一次修正，以及連線緩慢等中斷情況。比較資料庫中相關的行動裝置畫面，看看不同介面如何安排資訊和操作；再根據自己產品的真實行為評估流程。
- 使用者能否辨識餘額所屬的帳戶與幣別？
- 待處理與已完成狀態是否以文字清楚命名和呈現？
- 每個欄位是否都有可見標籤，以及必要的格式說明？
- 使用者送出前能否檢查目的地、金額與時間？
- 錯誤是否指出問題並提供實際可行的修正方式？
- 不靠顏色、精細視力或移動焦點，使用者是否仍能感知更新？
- 結果尚不確定時，介面是否說明重試前該如何查詢？
