# 微信刷臉支付-商戶APP設(shè)計(jì)指引

# 簡介

微信支付人臉識別指引可以幫助商戶在應(yīng)用微信支付SDK的同時，在自身APP建立起配套的營銷以及支付流程，以更好的在自身場景中應(yīng)用微信支付提供的經(jīng)營工具。

# 商戶APP首頁指引

# 設(shè)計(jì)目標(biāo)

采用微信支付商戶APP首頁指引，并啟動運(yùn)營位接口，將可以自動接入微信支付官方優(yōu)惠系統(tǒng)，以提高消費(fèi)場景客單價以及復(fù)購率。

# 效果與說明

	豎屏/前屏	橫屏/前屏
UI指引	圖1-1	圖1-2
UI建議	會員登錄按鈕可以修改為商戶品牌色： 圖1-3 模擬效果非真實(shí)
運(yùn)營位規(guī)格	豎屏banner：1080*1052 （可關(guān)閉）	橫屏banner：1320*1080 （可關(guān)閉）
	浮標(biāo)：183*200 （可關(guān)閉、拖動并本地記憶）
接口文檔	運(yùn)營位控制接口
接口調(diào)用	運(yùn)營位接口調(diào)用說明： 1. updateWxpayfaceBannerState 0時，即展示運(yùn)營位大圖效果時： 當(dāng)切換其他頁面需關(guān)閉廣告頁運(yùn)營位大圖，調(diào)用updateWxpayfaceBannerState 1來進(jìn)行關(guān)閉； 當(dāng)回到廣告頁需展示運(yùn)營位大圖時，調(diào)用updateWxpayfaceBannerState 0進(jìn)行開啟； * 請注意接口調(diào)用的時機(jī)，否則跳轉(zhuǎn)頁面時運(yùn)營位將不會自動關(guān)閉 2. updateWxpayfaceBannerState 2，即展示運(yùn)營小浮標(biāo)效果時： 接口的調(diào)用可根據(jù)實(shí)際需要進(jìn)行更改，需要關(guān)閉則調(diào)用updateWxpayfaceBannerState 1來進(jìn)行關(guān)閉； 也可繼續(xù)調(diào)用updateWxpayfaceBannerState 2進(jìn)行小浮標(biāo)展示； 當(dāng)需要展示大圖效果時，調(diào)用updateWxpayfaceBannerState 0來開啟即可。
UI源文件	豎屏源文件下載	橫屏源文件下載

# 適用屏幕

分辨率	屏幕方向	適用范圍	測試結(jié)果
1920*1080	橫豎屏通用	大屏/桌面前屏	推薦使用該分辨率，以呈現(xiàn)最佳效果
600*1024	豎	大屏/桌面前屏	大圖未適配，建議使用小浮標(biāo)
1920*1200	橫	大屏/桌面前屏	大圖未適配，建議使用小浮標(biāo)
1024*768	橫	大屏/桌面前屏	大圖未適配，建議使用小浮標(biāo)
800*1280	豎	大屏/桌面前屏	大圖未適配，建議使用小浮標(biāo)
1366*768	豎	大屏/桌面前屏	大圖未適配，建議使用小浮標(biāo)
1280*1024	橫	大屏/桌面前屏	大圖未適配，建議使用小浮標(biāo)

*如果你的設(shè)備條件不在以上范圍，建議不采用官方指引，以免影響消費(fèi)者操作。你也可以聯(lián)系對接的運(yùn)營人員，并提供相關(guān)資料讓我們?yōu)槟氵m配對應(yīng)指引。

# 商戶刷臉支付設(shè)計(jì)指引

該文檔為接入微信支付刷臉服務(wù)的商戶、服務(wù)商、設(shè)備商提供的微信支付官方標(biāo)準(zhǔn)人臉應(yīng)用UI方案，可作為商戶應(yīng)用微信支付刷臉服務(wù)的指引，以及作為設(shè)備驗(yàn)收標(biāo)準(zhǔn)。

商戶接入時請避免以下情況：

1. 商戶APP禁止用「微信」名義采集用戶手機(jī)號碼：

• 禁止在任何非微信支付流程中，以「微信」名義要求用戶輸入手機(jī)號；
  
