1. 主页 > 行业资讯 > 设计文章 >

Axure 9案例教程,如何利用情境实现哔哩哔哩图形

编者按:很多情况下,我们在遇到登陆页面时,总会跳出一个验证码来登录,有时是输入数字,有时是以图形登录的形式;而且图形登录的方式很多。本文作者将介绍哔哩哔哩图形登录验证的步骤。我们一起来看看。

你知道最常用的登录认证方法是什么吗?

估计首先想到的是验证码。是的,验证码确实是最常见最经典的登录验证方式。

你还知道哪些登录认证方式?比如下图(哔哩哔哩图形登录验证)你见过这种方式吗?

B站的图文登录验证

哔哩哔哩图形登录验证

如您所见,哔哩哔哩的图形登录验证效果主要包括:

1)点击文本时显示排序号

2)点击:判断点击顺序是否正确的按钮:

顺序错误时,提示验证失败,并刷新图文重新验证;顺序正确时,提示验证成功。

然后这篇文章会给你讲解如何画出哔哩哔哩的图形登录的验证效果(注:本教程属于Axure 9基础组件的复合应用,适合1年左右的产品经理使用,请去转转)。

第一步:设置第一次点击互动

为了节省时间,我们提前绘制了图形验证界面,包括验证图形(边框、提示文字、验证图片、刷新按钮、确认按钮)、点击提示(圆圈1、2)、验证结果提示(验证通过、验证失败)。

图形验证界面

先拖动一个热区,将其大小设置为70×70,将热区拖动到验证画面,覆盖“转”字;然后在右边工具栏中的交互上,点击新建交互,再依次点击_显示/隐藏_圆1,设置为显示(默认为显示),勾选放在顶层。

拖到热区,将大小设置为70×70,并将其拖到word transfer上

单击新的交互,当单击显示/隐藏圆1时,选中放在顶部

然后在交互的“点击”中点击+号(添加动作),依次点击set text _ circle 1,将值设置为1。

单击添加操作

依次点击设置text _ circle 1,将值设置为1。

这里的交互是指点击“转”字时,显示点击提示(圈1)并放置在顶层,排序号显示为1。

第二步:在各种情况下设置点击互动

既然点击顺序有对错两种情况,那么上一步只是其中的一种,应该应用到交互的情况。

使用案例来设置多个交互

先点击启用情况,在情况编辑弹出窗口中点击添加条件,然后点击第一个下拉菜单,选择组件可见,点击第二个下拉菜单,选择圆2,点击最后一个下拉菜单,选择false。

添加案例条件,设置为:如果可以在圆2中看到组件== false

这里,我们通过判断是否显示圆圈2来确定当前热区的点击顺序:

情形一,当圆形2不显示时,说明当前热区是第一个被点击的,圆形1的排序号要显示为1;情形二,当圆形2显示时,说明当前热区是第二个被点击的,圆形1的排序号应该显示为2。

那么我们再来添加这个第二个案例,点击选择第一个案例,按Ctrl+C复制到剪贴板,然后按Ctrl+V再复制一个副本(交互可以复制粘贴)。

再复制一个案例

双击交互打开交互编辑器,然后在弹出窗口双击第二种情况打开情况编辑窗口(或者直接点击第二种情况的情况条件);在案例编辑窗口,将案例名称改为案例2,点击最后一个下拉菜单,选择true在交互编辑器上,点击案例2中设置文本的内容,将值设置为2(即设置圆1的排序号为2)。

设置条件是:如果在圆2中可以看到元素==真

将圆1的排序编号设置为2

第三步:设置第二次点击交互

第三步,我们设置第二个点击交互,和第一个类似,所以我们可以通过按住Ctrl+鼠标左键来拖拽复制上一个热区,作为第二个热区,拖拽到“面条”这个词上。

再复制一个热点,拖到“面条”这个词上

然后点击选择第二个热区,双击右边工具栏中的交互,打开交互编辑器,点击情境1的情境条件,打开情境中的编辑窗口,然后点击第二个下拉菜单,将其改为圆1。

在打开第二个热区的情况1下,将第二个菜单更改为圆圈1

然后在交互编辑器中,点击显示隐藏内容,将目标改为圈2;然后点击设置文字内容,将目标改为圆圈2。

将显示隐藏目标修改为圆圈2

修改设置文本的目标是圆2

最后,按照场景1的修改方法,我们再次修改场景2,即修改情境条件的目标是圆1,隐藏目标是圆2,设置文本的目标是圆2。

根据场景1修改场景2

第四步:建立判断互动

前三步我们已经完成了点击交互的设置,接下来我们会设置:按钮的判断交互。

点击选择:按钮,在右边工具栏的交互上,依次点击新建交互_点击时_显示隐藏_验证通过,设置为显示(默认为显示),勾选置于顶层。

选中:按钮,点击新建交互

单击显示隐藏验证通过,并选中放置在顶部

第五步:在各种情况下建立判断互动

和点击交互一样,验证提示有两种情况:通过和失败,上一步只是其中一种,我们继续应用到交互的情况。

继续使用案例

首先在交互式的“点击时间”上点击启用情况,打开情况编辑窗口,在弹出的窗口中点击添加条件,点击第二个下拉菜单,选择圆1,在最后一列填入1;然后单击+号添加另一行,然后单击第二个下拉菜单,选择圆2,并在最后一列填写2。

添加两个案例条件

这里,我们通过判断圆圈1和2的显示字符(排序号)来确定验证是否通过:

情形一,当圆形1和2分别显示1和2时,说明验证通过;情形二,当圆形1和2分别显示2和1时,说明验证失败。

所以我们加上这第二个案例,点选第一个案例,按Ctrl+C复制到剪贴板,然后按Ctrl+V再复制一个。

再复制一个案例

然后点击第二种情况的情况条件,打开情况编辑窗口;在场景编辑窗口中,修改后的场景名称为场景2,第一行条件最后一列设置为1,第二行条件最后一列设置为2。

将圆的文本修改为1和2

然后在交互“场景2”中,点击显示隐藏内容,将目标设置为验证失败。

将显示隐藏目标修改为验证失败

步骤6:隐藏提示组件

首先选择圆和验证提示,设置放在底部,设置隐藏,然后拖到验证界面,底部对齐。

将圆圈和验证提示设置为放置在底部并隐藏,并将它们拖到图片和文本上

07结论

好了,一个哔哩哔哩的图形登录验证效果完成;本文使用的主要知识点是情境。你学会了吗?

完成效果图

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/522.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息