修改日志：
7.10-planB
8.25-補充

原文：

但凡做過乙方，就應該對各類活動報名頁設計有所了解，各類移動端的H5報名五花八門，在大多數(shù)情況下，都包括一個很簡單的報名流程，主要有四個核心步驟：

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

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

一般類別的活動報名行為和登錄注冊行為其實很像，所以需要填寫的信息也類似。
登錄我們主要需要填寫的有：①用戶名/賬號/手機號、②密碼；
注冊我們會比登錄多一步校驗信息和確認協(xié)議的行為。
一般來說，校驗信息的目的有兩個：1、確定所填信息的有效性；2、確定是操作人本人的意愿

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

比如說簡潔的U掌柜，都不需要設置密碼

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

比如說這類宣傳活動，聯(lián)通app內(nèi)一個活動報名頁

且不說上述案例中彈窗設計的形式好不好，界面UI好不好看，但可以看出很多登錄、注冊或者活動頁設計是離不開手機號和手機驗證碼的。

再來說說，這個獲取驗證碼本質(zhì)上是一個什么樣的存在？
正常情況下，當手機號碼輸入后，前端頁面自動判斷格式正確，這個“獲取二維碼”的button才可以被觸發(fā)（【觸發(fā)條件】），我們點擊這個button，服務器會很快響應，用戶就會收到短信驗證碼，如果再次獲取需要等待一定時間（【短信發(fā)送間隔設置】）。

但不知道大家知不知道會存在一種情況是驗證碼接口被惡意攻擊。
出現(xiàn)這種情況，驗證碼的流量（這是供應商向移動聯(lián)通電信購買的）會被快速刷完，那么會造成一部分的成本的損失，可能會上通信黑名單。

我接觸的金融服務商就碰到過這種被攻擊的情形（在金融服務行業(yè)里會碰到很多與安全性相關的問題，要特別小心對待每一個細節(jié)），所以當我們進行活動頁面設計的時候，就需要考慮到短信驗證碼的安全性。
參考了Lvcary的文章《如何防止短信驗證碼接口被惡意攻擊》
我們在后續(xù)服務的案例設計中延續(xù)了通常的采用【觸發(fā)條件】、【短信發(fā)送間隔設置】的限制，同時在發(fā)送間隔設置中也增加了，重新刷新頁面后未達到等待時長也不可以獲取驗證碼的條件，會進行“您獲取驗證碼的速度過于頻繁，請稍后再試”的文字提示；并且也做【發(fā)送量限定】每個手機號碼每天的最大發(fā)送量為10條，一系列的嚴格的限制去彌補這個問題的發(fā)生。

如果像網(wǎng)易中輸入圖形驗證碼后再獲取短信驗證碼也是可以實現(xiàn)的，但代價是用戶體驗差，兩重驗證會讓用戶失去耐心。
圖形驗證碼有很多優(yōu)勢和安全性，曾經(jīng)在pc端的使用很常見，目前pc端各類驗證碼，拼圖驗證是相對于圖形驗證的一種用戶體驗設計的改良方案。
我在一次巧合中找到了移動端一個使用拼圖驗證碼的案例，意外驚喜。

KFC的app

然后我仔細地研究了這個app的登錄流程：

KFC登錄流程

可以發(fā)現(xiàn)：
1.拼圖驗證碼是在圖1的信息確認后點擊“登錄”button觸發(fā)的，做的就是【觸發(fā)限制】
2.滑塊輕松簡易，提升了用戶體驗，同時，這塊圖片位置是非常好的廣告位置，如圖2
3.驗證通過后到圖3，有了獲取手機驗證碼的表單，同時手機號和密碼進行了鎖定，不能再修改，“登錄”字樣變成了“驗證”字樣。
基于這款app是屬于一旦登錄后可以很長時間免密碼登錄，這個登錄形式進行了一個安全等級的提升，由手機號登錄行為→拼圖驗證→手機驗證碼驗證。

將這案例分享到團隊成員，我們開展了如下討論：

