如何設計一個好的【掃碼】界面

來自專欄 用戶體驗碎碎念

由於最近公司的產品要做掃碼功能以輔助web端完成訂單支付，所以就研究了一些主流APP中的掃碼頁面，這裡就從頁面元素、許可權獲取、提示信息、交互方式等維度做個簡單的分析總結，希望能對你的設計有所幫助。

就我個人而言，平常用到掃一掃功能比較多的APP是支付寶、微信和摩拜。一般來說，常見的掃碼界面主要包括掃描框、掃描動畫、頁面標題及返回按鈕、掃描類型切換、使用幫助等視覺元素，會涉及到相冊、相機焦距調節、手電筒等系統功能許可權的獲取。

1.相機許可權獲取

獲取手機系統許可權的時機可分為APP安裝時、首次啟動時、使用特殊功能需要獲取重要敏感許可權時。APP安裝時一般能獲取大多數基本許可權，而隨著用戶對隱私權的重視，用戶首次啟動APP時往往會選擇拒絕許可權代替認真閱讀以便快速進入應用內部。如果未獲取相機許可權（即用戶首次點擊掃一掃打開掃碼頁面或判斷出用戶關閉的相機許可權時），一般會在掃碼頁面彈窗提示用戶開啟相機許可權（iOS）或在彈窗中直接允許或拒絕開啟相機許可權（Android）。

值得一提的是淘寶支持切換前後置攝像頭，雖然想不到哪裡用得到，但絕對領先一步。

相冊許可權的獲取跟容易，或者會和相機一同獲取，但並非所有的掃碼都要支持從相冊中識別，比如摩拜。

2.掃碼頁面標題

掃碼頁面導航欄標題可以像網易雲音樂一樣叫做掃一掃，或者像支付寶頁面一樣乾脆不要標題。當然也可以做些體驗的細微提升，比如微信會隨著掃描對象的不同發生變化，如掃描封面時標題會變成「封面/電影海報」，和底部掃描對象類型相呼應。摩拜則是「掃碼開鎖」，算是集成了兩個頁面的功能（如支付寶掃碼和支付是兩個獨立的頁面），告知用戶在一個頁面可以完成掃碼和開鎖兩個功能。

3.掃描框位置和大小

參看上圖微信掃一掃頁面，除了頁面標題的變化，我們發現掃描框的位置、大小也值得拿捏。位置一般建議居中偏上，因為用戶手持手機時的視覺焦點更偏上方。大小不宜過大，獲取過多的圖像反倒會降低二維碼識別的速度。摩拜的掃描框比較大，估計是因為其二維碼本身涵蓋的信息不多，而且二維碼標牌偏小。其實，掃碼框大小還體現在頁面遮罩的透明度上，比如QQ就沒有用遮罩，掃描區域和非掃描區域僅通過幾個頂角區分。

4.掃碼動畫

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

5.無網處理機制

又要拿微信舉例了，大多數APP是沒有明確處理無網情況給用戶反饋的（可能考慮到大家手機常年不斷網），一打開掃碼頁面就在那一直傻掃，雖然在別的頁面有統一的無網路提示欄，而微信則在掃碼頁面明確給出提示網路不可用。

6.幫助提示

常規的提示信息指的是顯示在掃描框下方的文字信息，如微信提示「將二維碼/條碼放入框內，即可自動掃描」，不過摩拜還加入了圖像指示告知用戶車輛上二維碼的位置，而且有專門的「使用幫助」彈窗。不過支付寶的似乎更值得借鑒，它的提示語會隨時間發生變化，默認是「放入框內，自動掃描」，一直沒有掃描出結果時則會變成「請對準二維碼、條碼，耐心等待」。

未掃到二維碼：支付寶長時間未掃描二維碼，會彈出提示「未掃描到二維碼？點此幫助」，點擊「點此幫助」跳轉到客服頁。QQ提示「未識別到有效內容，請換個角度重試」，底部浮出toast，但僅展示一次。

