登錄動作往往伴隨著驗證碼，這在iOS和安卓端的實現(xiàn)上存在差異，筆者以此為題進行了分析并提出了相應(yīng)建議。

大家好，我是chamon，本期的研究社主要研究一下驗證碼系統(tǒng)在iOS和安卓端的實現(xiàn)差異，還有如何選擇設(shè)計方案比較合理。

越來越好用的iOS驗證碼系統(tǒng)

去年6月iOS12發(fā)布，蘋果系統(tǒng)支持了一鍵填充驗證碼的功能。而這個功能在之前的安卓系統(tǒng)就已經(jīng)存在。

安卓甚至可以實現(xiàn)更方便的“自動讀取短信并填充驗證碼”，不用點擊“一鍵復(fù)制驗證碼”，但是這個實現(xiàn)需要獲取短信授權(quán)。這個授權(quán)其實是一個高風險的授權(quán)，涉及信息安全和個人隱私問題（第三方應(yīng)用可以通過短信授權(quán)訪問你的短信內(nèi)容，包括一些隱私和涉及財產(chǎn)安全的短信，所以我自己一般是不允許的）。

經(jīng)過親測，幾乎很少應(yīng)用會需要獲取我的短信授權(quán)，量級比較大的應(yīng)用僅僅只有百度貼吧。

可能是這也跟2017年6月1日實施的《網(wǎng)絡(luò)安全法》41條上面規(guī)定的“網(wǎng)絡(luò)運營者不得收集與其提供的服務(wù)無關(guān)的個人信息”也有一定的關(guān)系。

對于iOS12新出的一鍵填充驗證碼功能，我個人是覺得非常方便的。先來分析一下用戶的操作路徑，傳統(tǒng)的獲取短信驗證碼需要經(jīng)過：

切換程序>點擊收到的短信>復(fù)制/記住驗證碼>切換程序>5 輸入/黏貼驗證碼

而優(yōu)化后的iOS系統(tǒng)操作路徑，只需要做1步：點擊系統(tǒng)鍵盤上面“From Message”的驗證碼。

相對來說，安卓系統(tǒng)反而沒那么便捷（基于不對短信進行第三方授權(quán)基礎(chǔ)上）。

操作路徑如下：

點擊收到短信的“一鍵復(fù)制按鈕”（3-5秒有效）>點擊輸入框>長按/雙擊>點擊粘貼選項

其實很多安卓手機都默認用自帶的第三方輸入法，例如百度輸入法、搜狗輸入法。這些輸入法都有粘貼板，所以上面的路徑“長按/雙擊”就可以替換成“點擊輸入法的粘貼板一鍵粘貼”（粘貼板的體驗各異，搜狗輸入法沒有時間限制、百度輸入法有3秒左右限制）。

為什么iOS會更便捷好用呢？

因為iOS在收到驗證碼之后，會彈出系統(tǒng)的鍵盤，并且獲取短信。系統(tǒng)獲取短信就不用擔心第三方應(yīng)用嗅探短信造成個人隱私或財產(chǎn)安全漏洞。而且無論用什么第三方應(yīng)用，用什么第三方輸入法，體驗都是一致的。

安卓則會因為手機品牌不同，輸入法不同的原因造成不一致的體驗。

設(shè)計一小步，體驗一大步

不知道從什么時候開始，一些App就把填寫手機號碼和填寫驗證碼拆開分成兩步。

再然后就是把驗證碼的輸入框按數(shù)位拆分，拆成獨立的下劃線或者是獨立的格子。

雖然只是很簡單的改變，但是里面包含的體驗卻是有了很大的提升。分兩步填寫的設(shè)計相比起同一個頁面填寫有以下這些好處：

• 減少單個頁面內(nèi)需要填寫的內(nèi)容，讓用戶更專注于當前要填寫的內(nèi)容；
• 在輸入手機后需要點擊下一步按鈕進行確認，這個時候會下意識進行檢查；
• 因為上面兩點，大大降低輸錯手機號所造成的企業(yè)短信成本。

而把驗證碼的輸入框按數(shù)位拆分，在顯示上變得更清晰，更容易校對，減少出錯率。

