最近有個關于掃一掃的功能設計工作，故對市面上的掃一掃功能做了盤點分析，本文将介紹掃一掃的常用功能、應用場景以及背後的設計邏輯，供讀者參考交流。

一、掃一掃是用來幹嘛的？

掃一掃用來加好友？進行支付款？可以在過年支付寶活動時候掃“福”？其實這隻是我們熟悉的掃一掃功能，事實上，掃一掃的功能和應用場景還有很多。

筆者想用一句話來總結下掃一掃：掃一掃是連接線上線下的一種媒介。通過掃一掃這個媒介，我們可以和線上的人/事/物做連接。

說來抽象，舉個例子，我們熟知的小程序就是用來進行線上線下的連接，比如我們到一個餐廳，直接掃餐桌上的二維碼便可以打開小程序進行下單，省去了線下的服務員點餐，從點餐、支付都可以在線上完成，這就是線上線下的連接。

與小程序不同的是，小程序是一種産品形态，可以像各類app一樣滿足人們的各種需求，而掃一掃是一種線下線上進行連接的媒介，省去了複雜的交互和操作，但是掃一掃可以拓展的應用場景沒有小程序廣泛。

二、目前主流app的掃一掃功能

筆者梳理了一些主流 C 端的app，覆蓋電商、社交、視頻、招聘等多個領域，總結下來發現掃一掃主要的功能有以下幾種：

通過梳理可以先發現，我們平常用到掃一掃的功能其實多集中在前三個：登錄、添加好友、支付。因為這三種場景我們生活中遇到的會更多一點，且我們的行為是被動，是被教育要用掃一掃才能完成某個動作，比如我們是在支付時看到二維碼并且寫着“用支付寶支付”我們才會打開支付寶掃一掃進行操作。

接下來我會比較詳細介紹掃一掃背後的設計邏輯，過程中便會涉及到這些功能。

三、掃一掃的設計邏輯

1. 設計需要考慮的三要素：用戶、需求、場景

用戶、需求、場景是 pm 日常工作中需要經常思考的問題，在為不同産品設計掃一掃功能的時候，交互、操作流程、功能等都會有所不同。

産品設計需要考慮用戶群體是誰，有什麼特征，有什麼操作習慣，掃一掃功能在什麼場景下用，有什麼需求可以用掃一掃滿足等等問題。

比如在為一個 to B 産品設計上班掃碼簽到功能時，先思考掃碼簽到流程是：

我們可以思考一下功能使用場景：一個場景是用戶簽到時可能手裡提着很多東西（包、早餐等）不方便操作手機，同時簽到人可能會很多，基于這個常用場景考慮，掃一掃功能的入口就不能太深。

再比如這個場景下，如果掃碼不成功，提示掃碼失敗後，返回頁面是主頁還是停留在掃碼頁面可以繼續掃？

對比兩種操作，其實就是操作成本的高低區别。如果掃碼不成功返回主頁，再發起掃一掃會增加操作成本。試想用戶上班起很早，剛擠了地鐵，好不容易排隊簽到了，不停反複點擊，用戶難免有一種煩躁的心理。

所以，在主頁沒有更多有關掃碼簽到的有效信息可以參考或沒有其他價值更大的操作時，會把提示掃碼失敗後的頁面選擇為當前掃碼頁面，可以繼續掃碼。

還是這個場景，如果用戶掃碼不成功，還需要對掃碼失敗彈窗進行設計。如果提供錯誤原因，或者提供幫助的鍊接幫助用戶快速定位和解決問題，可以極大加快用戶解決問題的速率。

這時彈窗設計就不僅僅是冰冷的一句“簽到失敗”加一個“确定”按鈕了。在設計這個彈窗時，我們甚至可以将“xxs後自動返回首頁示”這種自動關閉彈窗同時給用戶時間查看有效信息的功能和手動關閉彈窗功能同時提供給用戶，滿足不同場景下的不同需求。

此外，就掃碼功能而言，我們可以把我們的用戶細分，通過掃一掃的主被動性，可以主要分為兩種：

• 一種是用戶看到二維碼或者被教育提示用該掃一掃功能掃碼（被動）。
• 另一種是對于該産品比較敏感，掃一掃上線後主動探索該功能（主動）。

順着這個邏輯，可以想象下為用戶設置答疑解難的功能，用戶主動探索和被動掃碼都可能遇到問題，尤其當第一次使用此産品的時候。

如果我的用戶群體大多是互聯網從業者，對于産品比較敏感，會主動體驗掃一掃功能，遇到了一些産品疑問，我的答疑環節就主要是介紹功能是什麼、怎麼操作，解答用戶在主動了解掃一掃時遇到的問題。

如果我的用戶多是對互聯網産品不敏感的用戶，多屬于被動掃碼，掃碼失敗時，答疑解難就會側重提供給用戶失敗解決方案，側重為什麼，怎麼做。

當然這些設計都需要考慮投入産出比，如果我的簽到功能隻為幾十個人設計，這個答疑功能就需要權衡是否實現或者排期了，因為我可以通過其他成本更小的方式更好地達到目的，比如做一次簽到宣貫。

2. 根據業務流程進行産品設計

除了用戶、需求、場景這三個被說爛同時也是極其重要的因素，在進行産品設計的時候還要多考慮業務流程。比如我們可以根據用戶操作掃一掃的步驟進行分階段思考和設計。

在掃一掃操作流程中，我們可以分為三個階段：觸達前、觸達時、觸達後。每個階段的産品設計都需要考慮。筆者總結了目前掃一掃在各階段的一些産品設計，主要是以下幾種：

1. 觸達前

文案和icon：

