axure要登录吗(axure登录界面设计)

继上次分析了登录部分的高保真设计之后，这次我们来解释一下《登录高保真设计》的下部，注册账号和重置密码的部分。因为注册账号和重置密码的操作基本相同，这次我们一起完成。
登录界面结构
你需要什么？矩形、文本、输入框、账号/密码/验证码图标。
学完了会学到什么？本文的重点是：输入手机号码后，点击获取验证码，验证码自动填写的操作。
除此之外，你还可以了解注册账户和重置密码的基本布局和各种元素，用户在操作时需要什么反馈，以及如何做才能获得更好的体验。
之前有人说内容有些偏基础没有条件判断，所以这次会在各种操作中加入一些交互判断。其中吐司提示消息提示模块只列出了基本的，还有一些不完善的地方需要自己补充。相信你通过下面的学习，会做出更好的交互原型。
让我们开始剖析生产步骤。
第一步：画出所有界面，吐司提示。我们之前已经解释过如何绘制原型。现在只需要在原来的基础上画出注册账号和重置密码的界面。
从上面可以看出，注册账号(1，2)和重置密码(3，4)的界面除了标题之外基本相同。里面的输入框和样式和上一个一样。如果你还没看过，可以先看看“登录”这篇文章。
将所有吐司提示放入一个专门收集吐司的动态面板中，命名为吐司提示。设置多个面板状态，默认隐藏和待机。
第二步：设置交互风格这里不做过多解释，但是引用了“登录”的做法，做过的同学甚至可以直接复制使用。
第三步：场景设置到本文的重点。本课程主要讲解用户输入手机号码后获得的验证码的高保真效果。
为了便于理解，我们先列出整个流程图：
第一步：绘制注册的第一页。如果之前做过登录界面的原型，可以拿过来直接用。界面如下：
第二步：设置“获取验证码”和“下一步”按钮的交互样式，使用禁用状态，然后默认禁用(点击组件右键可以看到)，如下图：
第三步：在输入框中设置第四个用例(红框中的用例)，用于输入手机号码。设置输入框的元素文本长度判断。当输入超过13个字符时，将自动启用“获取验证码”。
这里需要注意的是，由于之前设置用例的功能设置，手机号会以“334”的模式显示，中间先出现两个空格，所以需要13个字符；如果没有之前的用例，设置为11个字符就可以了(国内手机号码都是11位)。
第四步：
做一个动态面板随意控制大小，需要设置两个面板状态进行回收，随意命名；点击“获取验证码”按钮设置使用案例。单击时，禁用此选项；设置前面做的动态面板进行循环，间隔1000毫秒；显示toast提示并将toast的状态设置为“已发送验证码”，两秒钟后隐藏。解释使用案例：
第五步：设置一个文本，输入为“60”。字体风格随意，取名“倒计时”。随便选个地方放(可以像我一样放在动态面板里，不怕丢)。
条件一
点击动态面板，设置用例状态变化时的“倒计时”条件。当值1时，将“倒计时”设置为“[target . text-1]]”；将文本“获取验证码”设置为“经过[[Time]]秒后重新发送”，“Time”是“倒计时”的局部变量，可以用“t”代替。解释使用案例：
条件2
点击动态面板，设置用例状态变化时“倒计时”的条件。当该值小于1时，将循环的动态面板设置为“停止循环”；将“倒计时”设置为“60”，文字为“获取验证码”的按钮为“重新发送验证码”；启用“获取验证码”按钮。解释使用案例：
条件三
点击动态面板，设置用例状态变化时的“倒计时”条件。当值为5时，验证码输入框中会填入随机验证码(功能和使用方法如下所示)；启用下一步按钮。使用函数：[[math . floor(math . random()* 10)]]
解释使用案例：
第六步：
将“下一步”按钮的条件判断设置为“验证码错误”和“验证码正确”，toast提示仍然放在toast动态面板中。操作与上述操作相同：显示——选择状态33542秒后隐藏；验证码错误时Toast提示。验证码正确后，跳转到“设置密码”页面。提示：条件判断只针对场景展示，但真实场景不止以上两种。
第七步：设置注册第二页，只需要设置登录密码。
这个页面有两种做法：一是只做一个密码输入框，默认密码显示，点击右边的“眼睛”按钮可以显示和隐藏；二是做两个密码输入框，一个叫输入密码，一个叫确认密码。(本文将选择第一种进行简单说明，方法你自由选择)。
设置“注册”按钮的条件判断为“密码需要6-12个字符”和“注册成功”。toast提示仍然放在toast动态面板中，操作同上：3354选择状态显示33542秒后隐藏。
当密码少于6-12个字符时，toast提示“密码需要有6-12个字符”。注册成功后，toast提示“注册成功”，然后跳转到“登录”页面。
也就是说，分析上述配准的所有制造步骤。重置密码的步骤与注册的步骤完全相同，只需将“注册”改为“重置密码”即可。
接下来，就是页面跳转的做法。
第四步：完成以上步骤(注册和重置密码的页面)的同学可以开始操作了。我们需要关闭所有页面，形成一个包含登录、注册和重置密码的高保真演示。
在demo中，我们直接选中之前所有的登录，右键，变成一个动态面板，命名为demo。然后创建几个新的面板状态，把注册和密码重置的第一步和第二步放到这个动态面板里。
然后，你需要在每个后退按钮(也就是左上角的按钮)或者“下一步”(有两个，请注意跳转页面)、“注册”和“重置密码”按钮中设置跳转。
解释到此结束。登录Hi-Fi的下一部分就到此为止。有的不详细，有的不全。你可以和我私下谈谈。
#相关阅读#Axure教程：登录，高保真设计
#专栏作家#Donny，微信微信官方账号：UE_diary，人人都是产品经理专栏作家。工作两年以上的产品交互设计师，可能会分享一些产品交互细节。
本文由人人作为产品经理原创发布。未经许可，禁止复制。
来自Unsplash的图像，基于CC0协议。