在這篇文章中，本文作者主要是結(jié)合自身經(jīng)驗(yàn)，并對活動(dòng)報(bào)名頁中“獲取手機(jī)驗(yàn)證碼”的用戶體驗(yàn)設(shè)計(jì)進(jìn)行思考。enjoy~

因?yàn)樽鲆曳?，所以對各類活?dòng)報(bào)名頁設(shè)計(jì)有所了解，各類移動(dòng)端的H5報(bào)名五花八門，在大多數(shù)情況下，都包括一個(gè)很簡單的報(bào)名流程，主要有四個(gè)核心步驟：

1. 主辦方的活動(dòng)描述（宣傳頁面）
2. 用戶輸入信息進(jìn)行報(bào)名（報(bào)名頁面）
3. 后臺進(jìn)行信息驗(yàn)證（報(bào)名頁面的驗(yàn)證狀態(tài)）
4. 用戶是否享受活動(dòng)的信息反饋（結(jié)果反饋頁）

在這篇文章中，主要想展開思考的就是2-3之間的交互流程。

一般類別的活動(dòng)報(bào)名行為和登錄注冊行為其實(shí)很像，所以需要填寫的信息也類似。

登錄我們主要需要填寫的有：

1. 用戶名/賬號/手機(jī)號
2. 密碼

注冊我們會(huì)比登錄多一步校驗(yàn)信息和確認(rèn)協(xié)議的行為。

一般來說，校驗(yàn)信息的目的有兩個(gè)：

1. 確定所填信息的有效性；
2. 確定是操作人本人的意愿。

所以，我們一般會(huì)在各類app上看到很多注冊流程都可以簡化到用手機(jī)號碼注冊，獲取驗(yàn)證碼，然后設(shè)置密碼，就注冊成功了。

比如說簡潔的U掌柜，都不需要設(shè)置密碼。

參考這樣的使用方式，很多活動(dòng)頁也是可以簡化到通過手機(jī)號碼報(bào)名，獲取驗(yàn)證碼，確定報(bào)名，（默認(rèn)）同意活動(dòng)協(xié)議，就可以跳轉(zhuǎn)到或者看到報(bào)名成功的反饋結(jié)果了。

比如說這類宣傳活動(dòng)，聯(lián)通app內(nèi)一個(gè)活動(dòng)報(bào)名頁

且不說上述案例中彈窗設(shè)計(jì)的形式好不好，界面UI好不好看，但可以看出很多登錄、注冊或者活動(dòng)頁設(shè)計(jì)是離不開手機(jī)號和手機(jī)驗(yàn)證碼的。

再來說說，這個(gè)獲取驗(yàn)證碼本質(zhì)上是一個(gè)什么樣的存在？

正常情況下，當(dāng)手機(jī)號碼輸入后，前端頁面自動(dòng)判斷格式正確，這個(gè)“獲取二維碼”的button才可以被觸發(fā)（【觸發(fā)條件】），我們點(diǎn)擊這個(gè)button，服務(wù)器會(huì)很快響應(yīng)，用戶就會(huì)收到短信驗(yàn)證碼，如果再次獲取需要等待一定時(shí)間（【短信發(fā)送間隔設(shè)置】）。

但不知道大家知不知道會(huì)存在一種情況是驗(yàn)證碼接口被惡意攻擊。

出現(xiàn)這種情況，驗(yàn)證碼的流量（這是供應(yīng)商向移動(dòng)聯(lián)通電信購買的）會(huì)被快速刷完，那么會(huì)造成一部分的成本的損失，可能會(huì)上通信黑名單。

我接觸的金融服務(wù)商就碰到過這種被攻擊的情形（在金融服務(wù)行業(yè)里會(huì)碰到很多與安全性相關(guān)的問題，要特別小心對待每一個(gè)細(xì)節(jié)），所以當(dāng)我們進(jìn)行活動(dòng)頁面設(shè)計(jì)的時(shí)候，就需要考慮到短信驗(yàn)證碼的安全性。（參考了Lvcary的文章《如何防止短信驗(yàn)證碼接口被惡意攻擊》）

