中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在這篇文章中，本文作者主要是結合自身經驗，并對活動報名頁中“獲取手機驗證碼”的用戶體驗設計進行思考。enjoy~

因為做乙方，所以對各類活動報名頁設計有所了解，各類移動端的H5報名五花八門，在大多數情況下，都包括一個很簡單的報名流程，主要有四個核心步驟：

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

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

一般類別的活動報名行為和登錄注冊行為其實很像，所以需要填寫的信息也類似。

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

1. 用戶名/賬號/手機號
2. 密碼

注冊我們會比登錄多一步校驗信息和確認協議的行為。

一般來說，校驗信息的目的有兩個：

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

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

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

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

比如說這類宣傳活動，聯通app內一個活動報名頁

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

再來說說，這個獲取驗證碼本質上是一個什么樣的存在？

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

但不知道大家知不知道會存在一種情況是驗證碼接口被惡意攻擊。

出現這種情況，驗證碼的流量（這是供應商向移動聯通電信購買的）會被快速刷完，那么會造成一部分的成本的損失，可能會上通信黑名單。

我接觸的金融服務商就碰到過這種被攻擊的情形（在金融服務行業里會碰到很多與安全性相關的問題，要特別小心對待每一個細節），所以當我們進行活動頁面設計的時候，就需要考慮到短信驗證碼的安全性。（參考了Lvcary的文章《如何防止短信驗證碼接口被惡意攻擊》）

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

如果像網易中輸入圖形驗證碼后再獲取短信驗證碼也是可以實現的，但代價是用戶體驗差，兩重驗證會讓用戶失去耐心。

圖形驗證碼有很多優勢和安全性，曾經在pc端的使用很常見，目前pc端各類驗證碼，拼圖驗證是相對于圖形驗證的一種用戶體驗設計的改良方案。

我在一次巧合中找到了移動端一個使用拼圖驗證碼的案例，意外驚喜。

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

可以發現：

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

基于這款app是屬于一旦登錄后可以很長時間免密碼登錄，這個登錄形式進行了一個安全等級的提升，由手機號登錄行為→拼圖驗證→手機驗證碼驗證。

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

（1）彈窗樣式會中斷流程影響體驗嗎？

我的觀點：不會，當進行驗證交互的時候，拼圖的形式是一種小游戲，沒有難度，雖然是彈窗，但是會產生促進完成交互行為，讓人有完成欲，而不是讓人直接放棄，并不完全影響體驗。

此外，從技術角度出發，leader補充了一個新的細節：就因為是彈窗彈層樣式，我們反而更加可以方便設計觸發這個樣式顯示的條件。

（2）當進行到圖3時，是不是非要進行表單信息的鎖定？

我的觀點：不需要，因為我們做的頁面對于信息判斷是在圖3這步之后，不需要強制要求用戶在第一頁就輸入全部正確，如果能自行在點擊button之前發現錯誤字符并改正也是可以的。

（3）button上的字樣從“登錄”變成“驗證”是基于什么情形，做活動頁設計的時候是不想需要變成其他字樣？

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

（4）既然我們可以做嚴格限制獲取手機驗證碼，為什么還要做這樣的設計？

我的觀點：一方面可以雙保險，二來，這種方式可以作為一種創新，讓交互層級更豐滿，如果UI設計美好的話（如果在設計風格或文案上做文章）會是一種情感設計。

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

在活動頁面的設計中，采用比拼圖更簡潔的滑塊來替代也是一個非常好的交互方式。

最后秀一下demo吧！

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

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

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

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

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

【后續更新-防止中斷】

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

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

其實和彈窗的三態一致，缺點是增加了頁面長度，優點是沒有彈窗了，為了配合線性設計而做的滑動小圓球，但只有第一次出現會提醒滑動，報錯后不會提醒。

同理，其實可以全部做成框，以及用滑動的方式推開一個可輸入的對話框也是ok的，這個看頁面內容和風格而定吧。
其實再細致地去推敲應該還有很多形式，有意思的想法歡迎反饋繼續討論！

在此文寫完之后，我還看到一個網易的案例，在獲取驗證碼前用了拼圖滑塊?。⊙a充給各位~

微信內網易考拉獲取優惠券進行手機驗證的交互

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

作者：Eliza（森森），UX、交互設計新人、1年產品運營&用研、2年新媒體運營。

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

題圖來自 Pexels，基于 CC0 協議