Axure教程之制作一个滑动验证组件

axure商城

每天进步一点,离大神的目标又近了一些。

小教程小经验,只是为了提高你的技能水平,把学到的经验灵活的运用到你的交互设计上,才是迈入大神圈子的第一步。

今天要讲的这个案例,如果你能琢磨透了,会对你有很大的帮助。

 

“滑动验证”

此案例里的一些重点如下:

1、 动态面板的运用

2、 动态面板宽度和内部元件的关系理解

3、 动态面板“拖动”交互动作的运用

4、 动态获取数值及动态计算的运用

5、 添加动作时,组合条件的运用

 

好了,不废话了,进入正题,开始画这个原型了

一、准备工作

1、拖入矩形

画一个验证完成前的背景,300×40(尺寸可根据你的喜好需求自行调整),输入文字,调整到适合的样式,起个便于识别的名称(背景)

2、复制你刚刚画的背景

改名为“状态背景”,这个是验证完成后的背景;调整完样式以后,将它转换为动态面板,名称就叫(状态层)

3、对齐刚刚的两个原件

动态面板背景一定要在你第一个背景的上层,然后将动态面板的尺寸调整为40×40

 

4、拖入矩形画操作用的滑块

40×40,找两个图标,双箭头和完成以后的对号(此处你可以用官方库的图标),将图标分别写上名称(双箭头、完成),图标调整到合适尺寸后与矩形上下左右居中对齐,然后选中完成图标,设置为隐藏;然后将滑块和图标编组后转换为动态面板,写上名称(按住拖动)

将刚刚画的“按住拖动”原件对齐到背景的左侧

好了,所有图层都画完了,如下;接下来我们添加交互动作。

 

二、交互动作

这里,我们所有的交互动作,都添加在“按住拖动”原件上,此处需要仔细越多理解

先看下所有动作

 

1、 添加“拖动时”动作

【动作1】

移动“按住拖动”,水平拖动,动画“无”,添加界限“左侧”大于原件“背景”的x边距,“右侧”小于原件“背景”的x边距加宽度

 

【动作2】

设置尺寸“状态层”,宽度“运算公式”原件“This”(当前按住拖动)的x边距 减去 原件“背景”的x边距 + 原件“This”的宽度,高度不变

 

Ok,做完以上动作就可以试一下效果了,已经可以拖动了

但是没有完成的效果,不急不急,接着来

 

2、 添加“拖动结束时”动作

这里会有两组动作,一组需要输入条件

2.1、用例组1,条件如下

如果原件“This”的x边距 大于等于 原件“背景”的x边距加宽度减去原件“This”的1.1倍宽度(1.1倍是为了冗余出一些距离,便于手动时触发)则运行

【动作1】

显示“完成”图标,隐藏“双箭头”图标

 

【动作2】

禁用“按住滑动”和“滑块”,验证完毕了,就禁止再操作滑块了

 

【动作3】

设置文本“状态背景”为“验证成功”

 

2.2、用例组2

不满足用例组1条件时运行

【动作1】

移动“按住滑动”,回到拖动前位置

 

【动作2】

设置尺寸“状态层”,宽度为原件“This”宽度,高度不变

 

三、最终效果

 

原型演示地址:

http://25jmki.axshare.cn/#g=1&p=%E6%BB%91%E5%8A%A8%E9%AA%8C%E8%AF%81

演示原型下载地址:

https://pan.baidu.com/s/1e9yFrKMfmMisxGaMpuLAfw

 

通过这个实例,我们可以拓展出多种交互原型,例如这种滑块验证,其它的大家自己动脑筋想把

 

本交互组件也集成到了我的《快速原型组件库》里,力求打造一套官方原型库的最佳替代方案,感兴趣的可以去看一下

https://www.axureshop.com/a/590.html

或者加入我的群,咨询交流

UIUE干货分享群:117184

本文由 Axure中文网 作者:skyline 发表,其版权均为 Axure中文网 所有,文章内容系作者个人观点,不代表 Axure中文网 对观点赞同或支持。如需转载,请注明文章来源。
7

评论:

2 条评论,访客:2 条,站长:0 条

100%好评

  • 好评:(100%)
  • 中评:(0%)
  • 差评:(0%)
    • skyline
      skyline发布于: 

      确实是,那就换一种思路,完成是选中动态面板,然后拖动动态面板的时候加条件判断,如果当前元件为未选中状态则可以拖动!

发表评论