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

尋夢新聞LINE@每日推播熱門推薦文章,趣聞不漏接❤️

加入LINE好友

文章目錄[ 隱藏 ]

  • 場景1
  • 場景2
  • 場景3
  • 場景4
  • 1. 分步填寫頁面會更好
  • 2. 按數位拆分不適用於安卓

摘要:下面舉幾個我個人經常碰到的場景:。而在安卓系統上,由於一鍵復制黏貼驗證碼因授權問題受到限制的時候,拆分數位的設計方案很可能會讓用戶崩潰。

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

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

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

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

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

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

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

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

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

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

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

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

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

相對來說,安卓系統反而沒那麼便捷(基於不對簡訊進行第三方授權基礎上)。

操作路徑如下:

點擊收到簡訊的「一鍵復制按鈕」(3-5秒有效)>點擊輸入框>長按/雙擊>點擊黏貼選項

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

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

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

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

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

設計一小步,體驗一大步

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

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

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

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

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

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

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

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

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

會變化的體驗

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

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

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

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

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

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

場景1

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

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

場景2

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

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

場景3

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

場景4

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

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

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

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

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

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

設計應該怎麼做?

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

個人給出的建議如下:

1. 分步填寫頁面會更好

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

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

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

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

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

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

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

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

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

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

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

題圖來自 Unsplash,基於 CC0 協議

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

About 尋夢園
尋夢園是台灣最大的聊天室及交友社群網站。 致力於發展能夠讓會員們彼此互動、盡情分享自我的平台。 擁有數百間不同的聊天室 ,讓您隨時隨地都能找到志同道合的好友!