Axure70实现动态“极验”效果(滑动验证)-电竞电子游戏推荐-新浪家居
tel
当前位置:主页 > 登录 >
新闻中心分类

Axure70实现动态“极验”效果(滑动验证)

来源:admin  点击数:  时间:2019-07-10 10:23

  术比较糙本人技,神前来指教欢迎各位大!本人发布的第一篇文章最后强调一点就是这是,抬贵手(审批通过)拜托管理员大人高,情说两遍重要的事!验”控件可以到这个网站上去找如果您是开发的大神想找“极!叫我雷锋(请不要,劳的搬运工我只是勤)

  他的安全性很高(问过我们开发的高手)我个人喜欢它的一条很重要的原因就是,扁平化效果的年代而且在网站趋近与,好的融入了扁平化的风格“极验”的验证方式很,杂的安全验证业务简单的操作完成复,化操作风格符合大众,的体验度提高用户。一定也有弊端当然有好处就,存在兼容性的问题这样的控件想必会,候也会影响一定的效率当然在加载页面的时,样的验证方式会占据一定的空间对于登录区域设计偏小的网站这。

  证码是本人认为见过的最好的一种我今天要跟大家分享的这一类验,看到这个效果是在哪里实在记不得了这个东东叫“极验”老实说我第一次,经理”网站的注册页面(我不是网站的托)但是印象最深的一次是在“人人都是产品,查了一下才知道这种验证码叫“极验”刚开始只是觉得这个效果不错就去网上,张美图的某一块来完成验证简单的说就是通过拼凑一,叫动态行为验证说的高大上一点。

  的联动效果好一些为了保证两个面板,两个面板的宽度是一致的在创建面板时尽量保证。

  度一定要等于两条“边界线”间的距离或者略微大一点也可以这个方法需要注意的一点就是一定要保证“拼图面板”的宽,板能同时接触到两条“边界线”因为要保证在拖动结束的时候面。

  好你,邮箱一份么?我试着做了一下你还有这个的原型么?能发我,面板验证边界那个地方就是在结束拖动动态,方式都不行试了很多种。原型方法可以么我想看看你的?

  原型可能都是给开发看很多情况下产品经理做,转和基本的交互就可以了因此原型的粒度做到有跳,客户看高保真的原型但是有的时候需要给,以上是与真实系统一致的这就要求原型的仿线%,个效果没什么实质上的意义老实说大多数情况下做这,证原型的质量与完整性但是特殊情况下为了保,有必要实现一下的这个验证还是很,用这个验证效果既可以提高用户的体验比如你在跟某个用户宣讲介绍的时候利,们产品的安全性高又可以借此阐述你。要具体情况具体分析当然不同环境还是。

  种很常见的东西“验证码”是一,单等业务操作时都会用到验证码在很多网站的登录、注册、下。然当,信息化的发展而变得多样起来验证码的形式也随着互联网、,字再到最近坑的很火的123XX看图找物从最初的输入图中的文字到运算图中的数,成为一个网站别样的“风景”样式层出不穷的验证码已经,大家的评价也是褒贬不一当然对于某一类的验证码。

  后最,效果是水平滑动由于我的滑动,会超出图片区域的效果因此会导致我的面板,果极其差看着效,上设置一个边界来控制一因此我需要在我的面板下

  用例一定要分开设置(两个用例)这里提醒大家一下设置左右边界的。就是这样的基本的思路,出现“极验”的效果最终调试完成后即可。

  验证”效果正确最后为了保证“,、验证不通过是哪个状态)用于显示我的验证效果我增加了一个提示语面板(包括初始、验证通过。接触到了两条“边界”线则显示提示语面板的状态为通过具体的效果就是在拖动结束时当我的“验证”面板同时,不通过否则为。

  为了强化自己的刚刚学习的技能其实我写这个文章的目的第一是,神们的指教(又一句废话)另一方面也是希望能得到大。

  要做的是设置“联动事件”创建完两个面板之后现在需,.0里面的事件增加了很多)并且在新增动作里选择“移动”这个动作选“按钮面板”选中“拖动动态面板时”这个事件(感觉axure7,拼图面板”和“按钮面板”在移动这个动作里选择“,移动”(因为是平移拼图的效果)并且在配置动作中选择“沿X轴,动的效果设置完成了这样就把两个面板联。

  通过控件坐标来判断触发的条件由于Axure这个软件并没有,“边界”的方法来实现验证因此我通过给自己定一个,”左右各加了一条线作为边界其实就是在拼图的“验证区域,为判断条件来实现“校验”的效果再通过动态面板与两条线接触作,设置成与背景同色即可最后再把边界线的颜色。

  态面板时”添加用例并设置用例的条件这次选择“按钮面板”选择“拖动动,接触到右边界线时当“按钮面板”,对位置为面板紧挨右边界时的坐标偏左一个像素(太难描述了设置动作“移动”动态面板“按钮面板”和“验证面板”绝,栗子”吧举个“,界时的坐标为(901如果按钮面板紧挨右边,标应设为(900435)则绝对坐,5)43,标就应该是(902同理左侧边界的坐,5)43)

  xure实现这种“极验”的效果现在我就跟大家说一下如何用A,xure7.0版本实现的效果首先跟大家说一下本人是用A,本人认为有三大难点需要攻破对于实现这种“极验”的效果。

  是要选中“结束拖动动态面板时”这个事件选择添加用例具体的操作步骤是先回到外面再次选中“按钮面板”这次,增加判断条件在添加用例时,证事件叫部件范围)两条边界线(控件)条件里设置“验证面板”同时接触到(验。

  就是准备素材首先要做的,就是盗图说白了,三张半图片你需要准备,面滑动的按钮第一张是下;钮的滑动区域第二张是按;图的完整图片第三张是拼;张图截下来那一部分的拼图了当然另外的半张就是你从第三。

  备完毕后素材准,在水平方向联动的效果先来实现拼图和按钮,放到指定的位置上将按钮和拼图块,态面板(为啥不设置一个并且将其设置成两个动,的只是下面的按钮因为最终要拖动,能拖动的区域就不止按钮一个区域了如果设置成一个动态面板那么最终!)

  运营为核心的学习、交流、分享平台人人都是产品经理(是以产品经理、,、社群为一体集媒体、培训,品人和运营人全方位服务产,办在线+期成立8年举,更加了解淘宝刷单流程 占40%家长推荐。享、讨论、下载游戏在九,+场线,运营大会20+场产品经理大会、,成都等15个城市覆盖北上广深杭,电子游戏 娛樂城影响力和知名度在行业有较高的。米网易等知名互联网公司产品总监和运营总监平台聚集了众多BAT美团京东滴滴360小,与你一起成长他们在这里。

  e没有通过坐标验证的事件刚刚我提到由于Axur,的方式实现“控制边界”的效果因此我再次选择“曲线救国”,的左右两边再画两条线作为边原理就是在按钮面板滑动区域界

织梦CMS官方 DedeCMS维基手册 织梦技术论坛
首页登录电子游戏网址电子游戏免费下载游戏厅
版权所有:电竞电子游戏推荐-新浪家居