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

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

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

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

哔哩哔哩图形登录验证

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

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结论

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

完成效果图