文案和icon需要根據産品調性決定，京東的掃一掃，文案是“掃啊掃”比較符合購物時放松輕快的調性，微信的掃一掃則是雙手比劃出的掃描框，比較契合微信溝通、支付的稍顯嚴肅的調性。

入口層級：

類似于愛奇藝、優酷、騰訊視頻、微博、boss直聘等之類的掃一掃功能，主要是讓用戶掃碼登陸PC，所以優先級比較低，層級比較深，在“我的”才可以找到，或者放在首頁左上角或者收納框裡面。

而對于支付寶、微信這些常用的掃一掃，觸達不超過2步，支付寶直接就把掃一掃入口放在首頁頂部。

所以根據業務不同，決定了掃一掃功能的優先級，優先級則決定了入口和層級。

2. 觸達時

預測可能性操作：

網易雲音樂、微信、QQ等的掃一掃有添加好友的動作。産品考慮到用戶可能由于客觀原因，比如相機問題、網速問題等主動添加不成功，因此會在掃一掃頁鍊接“我的二維碼”，這時可以快速調出我的二維碼，方便對方添加自己，不必去“我的”調出我的二維碼。

小米的掃一掃操作較多，包括了掃植物、翻譯等多種功能拓展，這時提供常用操作設置用戶就不用每次打開都選擇掃碼功能。

天貓和淘汰會提供快速跳轉功能，因為用戶到達這一步操作層級已經比較深了，同時很多app還會提供掃碼記錄功能，方便快速跳轉，減少重複掃描或者用來查詢記錄。

觸達時考慮用戶可能的操作，包括疑問，下一步操作等，可以減少用戶操作路徑，提升用戶體驗。

幫助用戶答疑解難：

在這一步中，個人覺得做的很好的是支付寶的掃一掃，支付寶掃碼超過一定時間文案會變化，由操作方法到操作建議再到幫助中心跳轉，幫助用戶解決掃碼過程中遇到的問題。

京東會建議用戶在掃不出來的時候手動輸入，并且給予快速入口和操作指引。天貓淘寶則會在幫助裡詳細介紹原因和解決方案。

讓用戶掃得開心:

相信大家用京東、天貓等掃實物的時候，會看到星星點點的交互，可能掃三維比掃二維時間要長，這樣的交互給用戶帶來期待的同時，還可以安撫其等待的交集感。

此外，掃到實體物品後會有标簽提醒進行快速連接。

考慮産品的商業模式：

淘寶掃一掃的界面嵌入了垃圾分類，以及會員廣告，讓整個掃一掃頁面略顯臃腫。

京東掃一掃AR模塊可以直接鍊接到店鋪直接進行商品實看和購買，同時還有AR試妝等功能。此外，為了讓廣告變得沒那麼煩人，京東設計了很多AR體驗遊戲，完成遊戲後會推送相關的産品，比如下面這個：

同時類似淘寶、京東掃一掃的AR模塊還會有很多AR體驗活動，可以作為該司的一個AR體驗站了。

拓展場景：

不同産品對應着不同的業務，不同的業務就會有不同的場景，拿電商産品來說，掃一掃可以用來AR/拍照購物，也可以掃條形碼購物，天貓在掃條形碼的時候允許手動調焦，這就是基于其條形碼在不同商品上大小不一緻的場景設計的。

再比如，進行摩拜單車掃碼操作的時候，多數人會掃車鎖那裡的二維碼，所以我們能看到很多人彎腰來掃碼，摩拜單車考慮到了這一點，如果二維碼較小會自動将其放大進行掃碼，用戶不需要進行手動縮放操作，也不用彎很深的腰了。

對于一些夜晚場景，掃一掃會提供手電筒觸發操作，快速解決獲取光線的需求，有的是輕觸即可點亮手電筒，有的會直接在掃一掃一面貼一個手電筒icon供點擊。

小米掃一掃在掃描翻譯的時候還會提供參考線，方便用戶準确地進行掃描翻譯。

可以看到不同産品設計掃一掃都會考慮到用戶在使用時的多種場景，并且給用戶提供解決方案，不同産品，業務不同，場景也就不同。

3. 觸達後

考慮産品的商業模式：

除了像淘寶直接将廣告貼在掃一掃界面，在觸達時就呈現給用戶，很多産品還選擇在有了掃描結果後提供到相應商品詳情或者店鋪的鍊接，方便快速購買，同時為平台創收。

設計要考慮流程閉環：

一個動作的發起和關閉，可能會與其他的流程有關聯。如果掃一掃的層級本來就高，或者掃一掃功能邏輯複雜，當用戶操作掃一掃來到某一層級時，通過給用戶一個快捷跳轉的操作，将會讓用戶減少很多操作步驟，一個小小的交互就可以讓用戶感覺到貼心。比如淘寶、天貓掃一掃進入幫助頁面後會提供快速跳轉。

四、掃一掃設計心得

在分析了掃一掃後，反思下産品設計除了考慮用戶、場景、需求，很重要的一點是要根據業務場景、業務流程來考慮産品設計。就拿上述掃碼簽到例子而言，其實從業務場景需求分析是不需要快速跳轉、操作記錄等功能的。同時基于業務對每個邏輯細節的處理，都要根據用戶、場景、需求來深入考慮。

将操作流程拆分，從觸達前、觸達時、觸達後進行分階段産品設計也便于理清設計邏輯，同時保證用戶體驗。

同時未來掃一掃可能也會有更多的應用場景，比如現在很火的垃圾分類。

甚至可以開個腦洞，未來每個人都有一個獨一無二的二維碼，這個二維碼就類似身份證，簽到、支付、留聯系方式等都可以通過簡單的掃一掃操作完成，不再需要在不同app間切換，也不再需要手動輸入等較為複雜的操作。

本文由 @ 佛系少年 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash, 基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部