如何設(shè)計(jì)一個(gè)好的【掃碼】界面？作者分享了自己的一些想法。

由于最近公司的產(chǎn)品要做掃碼功能以輔助web端完成訂單支付，所以就研究了一些主流APP中的掃碼頁(yè)面，這里就從頁(yè)面元素、權(quán)限獲取、提示信息、交互方式等維度做個(gè)簡(jiǎn)單的分析總結(jié)，希望能對(duì)你的設(shè)計(jì)有所幫助。

就我個(gè)人而言，平常用到掃一掃功能比較多的APP是支付寶、微信和摩拜。一般來(lái)說(shuō)，常見(jiàn)的掃碼界面主要包括掃描框、掃描動(dòng)畫(huà)、頁(yè)面標(biāo)題及返回按鈕、掃描類(lèi)型切換、使用幫助等視覺(jué)元素，會(huì)涉及到相冊(cè)、相機(jī)焦距調(diào)節(jié)、手電筒等系統(tǒng)功能權(quán)限的獲取。

1.相機(jī)權(quán)限獲取

獲取手機(jī)系統(tǒng)權(quán)限的時(shí)機(jī)可分為APP安裝時(shí)、首次啟動(dòng)時(shí)、使用特殊功能需要獲取重要敏感權(quán)限時(shí)。APP安裝時(shí)一般能獲取大多數(shù)基本權(quán)限，而隨著用戶(hù)對(duì)隱私權(quán)的重視，用戶(hù)首次啟動(dòng)APP時(shí)往往會(huì)選擇拒絕權(quán)限代替認(rèn)真閱讀以便快速進(jìn)入應(yīng)用內(nèi)部。如果未獲取相機(jī)權(quán)限（即用戶(hù)首次點(diǎn)擊掃一掃打開(kāi)掃碼頁(yè)面或判斷出用戶(hù)關(guān)閉的相機(jī)權(quán)限時(shí)），一般會(huì)在掃碼頁(yè)面彈窗提示用戶(hù)開(kāi)啟相機(jī)權(quán)限（iOS）或在彈窗中直接允許或拒絕開(kāi)啟相機(jī)權(quán)限（Android）。

值得一提的是淘寶支持切換前后置攝像頭，雖然想不到哪里用得到，但絕對(duì)領(lǐng)先一步。

相冊(cè)權(quán)限的獲取跟容易，或者會(huì)和相機(jī)一同獲取，但并非所有的掃碼都要支持從相冊(cè)中識(shí)別，比如摩拜。

2.掃碼頁(yè)面標(biāo)題

掃碼頁(yè)面導(dǎo)航欄標(biāo)題可以像網(wǎng)易云音樂(lè)一樣叫做掃一掃，或者像支付寶頁(yè)面一樣干脆不要標(biāo)題。當(dāng)然也可以做些體驗(yàn)的細(xì)微提升，比如微信會(huì)隨著掃描對(duì)象的不同發(fā)生變化，如掃描封面時(shí)標(biāo)題會(huì)變成“封面/電影海報(bào)”，和底部掃描對(duì)象類(lèi)型相呼應(yīng)。摩拜則是“掃碼開(kāi)鎖”，算是集成了兩個(gè)頁(yè)面的功能（如支付寶掃碼和支付是兩個(gè)獨(dú)立的頁(yè)面），告知用戶(hù)在一個(gè)頁(yè)面可以完成掃碼和開(kāi)鎖兩個(gè)功能。

3.掃描框位置和大小

參看上圖微信掃一掃頁(yè)面，除了頁(yè)面標(biāo)題的變化，我們發(fā)現(xiàn)掃描框的位置、大小也值得拿捏。位置一般建議居中偏上，因?yàn)橛脩?hù)手持手機(jī)時(shí)的視覺(jué)焦點(diǎn)更偏上方。大小不宜過(guò)大，獲取過(guò)多的圖像反倒會(huì)降低二維碼識(shí)別的速度。摩拜的掃描框比較大，估計(jì)是因?yàn)槠涠S碼本身涵蓋的信息不多，而且二維碼標(biāo)牌偏小。其實(shí)，掃碼框大小還體現(xiàn)在頁(yè)面遮罩的透明度上，比如QQ就沒(méi)有用遮罩，掃描區(qū)域和非掃描區(qū)域僅通過(guò)幾個(gè)頂角區(qū)分。