掃到其他二維碼：微信打開新頁面提示：如需瀏覽，請長按網址複製後使用瀏覽器訪問。天貓對話框提示：該鏈接將跳轉至外部頁面，可能存在風險。按鈕是取消/打開鏈接。

7.可識別類型

不同的應用可識別的圖像類型有所不同。微信包括普通掃碼（二維碼、條形碼）、封面（書籍、CD、電影海報）、街景和翻譯，支付寶、天貓是掃碼和AR，QQ可以識別二維碼、文字、明星人臉等，釘釘則可以識別名片，有道詞典更像一個掃描工具。不過相比於微信可以識別CD封面，網易雲音樂反倒沒有支持識別專輯封面。

而如何切換識別類型也要視情況而定，大部分需要用戶在頁面頂部或底部切換，而QQ的做法比較獨樹一幟，那就是「不可切換」（結果呈現根據掃碼對象而定），把可以識別二維碼、文字、明星人臉等信息作為附加信息展示在別的頁面，雖然讓用戶少做了一步操作，就是不知道結果符不符合用戶期望。

8.掃碼歷史

淘寶和天貓都提供了掃碼的歷史記錄，並支持查詢，賦予了掃碼這個短暫行為更深遠的意義。

9.我的二維碼

「我的二維碼」是在社交類應用中指的是我的名片（如釘釘、微信），方便別人加我好友；在支付類應用中定義卻比較模糊，在我看來，它更應該指的是我的付款碼，方便別人收款和自己收款。但在支付寶中，「我的二維碼」依然是加好友的，掃碼頁面不能直接調用，需要去個人資料頁，「我的付款碼」和「我的收款碼」也不在掃碼頁面，需要從首頁進入，按照「掃」和「碼」認知的強關聯性，掃碼頁面應該「提供我的xx碼」。

個人見解：支付寶要做支付+社交，掃碼頁面沒有提供用戶本人的碼是很不周到的。

10.手電筒

關於手電筒的功能許可權，摩拜算是最全面的，環境光線過暗時，自動開啟，可手動關閉；也可以手動開啟和關閉。不過就像相機的聲音和閃光燈，有時候用戶想要的是低調，所以默認關閉比自動開啟要好很多，「先用戶之所想」就等於「沒有把主動權交給用戶」，而且相機的自動光圈已經能識別大部分暗環境中的二維碼。另一種做法是微信和支付寶的「輕點（觸）照亮」，即默認不顯示手電筒開關，暗環境時才顯示手電筒開關。折中一下就是，默認顯示手電筒開關，用戶根據所需選擇開啟和關閉。

不過微信這裡漏了一個細節，手電筒開啟時按鈕名稱依然是「輕觸照亮」，支付寶則是正確的「輕點照亮/輕點關閉」的切換。

11.焦距調節

遇到掃碼距離過遠，需要拉近掃碼的情況時，支付寶和微信支持直接雙指捏合縮放拉伸焦距。而天貓的處理方式有兩種：打開掃碼頁面後，默認顯示拖動條，顯示幾秒後消失，再點擊屏幕後又出現；另外就是雙指捏合。有的APP則支持自動對焦，當相機識別到二維碼距離過遠時，自動推進以便精確識別，但暫未找到例子。

12.輸入機制

等效掃碼的輸入機制。二維碼本身是一種信息載體，用以幫助用戶快速輸入信息，如果網路環境不好，就需要手動輸入信息（某些情況下輸入更快），可參考摩拜和ofo，可以直接輸入車輛號碼進行開鎖或獲取密碼。

13.輔助快速登錄

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

14.長按圖片識別其中二維碼

上面幾條設計建議都是針對有形的掃碼頁面的，還有一種「無形的」，就是長按圖片，彈出選擇菜單，然後識別圖中的二維碼，目前微信里應用比較多，其他地方不知道是否也有類似功能。

總結

以上都是站在個人角度對掃碼頁面交互設計的調研結果進行的匯總分析，如有不妥歡迎指出。實際項目中並未完全用到以上結論，需要按實際情況選取最合適的解決方案。