我們在后續(xù)服務(wù)的案例設(shè)計(jì)中延續(xù)了通常的采用【觸發(fā)條件】、【短信發(fā)送間隔設(shè)置】的限制，同時(shí)在發(fā)送間隔設(shè)置中也增加了，重新刷新頁面后未達(dá)到等待時(shí)長也不可以獲取驗(yàn)證碼的條件，會(huì)進(jìn)行“您獲取驗(yàn)證碼的速度過于頻繁，請稍后再試”的文字提示；并且也做【發(fā)送量限定】每個(gè)手機(jī)號碼每天的最大發(fā)送量為10條，一系列的嚴(yán)格的限制去彌補(bǔ)這個(gè)問題的發(fā)生。

如果像網(wǎng)易中輸入圖形驗(yàn)證碼后再獲取短信驗(yàn)證碼也是可以實(shí)現(xiàn)的，但代價(jià)是用戶體驗(yàn)差，兩重驗(yàn)證會(huì)讓用戶失去耐心。

圖形驗(yàn)證碼有很多優(yōu)勢和安全性，曾經(jīng)在pc端的使用很常見，目前pc端各類驗(yàn)證碼，拼圖驗(yàn)證是相對于圖形驗(yàn)證的一種用戶體驗(yàn)設(shè)計(jì)的改良方案。

我在一次巧合中找到了移動(dòng)端一個(gè)使用拼圖驗(yàn)證碼的案例，意外驚喜。

然后，我仔細(xì)地研究了KFCapp的登錄流程：

可以發(fā)現(xiàn)：

1. 拼圖驗(yàn)證碼是在圖1的信息確認(rèn)后點(diǎn)擊“登錄”button觸發(fā)的，做的就是【觸發(fā)限制】
2. 滑塊輕松簡易，提升了用戶體驗(yàn)，同時(shí)，這塊圖片位置是非常好的廣告位置，如圖2
3. 驗(yàn)證通過后到圖3，有了獲取手機(jī)驗(yàn)證碼的表單，同時(shí)手機(jī)號和密碼進(jìn)行了鎖定，不能再修改，“登錄”字樣變成了“驗(yàn)證”字樣。

基于這款app是屬于一旦登錄后可以很長時(shí)間免密碼登錄，這個(gè)登錄形式進(jìn)行了一個(gè)安全等級的提升，由手機(jī)號登錄行為→拼圖驗(yàn)證→手機(jī)驗(yàn)證碼驗(yàn)證。

將這案例可以開展了如下討論：

（1）彈窗樣式會(huì)中斷流程影響體驗(yàn)嗎？

我的觀點(diǎn)：不會(huì)，當(dāng)進(jìn)行驗(yàn)證交互的時(shí)候，拼圖的形式是一種小游戲，沒有難度，雖然是彈窗，但是會(huì)產(chǎn)生促進(jìn)完成交互行為，讓人有完成欲，而不是讓人直接放棄，并不完全影響體驗(yàn)。

此外，從技術(shù)角度出發(fā)，leader補(bǔ)充了一個(gè)新的細(xì)節(jié)：就因?yàn)槭菑棿皬棇訕邮?，我們反而更加可以方便設(shè)計(jì)觸發(fā)這個(gè)樣式顯示的條件。

（2）當(dāng)進(jìn)行到圖3時(shí)，是不是非要進(jìn)行表單信息的鎖定？

我的觀點(diǎn)：不需要，因?yàn)槲覀冏龅捻撁鎸τ谛畔⑴袛嗍窃趫D3這步之后，不需要強(qiáng)制要求用戶在第一頁就輸入全部正確，如果能自行在點(diǎn)擊button之前發(fā)現(xiàn)錯(cuò)誤字符并改正也是可以的。

（3）button上的字樣從“登錄”變成“驗(yàn)證”是基于什么情形，做活動(dòng)頁設(shè)計(jì)的時(shí)候是不想需要變成其他字樣？

我的觀點(diǎn)：并不需要將頁面的button上體現(xiàn)流程進(jìn)行細(xì)分，在交互設(shè)計(jì)師眼里，這或許是有步驟細(xì)分的，但在用戶眼里，這三個(gè)頁面都是一個(gè)行為，在KFCapp中就是登陸一個(gè)行為，我們做頁面的情形下都是報(bào)名一個(gè)行為，或許我們在做具體頁面的時(shí)候可以配合整體流程寫“立即報(bào)名”→“正在報(bào)名中”等。

