axure8.0快速入门新手教程:滑动解锁

2017年4月23日 阅读:429

为什么会出现滑动解锁这种设计?因为会出现恶意刷表单的情况。想通过程序自动填写并提交表单,在有滑动解锁设计的表单中就很难实现了。虽然老式的填写验证码设计在一开始的时候还是挺有效果的,但是随着计算机的发展,图片识别的能力越来越高,很多人是可以通过图片识别来获取图片中的验证码。所以,很多网站的注册登录的表单设计中,就有了滑动解锁这种设计。这一章,就讲讲如何使用axure8.0设计滑动解锁的原型。

第一步:拖拉摆放好相关控件

1、一个“滑动面板”;

2、一个“滑块”,可通过一个矩形和两个小圆形合并去除的方法得出此形状,初始状态为隐藏;

3、一个“滑块槽”,和“滑块”形状一样,复制“滑块”就行,然后设置灰边框和内阴影;

4、两条垂直线,一条叫“范围1”,放在“滑块槽”左边,另一条叫“范围2”,放在“滑块槽”右边,两条垂直线都放在“滑动面板”的下面;

5、一个“验证通过”矩形,绿色粗体字体,初始状态为隐藏;

6、一个“验证错误”矩形,红色粗体字体,初始状态为隐藏。

7、一个“滑动槽”;

8、一个“文字提示”,文字为“按住左边滑块,拖动完成上方拼图”,就放在“滑动槽”上面;

9、一个“滑动点”,转化为动态面板,放在“滑动槽”左边;

10、一个锁型icon,放在滑动槽右边;

11、一个“遮盖层”,放在所有控件的上方,初始状态设置为隐藏。

第二步:为动态面板添加鼠标按下时用例
1、显示“滑块”,动画为逐渐,时间为100毫秒;

2、隐藏“文字提示”。

第三步:为动态面板添加拖动时用例

同时水平拖动动态面板和“滑块”,其中“滑块”的界限设置为左右侧不超出“滑动面板”的左右侧,动态面板的界限设置为左右侧不超出“滑动槽”的左右侧。

第四步:为动态面板添加拖动结束时用例

如果“滑块”同时接触“范围1”和“范围2”:

1、显示“验证通过”,动画为逐渐,时间为100毫秒;

2、显示“遮盖层”。

否则:

1、100毫秒逐渐显示“验证错误”;

2、等待1000毫秒;

3、100毫秒逐渐隐藏“验证错误”,100毫秒逐渐隐藏“滑块”;

4、500毫秒内同时将动态面板和“滑块”拖动回到拖动前的位置;

5、等待500毫秒;

6、100毫秒逐渐显示“文字提示”。

预览中,按住滑动点向右拖动就可以看见滑动解锁的动画效果了。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之滑动解锁
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/04/23/523/

2条评论

  • 大歪 2017年7月5日在上午11:43

    拖动结束时怎么编辑条件

    • 维度 2017年7月6日在下午10:53

      交互用例编辑框的上方有一个“添加条件”的按钮