• 如商戶要求支付必須是會員登入，建議采用微信支付會員登錄接口，通過刷臉即可輕松驗(yàn)證，避免會員每次消費(fèi)都要輸入手機(jī)號的繁瑣體驗(yàn)。
  詳情請瀏覽：微信支付刷臉會員介紹

2. 用戶選擇微信刷臉登錄/支付后直接調(diào)用微信刷臉SDK

• 啟動SDK的過程中，無需加載其他元素；
• 啟動SDK的過程中，無需跳轉(zhuǎn)其他頁面。

# 無人自助設(shè)備場景

本指引面向設(shè)備包括以下內(nèi)容：

• 自助售貨機(jī)（含牛奶機(jī)）
• 充電寶設(shè)備
• 游藝機(jī)
• 自助一體機(jī)
• 自助存取柜
• 充電樁設(shè)備
• 取票機(jī)

無人自助設(shè)備場景會根據(jù)“刷臉在線SDK”與“刷臉離線SDK”進(jìn)行分類詳述。

# 【刷臉在線SDK適用】

# 一、 無人自助設(shè)備物料指引

目前微信支付無人自助官方物料已覆蓋標(biāo)準(zhǔn)無人售貨機(jī)、大屏無人售貨機(jī)以及外掛獨(dú)立設(shè)備。樣式包含絲印、貼紙、整機(jī)包裝和外延物料以配合設(shè)備出廠或存量改造的用途。

設(shè)備類型	絲印	貼紙	整機(jī)包裝	外延物料
標(biāo)準(zhǔn)無人售貨機(jī)	√	√	√	√
無人售貨機(jī)（大屏）	√	√	√
自助存取柜外掛機(jī)	√	√	√
文件下載	點(diǎn)擊下載

# 二、支付分人臉應(yīng)用指引

以下是自助冰箱「刷臉開門」示意。其他設(shè)備可自行更改按鈕文案，如「刷臉租借充電寶」。

1. 商戶頁面設(shè)計(jì)指引

豎屏應(yīng)用指引	橫屏應(yīng)用指引	點(diǎn)擊區(qū)域

2. 流程演示

自助冰箱刷臉開門

刷臉租借充電寶

3. 設(shè)計(jì)素材下載

N0.	要素	圖示	下載鏈接
1	豎屏按鈕		點(diǎn)擊下載
2	橫屏按鈕		點(diǎn)擊下載
3	微信支付標(biāo)準(zhǔn)Logo		點(diǎn)擊下載
4	掃碼圖標(biāo)		點(diǎn)擊下載

# 三、自助售貨機(jī)人臉應(yīng)用指引

以下是自助售貨機(jī)UI指引，案例示意切換刷臉支付與掃碼支付。如果有更多支付方式，可以將「掃碼支付」替換為更多支付方式。

1. 商戶頁面設(shè)計(jì)指引

刷臉支付（默認(rèn)）	聚合掃碼支付	更多支付方式	非聚合掃碼支付

2. 流程演示

3. 支付選擇頁推薦語音（接入可選項(xiàng)）

語音文案	建議使用微信刷臉支付，安全快速
語音格式	.wav / .mp3
相關(guān)機(jī)制	點(diǎn)擊微信刷臉支付時需停止播放，以免語音沖突
語音下載	標(biāo)準(zhǔn)女聲（推薦）
	活力女聲
	大氣女聲
	溫柔女聲
	翻譯君男聲

4. 設(shè)計(jì)素材下載

N0.	要素	圖示	下載鏈接
1	豎屏按鈕樣式1		點(diǎn)擊下載
2	橫屏按鈕樣式1		點(diǎn)擊下載
3	按鈕樣式2		點(diǎn)擊下載
4	微信支付標(biāo)準(zhǔn)Logo		點(diǎn)擊下載

# 【刷臉離線SDK適用】

# 牛奶機(jī)設(shè)計(jì)指南

基于微信刷臉支付團(tuán)隊(duì)對K12行業(yè)的調(diào)研發(fā)現(xiàn)，沉淀出該設(shè)計(jì)指南。旨在為合作伙伴提供完整高效、準(zhǔn)確的設(shè)計(jì)指南，實(shí)現(xiàn)用戶與合作伙伴的共贏。

# 一、整體框架

