录页面是用户体验APP的第一步，其设计直接关系到用户对产品的第一感受。好的登录页面应该能够吸引用户的目光，帮助他们快速、正确地输入登录信息，并顺利使用应用。此外，登录页面还应该有一定的安全性，保护用户的个人信息不被泄漏。

户注册对于一个APP的重要性毋庸置疑，所以能够设计好注册功能是一个优秀产品经理的基本功。那么在注册页面提高用户体验方面需要注意哪些细节？

一、用户体验方面的设计注意事项

1、把邮箱和手机号输入框合并成一个，可缩减用户的操作步骤。

2、用户名密码这些必填项在没有输入时，登录按钮为不可用状态，避免误操作带来的麻烦。

3、输入框中显示提示信息的方式进一步释放了画面空间，让整个画面看起来更加简洁。但是注意输入框、提示文字的颜色灰度要把握好，颜色太浅不容易查看。

4、画面中核心流程按钮突出显示，其它按钮则最小化显示，根据重要程度将颜色加以区别。

5、输入框的获得焦点时突出显示，以便在多个输入框时辨别焦点所处的位置。

6、错误提示直接显示在画面中，不以弹出对话框的形式或者toast的形式实现。消息提示框（toast）显示时间如果短的话用户可能会看不清楚。

7、页面中的输入框、按钮等其他重要控件尽可能在弹出软键盘时显示在手机屏幕上半部分，方便用户切换、确认等操作。

8、注册/登录失败的情况，提示信息尽可能地详细，是账户名出错还是密码出错，或者是手机号已经被注册过了。

9、输入邮箱地址时，可弹出自动补全功能，自动加入常见的邮箱后缀。

10、发送验证邮件后，可给用户详细的说明及操作提示，也可以加入一个按钮直接跳转到相应的邮箱。

二、功能逻辑方面设计注意事项

1、发送短信前弹出对话框提示用户确认下手机号，验证手机号是否输入正确，节省了用户发错一条短信的成本这种做法用户体验相对稍差。

2、注册页面可考虑加入服务条款的链接。个人感觉没必要增加一个单选框让用户去选择，用户点击注册则代表同意该服务条款。

3、点击发送验证码后可提示倒计时恢复的功能，一般是60秒，这个设计避免用户反复点击发送多次验证码。

三、注册与登录页面安全性方面要考虑

1、密码输入框加入显示或者隐藏按钮，默认为明文状态。避免用户输入错误。

2、一般情况下不需要单独设计“确认密码”提示框，移动设备空间有限、操作也不方便。但一些对密码安全要求高的应用可以设计“确认密码”功能。

3、密码输入错误过多时，应该考虑要不要加入验证码机制，防止被恶意破解密码。

4、短信验证，连续验证次数超过5次时，可考虑增加验证码机制，以确保安全性，同时避免无谓的损失。

辑导读：移动端产品经理经常会需要绘制APP各页面原型图，那么在绘制页面原型图时，我们需要注意什么？作者与大家分享了一个使用Axure制作实用的验证码登录页面原型，快来一起看一下吧。

一、原型需求

点击获取验证码按钮时手机顶端定时弹出随机验证码

点击获取验证码按钮后，按钮显示倒计时，倒计时自60开始，每秒向后-1，倒计时为0时可手动重新触发

弹出验证码弹窗后，可点击复制验证码按钮，点击后验证码自动按顺序加载至手机页面验证码文本框内，完成加载后跳转至首页

二、效果预览

原型演示地址：https://gduqir.axshare.com

三、制作准备

手动制作或挑选使用手机背景。以下为小编手动绘制手机背景：

绘制任意跳转首页面，以下为小编手动绘制首页：

完成准备后将首页置于空白页下方。

四、制作流程

选择两个文本标签，输入“输入验证码”、“验证码已发送至手机+86 185⭐⭐⭐⭐9905”等文字，可根据需要调整文字内容、大小，布局，色彩等。

文字下方放置6个大小相同的文本框及横线（文本框需分别命名，以便交互时区分）。示例如下：

制作一个验证码弹窗，需注意验证码6个数字部分需加不同矩形框且分别命名（以便交互时区分及随机抽取数字使用）。示例如下：

给验证码弹窗“复制验证码”按钮制作交互（文1等名称是手机背景页面六个文本框的命名，该步骤是为了将验证码弹窗内数字验证码获取至手机页面文本框内，等待是为了有延迟效果，设置页面状态是为了六个文本框验证码都加载完成后将手机首页置顶显示），交互如下：

设置全局变量random_str，该步骤是为了等会验证码弹窗自动抽取数字。

点击验证码弹窗，给6个验证码框增加交互动作，交互动作含义为在页面载入时random_str是0123456789，然后6个验证码文本框分别抽取其中1位数字。抽取的变量为[[random_str.substr(random_str.length*Math.random(),1)]]。

选择一个按钮输入“获取验证码”文字调整大小后，将模块设置为动态面板，在动态面板内增加一个state2，将按钮复制粘贴至state2并修改文字为60（本文中state页面名称错误，理解用意即可）。

在“获取验证码”按钮设置交互动作，该交互是为了点击获取验证码按钮后弹出验证码弹窗，并切换动态面板至倒计时页面，交互如下：

在“60”state页设置交互动作，该交互动作是为了让60每秒向后倒计时-1，=0时文本变为重新获取，点击重新获取后文字变60继续循环。

载入时情形1为：

载入时情形2为：

单击时情形1为：

完成以上操作后，将手机首页输入验证码文本框框线取消，即可完成操作，快来一起试试吧！

本文由 @哪有那么多计较 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。