Axure 9 实战案例，动态面板的应用 3，京东的拖动拼图登录验证

2024-06-03 09:44:48

前言

Hello！欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>

本次课程我们继续来学习一下，动态面板的应用。在之前的教程中，我们曾经讲解过B站图文登录验证的原型设计课程（了解更多），那是属于基本元件的应用；本篇我们从动态面板的应用的角度，来讲解另一种登录验证的原型设计，那就是京东拼图登录验证。

京东的拼图登录验证

我们先来看看真实的效果图，大家可以看到，拼图登录验证效果主要组成包括：
①拖动滑块时，拼图碎片与蓝色进度条会跟随移动
②拼图失败时，滑块会自动复位
③拼图成功时，蓝色进度条会到达最右端，显示拼接成功，并且登录按钮显示正在登录，滑块消失

准备工作

为了节省时间，这里提前把拼图验证界面初稿准备好了，包括：拼图、碎片、蓝矩形（以下称进度条）、滑块、登录按钮、其他元素，并且在拼图缺口的右端，画一条垂直辅助线（这是为了后面设置拼图的验证交互做准备）。下面来给大家讲解一下绘图步骤。

拼图验证界面初稿

第一步：实现滑块的拖动

要想实现拖动的效果，我们需要利用到动态面板的特性。首先选中滑块与碎片，将其组合起来（这是为了后面实现碎片跟随滑块移动而准备），并置于顶层；然后点击右键，在弹出菜单中选择转换为动态面板。

将滑块与碎片组合起来，并置于顶层

右键选择转换为动态面板

接着在右侧工具栏上，点击新建交互，再依次点击拖动时_移动_组合（即碎片+滑块），点击移动菜单，选择跟随水平拖动，再点击添加界限；然后设置边界为右侧＜＝400（也就是进度条的长度），左侧＞＝0。

点击右侧栏的新建交互

依次点击拖动时_移动_组合（即碎片+滑块）

移动菜单选择跟随水平拖动，再点击添加界限

设置边界为右侧＜＝400，左侧＞＝0

第二步：使进度条跟随滑块移动

这里我们仍然要利用到动态面板的特性，来实现跟随移动的交互。首先选中灰矩形，点击右键，在弹出菜单中选择转换为动态面板；然后设置动态面板的圆角为28，也就是矩形的二分之一高（这里是为了后面进度条跟随移动时，能隐藏圆角之外的区域）。

选中灰矩形，右键选择转换为动态面板

设置动态面板的圆角为28（即矩形的1/2高）

接着在左侧栏的概要中，将进度条拖入动态面板中，并置于灰矩形上方。

将进度条拖入动态面板，并置于顶层

再接着双击滑块的动态面板，进入编辑状态，再选中滑块（或在左侧栏的概要中，直接选中滑块），然后在右侧栏上，点击新建交互，再依次点击移动时_移动_进度条_确定（表示默认跟随当前元件移动）。

选中滑块，再点击右侧栏的新建交互

依次点击移动时_移动_进度条_确定

第二步效果图

第三步：实现滑块的自动复位

首先继续选中滑块，点击右侧栏的新建交互，再依次点击鼠标松开时_移动_组合（即碎片+滑块）；然后点击移动菜单，在弹出菜单中选择到达。

选中滑块，点击右侧栏的新建交互_鼠标松开时_移动_组合（即碎片+滑块）

移动菜单设为到达

接着点击添加目标，选中进度条，再点击移动菜单，在弹出菜单中选择到达，设置X=-344（即矩形的长度－滑块的直径）。

点击添加目标，选中进度条

移动菜单设为到达，X设为-344（即矩形的长度－滑块的直径）

第四步：实现拼图验证效果

保持在滑块动态面板的编辑状态中，首先拖入一个热区，大小随意，拖动到辅助线右侧，并左侧对齐辅助线。

在滑块动态面板中，拖入热区，左侧对齐辅助线

接着选中滑块，在右侧栏的移动时上，点击启用情形，打开情形编辑窗，在编辑窗上点击添加条件；然后点击第一个下拉菜单，选择元件范围；点击第三个下拉菜单，选择未接触；点击最后的下拉菜单，选择热区。

选中滑块，在移动时上点击启用情形

在情形编辑窗上，点击添加条件

第一个菜单设为元件范围，第三个菜单设为未接触，最后的菜单选择热区

再接着在鼠标松开时上，点击启用情形，重复上面（即移动时）的操作步骤。

鼠标松开时与移动时的情形条件相同

这里的交互是指，我们通过判断滑块是否接触热区，来确定拼图是否成功：
①情形一，滑块未接触热区时，拼图失败，滑块能自由移动，鼠标松开时滑块自动复位；
②情形二，滑块接触热区时，拼图成功，进度条移到最右端，并且显示拼图成功，登录按钮显示正在登录，接着滑块消失。

所以我们接着依照前面的步骤，来添加这第二种情形。继续选中滑块，首先在移动时的交互上，点击添加情形，打开情形编辑窗。

点击移动时的添加情形，打开情形编辑窗

在情形编辑窗中，点击添加条件，再点击第一个下拉菜单，选择元件范围；点击最后的下拉菜单，选择热区。

点击添加条件，第一个菜单设为元件范围，最后的菜单选择热区