4.掃碼動(dòng)畫(huà)

掃碼動(dòng)畫(huà)效果除了給用戶(hù)提供最直接的反饋之外，也傳遞品牌情感的有效手段。一般常見(jiàn)的形式是細(xì)長(zhǎng)光條或網(wǎng)格（微博）向下移動(dòng)，此外，也有高亮被掃描對(duì)象邊緣突顯高科技質(zhì)感的（如QQ），以及符合AR調(diào)性的炫酷動(dòng)效（如支付寶AR）。

5.無(wú)網(wǎng)處理機(jī)制

又要拿微信舉例了，大多數(shù)APP是沒(méi)有明確處理無(wú)網(wǎng)情況給用戶(hù)反饋的（可能考慮到大家手機(jī)常年不斷網(wǎng)），一打開(kāi)掃碼頁(yè)面就在那一直傻掃，雖然在別的頁(yè)面有統(tǒng)一的無(wú)網(wǎng)絡(luò)提示欄，而微信則在掃碼頁(yè)面明確給出提示網(wǎng)絡(luò)不可用。

6.幫助提示

常規(guī)的提示信息指的是顯示在掃描框下方的文字信息，如微信提示“將二維碼/條碼放入框內(nèi)，即可自動(dòng)掃描”，不過(guò)摩拜還加入了圖像指示告知用戶(hù)車(chē)輛上二維碼的位置，而且有專(zhuān)門(mén)的“使用幫助”彈窗。不過(guò)支付寶的似乎更值得借鑒，它的提示語(yǔ)會(huì)隨時(shí)間發(fā)生變化，默認(rèn)是“放入框內(nèi)，自動(dòng)掃描”，一直沒(méi)有掃描出結(jié)果時(shí)則會(huì)變成“請(qǐng)對(duì)準(zhǔn)二維碼、條碼，耐心等待”。

未掃到二維碼：支付寶長(zhǎng)時(shí)間未掃描二維碼，會(huì)彈出提示“未掃描到二維碼？點(diǎn)此幫助”，點(diǎn)擊“點(diǎn)此幫助”跳轉(zhuǎn)到客服頁(yè)。QQ提示“未識(shí)別到有效內(nèi)容，請(qǐng)換個(gè)角度重試”，底部浮出toast，但僅展示一次。

掃到其他二維碼：微信打開(kāi)新頁(yè)面提示：如需瀏覽，請(qǐng)長(zhǎng)按網(wǎng)址復(fù)制后使用瀏覽器訪(fǎng)問(wèn)。天貓對(duì)話(huà)框提示：該鏈接將跳轉(zhuǎn)至外部頁(yè)面，可能存在風(fēng)險(xiǎn)。按鈕是取消/打開(kāi)鏈接。

7.可識(shí)別類(lèi)型

不同的應(yīng)用可識(shí)別的圖像類(lèi)型有所不同。微信包括普通掃碼（二維碼、條形碼）、封面（書(shū)籍、CD、電影海報(bào)）、街景和翻譯，支付寶、天貓是掃碼和AR，QQ可以識(shí)別二維碼、文字、明星人臉等，釘釘則可以識(shí)別名片，有道詞典更像一個(gè)掃描工具。不過(guò)相比于微信可以識(shí)別CD封面，網(wǎng)易云音樂(lè)反倒沒(méi)有支持識(shí)別專(zhuān)輯封面。

而如何切換識(shí)別類(lèi)型也要視情況而定，大部分需要用戶(hù)在頁(yè)面頂部或底部切換，而QQ的做法比較獨(dú)樹(shù)一幟，那就是“不可切換”（結(jié)果呈現(xiàn)根據(jù)掃碼對(duì)象而定），把可以識(shí)別二維碼、文字、明星人臉等信息作為附加信息展示在別的頁(yè)面，雖然讓用戶(hù)少做了一步操作，就是不知道結(jié)果符不符合用戶(hù)期望。

8.掃碼歷史

淘寶和天貓都提供了掃碼的歷史記錄，并支持查詢(xún)，賦予了掃碼這個(gè)短暫行為更深遠(yuǎn)的意義。

9.我的二維碼

