Axure RP Pro如何制作手机界面原型?

Axure RP Pro如何制作手机界面原型?

由于手机号码验证的广泛应用，在原型制作中几乎都会用到验证码，比如登录、修改密码等模块。 本篇我们就来看看验证码的制作。

​

第一步，准备相应的零件

向下拖动三个矩形，创建三个验证码，并将其转换为动态面板。 用于输入验证码和文本标签的文本框。 正确标记和错误标记对验证码进行判断。

在文字标签中输入文字“换一个”，方便我们后续更新验证码功能时使用。 由验证码的矩形变形而成的动态面板可以命名为“验证码”，以便于我们识别。 像往常一样，正确的数字用绿色填充，错误的数字用红色填充。

第二步，设置隐藏

设置判断的动态面板隐藏。 验证码输入完成后，将输入的内容与显示的验证码进行比较。 如果相同，则显示正确的数字，如果不同，则显示错误的数字。

第三步，设置验证码更新。

当我们点击“更改”时，验证码将会刷新。 我们利用动态面板设置了3个状态，分别创建了3个验证码。 因此，当您点击“更改”时，需要切换“验证码”动态面板的状态。

由于验证码有3个，我们需要判断验证码的动态面板处于哪一种状态，即当前的验证码是哪一种。 因此，我们可以使用全局变量来记录当前的验证码。 全局变量的默认值设置为 ajiw。

单击“更改”时，确定当前状态。 设置验证码的切换和记录。

当状态为状态1时，点击“更改”，状态切换为状态2，全局变量设置为状态2中的验证码。以此类推，进行设置。

第四步设置验证码判断

这是最后一步，也是最重要、最关键的一步，叫做交互。 本步骤设置的条件判断如下：

1、输入的验证码的字符长度是否为验证码的字符长度。

2. 检查验证码中输入的字符与验证码中显示的字符是否一致。

本次交互的判断逻辑是，当文本框的字符长度为验证码的字符长度，即输入4个字符时，开始验证输入的验证码是否正确。 如果输入的字符与验证码的字符相同，则会显示对号。 如果错误，将会显示错误符号。 如果字符长度不为4，则不进行验证，也不显示结果。

具体设置见下文。

为了立即做出判断，我们将用例设置为文本更改时的事件。 第一步设置文本框字符长度为4时的条件，判断输入内容是否等于当前验证码。

如果同时满足上述条件，则判断结果会显示对号。 只要不满足任何一个条件，判断结果就会显示错误号。

完成后我们可以预览一下，看看是否达到了我们想要的效果。

该验证码设置方法是设置方法之一。 设置时，通常根据自己的实际需要进行不同的设置和更改。 如果您的实际需求与本文的交互效果不同，并且您不知道如何设置，请来与我们讨论。