国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

隨著互聯(lián)網(wǎng)技術和手機軟硬件的高速發(fā)展，手機的使用場景已經(jīng)融入到日常生活的點滴中。購物用淘寶下單，餓了在美團點外賣，出行滴滴一下……這些關聯(lián)衣食住行的應用，都離不開一個核心環(huán)節(jié)：線上支付。

手機支付通?？梢约毞譃閮煞N場景：“手機APP應用中集成支付功能”、“手機網(wǎng)頁應用中集成支付功能”。本文以支付寶和微信支付舉例分析“手機網(wǎng)頁應用（以下簡稱H5）進行支付的交互體驗設計”。

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

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

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

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

2. 兩種支付方式的異同

相同點：

• 都是調用第三方應用提供的支付功能。
• 應用內支付或者調起第三方客戶端支付，取決于第三方提供的接口規(guī)則。

不同點：

• APP內支付流程的頁面跳轉路徑是明確的，無論是跳轉至第三方客戶端支付、還是在APP內調起第三方網(wǎng)頁支付，支付成功或失敗，都將在“訂單支付”頁面明確獲知訂單狀態(tài)。
• H5支付是在手機瀏覽器中打開的網(wǎng)頁，在結算臺頁面選擇支付方式確認支付，可以選擇當前頁、或者選擇新開頁面調起第三方支付。并且調起的第三方支付頁面由第三方?jīng)Q定，商戶只能在限定的規(guī)則內調整。
• 由于手機瀏覽器系統(tǒng)自帶前進與后退按鈕，并且通常情況下無法對系統(tǒng)自帶的按鈕做限制。這就意味著H5支付，無論支付成功或失敗，都要考慮用戶點擊系統(tǒng)回退按鈕的跳轉規(guī)則。

二、H5支付方式選擇支付寶支付

支付寶是淘寶與阿里系其他產(chǎn)品線上支付的唯一或者主要支付方式，已經(jīng)成為國內市場份額第一的移動支付應用。以下舉例說明手機網(wǎng)頁中選擇支付寶支付的交互體驗設計。

1. 任務流程圖

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

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

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

2. 支付狀態(tài)說明

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

根據(jù)支付狀態(tài)說明頁面跳轉：

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

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

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

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

點擊“繼續(xù)瀏覽器付款”，當前頁面調起支付寶網(wǎng)頁支付收銀臺，下圖示意：若成功登錄賬號并且在后續(xù)付款頁面支付成功，則展示支付寶網(wǎng)頁端支付成功頁，點擊完成，當前頁面刷新至商戶自定義的“支付結果頁”。

點擊“已完成付款”：若已經(jīng)支付成功，當前頁刷新至商戶自定義的“支付結果頁”。若支付失敗，則出現(xiàn)彈框（下圖示意），點擊繼續(xù)付款，當前頁調起支付寶網(wǎng)頁收銀臺頁面，后續(xù)流程同上；點擊取消，停留在當前頁面。

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

系統(tǒng)自帶的回退按鈕規(guī)則：

1. 在訂單支付頁面，若選擇當前頁面調起支付寶支付，則訂單支付頁面跳轉為支付寶支付路由頁面（官方中間頁），無論最終訂單是否支付成功，點擊瀏覽器的回退按鈕，頁面將逐頁回退。
2. 在訂單支付頁面，若選擇新開頁面調起支付寶支付，無論最終訂單是否支付成功，僅支持回退到支付寶支付路由頁面（官方中間頁），因為這個中間頁再沒有回退路徑了。如果用戶手動切換瀏覽器后臺，回到之前的訂單支付頁：

若已支付成功，頁面刷新至商戶自定義的“支付結果頁”，此時若點擊系統(tǒng)回退按鈕：頁面將逐級回退。這里需要注意：回退過程中是否能夠及時判斷訂單狀態(tài)，將決定回退到最終的頁面。

若未支付成功，頁面停留在“訂單支付”頁面，此時點擊系統(tǒng)回退按鈕：頁面將逐級回退。回退頁面的狀態(tài)由具體需求決定，比如對于某個訂單，先確認后支付，若已經(jīng)確認提交了訂單但未支付，回退之后無需再次確認，后續(xù)流程中直接支付即可。

三、H5支付方式選擇微信支付

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

1. 任務流程圖

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

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

2. 支付狀態(tài)說明

根據(jù)支付狀態(tài)說明頁面跳轉：

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

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

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

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

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

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

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

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

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

總結

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

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

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

參考鏈接：

支付寶文檔中心-手機網(wǎng)站支付

微信支付開放文檔

#專欄作家#

Viksea，微信公眾號：Viksea的設計思考（ID：viksea-ux），人人都是產(chǎn)品經(jīng)理專欄作家。關注電商領域產(chǎn)品業(yè)務和用戶體驗，擅長邏輯分析。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。

題圖來自Unsplash，基于CC0協(xié)議。