方案整體明確了界面的核心信息，其中包含品牌信息、支付信息與支付操作，根據(jù)信息的優(yōu)先級進(jìn)行劃分，確定了以下結(jié)構(gòu)。

# 二、控制頁面高度

考慮到K12場景下學(xué)生的平均身高，規(guī)范整體的頁面高度居中，幫助學(xué)生降低閱讀成本。

# 三、克制使用明亮色彩

K12場景學(xué)生容易被顏色醒目的元素吸引，視覺設(shè)計(jì)上應(yīng)避免使用過度明亮的色彩，而應(yīng)專注于頁面本身的信息上。

# 四、統(tǒng)一頁面大小

牛奶機(jī)整體的體驗(yàn)鏈路較短，為了最大化地降低學(xué)生對于頁面信息的理解成本。因此需始終保持頁面的大小一致，避免注意力的分散。

# 五、強(qiáng)調(diào)核心操作

K12場景下的學(xué)生缺乏成年人具備的視覺篩選能力，無法分辨界面中的重要元素和次要因素。因此需要結(jié)合學(xué)生對明亮色彩吸引的特性來設(shè)計(jì)每個頁面的核心操作。

# 六、明確支付結(jié)果

K12場景學(xué)生不能進(jìn)行復(fù)雜信息的識別，因此在最后的結(jié)果頁應(yīng)盡量避免無關(guān)的信息，強(qiáng)調(diào)支付結(jié)果信息。

# 七、異常可理解

支付失敗包含若干種情況，當(dāng)學(xué)生遇到支付失敗的結(jié)果時應(yīng)提供對應(yīng)的原因和解決方案，使學(xué)生在下次使用中支付成功。

資源下載：
完整設(shè)計(jì)指南：《K12牛奶機(jī)設(shè)計(jì)指南》
視覺設(shè)計(jì)切圖：《K12牛奶機(jī)設(shè)計(jì)切圖》
語音播報(bào)鏈接：《語言播報(bào)》

# 桌面收銀設(shè)備場景

# 一、 指引說明

以下為桌面收銀場景下商戶刷臉支付選擇頁設(shè)計(jì)指引，案例示意橫豎屏兩種桌面收銀設(shè)備的刷臉+付款碼樣式。

本指引適用的設(shè)備類型包括：

• 桌面單屏刷臉設(shè)備
• 桌面雙屏刷臉設(shè)備
• 桌面雙屏POS設(shè)備
• 桌面稱重設(shè)備

桌面刷臉收銀設(shè)備（豎屏）	雙屏刷臉POS設(shè)備（橫屏）

# 二、商戶APP啟動微信支付刷臉服務(wù)指引

1. 自助模式
   該規(guī)范適用于自帶掃碼器的自助功能刷臉設(shè)備：

2. 人工收銀聚合支付模式
   該規(guī)范適用于以下設(shè)備：
   （1）自帶掃碼器的雙屏POS刷臉設(shè)備；
   （2）商戶掃碼支持聚合支付；
   （3）支付發(fā)起后請引導(dǎo)用戶自主選擇支付方式。
   

3. 人工收銀非聚合支付模式
   該規(guī)范適用于以下設(shè)備：
   （1）自帶掃碼器的雙屏POS刷臉設(shè)備；
   （2）商戶掃碼不支持聚合支付；
   （3）如用戶選擇微信支付，由用戶在客顯屏選擇微信刷臉支付還是掃碼支付。

# 三、 設(shè)計(jì)素材下載

N0.	要素	圖示	下載鏈接
1	豎屏按鈕樣式		點(diǎn)擊下載
2	橫屏按鈕樣式		點(diǎn)擊下載
	付款碼圖標(biāo)		點(diǎn)擊下載

語音文案	建議使用微信刷臉支付，安全快速
語音格式	.wav / .mp3
相關(guān)機(jī)制	點(diǎn)擊微信刷臉支付時需停止播放，以免語音沖突
語音下載	標(biāo)準(zhǔn)女聲（推薦）
	活力女聲
	大氣女聲
	溫柔女聲
	翻譯君男聲

# 自助大屏設(shè)備場景

# 一、指引說明

