掃一掃：有效連接線上世界和真實(shí)世界的方式，溝通線上和線下世界，把跨界體驗(yàn)變簡(jiǎn)單。今天小糕專門為你詳細(xì)的分析一下“掃一掃” 中涉及的交互，希望帶給你更多靈感與幫助。

掃一掃前生今世

日常生活中，掃一掃作為連接線上線下的橋梁變得越來越復(fù)雜和多功能。

從微信推行二維碼，到如今掃描二維碼、條形碼，以及身份證、快遞、AR掃、以圖搜圖、識(shí)別印刷文字、圖片信息、網(wǎng)站鏈接等各種各樣均可從線下掃到線上。

掃一掃以有效連接線上世界和真實(shí)世界的方式，溝通線上和線下世界，把跨界體驗(yàn)變簡(jiǎn)單。

掃描二維碼可以快速把用戶指向目的頁面，不需要輸入任何東西，尤其移動(dòng)設(shè)備輸入難度較大，而且達(dá)到信息源確保準(zhǔn)確無誤，類似web時(shí)代的網(wǎng)址。

但它又比網(wǎng)址更多功能，可以增加物品本身信息量，人們通過掃碼和物品產(chǎn)生交互，使用幫助，記憶信息，包括視頻音頻多媒體各式各樣的信息。

除去未來的人臉識(shí)別，指紋識(shí)別，語音識(shí)別，是目前線下與線上連接最穩(wěn)定快捷主要通路。

掃一掃得以流行傳承的三個(gè)原因：

1. 有效性，存在使用價(jià)值。
2. 易用性，無需學(xué)習(xí)成本，或低成本學(xué)習(xí)掌握后即操作。
3. 可發(fā)現(xiàn)性，易于傳播，大范圍的被使用宣傳，個(gè)人商家商戶互相傳播使用。

今天搜索幾大常用不同應(yīng)用來分析探討當(dāng)下掃一掃界面主要有哪些功能，提供哪些服務(wù)，何種設(shè)計(jì)更方便快捷，以及成功掃描，失敗掃描情景提示。幫助之后設(shè)計(jì)中若涉及掃一掃功能，更全面了解。

一、掃一掃界面內(nèi)容有哪些？

1. 掃描的頭部標(biāo)題

標(biāo)題有采取“掃一掃” 或無標(biāo)題，以及根據(jù)掃描場(chǎng)景寫標(biāo)題。

2. 掃描界面的功能入口

相冊(cè)，手電筒，歷史記錄，關(guān)閉（或返回首頁），切換AR掃描，圖片搜貨，付款碼，我的二維碼，使用幫助。

3. 可掃描的內(nèi)容

二維碼，條形碼，圖片，以圖識(shí)文，以圖搜圖。

4. 二維碼掃描框的大小以及位置

位置普遍居中偏上，大小根據(jù)掃描內(nèi)容不同而變化。

5. 錯(cuò)誤異常狀態(tài)提示，以及提示文字

在頂部底部中間彈窗，提示異常的掃描結(jié)果，提示文字會(huì)根據(jù)掃描的時(shí)長(zhǎng)變化，幫助用戶操作，減少等待焦慮。

二、“掃一掃”前中后狀態(tài)交互提示

以支付寶中掃一掃為案例：

整個(gè)掃描過程，根據(jù)情景和用戶心里活動(dòng)，進(jìn)行針對(duì)性提醒；常規(guī)正常狀態(tài)下就安靜地隱蔽；操作受阻出現(xiàn)情緒化時(shí)及時(shí)撫慰；需要幫助就主動(dòng)尋找方案。

支付寶整體交互細(xì)節(jié)深鉆用戶深層需求，預(yù)見洞察需求不做馬后炮、多嘴舌。

知識(shí)點(diǎn)

參照案例，如何在自己項(xiàng)目中深度挖掘情景化設(shè)計(jì)?

思考

針對(duì)上述案例，在感慨他人思考深入完善同時(shí)，我們?cè)撊绾伟阎R(shí)點(diǎn)運(yùn)用到自己項(xiàng)目中，通過哪些方法策略能夠接觸挖掘到用戶的設(shè)計(jì)點(diǎn)呢？