1. 彈窗樣式會中斷流程影響體驗嗎？
   我的觀點：不會，當進行驗證交互的時候，拼圖的形式是一種小游戲，沒有難度，雖然是彈窗，但是會產(chǎn)生促進完成交互行為，讓人有完成欲，而不是讓人直接放棄，并不完全影響體驗。
   此外，從技術(shù)角度出發(fā)，leader補充了一個新的細節(jié)：就因為是彈窗彈層樣式，我們反而更加可以方便設計觸發(fā)這個樣式顯示的條件。

2. 當進行到圖3時，是不是非要進行表單信息的鎖定？
   我的觀點：不需要，因為我們做的頁面對于信息判斷是在圖3這步之后，不需要強制要求用戶在第一頁就輸入全部正確，如果能自行在點擊button之前發(fā)現(xiàn)錯誤字符并改正也是可以的。

3. button上的字樣從“登錄”變成“驗證”是基于什么情形，做活動頁設計的時候是不想需要變成其他字樣？
   我的觀點：并不需要將頁面的button上體現(xiàn)流程進行細分，在交互設計師眼里，這或許是有步驟細分的，但在用戶眼里，這三個頁面都是一個行為，在KFCapp中就是登陸一個行為，我們做頁面的情形下都是報名一個行為，或許我們在做具體頁面的時候可以配合整體流程寫“立即報名”→“正在報名中”等。

4. 既然我們可以做嚴格限制獲取手機驗證碼，為什么還要做這樣的設計？
   我的觀點：一方面可以雙保險，二來，這種方式可以作為一種創(chuàng)新，讓交互層級更豐滿，如果UI設計美好的話（如果在設計風格或文案上做文章）會是一種情感設計。

在思考這段流程的過程中，leader還提供了另一個案例：

蘇寧金融app

之前l(fā)eader就一直非常欣賞滑塊登錄的交互形式，如今在活動頁面的設計中，采用比拼圖更簡潔的滑塊來替代也是一個非常好的交互方式。
最后秀一下我做的demo吧！

其實頁面元素要更加真實需求來進行完善

有更好的建議歡迎留言。

另外補充一下驗證碼之外的用戶體驗思考，demo圖可能會被質(zhì)疑說為什么input位置不是用框，而是線性的？
我第一個禮拜做設計的時候，畫的input位也都是框，這個問題就直接拋給UI設計師自己去想的，當leader和UI設計師討論這個話題的時候，我也就沒有什么特別觀點，leader的觀點是，對比參考了支付寶的登錄界面，線性的設計更利于交互，在輸入時變化線的顏色，頁面會更加簡潔而精致，有科技感，特別針對互聯(lián)網(wǎng)金融產(chǎn)品來說，這種設計更加美觀。

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

除了美觀以外，對安全性也很用心，你看，我這張圖都沒p賬號

UI設計師特意要我在提到KFC的設計時，要分析框的形狀會讓人有封閉感，讓界面擁擠，我在這里寫了哦（

秀一下我和我司優(yōu)秀的UI設計師第一次合作做的一個項目截圖，不好意思，我不想放完整清晰的設計稿，你們懂的

歡迎與各位同行交流，有不恰當?shù)牡胤秸堉刚c君共勉;-)

最后，擴展閱讀：有哪些吃西餐時非常 low 的行為？

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

從左往右：未輸入、獲取驗證碼樣式、輸入驗證碼樣式、輸錯樣式

其實和彈窗的三態(tài)一致，缺點是增加了頁面長度，優(yōu)點是沒有彈窗了，為了配合線性設計而做的滑動小圓球，但只有第一次出現(xiàn)會提醒滑動，報錯后不會提醒。
同理，其實可以全部做成框，以及用滑動的方式推開一個可輸入的對話框也是ok的，這個看頁面內(nèi)容和風格而定吧。
其實再細致地去推敲應該還有很多形式，希望更對有意思的想法反饋給我！

【8.25】看到一個網(wǎng)易的案例，在獲取驗證碼前用了拼圖滑塊！！

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

更新停不下來?。。。?！?(? ? ??)嘿嘿