修改日志：
7.10-planB
8.25-補(bǔ)充
原文：
但凡做過乙方莹妒，就應(yīng)該對各類活動報名頁設(shè)計有所了解，各類移動端的H5報名五花八門罗心，在大多數(shù)情況下拄踪，都包括一個很簡單的報名流程，主要有四個核心步驟：
- 主辦方的活動描述（宣傳頁面）
- 用戶輸入信息進(jìn)行報名（報名頁面）
- 后臺進(jìn)行信息驗證（報名頁面的驗證狀態(tài)）
- 用戶是否享受活動的信息反饋（結(jié)果反饋頁）
在這篇文章中撵儿，我主要想展開思考的就是2-3之間的交互流程乘客。
一般類別的活動報名行為和登錄注冊行為其實很像，所以需要填寫的信息也類似淀歇。
登錄我們主要需要填寫的有：①用戶名/賬號/手機(jī)號易核、②密碼；
注冊我們會比登錄多一步校驗信息和確認(rèn)協(xié)議的行為浪默。
一般來說牡直，校驗信息的目的有兩個：1、確定所填信息的有效性纳决；2碰逸、確定是操作人本人的意愿
所以我們一般會在各類app上看到很多注冊流程都可以簡化到用手機(jī)號碼注冊，獲取驗證碼阔加，然后設(shè)置密碼饵史，就注冊成功了。
參考這樣的使用方式约急，很多活動頁也是可以簡化到通過手機(jī)號碼報名零远，獲取驗證碼，確定報名厌蔽，（默認(rèn)）同意活動協(xié)議牵辣，就可以跳轉(zhuǎn)到或者看到報名成功的反饋結(jié)果了。
且不說上述案例中彈窗設(shè)計的形式好不好纬向，界面UI好不好看，但可以看出很多登錄戴卜、注冊或者活動頁設(shè)計是離不開手機(jī)號和手機(jī)驗證碼的逾条。
再來說說，這個獲取驗證碼本質(zhì)上是一個什么樣的存在投剥？
正常情況下师脂，當(dāng)手機(jī)號碼輸入后，前端頁面自動判斷格式正確江锨，這個“獲取二維碼”的button才可以被觸發(fā)（【觸發(fā)條件】）吃警，我們點擊這個button，服務(wù)器會很快響應(yīng)啄育，用戶就會收到短信驗證碼酌心，如果再次獲取需要等待一定時間（【短信發(fā)送間隔設(shè)置】）。
但不知道大家知不知道會存在一種情況是驗證碼接口被惡意攻擊挑豌。
出現(xiàn)這種情況安券，驗證碼的流量（這是供應(yīng)商向移動聯(lián)通電信購買的）會被快速刷完，那么會造成一部分的成本的損失氓英，可能會上通信黑名單侯勉。
我接觸的金融服務(wù)商就碰到過這種被攻擊的情形（在金融服務(wù)行業(yè)里會碰到很多與安全性相關(guān)的問題，要特別小心對待每一個細(xì)節(jié)）债蓝，所以當(dāng)我們進(jìn)行活動頁面設(shè)計的時候壳鹤，就需要考慮到短信驗證碼的安全性。
參考了Lvcary的文章《如何防止短信驗證碼接口被惡意攻擊》
我們在后續(xù)服務(wù)的案例設(shè)計中延續(xù)了通常的采用【觸發(fā)條件】饰迹、【短信發(fā)送間隔設(shè)置】的限制芳誓，同時在發(fā)送間隔設(shè)置中也增加了，重新刷新頁面后未達(dá)到等待時長也不可以獲取驗證碼的條件啊鸭，會進(jìn)行“您獲取驗證碼的速度過于頻繁锹淌，請稍后再試”的文字提示；并且也做【發(fā)送量限定】每個手機(jī)號碼每天的最大發(fā)送量為10條赠制，一系列的嚴(yán)格的限制去彌補(bǔ)這個問題的發(fā)生赂摆。
如果像網(wǎng)易中輸入圖形驗證碼后再獲取短信驗證碼也是可以實現(xiàn)的挟憔，但代價是用戶體驗差，兩重驗證會讓用戶失去耐心烟号。
圖形驗證碼有很多優(yōu)勢和安全性绊谭，曾經(jīng)在pc端的使用很常見，目前pc端各類驗證碼汪拥，拼圖驗證是相對于圖形驗證的一種用戶體驗設(shè)計的改良方案达传。
我在一次巧合中找到了移動端一個使用拼圖驗證碼的案例，意外驚喜迫筑。
然后我仔細(xì)地研究了這個app的登錄流程：
可以發(fā)現(xiàn)：
1.拼圖驗證碼是在圖1的信息確認(rèn)后點擊“登錄”button觸發(fā)的宪赶，做的就是【觸發(fā)限制】
2.滑塊輕松簡易，提升了用戶體驗脯燃，同時搂妻，這塊圖片位置是非常好的廣告位置，如圖2
3.驗證通過后到圖3辕棚，有了獲取手機(jī)驗證碼的表單欲主，同時手機(jī)號和密碼進(jìn)行了鎖定，不能再修改坟募，“登錄”字樣變成了“驗證”字樣岛蚤。
基于這款app是屬于一旦登錄后可以很長時間免密碼登錄，這個登錄形式進(jìn)行了一個安全等級的提升懈糯，由手機(jī)號登錄行為→拼圖驗證→手機(jī)驗證碼驗證。
將這案例分享到團(tuán)隊成員单雾，我們開展了如下討論：
彈窗樣式會中斷流程影響體驗嗎赚哗？
我的觀點：不會，當(dāng)進(jìn)行驗證交互的時候硅堆，拼圖的形式是一種小游戲屿储，沒有難度，雖然是彈窗渐逃，但是會產(chǎn)生促進(jìn)完成交互行為够掠，讓人有完成欲，而不是讓人直接放棄茄菊，并不完全影響體驗疯潭。
此外，從技術(shù)角度出發(fā)面殖，leader補(bǔ)充了一個新的細(xì)節(jié)：就因為是彈窗彈層樣式竖哩，我們反而更加可以方便設(shè)計觸發(fā)這個樣式顯示的條件。當(dāng)進(jìn)行到圖3時脊僚，是不是非要進(jìn)行表單信息的鎖定相叁？
我的觀點：不需要，因為我們做的頁面對于信息判斷是在圖3這步之后，不需要強(qiáng)制要求用戶在第一頁就輸入全部正確增淹，如果能自行在點擊button之前發(fā)現(xiàn)錯誤字符并改正也是可以的椿访。button上的字樣從“登錄”變成“驗證”是基于什么情形，做活動頁設(shè)計的時候是不想需要變成其他字樣虑润？
我的觀點：并不需要將頁面的button上體現(xiàn)流程進(jìn)行細(xì)分赎离，在交互設(shè)計師眼里，這或許是有步驟細(xì)分的端辱，但在用戶眼里梁剔，這三個頁面都是一個行為，在KFCapp中就是登陸一個行為舞蔽，我們做頁面的情形下都是報名一個行為荣病，或許我們在做具體頁面的時候可以配合整體流程寫“立即報名”→“正在報名中”等。既然我們可以做嚴(yán)格限制獲取手機(jī)驗證碼渗柿，為什么還要做這樣的設(shè)計个盆？
我的觀點：一方面可以雙保險，二來朵栖，這種方式可以作為一種創(chuàng)新颊亮，讓交互層級更豐滿，如果UI設(shè)計美好的話（如果在設(shè)計風(fēng)格或文案上做文章）會是一種情感設(shè)計陨溅。
在思考這段流程的過程中终惑，leader還提供了另一個案例：
之前l(fā)eader就一直非常欣賞滑塊登錄的交互形式，如今在活動頁面的設(shè)計中门扇，采用比拼圖更簡潔的滑塊來替代也是一個非常好的交互方式雹有。
最后秀一下我做的demo吧！
有更好的建議歡迎留言臼寄。
另外補(bǔ)充一下驗證碼之外的用戶體驗思考霸奕，demo圖可能會被質(zhì)疑說為什么input位置不是用框，而是線性的吉拳？
我第一個禮拜做設(shè)計的時候质帅，畫的input位也都是框，這個問題就直接拋給UI設(shè)計師自己去想的留攒，當(dāng)leader和UI設(shè)計師討論這個話題的時候煤惩，我也就沒有什么特別觀點，leader的觀點是稼跳，對比參考了支付寶的登錄界面盟庞，線性的設(shè)計更利于交互，在輸入時變化線的顏色汤善，頁面會更加簡潔而精致什猖，有科技感票彪，特別針對互聯(lián)網(wǎng)金融產(chǎn)品來說，這種設(shè)計更加美觀不狮。
之后降铸，我發(fā)現(xiàn)線性的設(shè)計會讓用戶的視線更加集中于輸入的字符上，而不是復(fù)雜的畫面摇零，雖然市面上各種登錄注冊都很漂亮推掸，但單純從目的去設(shè)計的話，線性真是又方便又好看呀驻仅，對做交互原型的我來說真是友好（X
UI設(shè)計師特意要我在提到KFC的設(shè)計時毡泻，要分析框的形狀會讓人有封閉感，讓界面擁擠粘优，我在這里寫了哦（
歡迎與各位同行交流丹墨，有不恰當(dāng)?shù)牡胤秸堉刚c君共勉;-)
最后嬉愧，擴(kuò)展閱讀：有哪些吃西餐時非常 low 的行為贩挣？
【7.10更新】
感覺這個議題的研究真的很有趣，我今天又和一位設(shè)計師討論到這個問題英染，他的意見也是認(rèn)為彈窗彈層會影響行為中斷揽惹，說心里話，我很想做一個關(guān)于“行為中斷”的用戶調(diào)研四康，或許是A/Btest的方式，苦于沒有可以研究的對象和技術(shù)手段狭握，好吧闪金，為了防止行為中斷，我也作了一個planB：
其實和彈窗的三態(tài)一致恃疯，缺點是增加了頁面長度漏设，優(yōu)點是沒有彈窗了，為了配合線性設(shè)計而做的滑動小圓球今妄，但只有第一次出現(xiàn)會提醒滑動郑口，報錯后不會提醒鸳碧。
同理，其實可以全部做成框犬性，以及用滑動的方式推開一個可輸入的對話框也是ok的瞻离，這個看頁面內(nèi)容和風(fēng)格而定吧。
其實再細(xì)致地去推敲應(yīng)該還有很多形式乒裆，希望更對有意思的想法反饋給我套利！
【8.25】看到一個網(wǎng)易的案例，在獲取驗證碼前用了拼圖滑塊：姿！肉迫！
更新停不下來！８寤啤：吧馈！抛猖！?(? ? ??)嘿嘿
