在本文中，本文作者主要基于自己的經(jīng)驗(yàn)，并思考手機(jī)驗(yàn)證碼的用戶體驗(yàn)設(shè)計(jì)“享受?

由于乙方，我們了解各種活動(dòng)登記頁面的設(shè)計(jì)。各種移動(dòng)終端的H5注冊是多種多樣的。在大多數(shù)情況下，它包括一個(gè)非常簡單的注冊過程。有四個(gè)核心步驟：

組織者的活動(dòng)描述（促銷頁面）

注冊用戶輸入信息（注冊頁面）

后臺(tái)信息驗(yàn)證（注冊頁面的驗(yàn)證狀態(tài)）

用戶是否喜歡事件的反饋（結(jié)果反饋頁面）

在本文中，我想要考慮的主要問題是2-3之間的交互過程。

活動(dòng)注冊行為和登錄注冊行為的一般類別非常相似，因此需要填寫的信息類似。

我們需要填寫的主要內(nèi)容是：

用戶名/帳戶/手機(jī)號碼

密碼

注冊我們將驗(yàn)證信息并確認(rèn)協(xié)議的行為而不是登錄。

通常，驗(yàn)證信息有兩個(gè)目的：

確定您填寫的信息的有效性;

這是運(yùn)營商自己的意圖。

因此，我們通常會(huì)看到，可以在各種類型的應(yīng)用程序上簡化許多注冊過程，以便使用手機(jī)號碼注冊，獲取驗(yàn)證碼，然后設(shè)置密碼，并且注冊成功。

例如，簡單的U店主不需要設(shè)置密碼。

參考此類用法，可以簡化許多活動(dòng)頁面，通過手機(jī)號碼注冊，獲取驗(yàn)證碼，確認(rèn)注冊，（默認(rèn)）同意活動(dòng)協(xié)議，然后您可以跳轉(zhuǎn)或查看成功注冊的反饋結(jié)果。

例如，此類宣傳活動(dòng)，聯(lián)通應(yīng)用程序中的活動(dòng)注冊頁面

更不用說在上面的情況下彈出窗口設(shè)計(jì)的形式，界面UI不好，但可以看出，許多登錄，注冊或事件頁面設(shè)計(jì)離不開手機(jī)號碼和手機(jī)驗(yàn)證碼。

此外，這個(gè)訪問驗(yàn)證碼的存在是什么？

在正常情況下，當(dāng)輸入手機(jī)號碼時(shí)，首頁會(huì)自動(dòng)確定格式是否正確?？梢杂|發(fā)獲取QR碼的按鈕（[觸發(fā)條件]）。單擊此按鈕時(shí)，服務(wù)器將快速響應(yīng)。用戶將收到SMS驗(yàn)證碼，如果再次獲取，則需要一定時(shí)間（[SMS間隔設(shè)置]）。

但我不知道你是否知道有一種情況會(huì)對captcha接口進(jìn)行惡意攻擊。

在這種情況下，驗(yàn)證碼流量（供應(yīng)商從移動(dòng)聯(lián)通電信購買的）將被快速刷卡，這將導(dǎo)致部分成本的損失并且可能被列入通信黑名單。

我聯(lián)系的金融服務(wù)提供商遇到過這種攻擊（在金融服務(wù)行業(yè)，有很多與安全相關(guān)的問題，所以要注意每一個(gè)細(xì)節(jié)），所以當(dāng)我們做活動(dòng)頁面設(shè)計(jì)的時(shí)候，你需要考慮SMS驗(yàn)證碼的安全性。 （參見Lvcary的文章《如何防止短信驗(yàn)證碼接口被惡意攻擊》）