新的填寫設(shè)計在體驗上的優(yōu)勢：

• 能提前讓用戶對于驗證碼的位數(shù)有心理預(yù)期，體驗更舒適；
• 從位數(shù)上限制了輸入錯誤，錯誤后會自動清空，讓用戶重新填寫，減少校對的耗時。

會變化的體驗

但是隨著系統(tǒng)層級上的交互改變，原本體驗極好的設(shè)計方案，體驗也會有所變化。

按數(shù)位拆分的設(shè)計方案早期常見于銀行卡號和支付密碼的填寫。注意，這里是填寫，填寫需要的是清晰、準確、有填入感。所以，在填寫驗證碼系統(tǒng)用拆分數(shù)位的設(shè)計方案簡直就是再好不過的體驗。

但當iOS系統(tǒng)的一鍵復(fù)制粘貼驗證碼出來之后，之前的清晰、準確、有填入感的優(yōu)勢基本上就消失了。

而在安卓系統(tǒng)上，由于一鍵復(fù)制粘貼驗證碼因授權(quán)問題受到限制的時候，拆分數(shù)位的設(shè)計方案很可能會讓用戶崩潰。

下面舉幾個我個人經(jīng)常碰到的場景：

場景1

辛辛苦苦復(fù)制了一串6位的驗證碼字符，最后卻只給了我一個的格子進行粘貼，這很反人類，還有點便秘的感覺。

場景2

部分App在點擊第一格的時候，App并不給我顯示點擊反饋，我都不知道自己是否已經(jīng)點中并開始觸發(fā)長按。

場景3

當我習(xí)慣了這種手動粘貼體驗之后，App最后竟然讓我只能復(fù)制第一個字符到第一個格子；剩下的我又要重新去切換程序到短信內(nèi)容，重新看一遍，記住并填寫（當時真的很想卸載App，某些App的體驗Bug，圖找不到了）。

場景4

有些App可以通過系統(tǒng)粘貼進行粘貼，有些App則完全沒有反應(yīng)（在關(guān)閉了系統(tǒng)的驗證碼的高級安全設(shè)置前提下）。

也許有人會問：我們平時使用安卓系統(tǒng)是有一鍵復(fù)制和一鍵粘貼，為什么要去手動粘貼這么low？

上面說過了這跟授權(quán)問題有關(guān)，我去查過meterial design的規(guī)范，并沒有找到一鍵粘貼的，只找到了復(fù)制和粘貼。也請教過安卓朋友，確認原生系統(tǒng)是沒有所謂的一鍵粘貼的。你

看到的只不過是第三方輸入法彈出的粘貼板貼心功能。在默認的系統(tǒng)輸入法，只能通過雙擊或者長按進行粘貼。

設(shè)計應(yīng)該怎么做？

那么我們應(yīng)該怎么做這個驗證碼系統(tǒng)的設(shè)計呢？

個人給出的建議如下：

1. 分步填寫頁面會更好

不但用戶能更聚焦，降低出錯率。而且能減少企業(yè)成本。

至于用戶修改需要返回上一步耗費的時間成本，既然是用戶在降低出錯率都能粗心造成的錯誤，由用戶承擔一定的修改時間成本也是理所當然的，而且最重要的是，修改并不是高頻的行為。

2. 按數(shù)位拆分不適用于安卓

iOS當然還是用拆分數(shù)位設(shè)計比較好，雖然一鍵粘貼之后，這種方案變得雞肋。但是當需要去填寫的時候，拆分數(shù)位的設(shè)計方案還是最優(yōu)的。

而安卓由于太多限制，包括上面提到過的短信授權(quán)，還有信息設(shè)置里面的驗證碼安全設(shè)置，都能夠讓你不能順利好好粘貼驗證碼。但是我體驗了大部分采用不拆分數(shù)位設(shè)計方案的App，都沒有上面無法粘貼的問題。

既然有好的方案，我們?yōu)槭裁催€要自找崩潰呢？

不拆分數(shù)位不代表不能變大變清晰，可以通過間距和字號大小來做達到拆分數(shù)位的效果（下圖僅供參考）。

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

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