中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

手機(jī)支付通?？梢约?xì)分為兩種場(chǎng)景：“手機(jī)APP應(yīng)用中集成支付功能”、“手機(jī)網(wǎng)頁(yè)應(yīng)用中集成支付功能”。本文以支付寶和微信支付舉例分析“手機(jī)網(wǎng)頁(yè)應(yīng)用（以下簡(jiǎn)稱H5）進(jìn)行支付的交互體驗(yàn)設(shè)計(jì)”。

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

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

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

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

2. 兩種支付方式的異同

相同點(diǎn)：

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

不同點(diǎn)：

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

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

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

1. 任務(wù)流程圖

從以上支付流程中，我們能明確以下兩點(diǎn)：

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

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

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

具體支付過(guò)程中會(huì)根據(jù)支付是否成功，決定頁(yè)面的跳轉(zhuǎn)；另外手機(jī)網(wǎng)頁(yè)到底是當(dāng)前頁(yè)調(diào)起支付、還是新開(kāi)頁(yè)面調(diào)起支付，對(duì)應(yīng)的回退跳轉(zhuǎn)規(guī)則是不同的。

根據(jù)支付狀態(tài)說(shuō)明頁(yè)面跳轉(zhuǎn)：

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

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

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

點(diǎn)擊“使用支付寶APP付款”，再次申請(qǐng)打開(kāi)支付寶支付。

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

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

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

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

1. 在訂單支付頁(yè)面，若選擇當(dāng)前頁(yè)面調(diào)起支付寶支付，則訂單支付頁(yè)面跳轉(zhuǎn)為支付寶支付路由頁(yè)面（官方中間頁(yè)），無(wú)論最終訂單是否支付成功，點(diǎn)擊瀏覽器的回退按鈕，頁(yè)面將逐頁(yè)回退。
2. 在訂單支付頁(yè)面，若選擇新開(kāi)頁(yè)面調(diào)起支付寶支付，無(wú)論最終訂單是否支付成功，僅支持回退到支付寶支付路由頁(yè)面（官方中間頁(yè)），因?yàn)檫@個(gè)中間頁(yè)再?zèng)]有回退路徑了。如果用戶手動(dòng)切換瀏覽器后臺(tái)，回到之前的訂單支付頁(yè)：

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

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

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

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

1. 任務(wù)流程圖

在以上支付流程中，我們能明確以下兩點(diǎn)：

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

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

根據(jù)支付狀態(tài)說(shuō)明頁(yè)面跳轉(zhuǎn)：

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

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

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

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

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

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

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

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

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

總結(jié)

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

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

希望在后續(xù)項(xiàng)目中遇到類似支付應(yīng)用場(chǎng)景時(shí)，能夠?qū)δ阌兴鶐椭?/p>

參考鏈接：

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

微信支付開(kāi)放文檔

#專欄作家#

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

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

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