“我的二維碼”是在社交類(lèi)應(yīng)用中指的是我的名片（如釘釘、微信），方便別人加我好友；在支付類(lèi)應(yīng)用中定義卻比較模糊，在我看來(lái)，它更應(yīng)該指的是我的付款碼，方便別人收款和自己收款。但在支付寶中，“我的二維碼”依然是加好友的，掃碼頁(yè)面不能直接調(diào)用，需要去個(gè)人資料頁(yè)，“我的付款碼”和“我的收款碼”也不在掃碼頁(yè)面，需要從首頁(yè)進(jìn)入，按照“掃”和“碼”認(rèn)知的強(qiáng)關(guān)聯(lián)性，掃碼頁(yè)面應(yīng)該“提供我的xx碼”。

個(gè)人見(jiàn)解：支付寶要做支付+社交，掃碼頁(yè)面沒(méi)有提供用戶(hù)本人的碼是很不周到的。

10.手電筒

關(guān)于手電的功能權(quán)限，摩拜算是最全面的，環(huán)境光線(xiàn)過(guò)暗時(shí)，自動(dòng)開(kāi)啟，可手動(dòng)關(guān)閉；也可以手動(dòng)開(kāi)啟和關(guān)閉。不過(guò)就像相機(jī)的聲音和閃光燈，有時(shí)候用戶(hù)想要的是低調(diào)，所以默認(rèn)關(guān)閉比自動(dòng)開(kāi)啟要好很多，“先用戶(hù)之所想”就等于“沒(méi)有把主動(dòng)權(quán)交給用戶(hù)”，而且相機(jī)的自動(dòng)光圈已經(jīng)能識(shí)別大部分暗環(huán)境中的二維碼。另一種做法是微信和支付寶的“輕點(diǎn)（觸）照亮”，即默認(rèn)不顯示手電開(kāi)關(guān)，暗環(huán)境時(shí)才顯示手電開(kāi)關(guān)。折中一下就是，默認(rèn)顯示手電開(kāi)關(guān)，用戶(hù)根據(jù)所需選擇開(kāi)啟和關(guān)閉。

不過(guò)微信這里漏了一個(gè)細(xì)節(jié)，手電筒開(kāi)啟時(shí)按鈕名稱(chēng)依然是“輕觸照亮”，支付寶則是正確的“輕點(diǎn)照亮/輕點(diǎn)關(guān)閉”的切換。

11.焦距調(diào)節(jié)

遇到掃碼距離過(guò)遠(yuǎn)，需要拉近掃碼的情況時(shí)，支付寶和微信支持直接雙指捏合縮放拉伸焦距。而天貓的處理方式有兩種：打開(kāi)掃碼頁(yè)面后，默認(rèn)顯示拖動(dòng)條，顯示幾秒后消失，再點(diǎn)擊屏幕后又出現(xiàn)；另外就是雙指捏合。有的APP則支持自動(dòng)對(duì)焦，當(dāng)相機(jī)識(shí)別到二維碼距離過(guò)遠(yuǎn)時(shí)，自動(dòng)推進(jìn)以便精確識(shí)別，但暫未找到例子。

12.輸入機(jī)制

等效掃碼的輸入機(jī)制。二維碼本身是一種信息載體，用以幫助用戶(hù)快速輸入信息，如果網(wǎng)絡(luò)環(huán)境不好，就需要手動(dòng)輸入信息（某些情況下輸入更快），可參考摩拜和ofo，可以直接輸入車(chē)輛號(hào)碼進(jìn)行開(kāi)鎖或獲取密碼。

13.輔助快速登錄

掃碼為PC端登錄提供了新方式，如釘釘和boss直聘。

14.長(zhǎng)按圖片識(shí)別其中二維碼

上面幾條設(shè)計(jì)建議都是針對(duì)有形的掃碼頁(yè)面的，還有一種“無(wú)形的”，就是長(zhǎng)按圖片，彈出選擇菜單，然后識(shí)別圖中的二維碼，目前微信里應(yīng)用比較多，其他地方不知道是否也有類(lèi)似功能。

總結(jié)

以上都是站在個(gè)人角度對(duì)掃碼頁(yè)面交互設(shè)計(jì)的調(diào)研結(jié)果進(jìn)行的匯總分析，如有不妥歡迎指出。實(shí)際項(xiàng)目中并未完全用到以上結(jié)論，需要按實(shí)際情況選取最合適的解決方案。

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

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