咨询,就免费赠送小米移动电源,咨询热线:18030402705当前位置: 主页 > 建站知识 > 建站指南 > 策划方案 >
推荐内容
联系我们
电话咨询:18030402705
E-mail:web@07fly.com
地址:成都校园路99号(西南交大旁)

Axure案例:超逼真模拟注册登录

作者/整理:07fly 来源:人人都是产品经理 2018-09-13 Tag:


ldkuvgxva3hsghso.jpeg

图片版权所属:站长之家

注册和登录作为互联网产品的一项基础系统功能,本文将从原型及交互设计的角度讲述如何实现这两项基础功能,如果想学习注册和登录的产品功能设计,可以参考我之前写的一片文章《注册登录可能没你想的那么简单》。

注册

1. 期望交互效果

账号:

  • 账号输入框只能输入 11 位数字,超过 11 位则无法输入;

  • 假设手机号 13301182876 已被注册,则提示:该账号已被注册;

  • 假设输入 11 个 1 时,系统判断不是手机号,则提示:请输入正确的手机号;

  • 账号输入为空,则提示:请输入手机号。

密码:

  • 密码为空,提示:请设置密码;

  • 密码设置错误,提示:请输入6- 12 位的字母、数字(密码设置的要求)。

短信验证码:

  • 验证码为空,提示:请填写验证码;

  • 输入错误的验证码,提示:请输入正确的验证码(假设正确的验证码是0258);

  • 假设 1 分钟后验证码过期(为了模拟交互效果,缩短过期时间),提示:验证码已过期,请重新获取。

2. 元件准备

首先利用元件文本标签、文本框、按钮等基础元件快速搭建好注册页面的线框图,将账号界面的输入框属性设置为phone number,限制只能输入数字。密码文本框的属性设置为密码,对密码的显示进行加密,视觉上看到的都是星号。

将账号、短信、验证码的提示信息放置在各输入项的下方,默认隐藏。

3. 交互思路分析

账号:通过文本改变事件限制账号输入框只能输入 11 位数字,即当账号文本框中的文字长度大于 11 位时,则账号文本框的值为=[[LVAR1.substr(0,11)]],其中局部变量LVAR1 为账号文本框的文字。函数表达式的意思为针对账号文本框的文字,从 0 位开始,截取前 11 位长度的字符串内容,原函数为substr(start,length)。

为账号文本框设置失去焦点事件并配置多个用例,实现各种提示效果。

用例设置如下:

  • 用例一:当账号文本框文字=13301182876,提示文字内容为“该账号已被注册”,显示账号提示信息;

  • 用例二:当账号文本框文字=11111111111,提示文字内容为“请输入正确的手机号”,显示账号提示信息;

  • 用例三:当账号文本框内容为空时,提示文字内容为“请输入手机号”,显示账号提示信息;

  • 用例四:隐藏提示信息。

密码:通过文本改变事件限制密码输入框只能输入 12 位,即当密码文本框中的文字长度大于 12 位时,则密码文本框的值为=[[LVAR1.substr(0,12)]],其中局部变量LVAR1 为密码文本框的文字。函数的用法与解释请参照上文账号输入框的限制。

通过为密码文本框设置多个失去焦点用例,来实现各种密码错误情况的提示。

几个用例的设置方法如下:

  • 用例一:当密码文本框内容为空时,提示“请设置密码”,显示密码提示信息;

  • 用例二:当密码文本框的内容=111111111111,提示“请输入6- 12 位的字母、数字”,显示密码提示信息;

  • 用例三:隐藏密码提示信息。


本文零起飞网络为您整理编辑,版权归原作者所有,转载请注明原文来源出处。
本文章链接:http://www.07fly.com/Guide/plan/9202.html
07FLY专业做网站,网站建设,网站优化,主机托管,网站推广一条龙服务,让您省心到底