在本文中，本文作者主要基于自己的经验，并思考手机验证码的用户体验设计“享受〜

由于乙方，我们了解各种活动登记页面的设计。各种移动终端的H5注册是多种多样的。在大多数情况下，它包括一个非常简单的注册过程。有四个核心步骤：

组织者的活动描述（促销页面）

注册用户输入信息（注册页面）

后台信息验证（注册页面的验证状态）

用户是否喜欢事件的反馈（结果反馈页面）

在本文中，我想要考虑的主要问题是2-3之间的交互过程。

活动注册行为和登录注册行为的一般类别非常相似，因此需要填写的信息类似。

我们需要填写的主要内容是：

用户名/帐户/手机号码

密码

注册我们将验证信息并确认协议的行为而不是登录。

通常，验证信息有两个目的：

确定您填写的信息的有效性;

这是运营商自己的意图。

因此，我们通常会看到，可以在各种类型的应用程序上简化许多注册过程，以便使用手机号码注册，获取验证码，然后设置密码，并且注册成功。

例如，简单的U店主不需要设置密码。

参考此类用法，可以简化许多活动页面，通过手机号码注册，获取验证码，确认注册，（默认）同意活动协议，然后您可以跳转或查看成功注册的反馈结果。

例如，此类宣传活动，联通应用程序中的活动注册页面

更不用说在上面的情况下弹出窗口设计的形式，界面UI不好，但可以看出，许多登录，注册或事件页面设计离不开手机号码和手机验证码。

此外，这个访问验证码的存在是什么？

在正常情况下，当输入手机号码时，首页会自动确定格式是否正确。可以触发获取QR码的按钮（[触发条件]）。单击此按钮时，服务器将快速响应。用户将收到SMS验证码，如果再次获取，则需要一定时间（[SMS间隔设置]）。

但我不知道你是否知道有一种情况会对captcha接口进行恶意攻击。

在这种情况下，验证码流量（供应商从移动联通电信购买的）将被快速刷卡，这将导致部分成本的损失并且可能被列入通信黑名单。

我联系的金融服务提供商遇到过这种攻击（在金融服务行业，有很多与安全相关的问题，所以要注意每一个细节），所以当我们做活动页面设计的时候，你需要考虑SMS验证码的安全性。 （参见Lvcary的文章《如何防止短信验证码接口被恶意攻击》）

在后续服务的情况设计中，我们继续使用[触发条件]和[短信发送间隔设置]的通常限制，并且还增加发送间隔设置。重新刷新页面后，未达到等待时间，无法获取验证。代码的条件是“您将过于频繁地获取验证码，请稍后再试”文字提示;并且[发送金额限制]每天每个手机号码的最大传输次数是10个系列的严格限制来弥补这个问题。

如果您在网易输入图形验证码后获得短信验证码，则可以实现，但价格是用户体验不佳，双重验证会让用户失去耐心。

图形验证码具有许多优点和安全性。它经常在电脑侧使用。目前，在PC端的各种验证码，拼图验证是一种改进的用户体验设计方案，与图形验证相比。

巧合的是，我发现了一个在移动端使用拼图验证码的情况，这是一个惊喜。

然后，我仔细研究了KFCapp登录过程：

可以找到：

确认图1中的信息后，单击“登录”按钮触发拼图验证码，并完成[触发限制]。

滑块简单易用，可改善用户体验。同时，这个图像位置是一个非常好的广告位置，如图2所示

在验证传递到图3之后，存在用于获得移动电话验证码的表格，并且移动电话号码和密码被锁定并且不能被修改。 “登录”文本变为“验证”。

基于此应用程序，一旦您登录，您可以在没有密码的情况下长时间登录。此登录表单已通过安全级别，电话号码登录行为和rarr升级;拼图验证→手机验证码验证。

这种情况可以讨论如下：

（1）弹出式是否会中断过程影响体验？

我的观点：不，在进行验证交互时，拼图的形式是一个小游戏，没有任何困难，虽然它是一个弹出窗口，但它会促进完成交互行为，让人有欲望完成，而不是直接放弃并不会完全影响体验。

此外，从技术角度来看，领导者添加了一个新细节：仅仅因为它是一个弹出窗口图层样式，我们可以更轻松地设计触发此样式显示的条件。

（2）当进入图3时，是否需要锁定表单信息？

我的观点：不，因为在图3的步骤之后判断我们正在制作的页面，所以不需要强迫用户在第一页上输入所有正确的页面。如果我找到错误的字符并在单击按钮之前更正它。是。

（3）按钮上的字从“登录”变为“验证”。根据具体情况，您在设计活动页面时不想改为其他词吗？

我的观点：没有必要在页面按钮上细分过程。在交互设计师眼中，这可能是一步一步的，但在用户眼中，这三个页面都是行为。 KFCapp是一种登录行为。对于我们的页面，我们正在注册一个操作。也许我们可以在编写特定页面时编写整个过程。 “立即注册”"→“正在注册过程中。

（4）由于我们可以严格限制获取手机验证码，我们为什么还要这样设计？

我的观点：一方面，你可以加倍保险，其次，这种方式可以作为一种创新，使交互水平更加充实。如果用户界面设计很好（如果你是用设计风格或文案写作），那将是一种情感设计。 。

在思考这个过程的过程中，我还找到了苏宁金融应用案例：

在事件页面的设计中，它也是一种与拼图相比更简单的滑块进行交互的好方法。

最后展示演示！

实际上，页面元素应该更加切合实际，有更好的建议，欢迎留言。

还要在验证代码之外添加用户体验：可能会质疑演示图表为什么输入位置不是框，而是线性的？

当我第一周的设计时，绘画的输入位也是盒子，但UI设计师给了我答案，盒子的形状会让人感觉闭合，界面拥挤，线性设计更多互动。在输入时改变线条颜色时，页面会更加简洁精致，具有科技感，特别适用于互联网金融产品，这种设计更加美观。

之后，我发现线性设计会使用户的视线更集中于输入字符，而不是复杂的图像。虽然市场上的各种注册都非常漂亮，但线性度方便。外观漂亮，对交互式原型也很简单友好。

除了美学，支付宝的应用程序在安全方面也非常努力，你看，脱敏帐户的显示！

[后续更新 - 防止中断]

我觉得关于这个主题的研究非常有趣。我还与设计师讨论了这个问题。他认为弹出层会影响行为中断。说实话，我想做一些关于“行为中断”的事情。用户研究，也许是A/B测试，缺乏研究对象和技术手段，好吧，为了防止行为中断，我还做了一个计划B：

从左到右：未输入，获取验证码样式，输入验证码样式，错误样式

实际上，它与弹出窗口的三种状态一致。缺点是页面长度增加。优点是没有弹出窗口。为了匹配线性设计，使用了滑动小球，但只是第一次提醒滑动，并且在误差后不会被提醒。 。

实际上，以同样的方式，可以制作所有的框，并且可以通过滑动来打开输入对话框。这取决于页面的内容和样式。

事实上，应该有许多形式可以仔细考虑。欢迎有趣的想法继续讨论！

写完这篇文章之后，我还看到了一个网易案例，在获得验证码之前使用了拼图滑块!!把它添加到每个人〜

微信内联网考拉获得手机验证互动优惠券

以上，感谢阅读，与Jun分享

« 交易平台Kraken收购数据信息代购源码网站CryptoWatch | 外国人的个人代购源码网站最初是这样设计的：17个最好的例子给你灵感 »