随着互聯網技術和手機軟硬件的高速發展，手機的使用場景已經融入到日常生活的點滴中。購物用淘寶下單，餓了在美團點外賣，出行滴滴一下……這些關聯衣食住行的應用，都離不開一個核心環節：線上支付。

　　手機支付通常可以細分為兩種場景：“手機APP應用中集成支付功能”、“手機網頁應用中集成支付功能”。本文以支付寶和微信支付舉例分析“手機網頁應用（以下簡稱H5）進行支付的交互體驗設計”。

　　一、APP支付與H5支付的異同

　　1. 什麼是APP支付和H5支付？

　　APP支付是指“商戶在移動端APP中集成了支付寶支付、微信支付，或者其他第三方支付功能”。

　　H5支付是指“商戶在移動端網頁（觸屏版手機浏覽器）應用中集成了支付寶支付、微信支付，或者其他第三方支付功能”。

　　2. 兩種支付方式的異同

　　相同點：

　　都是調用第三方應用提供的支付功能。應用内支付或者調起第三方客戶端支付，取決于第三方提供的接口規則。 不同點：

　　APP内支付流程的頁面跳轉路徑是明确的，無論是跳轉至第三方客戶端支付、還是在APP内調起第三方網頁支付，支付成功或失敗，都将在“訂單支付”頁面明确獲知訂單狀态。H5支付是在手機浏覽器中打開的網頁，在結算台頁面選擇支付方式确認支付，可以選擇當前頁、或者選擇新開頁面調起第三方支付。并且調起的第三方支付頁面由第三方決定，商戶隻能在限定的規則内調整。由于手機浏覽器系統自帶前進與後退按鈕，并且通常情況下無法對系統自帶的按鈕做限制。這就意味着H5支付，無論支付成功或失敗，都要考慮用戶點擊系統回退按鈕的跳轉規則。二、H5支付方式選擇支付寶支付 支付寶是淘寶與阿裡系其他産品線上支付的唯一或者主要支付方式，已經成為國内市場份額第一的移動支付應用。以下舉例說明手機網頁中選擇支付寶支付的交互體驗設計。

　　1. 任務流程圖

　　從以上支付流程中，我們能明确以下兩點：

　　（1）支付寶提供了官方設置的中間頁，并且此頁無法自定義删除，下圖示意。

　　（2）支付寶考慮的場景非常全面：若用戶已安裝支付寶客戶端，可直接打開支付寶完成支付。若用戶未安裝支付寶，提供了引導至應用商店下載并安裝支付寶的路徑（下圖1示意）；也可以選擇在網頁端調起“支付寶網頁收銀台”頁面（下圖2示意），登錄賬号輸入密碼之後完成支付。

　　2. 支付狀态說明

　　具體支付過程中會根據支付是否成功，決定頁面的跳轉；另外手機網頁到底是當前頁調起支付、還是新開頁面調起支付，對應的回退跳轉規則是不同的。

　　根據支付狀态說明頁面跳轉：

　　（1）若用戶已安裝支付寶客戶端，在訂單支付頁面點擊支付，調起支付寶提供的中間頁，并出現彈框嘗試喚起支付寶客戶端，參見下圖示意：點擊打開，跳轉到支付寶APP，在支付寶的确認支付界面完成支付；點擊取消，停留在當前支付寶支付路由頁面（中間頁）。

　　a.若在支付寶中支付成功，則切回至浏覽器中，頁面刷新至商戶自定義的“支付結果頁”。

　　b.若在支付寶中支付失敗，用戶手動回到浏覽器中，則當前頁面呈現支付寶支付路由頁面（官方提供的中間頁）：

　　點擊“使用支付寶APP付款”，再次申請打開支付寶支付。

　　點擊“繼續浏覽器付款”，當前頁面調起支付寶網頁支付收銀台，下圖示意：若成功登錄賬号并且在後續付款頁面支付成功，則展示支付寶網頁端支付成功頁，點擊完成，當前頁面刷新至商戶自定義的“支付結果頁”。

　　點擊“已完成付款”：若已經支付成功，當前頁刷新至商戶自定義的“支付結果頁”。若支付失敗，則出現彈框（下圖示意），點擊繼續付款，當前頁調起支付寶網頁收銀台頁面，後續流程同上；點擊取消，停留在當前頁面。

　　（2）若用戶未安裝支付寶客戶端，可以選擇下載安裝支付寶APP，或者使用支付寶網頁收銀台頁面支付，參見上面的流程。

　　系統自帶的回退按鈕規則：

