【Axure 教程】验证码,除了 12306,我还没有服过谁(滑块拖动篇)

6 评论 2804 浏览 6 收藏 4 分钟

在验证方式中,比较简单的一个是拖动滑块进行验证,本文作者分享了滑块拖动验证码的设计教程,一起来看一下吧。

之前作者发过一系列高保真验证码的教程,本次带来的是本系列的第5篇文章,分享滑块拖动验证码的设计教程。

先看一下最终效果:

【Axure 教程】验证码,除了 12306,我还没有服过谁(滑块拖动篇)

接下来分享这个验证码的设计教程。

一、用到的元件

首先在画布中拖入两个动态面板,分别命名为【滑块】和【滑轨】,每个动态面板中均有两个状态:【默认】和【验证成功】。

以下是两个动态面板对应的两个状态内放置的内容

【Axure 教程】验证码,除了 12306,我还没有服过谁(滑块拖动篇)

然后把滑块放在滑轨上方,跟滑轨左对齐,界面就画完了。

【Axure 教程】验证码,除了 12306,我还没有服过谁(滑块拖动篇)

二、用到的变量

全局变量中添加 Drag_Ver_Result,用来记录验证的结果。

【Axure 教程】验证码,除了 12306,我还没有服过谁(滑块拖动篇)

三、设计交互

首先给【滑块】添加【拖动时】交互,拖动时,滑块跟随水平拖动,同时以【滑轨】的左右边界作为【滑块】移动的边界,这样滑块就可以在滑轨内左右拖动。

【Axure 教程】验证码,除了 12306,我还没有服过谁(滑块拖动篇)

接着再给【滑块】添加【拖动结束时】的交互,也就是拖动滑块松手之后的交互。这里需要判断【滑块】是否已经拖动到【滑轨】的最右侧,如果是,表示验证成功,将两个动态面板都切换到【验证成功】的状态,并将变量 Drag_Ver_Result 设置为 True;如果不是,则将【滑块】移动【回拖动前位置】。

【Axure 教程】验证码,除了 12306,我还没有服过谁(滑块拖动篇)

这样,这个滑块拖动的验证码就完成了,这是验证码系列中做起来最简单的一个。

其他验证码教程回顾:

【Axure 教程】验证码,除了 12306,我还没有服过谁(图形验证篇)

【Axure 教程】验证码,除了 12306,我还没有服过谁(数学运算篇)

【Axure 教程】验证码,除了 12306,我还没有服过谁(文字点选篇)

【Axure 教程】验证码,除了 12306,我还没有服过谁(滑动拼图篇)

专栏作家

产品锦李,公众号:产品锦李(ID:IMPM996),人人都是产品经理专栏作家。不务正业的产品经理和他的产品设计。

本文原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议。

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 滑块未拖到最右侧,滑块回不到原来的位置,是为啥

    来自福建 回复
    1. 检查一下是不是没有添加【拖动结束时】将滑块【移动】到【拖动前的位置】的事件

      来自广东 回复
    2. 这个事件有添加

      来自福建 回复
    3. 你可以把你做的原型发到我的邮箱中,我帮你看一下,邮箱:906069595@qq.com

      来自广东 回复
  2. 亲,这个原型可以共享吗

    来自山东 回复
    1. 来自广东 回复
专题
15620人已学习12篇文章
本专题的文章分享了用户精细化运营---用户分群的建立指南。
专题
15929人已学习16篇文章
UML(统一建模语言)是由一系列标准化图形符号组成的建模语言,用于描述软件系统分析、设计和实施中的各种模型。本专题的文章分享了各类UML图的相关语法和整体解读。
专题
20364人已学习13篇文章
如何通过广告模式来进行商业化流量变现?本专题的文章提供了广告变现的思路。
专题
13101人已学习12篇文章
现如今,越来越多的企业开始重视私域,很多的企业都对私域的发展进行了布局。本专题的文章分享了如何搭建私域模型。
专题
13340人已学习11篇文章
在工作中我们会跟客户/boss/用户等人对接需求,并把需求交付给设计师/开发等人,那么应该怎么做呢,本专题的文章分享了如何对接和交付需求。