短信驗證碼:iOS和安卓端系統的設計方案差異和最優選擇

13 評論 11610 瀏覽 51 收藏 11 分鐘

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

大家好,我是chamon,本期的研究社主要研究一下驗證碼系統在iOS和安卓端的實現差異,還有如何選擇設計方案比較合理。

越來越好用的iOS驗證碼系統

去年6月iOS12發布,蘋果系統支持了一鍵填充驗證碼的功能。而這個功能在之前的安卓系統就已經存在。

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

經過親測,幾乎很少應用會需要獲取我的短信授權,量級比較大的應用僅僅只有百度貼吧。

【研究社】短信驗證碼:iOS和安卓端系統的設計方案差異和最優選擇

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

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

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

而優化后的iOS系統操作路徑,只需要做1步:點擊系統鍵盤上面“From Message”的驗證碼。

【研究社】短信驗證碼:iOS和安卓端系統的設計方案差異和最優選擇

相對來說,安卓系統反而沒那么便捷(基于不對短信進行第三方授權基礎上)。

操作路徑如下:

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

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

【研究社】短信驗證碼:iOS和安卓端系統的設計方案差異和最優選擇

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

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

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

設計一小步,體驗一大步

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

【研究社】短信驗證碼:iOS和安卓端系統的設計方案差異和最優選擇

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

【研究社】短信驗證碼:iOS和安卓端系統的設計方案差異和最優選擇

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

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

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

新的填寫設計在體驗上的優勢:

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

會變化的體驗

但是隨著系統層級上的交互改變,原本體驗極好的設計方案,體驗也會有所變化。

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

【研究社】短信驗證碼:iOS和安卓端系統的設計方案差異和最優選擇

但當iOS系統的一鍵復制粘貼驗證碼出來之后,之前的清晰、準確、有填入感的優勢基本上就消失了。

而在安卓系統上,由于一鍵復制粘貼驗證碼因授權問題受到限制的時候,拆分數位的設計方案很可能會讓用戶崩潰。

下面舉幾個我個人經常碰到的場景:

場景1

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

【研究社】短信驗證碼:iOS和安卓端系統的設計方案差異和最優選擇

場景2

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

【研究社】短信驗證碼:iOS和安卓端系統的設計方案差異和最優選擇

場景3

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

場景4

有些App可以通過系統粘貼進行粘貼,有些App則完全沒有反應(在關閉了系統的驗證碼的高級安全設置前提下)。

【研究社】短信驗證碼:iOS和安卓端系統的設計方案差異和最優選擇

【研究社】短信驗證碼:iOS和安卓端系統的設計方案差異和最優選擇

也許有人會問:我們平時使用安卓系統是有一鍵復制和一鍵粘貼,為什么要去手動粘貼這么low?

上面說過了這跟授權問題有關,我去查過meterial design的規范,并沒有找到一鍵粘貼的,只找到了復制和粘貼。也請教過安卓朋友,確認原生系統是沒有所謂的一鍵粘貼的。你

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

設計應該怎么做?

那么我們應該怎么做這個驗證碼系統的設計呢?

個人給出的建議如下:

1. 分步填寫頁面會更好

不但用戶能更聚焦,降低出錯率。而且能減少企業成本。

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

【研究社】短信驗證碼:iOS和安卓端系統的設計方案差異和最優選擇

2. 按數位拆分不適用于安卓

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

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

【研究社】短信驗證碼:iOS和安卓端系統的設計方案差異和最優選擇

既然有好的方案,我們為什么還要自找崩潰呢?

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

【研究社】短信驗證碼:iOS和安卓端系統的設計方案差異和最優選擇

 

本文由 @Chamon 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前華為手機的安卓操作系統也是當你收到驗證碼以后,會自動在鍵盤處出現驗證碼,點擊就可以直接進行填充了

    來自福建 回復
    1. 依然是第三方的輸入法哈

      來自廣東 回復
  2. 如果按數位拆分只是一種UI表達形式,本質還是一個輸入框呢?

    來自江蘇 回復
    1. 就是一種UI表達形式,本質還是輸入框

      來自菲律賓 回復
    2. 那就不會遇到文章中說的不能直接粘貼的問題了

      來自上海 回復
    3. 這個應該是開發同學沒有做好 其實是可以復制粘貼的

      來自菲律賓 回復
    4. 確實,拆分并不是拆成6個小輸入框,其實還是一個完整的,只是視覺上是6個獨立的

      來自重慶 回復
    5. ios、安卓保持統一的數位拆分視覺樣式,沒毛病啊 ??

      來自江蘇 回復
    6. 為什么需要統一?

      來自廣東 回復
    7. 輸入框有很多種類的,有單行的input也有多行的textarea,有可以輸入漢字文本的,有僅能輸入數字密碼的。所以不要談及本質,只看實現。所以可以去跟開發去求證一下呢。我估計實現方式可能不同。

      來自廣東 回復
  3. 安卓很多輸入法(包括廠商預裝的)會提供一鍵粘貼驗證碼的功能,雖然也要授權讀取短信,但更容易接受

    來自廣東 回復
    1. 授權讀取你的短信內容,大多數人不會設置的,除非沒仔細看就同意授權的,這對隱私十分不好

      來自菲律賓 回復
    2. 文中已經提到過了??梢钥丛敿氁稽c

      來自廣東 回復