首先了解什么是情景化設(shè)計(jì)？

在場(chǎng)景中的用戶，與情境互動(dòng)、孕育、改變著需求。

用戶場(chǎng)景是某時(shí)間（when）某地點(diǎn)（where）特定用戶類型（who）會(huì)通過某種手段（method）來滿足（do）這種欲望。

例如：用戶根據(jù)趣味功能選擇社群-場(chǎng)景，社群的氛圍、構(gòu)造、規(guī)則定義了用戶；百事可樂典型場(chǎng)景是年輕人聚會(huì)，可口可樂在中國(guó)典型場(chǎng)景是過年回家。

再次，如何根據(jù)場(chǎng)景做設(shè)計(jì)，這一點(diǎn)可以通過翻看查閱交互書籍和分享的文章進(jìn)行了解。

設(shè)計(jì)步驟

這里主要分為三步：

第一步：列出設(shè)計(jì)場(chǎng)景，通過流程圖，故事板，頭腦風(fēng)暴整理出關(guān)鍵場(chǎng)景。

例如編寫場(chǎng)景故事，包含誰在哪些時(shí)候做哪些事情，當(dāng)前環(huán)境是怎樣，有何外界因素影響 ，用戶的情緒是怎樣的。

第二步：深度分析列舉場(chǎng)景，發(fā)掘機(jī)會(huì)點(diǎn)；通過故事板，流程圖列出關(guān)鍵場(chǎng)景。

通過分析當(dāng)前場(chǎng)景用戶的操作，和預(yù)見下一步的操作尋找發(fā)掘機(jī)會(huì)點(diǎn)，有針對(duì)性性滿足不同用戶需求。

第三步：設(shè)計(jì)宗旨在于解決問題，通過設(shè)計(jì)策略方法想出最優(yōu)方案，將機(jī)會(huì)點(diǎn)轉(zhuǎn)化成設(shè)計(jì)點(diǎn)。

分享阿里設(shè)計(jì)師的5點(diǎn)思考

在這分享下來自阿里設(shè)計(jì)師的策略方法——5種思考方向：

（1）行動(dòng)點(diǎn)前置插入：預(yù)期到用戶下步操作，縮短關(guān)鍵流程。微信發(fā)圖，手機(jī)截圖時(shí)彈出分享編輯等。

（2）行動(dòng)點(diǎn)替換：一般是指當(dāng)前場(chǎng)景下某個(gè)行動(dòng)點(diǎn)的功能不再適合當(dāng)前場(chǎng)景，因而將其替換為另外的需求較強(qiáng)的行動(dòng)點(diǎn)。

位置不發(fā)生變化，而功能變化，為用戶提供當(dāng)前場(chǎng)景需要的或與下一步意圖相關(guān)的行動(dòng)點(diǎn)能夠幫助用戶提高操作效率。例如底部Tab欄常規(guī)時(shí)顯示首頁，上下滑動(dòng)時(shí)則變成返回頂部。

（3）行動(dòng)相關(guān)推送：指根據(jù)用戶當(dāng)前或下一步的行為提供相關(guān)推送或提示，以輔助用戶進(jìn)行決策行動(dòng)，提高用戶操作效率?？s短關(guān)鍵步驟。

（4）突出行動(dòng)點(diǎn)：預(yù)期到用戶下一步的行為后通過顏色或提示等方式對(duì)行動(dòng)點(diǎn)進(jìn)行突出，吸引并提醒用戶點(diǎn)擊，減少思考成本，提高操作效率；掃一掃光線較暗時(shí)，自動(dòng)打開手電筒。

（5）自動(dòng)執(zhí)行：適用于一些需求較為明確的行動(dòng)點(diǎn)，做用戶之所想，提高操作流暢性及效率。

另外情感化，和貼心同樣是情感化設(shè)計(jì)的目的，和思考切入點(diǎn)，產(chǎn)品設(shè)計(jì)本質(zhì)是讓用戶更容易，更愉悅地使用產(chǎn)品。