（4）既然我們可以做嚴(yán)格限制獲取手機(jī)驗(yàn)證碼，為什么還要做這樣的設(shè)計(jì)？

我的觀點(diǎn)：一方面可以雙保險(xiǎn)，二來，這種方式可以作為一種創(chuàng)新，讓交互層級更豐滿，如果UI設(shè)計(jì)美好的話（如果在設(shè)計(jì)風(fēng)格或文案上做文章）會(huì)是一種情感設(shè)計(jì)。

在思考這段流程的過程中，還找到了蘇寧金融app案例：

在活動(dòng)頁面的設(shè)計(jì)中，采用比拼圖更簡潔的滑塊來替代也是一個(gè)非常好的交互方式。

最后秀一下demo吧！

其實(shí)頁面元素要更加真實(shí)需求來進(jìn)行完善，有更好的建議歡迎留言。

另外補(bǔ)充一下驗(yàn)證碼之外的用戶體驗(yàn)思考：demo圖可能會(huì)被質(zhì)疑說為什么input位置不是框，而是線性的？

我第一個(gè)禮拜做設(shè)計(jì)的時(shí)候，畫的input位也都是框，但UI設(shè)計(jì)師給我的回答是，框的形狀會(huì)讓人有封閉感，讓界面擁擠，同時(shí)線性的設(shè)計(jì)更利于交互，在輸入時(shí)變化線的顏色，頁面會(huì)更加簡潔而精致，有科技感，特別針對互聯(lián)網(wǎng)金融產(chǎn)品來說，這種設(shè)計(jì)更加美觀。

之后，我發(fā)現(xiàn)線性的設(shè)計(jì)會(huì)讓用戶的視線更加集中于輸入的字符上，而不是復(fù)雜的畫面，雖然市面上各種登錄注冊都很漂亮，但單純從目的去設(shè)計(jì)的話，線性真是又方便又好看呀，對做交互原型來說也是簡潔又友好XD

支付寶的app除了美觀以外，對安全性也很用心，你看，脫敏賬號的顯示！

【后續(xù)更新-防止中斷】

感覺這個(gè)議題的研究真的很有趣，又和一位設(shè)計(jì)師討論到這個(gè)問題，他的意見也是認(rèn)為彈窗彈層會(huì)影響行為中斷，說心里話，我很想做一個(gè)關(guān)于“行為中斷”的用戶調(diào)研，或許是A/Btest的方式，苦于沒有可以研究的對象和技術(shù)手段，好吧，為了防止行為中斷，我也作了一個(gè)planB：

從左往右：未輸入、獲取驗(yàn)證碼樣式、輸入驗(yàn)證碼樣式、輸錯(cuò)樣式

其實(shí)和彈窗的三態(tài)一致，缺點(diǎn)是增加了頁面長度，優(yōu)點(diǎn)是沒有彈窗了，為了配合線性設(shè)計(jì)而做的滑動(dòng)小圓球，但只有第一次出現(xiàn)會(huì)提醒滑動(dòng)，報(bào)錯(cuò)后不會(huì)提醒。

同理，其實(shí)可以全部做成框，以及用滑動(dòng)的方式推開一個(gè)可輸入的對話框也是ok的，這個(gè)看頁面內(nèi)容和風(fēng)格而定吧。
其實(shí)再細(xì)致地去推敲應(yīng)該還有很多形式，有意思的想法歡迎反饋繼續(xù)討論！

在此文寫完之后，我還看到一個(gè)網(wǎng)易的案例，在獲取驗(yàn)證碼前用了拼圖滑塊?。⊙a(bǔ)充給各位~

微信內(nèi)網(wǎng)易考拉獲取優(yōu)惠券進(jìn)行手機(jī)驗(yàn)證的交互

以上，感謝閱讀，與君共勉~

作者：Eliza（森森），UX、交互設(shè)計(jì)新人、1年產(chǎn)品運(yùn)營&用研、2年新媒體運(yùn)營。

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

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