接着在情形2交互上，点击添加动作，再依次点击移动_进度条；然后点击移动菜单，选择到达。（这里是指验证成功时，进度条移动到最右端）

点击情形2的添加动作

依次点击移动_进度条，移动菜单设为到达

再次点击添加动作，依次点击设置文本_进度条，设置值为拼图成功；然后点击右上角的添加目标，选中登录按钮，设置值为正在登录。（这里是指验证成功时，进度条显示拼图成功，登录按钮显示正在登录）

再点击添加动作，点击设置文本_进度条，值填上拼图成功

点击添加目标，选择登录按钮，值填上正在登录

再一次点击添加动作，选中等待，设置值为500毫秒；最后一次点击添加动作，依次点击显示隐藏_滑块，将其设为隐藏。（这里是指验证成功时，等待500毫秒后隐藏滑块）

再次点击添加动作，选择等待

最后再点击添加动作，选择滑块，并设为隐藏

结语

OK了，一个京东的拼图登录验证就绘制完成了，一起来看看最终效果图吧。（另外，我们还可以在验证失败时，将进度条设为红色，这就由同学们自行研究喽）

最终效果图

在线预览

效果图在线预览：https://u.pmdaniu.com/L8A5p

相关课件

为了帮助各位同学，能快速理解和练习Axure案例，本专栏每篇教程都会提供RP格式课件下载。

课件整包链接：
https://item.taobao.com/item.htm?id=631599964711

链接长期有效。

（默林如斯原创出品，未经许可，禁止转载，侵权必究）

《Axure 9 案例教程-基础篇》：以实战案例的角度，讲解Axure 9 的基础操作，帮助大家从案例中学习产品原型的设计思维，带你快速进入实战阶段！！适合Axure入门的同学！！点击了解课程简介>>

欢迎关注《产品经理知识与资源》专栏，这里专注原创Axure实战原型、Axure原型模板、Axure元件库、Axure图标库；2012年入行的原创实力保障！！点击前去关注>>

Axure 9 实战案例，动态面板的应用 3，京东的拖动拼图登录验证相关推荐

Axure 9 实战案例，动态面板的应用 5，官网首页自动轮播广告
前言 Hello!欢迎来到Axure 9 实战案例教程专栏.点击了解课程简介>> 动态面板在Axure原型设计中,可以说是应用最广泛的:本次课程我们继续来学习一下,动态面板的应用:本篇我们 ...
Axure 9 实战案例，动态面板的应用 6，导航菜单栏的手风琴效果
前言 Hello!欢迎来到Axure 9 实战案例教程专栏.点击了解课程简介>> 我们接着再继续学习动态面板的应用,本篇课程我们来讲解一下,如何运用动态面板绘制导航菜单栏的手风琴效果. 我 ...
Axure 9 实战案例，动态面板的应用 4.1，省市区三级联动下拉菜单（重制简易版）
前言 Hello!欢迎来到Axure 9 实战案例教程专栏. 本次课程我们继续来学习一下,动态面板的应用.本篇我们来讲解一下,如何绘制省市区联动下拉菜单(重新撰写简易版). 下拉菜单初稿为了节省时间 ...
Axure 9 实战案例，母版的应用 1，使用母版绘制APP导航菜单
前言 Hello!欢迎来到Axure 9 实战案例教程专栏.点击了解课程简介>> 前几章我们分别讲解了Axure基本元件.动态面板.交互事件的应用,相信同学们的Axure实战能力已经有了一 ...
Axure 9 实战案例，母版的应用 2，运用母版交互绘制Tab页签
前言 Hello!欢迎来到Axure 9 实战案例教程专栏.点击了解课程简介>> 上一篇教程我们讲解了运用母版绘制微信APP的导航菜单(点击阅读该教程>>),本篇教程我们继续来 ...
Axure 9 实战案例，基本元件的应用 1，用矩形与标题设计视频封面
前言 Hello,大家好!欢迎来到Axure 9 实战案例教程专栏.点击了解课程简介>> 本专栏旨在以实战案例的角度,讲解Axure 9 的基础操作,帮助大家在一个个的案例中,学习产品原型 ...
Axure 9 实战案例，基本元件的应用 5，利用情形实现B站图文登录验证
前言 Hello!欢迎来到Axure 9 实战案例教程专栏.点击了解课程简介>> 本次课程我们继续来学习一下,基本元件的应用.在前几篇教程中,我们讲到了一些常见的设计,比如图表.扫码,大家 ...
Axure 9 实战案例，中继器的应用 3，按条件筛选中继器列表
前言 Hello!欢迎来到Axure 9 实战案例专栏(进阶篇).(课程简介) 在上一篇教程,我们在普通中继器列表的基础上,加入了交替色和悬停色的效果 (了解更多),这个算是比较简单的,一学就会的交互 ...
Axure 9 实战案例，中继器的应用 2，列表的交替色和悬停色
前言 Hello!欢迎来到Axure 9 实战案例专栏(进阶篇).课程简介>> 在上一篇教程,我们讲解了如何使用中继器绘制原型列表页(了解更多>>),相信大家已经运用上了吧?是 ...
Axure教程:如何使用动态面板？动态面板功能详解
写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于Axure动态面板动态面板是a ...

最新文章

热门文章