Axure RP8原型设计教程:随机密码键盘

2017年11月1日 阅读:923

随机密码键盘是手机移动端针对安全性设计的一种数字输入软键盘,它的一个特点就是0~9这10个数字每次都是随机顺序出现,让非手动输入这种作弊行为无空可钻,从而提高了手机移动端的安全性。这种键盘大多出现在输入密码的时候,比如兴业银行和工商银行的APP。这里就教大家使用中继器来制作这种随机密码键盘。

原型效果:http://weidublog.com/wp-content/case/prototyping1/201711012229/

第一步,先摆好背景,即一个“基础背景”组合,包括:

“底框”——300X500的白底灰框矩形;

“头像栏”——300X135的灰框灰底矩形;

“账户栏”——300X45的白底灰框矩形;

“密码栏”——300X45的白底灰框矩形;

“登录按钮”——300X45的灰底灰白字框矩形,文本文字为“登陆”;

“键盘栏”——300X195的白底灰框矩形;

“头像”——85X85的深灰底加粗白边椭圆形;

“账户图标”——使用元件库中的Icon图标“User”,填充颜色为灰色;

“密码图标”——使用元件库中的Icon图标“Unlock Alt”,填充颜色为灰色;

“账号输入框”——208X25的文本框,设置为边框隐藏和只读,文本文字为“weidublog.com”;

第二步,拖拉摆放好交互元件,其中包括:

1、“密码输入框”——243X26的动态面板,包含“加密”和“解密”两个面板状态,“解密”面板状态中放一个“解密密码框”文本框和一个“Eye”Icon,“加密”面板状态中放一个“加密密码框”文本框和一个“Eye Slash”Icon。

2、“键盘”——只包含一个90X40矩形的中继器,中继器的布局设置为网格排布,每排项目数为3,间距设置行和列均为5,另外,中继器的数据集设置如下:

3、“C”——90X40的矩形,文本文字设置为“C”,这个就是清空按钮。

4、“删除”——90X40的矩形,文本文字设置为“删除”,这个就是回退按钮。

第三步:设置页面载入时用例。

首先,更新数据集中的sortId列中的每一行为一个100以内的随机数;

然后,根据sortId列做一个升序排序。

第四步:设置密码框的加密解密互动效果

具体请参考:http://weidublog.com/index.php/2017/07/25/1185/

第五步:设置“键盘”的每项加载时用例。

设置“键盘”中继器中的矩形的文字为数据集中的number列。

第六步:设置“键盘”中继器中的矩形的鼠标单击时用例。

当鼠标单击时,设置“加密密码框”的文字如下:

当鼠标单击时,设置“解密密码框”的文字如下:

第七步:设置“C”的鼠标单击时用例

当鼠标单击时,将“加密密码框”和“解密密码框”的文字均设为空。

第八步:设置“删除”的鼠标单击时用例。

当鼠标单击时,将“加密密码框”的文字设置如下:

当鼠标单击时,将“解密密码框”的文字设置如下:

希望学习更多有趣的Axure原型案例,可以购买维度原型高清视频教程《Axure8.0案例实战进阶(案例篇)》,也可以持续关注维度网站(http://weidublog.com),最专业的Axure原型设计学习平台。

作者:维度

转载请注明出处:http://weidublog.com/index.php/2017/11/01/1284/

1 评论

  • 阿里云优惠社区 2017年11月3日在下午4:54

    阿里云双十一活动 购买2U 4G 5M 1500/年。呕膊