在后續(xù)服務(wù)的情況設(shè)計(jì)中，我們繼續(xù)使用[觸發(fā)條件]和[短信發(fā)送間隔設(shè)置]的通常限制，并且還增加發(fā)送間隔設(shè)置。重新刷新頁面后，未達(dá)到等待時(shí)間，無法獲取驗(yàn)證。代碼的條件是“您將過于頻繁地獲取驗(yàn)證碼，請稍后再試”文字提示;并且[發(fā)送金額限制]每天每個(gè)手機(jī)號碼的最大傳輸次數(shù)是10個(gè)系列的嚴(yán)格限制來彌補(bǔ)這個(gè)問題。

如果您在網(wǎng)易輸入圖形驗(yàn)證碼后獲得短信驗(yàn)證碼，則可以實(shí)現(xiàn)，但價(jià)格是用戶體驗(yàn)不佳，雙重驗(yàn)證會(huì)讓用戶失去耐心。

圖形驗(yàn)證碼具有許多優(yōu)點(diǎn)和安全性。它經(jīng)常在電腦側(cè)使用。目前，在PC端的各種驗(yàn)證碼，拼圖驗(yàn)證是一種改進(jìn)的用戶體驗(yàn)設(shè)計(jì)方案，與圖形驗(yàn)證相比。

巧合的是，我發(fā)現(xiàn)了一個(gè)在移動(dòng)端使用拼圖驗(yàn)證碼的情況，這是一個(gè)驚喜。

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

可以找到：

確認(rèn)圖1中的信息后，單擊“登錄”按鈕觸發(fā)拼圖驗(yàn)證碼，并完成[觸發(fā)限制]。

滑塊簡單易用，可改善用戶體驗(yàn)。同時(shí)，這個(gè)圖像位置是一個(gè)非常好的廣告位置，如圖2所示

在驗(yàn)證傳遞到圖3之后，存在用于獲得移動(dòng)電話驗(yàn)證碼的表格，并且移動(dòng)電話號碼和密碼被鎖定并且不能被修改。 “登錄”文本變?yōu)椤膀?yàn)證”。

基于此應(yīng)用程序，一旦您登錄，您可以在沒有密碼的情況下長時(shí)間登錄。此登錄表單已通過安全級別，電話號碼登錄行為和rarr升級;拼圖驗(yàn)證→手機(jī)驗(yàn)證碼驗(yàn)證。

這種情況可以討論如下：

（1）彈出式是否會(huì)中斷過程影響體驗(yàn)？

我的觀點(diǎn)：不，在進(jìn)行驗(yàn)證交互時(shí)，拼圖的形式是一個(gè)小游戲，沒有任何困難，雖然它是一個(gè)彈出窗口，但它會(huì)促進(jìn)完成交互行為，讓人有欲望完成，而不是直接放棄并不會(huì)完全影響體驗(yàn)。

此外，從技術(shù)角度來看，領(lǐng)導(dǎo)者添加了一個(gè)新細(xì)節(jié)：僅僅因?yàn)樗且粋€(gè)彈出窗口圖層樣式，我們可以更輕松地設(shè)計(jì)觸發(fā)此樣式顯示的條件。

（2）當(dāng)進(jìn)入圖3時(shí)，是否需要鎖定表單信息？

我的觀點(diǎn)：不，因?yàn)樵趫D3的步驟之后判斷我們正在制作的頁面，所以不需要強(qiáng)迫用戶在第一頁上輸入所有正確的頁面。如果我找到錯(cuò)誤的字符并在單擊按鈕之前更正它。是。

（3）按鈕上的字從“登錄”變?yōu)椤膀?yàn)證”。根據(jù)具體情況，您在設(shè)計(jì)活動(dòng)頁面時(shí)不想改為其他詞嗎？

我的觀點(diǎn)：沒有必要在頁面按鈕上細(xì)分過程。在交互設(shè)計(jì)師眼中，這可能是一步一步的，但在用戶眼中，這三個(gè)頁面都是行為。 KFCapp是一種登錄行為。對于我們的頁面，我們正在注冊一個(gè)操作。也許我們可以在編寫特定頁面時(shí)編寫整個(gè)過程。 “立即注冊”"→“正在注冊過程中。