三、異常狀態(tài)提示的不同樣式

異常狀態(tài)的文字提醒，展示位置，上中下，跳轉(zhuǎn)界面均有不同案例。

注：支付寶掃描微信二維碼時(shí)會(huì)明顯阻止無法掃描，其他應(yīng)用掃描微信二維碼時(shí)會(huì)提醒是否跳入對(duì)應(yīng)鏈接。

知識(shí)點(diǎn)：關(guān)于容錯(cuò)機(jī)制

界面設(shè)計(jì)中會(huì)出現(xiàn)各種極端狀態(tài)、錯(cuò)誤提醒。

如何合理設(shè)計(jì)容錯(cuò)機(jī)制，適當(dāng)情景給予合適的提醒，又允許用戶微微犯錯(cuò)，有返回余地呢？

容錯(cuò)性：是產(chǎn)品對(duì)錯(cuò)誤操作的承載性能，即一個(gè)產(chǎn)品操作時(shí)出現(xiàn)錯(cuò)誤的概率和錯(cuò)誤出現(xiàn)后得到解決的概率和效率。

容錯(cuò)性最初應(yīng)用于計(jì)算機(jī)領(lǐng)域，它的存在能保證系統(tǒng)在故障存在的情況下不失效，仍然正常工作。

產(chǎn)品容錯(cuò)性設(shè)計(jì)能使產(chǎn)品與人的交流或人與人借助產(chǎn)品的交流更加流暢。

容錯(cuò)性設(shè)計(jì)原則

1. 合適的引導(dǎo)和貼心提示

無論針對(duì)新手用戶或老用戶，以及新功能上線，重要操作是能給出詳盡文字說明和指導(dǎo)方向，以及智能預(yù)測(cè)用戶出錯(cuò)原因。并且引導(dǎo)內(nèi)容簡(jiǎn)單容易理解，引起用戶注意時(shí)快速獲得信息幫助，降低錯(cuò)誤發(fā)生概率。

在結(jié)果不可逆操作是，例如退出編輯，取消支付等，詢問用戶讓其指導(dǎo)操作的后果。

2. 限制操作

增加不可逆操作的難度，適當(dāng)限制用戶的某些交互操作，例如不可點(diǎn)擊時(shí)變灰色；表單未填寫內(nèi)容時(shí)，按鈕呈灰色不可點(diǎn)擊狀態(tài)。

3. 用戶錯(cuò)誤發(fā)生時(shí)，及時(shí)提供糾錯(cuò)幫助

4. 錯(cuò)誤恢復(fù)

允許犯錯(cuò)，并存在撤銷以前的命令，盡可能保留操作信息，能幫助用戶發(fā)送錯(cuò)誤后迅速回到正確狀態(tài)。

5. 減少負(fù)擔(dān)

盡可能減少記憶負(fù)擔(dān)，減少認(rèn)知混淆，讓用戶啊單次只執(zhí)行唯一操作，減少不必要操作步驟。

四、掃一掃中的幫助頁面

解釋說明主要能夠掃描的內(nèi)容，引導(dǎo)用戶操作，同時(shí)宣傳相關(guān)掃描活動(dòng)，根據(jù)實(shí)際使用場(chǎng)景，合情合理的插入運(yùn)營(yíng)活動(dòng)信息。

圖三圖五幫助頁面：進(jìn)入后直接提供拍照傳圖的入口以及輸入入口，把幫助說明和實(shí)際功能操作結(jié)合在一起，不僅是圖片演示，無需再次返回掃描界面。

知識(shí)點(diǎn)：如何讓幫助頁面深入人心，起到真正幫助作用呢？

1. 用戶錯(cuò)誤或不懂如何操作時(shí)，及時(shí)提供糾錯(cuò)幫助，減少挫敗感，例如當(dāng)下空白頁面，錯(cuò)誤頁面的情感化設(shè)計(jì)，友好提醒不能責(zé)備或威脅用戶。

2. 出現(xiàn)錯(cuò)誤的提示詞用簡(jiǎn)潔易懂清晰的詞匯表達(dá)，不要使用術(shù)語。

