如何設(shè)計一個好的[掃描碼]界面？作者分享了他自己的一些想法。
由于公司的產(chǎn)品最近已被掃描以幫助網(wǎng)絡(luò)完成訂單支付，我們已經(jīng)研究了一些主流APP中的掃描代碼頁。在這里，我們將從頁面元素，權(quán)限獲取，提示信息和交互模式中創(chuàng)建一個簡單的維度。分析總結(jié)，希望對您的設(shè)計有所幫助。
就我而言，通常用于清掃的最常見的應(yīng)用程序是支付寶，微信和Moby。一般來說，常見的掃描碼界面主要包括掃描幀，掃描動畫，頁面標題和返回按鈕，掃描類型切換，使用幫助和其他視覺元素，這將涉及獲取系統(tǒng)功能權(quán)限，如相冊，相機焦點調(diào)整，手電筒等。
1.相機權(quán)限獲取
獲得移動電話系統(tǒng)權(quán)限的時間可以分為安裝APP的時間，首次啟動時的時間，以及特殊功能何時需要獲得重要的敏感權(quán)限。安裝APP時，通常會獲得大多數(shù)基本權(quán)限。當用戶關(guān)注隱私時，用戶經(jīng)常選擇拒絕許可而不是仔細閱讀以快速進入應(yīng)用程序。如果未獲得相機權(quán)限（即，當用戶首次單擊掃描以打開掃描代碼頁或判斷用戶關(guān)閉相機權(quán)限時），將提示用戶打開相機權(quán)限（iOS）或直接在彈出窗口中。允許或拒絕相機權(quán)限（Android）。
值得一提的是，淘寶支持切換前后攝像頭，雖然我想不出在哪里使用它們，但絕對領(lǐng)先一步。
可以輕松訪問相冊權(quán)限，也可以使用相機獲取，但并非所有掃描代碼都需要從相冊中識別，例如Moby。
2.掃碼頁面標題
掃描頁面導(dǎo)航欄標題可以像網(wǎng)易云音樂一樣被稱為掃描，或者就像支付寶頁面一樣。當然，您也可以在體驗上做一些微妙的改進。例如，微信將隨掃描對象而變化。例如，當掃描封面時，標題將變?yōu)椤扒?電影海報”，其對應(yīng)于底部的掃描對象的類型。 Mobai是“掃描碼解鎖”，這是一個集成了兩個頁面的功能（如支付寶掃描碼和支付是兩個獨立的頁面），告訴用戶掃描和解鎖的兩個功能可以在一個頁面上完成。
3.掃描框位置和大小
看到上面的微信掃描頁面，除了頁面標題的變化外，我們發(fā)現(xiàn)掃描盒的位置和大小也值得捏。通常建議將該位置置于居中位置，因為握住手機時用戶的視覺焦點較高。尺寸不應(yīng)太大，并且獲得太多圖像將降低QR碼識別的速度。 Moby的掃描幀相對較大，估計是因為QR碼本身不包含太多信息，并且QR碼符號太小。實際上，掃描碼幀的大小也反映在頁面掩碼的透明度中。例如，QQ不使用掩模，掃描區(qū)域和非掃描區(qū)域僅通過幾個頂角區(qū)分。
4.掃碼動畫
除了為用戶提供最直接的反饋外，掃描碼動畫效果還傳遞了品牌情感的有效手段。常見的形式是向下移動的細長燈條或網(wǎng)格（微博）。此外，掃描對象的邊緣突出顯示高科技紋理（如QQ），以及與AR色調(diào)相匹配的炫酷效果（如支付寶AR）。
5.無網(wǎng)處理機制
我們也想以微信為例。大多數(shù)APP沒有明確處理沒有網(wǎng)絡(luò)的情況向用戶提供反饋（可能考慮到每個人的手機一年四季都在線上）。一旦打開掃描代碼頁，即使它在其他頁面上，它也總是很愚蠢。統(tǒng)一的無網(wǎng)絡(luò)提示欄，而微信在掃描代碼頁上清楚地表明網(wǎng)絡(luò)不可用。
6.幫助提示
一般提示信息是指掃描框下方顯示的文本信息，例如微信提示“當QR碼/條形碼放在盒子里時，它可以自動掃描”，但是Moby還添加了一個圖像來通知車輛的用戶。 QR碼的位置，并有一個特殊的“使用幫助”窗口。但是，支付寶似乎更值得學(xué)習(xí)，它的提示會隨著時間的推移而改變，默認是“放在盒子里，自動掃描”，結(jié)果會不會變成掃描結(jié)果“;請瞄準二維碼，條形碼，耐心等待。
未掃描二維碼：支付寶長時間沒有掃描二維碼，會彈出提示“請勿掃描二維碼？單擊此幫助“，單擊”單擊此幫助“以跳轉(zhuǎn)到客戶服務(wù)頁面。 QQ提示“l(fā)dquo;沒有有效的內(nèi)容被識別，請從另一個角度再次嘗試”，在底部吐司，但只有一次。
掃描到其他二維碼：微信打開一個新頁面提示：如果您需要瀏覽，請長按URL復(fù)制并使用瀏覽器進行訪問。天貓對話框提示：此鏈接將跳轉(zhuǎn)到外部頁面，可能存在風險。該按鈕用于取消/打開鏈接。
7.可識別類型
不同類型的圖像被不同的應(yīng)用程序識別。微信包括常見掃描碼（二維碼，條碼），封面（書籍，CD，電影海報），街景和翻譯，支付寶，天貓掃描碼和AR，QQ可識別二維碼，文字，星面等。可以識別名片，字典更像是一種掃描工具。不過，與微信可以識別??的CD封面相比，網(wǎng)易云音樂不支持專輯封面的識別。
如何切換識別類型取決于具體情況，大多數(shù)需要用戶在頁面頂部或底部切換，而QQ的方法更加獨特，即“無法切換”（結(jié)果是基于掃描碼對象），諸如QR碼，文本，星面等信息可以被識別為在其他頁面上顯示的附加信息。盡管用戶不太可能執(zhí)行一步操作，但是不知道結(jié)果符號不滿足用戶的期望。
8.掃碼歷史
淘寶和天貓都提供了掃描代碼和支持查詢的歷史記錄，使掃描代碼具有深遠的意義。
9.我的二維碼
“我的二維碼”是一個社交應(yīng)用程序，指的是我的名片（如指甲，微信），以方便他人加我的朋友;在支付應(yīng)用程序中，定義相當模糊，在我看來，更多應(yīng)該參考我的支付代碼，以便其他人可以收錢并收集自己的錢。但在支付寶中，“我的二維碼”仍然是朋友，掃描碼頁無法直接調(diào)用，需要轉(zhuǎn)到個人資料頁面“我的支付碼”“我的收據(jù)代碼&rdquo也不在掃描代碼頁，你需要從主頁輸入，按照“掃描”和“代碼”，認知的強相關(guān)性，掃描代碼頁應(yīng)“提供我的xx碼”。
個人意見：支付寶已支付+社交，掃描代碼頁不提供用戶自己的代碼非常不舒服。
10.手電筒
關(guān)于手電筒的功能許可，Mobai是最全面的。當環(huán)境光線太暗時，它會自動打開并可以手動關(guān)閉。它也可以手動打開和關(guān)閉。然而，就像相機的聲音和閃光一樣，有時用戶想要低調(diào)，所以默認關(guān)閉比自動啟動要好得多，“首先用戶認為”等于“不要主動用戶”。相機的自動光圈能夠在大多數(shù)黑暗環(huán)境中識別QR碼。另一種方法是微信和支付寶的“燈光”（觸摸）燈亮，即默認不顯示手電筒開關(guān)，手電筒開關(guān)顯示在黑暗環(huán)境中。權(quán)衡是默認顯示手電筒開關(guān)，用戶可以根據(jù)所需的選擇打開和關(guān)閉手電筒開關(guān)。
但是，微信在這里錯過了一個細節(jié)。當手電筒打開時，按鈕名稱仍然是“輕觸”，支付寶是正確的“照明/照明關(guān)閉”開關(guān)。
11.焦距調(diào)節(jié)
當掃描碼太遠而你需要放大時，支付寶和微信支持直接捏縮放和縮放。處理天貓有兩種方法：打開掃描代碼頁后，默認顯示拖動條，幾秒后消失，然后點擊屏幕后顯示;另一個是捏。某些應(yīng)用支持自動對焦。當相機識別出QR碼太遠時，它會自動前進以進行準確識別，但尚未找到任何示例。
12.輸入機制
等效掃描碼的輸入機制。 QR碼本身是一個信息載體，可以幫助用戶快速輸入信息。如果網(wǎng)絡(luò)環(huán)境不好，則需要手動輸入信息（在某些情況下，輸入更快）。你可以參考Moby和ofo，你可以直接輸入車輛。數(shù)字已解鎖或獲得密碼。
13.輔助快速登錄
掃描代碼為PC端登錄提供了一種新方法，例如釘子和老板。
14.長按圖片識別其中二維碼
以上幾種設(shè)計建議是針對有形掃描碼頁，并且有一種“不可見”，即長按圖片，彈出選擇菜單，然后識別圖片中的二維碼。目前，微信中有很多應(yīng)用。其他地方不知道他們是否有類似的功能。
總結(jié)
以上所有內(nèi)容都是從個人角度對掃描代碼頁的交互設(shè)計的調(diào)查結(jié)果進行總結(jié)分析，如果有任何不適當?shù)臍g迎。以上結(jié)論并未在實際工程中得到充分利用，需要根據(jù)實際情況選擇最合適的解決方案。
本文最初由@張鵬濤TAO出版。未經(jīng)許可，禁止復(fù)制。
該地圖來自PEXELS，基于CC0協(xié)議