　　在訂單支付頁面，若選擇當前頁面調起支付寶支付，則訂單支付頁面跳轉為支付寶支付路由頁面（官方中間頁），無論最終訂單是否支付成功，點擊浏覽器的回退按鈕，頁面将逐頁回退。在訂單支付頁面，若選擇新開頁面調起支付寶支付，無論最終訂單是否支付成功，僅支持回退到支付寶支付路由頁面（官方中間頁），因為這個中間頁再沒有回退路徑了。如果用戶手動切換浏覽器後台，回到之前的訂單支付頁： 若已支付成功，頁面刷新至商戶自定義的“支付結果頁”，此時若點擊系統回退按鈕：頁面将逐級回退。這裡需要注意：回退過程中是否能夠及時判斷訂單狀态，将決定回退到最終的頁面。

　　若未支付成功，頁面停留在“訂單支付”頁面，此時點擊系統回退按鈕：頁面将逐級回退。回退頁面的狀态由具體需求決定，比如對于某個訂單，先确認後支付，若已經确認提交了訂單但未支付，回退之後無需再次确認，後續流程中直接支付即可。

　　三、H5支付方式選擇微信支付 微信起初基于社交屬性積累了超過10億的用戶量，逐步打造了微信生态，其中微信支付近年來也成為國内市場份額第二的移動支付工具，有超越支付寶的架勢。以下舉例說明手機網頁中選擇微信支付的交互體驗設計。

　　1. 任務流程圖

　　在以上支付流程中，我們能明确以下兩點：

　　微信支付沒有設置官方中間頁，目前呈現的是空白頁面，參見下圖中彈框背景是空白頁面。對于未安裝微信客戶端的用戶，需要選擇其他支付方式付款。

　　2. 支付狀态說明

　　根據支付狀态說明頁面跳轉：

　　（1）若用戶已安裝微信客戶端，在訂單支付頁面點擊支付，進入微信支付流程，并出現彈框嘗試喚起微信客戶端，參見下圖示意：點擊打開，進入微信APP的支付界面；點擊取消，停留在當前空白頁面。

　　A. 若在微信中支付成功，切回至浏覽器中，頁面刷新至商戶自定義的“支付結果頁”。

　　B. 若在微信中支付失敗，用戶手動回到浏覽器中，則當前頁面呈現微信支付官方提供的空白頁：

　　由于微信支付官方提供的中間頁是空白頁，而我們又不能讓用戶在未支付成功的情況下，看到這個空白頁。所以這裡提供以下三種解決方案：

　　a. 在訂單支付頁面直接喚起微信客戶端，當出現喚起微信客戶端的彈框時，在訂單支付頁面也出現一個彈框：若在微信中支付成功，返回至該頁面點擊“已完成付款”，當前頁面刷新至商戶自定義的支付結果頁；若取消支付或者在微信中沒有支付成功，點擊“已完成付款”，刷新頁面判斷訂單狀态，未支付則仍停留在商戶的訂單支付頁。

　　b. 自定義頁面：在微信中支付成功的跳轉規則同上，若取消支付或者在微信中沒有支付成功，則當前空白頁自動跳轉為“商戶自定義的中間頁”，可以在此中間頁引導用戶查看訂單，重新發起支付流程。參見下圖小米商城的做法。

　　c. 自定義中間頁：雖然微信支付官方提供的中間頁是空白頁，如果微信支付的規則允許，商戶可以自定義中間頁（根據近期做的一個實踐項目，微信允許這種做法）。參見下圖示意：若支付成功，點擊“已完成付款”，頁面刷新至商戶自定義的支付結果頁。若支付失敗，點擊“已完成付款”，頁面停留在當前中間頁，點擊“查看訂單”跳轉至訂單列表頁。

　　（2）若用戶未安裝微信客戶端，會出現下圖示意的彈框提示，隻能選擇其他支付方式付款。

　　系統自帶的回退按鈕規則：應用場景、跳轉邏輯規則和注意事項，類似于支付寶。

　　總結 以上通過支付寶和微信支付兩個具體案例，分析了手機網頁支付存在的跳轉邏輯和注意事項。其中有不少細節點值得大家思考：

　　比如為什麼微信沒有提供像支付寶那樣的中間頁，而是把中間頁的設置交給了商戶自己決定？為什麼微信沒有提供網頁端收銀台，沒有下載微信APP就無法使用微信支付？思考這些問題，肯定是要加入業務層面的考量。

　　希望在後續項目中遇到類似支付應用場景時，能夠對你有所幫助。

　　參考鍊接：

　　支付寶文檔中心-手機網站支付

　　微信支付開放文檔

　　#專欄作家#

　　Viksea，Viksea的設計思考（ID：viksea-ux），人人都是産品經理專欄作家。關注電商領域産品業務和用戶體驗，擅長邏輯分析。

　　本文原創發布于人人都是産品經理。未經許可，禁止轉載。

　　題圖來自Unsplash，基于CC0協議。

　　,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!