3. 出錯(cuò)后提出的建議，應(yīng)該有建設(shè)性幫助，智能糾錯(cuò)減少二次輸入，以及提供快速入口，避免返回重新操作。

五、掃圖識(shí)字

常見于以掃描為主的應(yīng)用，類似掃描全能王，翻譯，通過以圖識(shí)別文字，并直接翻譯。

文字識(shí)別出后可允許復(fù)制，編輯，翻譯保存照片。

設(shè)計(jì)點(diǎn)：實(shí)時(shí)反饋掃描結(jié)果，讓結(jié)果和原圖處于同一視覺界面內(nèi)，便于對(duì)照檢測(cè)內(nèi)容正確性。

六、掃描證件、卡片、文件等

同掃圖識(shí)別文字相似，主要是固定類似的文字，識(shí)別賬號(hào)卡號(hào)，在界面展示上要求信息操作一體化，直觀看到掃描的結(jié)果，允許編輯修改內(nèi)容，掃描作為輔助輸入工具。

七、掃一掃和手動(dòng)輸入如何高效切換

掃一掃獲取信息，鏈接線上線下方便快捷，但容易受外界因素影響，例如掃描卡號(hào)、掃碼開鎖等，同樣可手動(dòng)輸入。

如何快捷切換輸入與掃一掃呢？

1. 掃描框底部明確提示可以掃描內(nèi)容。
2. 輸入入口命名清晰直觀。
3. 自動(dòng)根據(jù)輸入內(nèi)容調(diào)出相關(guān)鍵盤類型，減少點(diǎn)擊。
4. 輸入和掃描處在同一界面，沉浸同一場(chǎng)景，減少頁面跳轉(zhuǎn)，快速互相切換。

八、掃一掃的那些廣告

掃一掃逐漸被普及，用戶習(xí)慣凡事掃一掃，界面曝光機(jī)會(huì)增加，內(nèi)容簡(jiǎn)潔，在不引起用戶注意下，順帶增加廣告信息。

不浪費(fèi)每一處的廣告位，多使用于電商行業(yè)。

在設(shè)計(jì)中我們也要思考如何合情合理的插播廣告，看到廣告讓用戶感受到的不是反感，而是貼心的正合我意。

尾言

掃描雖然頻繁被使用，但目前用戶習(xí)慣使用微信掃一掃，或手機(jī)自帶掃一掃，對(duì)軟件應(yīng)用自身攜帶掃一掃缺乏使用場(chǎng)景和常識(shí)。

但市面上應(yīng)用基本把掃一掃當(dāng)做標(biāo)配，放在首頁最頂部，用戶多不知此處掃一掃和“微信” “手機(jī)自帶”有何區(qū)別。

設(shè)計(jì)產(chǎn)品時(shí)也應(yīng)避免為了做功能而做功能，如何讓掃一掃發(fā)揮最大價(jià)值，而非擺設(shè)。

首先從應(yīng)用本身屬性分析，軟件需要哪些來自線下的信息，和外界產(chǎn)品有何不同？如何更好地使用掃一掃提升交互體驗(yàn)?zāi)兀?/p>

例如掃描前提示語，掃描后信息展示，可以被修改；不如在輸入卡號(hào)時(shí)，加入掃一掃；輸入地址時(shí)，復(fù)制文字。

作為UI設(shè)計(jì)師，除了提供專業(yè)技能的輸出，同時(shí)多思考如何讓現(xiàn)有技術(shù)價(jià)值最大化，向產(chǎn)品設(shè)計(jì)師精進(jìn)。

參考文獻(xiàn)

1. 阿里設(shè)計(jì)師：如何根據(jù)用戶場(chǎng)景設(shè)計(jì)產(chǎn)品？ http://uxren.cn/?p=45575

2. 產(chǎn)品容錯(cuò)性設(shè)計(jì)原則? https://www.ui.cn/detail/96826.html

作者：糕小糕

來源：https://www.zcool.com.cn/article/ZODE0NjM2.html

本文由 @糕小糕 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議