以下為自助大屏場景下商戶刷臉支付選擇頁設(shè)計(jì)指引，案例示意以刷臉支付方式為主兼顧其他多種支付的切換樣式。官方贈送設(shè)備，如僅有刷臉+付款碼兩種模式時，建議直接在頁面底部展示掃碼區(qū)域示意（箭頭指向掃碼區(qū)）。

本指引適用的設(shè)備類型包括：

• 超市自助收銀設(shè)備
• 餐飲自助點(diǎn)餐設(shè)備
• 加油站自助大屏設(shè)備

宮格式多種支付	列表式多種支付	僅有刷臉+付款碼兩種模式

# 二、流程演示

# 三、設(shè)計(jì)素材下載

N0.	要素	圖示	下載鏈接
1	按鈕樣式		點(diǎn)擊下載
2	列表式多種支付按鈕		點(diǎn)擊下載
	付款碼圖標(biāo)		點(diǎn)擊下載

# 團(tuán)餐機(jī)場景

# 2021刷臉支付K12團(tuán)餐設(shè)計(jì)指南

基于微信刷臉支付團(tuán)隊(duì)對K12行業(yè)的調(diào)研發(fā)現(xiàn)，沉淀出該設(shè)計(jì)指南。旨在為合作伙伴提供完整高效，準(zhǔn)確的設(shè)計(jì)指南，實(shí)現(xiàn)用戶與合作伙伴的共贏。

# 一、整體框架

方案整體明確了界面的核心信息，其中包含學(xué)生/指引身份信息、支付信息/操作、時間信息、品牌傳達(dá)，根據(jù)信息的優(yōu)先級進(jìn)行劃分，確定了以下結(jié)構(gòu)。

# 二、主要模式

根據(jù)學(xué)校實(shí)際的使用場景，為K12團(tuán)餐刷臉支付提供了三種支付模式，其中定額模式適用于固定菜品窗口，自由模式適用于多種菜品類型窗口，分餐定額模式適用于符合固定規(guī)律菜品窗口。

# 三、定額/分餐定額模式

定額/分餐定額模式下，設(shè)備支付的金額固定，學(xué)生可主動完成支付操作。

# 四、自由模式

自由模式下，設(shè)備支付金額不固定。需在收銀端完成金額輸入后，學(xué)生方可完成支付操作。

# 五、信息簡練

在K12團(tuán)餐場景中，收銀員及學(xué)生對支付效率要求高，界面設(shè)計(jì)上需保持信息的簡練，降低用戶決策時間。

# 六、明確操作

在明確需要用戶進(jìn)行操作的體驗(yàn)中，需強(qiáng)化點(diǎn)擊按鈕給予用戶主動操作的意愿。

# 七、核心信息

在需要用戶確認(rèn)支付信息的體驗(yàn)中，需減少影響用戶決策的信息突出關(guān)鍵信息。

# 八、及時反饋

在K12團(tuán)餐場景中，收銀員及學(xué)生都需依賴收銀設(shè)備完成對支付過程及結(jié)果的感知，因此需強(qiáng)化反饋。

# 九、明確成功提示

通過支付金額及成功樣式強(qiáng)調(diào)支付成功的狀態(tài)。

# 十、明確刷臉提示

刷臉過程中的文字提示需強(qiáng)調(diào)，引導(dǎo)學(xué)生完成識別。

# 十一、給予反饋

學(xué)生點(diǎn)擊確認(rèn)支付后進(jìn)入loading狀態(tài)，同樣需要給予操作的反饋。

# 十二、考慮異常

在K12團(tuán)餐場景中，收銀員及學(xué)生會因?yàn)楦鞣N原因在支付流程中受阻，支付設(shè)備需及時給予對應(yīng)的反饋及引導(dǎo)。

# 十三、支付失敗(1)

支付失敗需給予學(xué)生明確的提示，原因及解決方案。

# 十四、支付失敗(2)

學(xué)生在過程中沒有完成支付也需通過語音提示收銀員支付失敗。

# 十五、正確引導(dǎo)

避免給予學(xué)生無關(guān)的信息。

資源下載：
完整設(shè)計(jì)指南：《微信刷臉支付K12團(tuán)餐設(shè)計(jì)指南_v1.0》
語音播報(bào)鏈接：《K12團(tuán)餐語音播報(bào)》