（4）由于我們可以嚴(yán)格限制獲取手機(jī)驗(yàn)證碼，我們?yōu)槭裁催€要這樣設(shè)計(jì)？

我的觀點(diǎn)：一方面，你可以加倍保險(xiǎn)，其次，這種方式可以作為一種創(chuàng)新，使交互水平更加充實(shí)。如果用戶界面設(shè)計(jì)很好（如果你是用設(shè)計(jì)風(fēng)格或文案寫作），那將是一種情感設(shè)計(jì)。 。

在思考這個(gè)過程的過程中，我還找到了蘇寧金融應(yīng)用案例：

在事件頁面的設(shè)計(jì)中，它也是一種與拼圖相比更簡單的滑塊進(jìn)行交互的好方法。

最后展示演示！

實(shí)際上，頁面元素應(yīng)該更加切合實(shí)際，有更好的建議，歡迎留言。

還要在驗(yàn)證代碼之外添加用戶體驗(yàn)：可能會(huì)質(zhì)疑演示圖表為什么輸入位置不是框，而是線性的？

當(dāng)我第一周的設(shè)計(jì)時(shí)，繪畫的輸入位也是盒子，但UI設(shè)計(jì)師給了我答案，盒子的形狀會(huì)讓人感覺閉合，界面擁擠，線性設(shè)計(jì)更多互動(dòng)。在輸入時(shí)改變線條顏色時(shí)，頁面會(huì)更加簡潔精致，具有科技感，特別適用于互聯(lián)網(wǎng)金融產(chǎn)品，這種設(shè)計(jì)更加美觀。

之后，我發(fā)現(xiàn)線性設(shè)計(jì)會(huì)使用戶的視線更集中于輸入字符，而不是復(fù)雜的圖像。雖然市場上的各種注冊都非常漂亮，但線性度方便。外觀漂亮，對交互式原型也很簡單友好。

除了美學(xué)，支付寶的應(yīng)用程序在安全方面也非常努力，你看，脫敏帳戶的顯示！

[后續(xù)更新 - 防止中斷]

我覺得關(guān)于這個(gè)主題的研究非常有趣。我還與設(shè)計(jì)師討論了這個(gè)問題。他認(rèn)為彈出層會(huì)影響行為中斷。說實(shí)話，我想做一些關(guān)于“行為中斷”的事情。用戶研究，也許是A/B測試，缺乏研究對象和技術(shù)手段，好吧，為了防止行為中斷，我還做了一個(gè)計(jì)劃B：

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

實(shí)際上，它與彈出窗口的三種狀態(tài)一致。缺點(diǎn)是頁面長度增加。優(yōu)點(diǎn)是沒有彈出窗口。為了匹配線性設(shè)計(jì)，使用了滑動(dòng)小球，但只是第一次提醒滑動(dòng)，并且在誤差后不會(huì)被提醒。 。

實(shí)際上，以同樣的方式，可以制作所有的框，并且可以通過滑動(dòng)來打開輸入對話框。這取決于頁面的內(nèi)容和樣式。

事實(shí)上，應(yīng)該有許多形式可以仔細(xì)考慮。歡迎有趣的想法繼續(xù)討論！

寫完這篇文章之后，我還看到了一個(gè)網(wǎng)易案例，在獲得驗(yàn)證碼之前使用了拼圖滑塊!!把它添加到每個(gè)人?

微信內(nèi)聯(lián)網(wǎng)考拉獲得手機(jī)驗(yàn)證互動(dòng)優(yōu)惠券

以上，感謝閱讀，與Jun分享

« 文君營銷幫助酒店業(yè)建立高價(jià)值的會(huì)員生態(tài)圈 | 特斯拉高管離開核心高管經(jīng)常離開，投資者抱怨馬斯克的領(lǐng)導(dǎo) »