Axure 9 实战案例，基本元件的应用 5，利用情形实现B站图文登录验证

前言

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

本次课程我们继续来学习一下，基本元件的应用。在前几篇教程中，我们讲到了一些常见的设计，比如图表、扫码，大家都掌握了吗？本篇将给大家带来一点不一样的，先来问大家一个问题：你知道最常见的登录验证是什么吗？不错，是验证码（相信大家都猜到了）。那么其他的登录验证，你知道有哪些呢？比如下面图片中的这种方式（B站的图文登录验证），你是否见过？

B站图文登录验证

大家可以看到，B站的图文登录验证效果主要组成包括：

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

2)点击<确定>按钮，判断点击顺序是否正确：
①顺序错误时（顺序为：②①），提示验证失败，并刷新图文重新验证
②顺序正确时（顺序为：①②），提示验证成功

那么本篇就来给大家讲解一下，如何绘制B站的图文登录验证效果（大家放心，这还是属于基本元件的基础应用，只是增加了一丢丢难度 ∩▂∩ ）。

第一步：设置第一个点击交互

为了节省时间，我们事先把图文验证界面绘制好了，包括验证图文（边框、提示文字、验证图片、刷新按钮、确认按钮）、点击提示（圆形1和2）、验证结果提示（验证通过、验证失败）。

图文验证界面

首先拖入一个热区，设置其大小为70×70，并拖动热区至验证图片上，覆盖在“转”字上面；然后在右侧工具栏的交互上，点击新建交互，再依次点击 单击时_显示/隐藏_圆形1，将其设为 显示（默认为显示），并勾选 置于顶层。

拖入热区，设置大小为70×70，并拖到转字上

点击新建交互_单击时_显示/隐藏_圆形1，并勾选置于顶层

接着在交互 “单击时” 中点击+号（添加动作），依次点击 设置文本_圆形1，设置值为 1。

点击添加动作

依次点击 设置文本_圆形1，设置值为 1

这里交互的意思是，当点击“转”字时，显示点击提示（圆形1）并置于顶层，排序号显示为1。

第二步：设置多种情形的点击交互

由于点击顺序有正确和错误两种情况，“转”字可能是①（即第一步的交互），也可能是②，所以我们就要运用到交互中的情形。

运用情形设置多种交互

接着第一步，首先点击 启用情形，在情形编辑弹窗中，点击 添加条件，然后点击第一个下拉菜单，选择 元件可见，点击第二个下拉菜单，选择 圆形2，点击最后的下拉菜单，选择 假。

添加情形条件，设置为：if 元件可见于 圆形2 == 假

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

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

所以我们接着来添加这第二种情形，点击选中第一个情形，按Ctrl+C将其复制到剪贴板，再按Ctrl+V，将其复制多一份（交互是可以复制粘贴的）。

复制多一份情形

双击交互打开交互编辑器，在弹窗中再双击第二个情形打开情形编辑窗（或直接点击第二个情形的情形条件）；在情形编辑窗中，修改情形名称为情形2，点击最后的下拉菜单，选择真；再在交互编辑器上，点击情形2中的设置文本的内容，将值设为2（即设置圆形1的排序号为2）。

设置情形条件为：if 元件可见于 圆形2 == 真

设置圆形1的排序号为2

第三步：设置第二个点击交互

第三步我们来设置第二个点击的交互，第二个点击交互与第一个大同小异，所以我们可以将前面的热区元件，复制粘贴多一个元件，用作第二个热区，并将其拖至“面”字上面。

复制多一份热区，拖至“面”字上

接着点击选中第二个热区，双击右侧工具栏的交互，打开交互编辑器，再点击情形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”中，点击显示隐藏的内容，将目标设为验证失败。

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

第六步：隐藏提示类元件

首先选中圆形和验证提示，将其设为置于底层，并设为隐藏，然后将其拖到验证界面上，底部对齐。

将圆形与验证提示设为置于底层和隐藏，并拖至图文上

结语

OK了，一个B站的图文登录验证效果就绘制完成了；本篇主要运用的新知识点是情形，大家学会了没（多按F5键进行预览测试，失败乃成功之母）？

完成效果图

在线预览

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

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