发布时间：2020-9-11 分类： 电商动态
本文分析了Axure原型的三个层次：表示层，逻辑层和表示层。今天的文章从这个层次的想法开始，并继续分享验证码的原型设计。
上次我分享了这个主题的开头，我谈到了Axure原型的三个层次，即表示层，逻辑层和表示层。并举一个简单的例子：音量调整。
这一次将共享一个更常见的组件：验证码。如下图所示
验证码
首先，在实际工作中，没有必要像这样做这样的高保真验证码，这是浪费精力。要做这些例子，主要是为了锻炼自己的逻辑和熟悉Axure。当然，您可以将其保存在自己的组件库中，并在需要时使用它。挺酷的。
不要多说，直接去主题。
分析如下：
绩效层
4个自由角度随机字符
输入框
验证按钮
逻辑层
如果我点击验证码图像，则图片上的字符会随机更改。具体的变化规则是：生成4个随机字符，旋转随机角度，背景随机变化
如果我输入输入框中的字符和验证码上方的图片，则验证通过
关键是生成四个随机字符，随机旋转角度和随机背景。
数据层
我们可以简单地假设该字符来自26个大写和小写字母以及10个数字的集合，即
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
在这里分析，我们的想法是：
构造随机字符集，然后使用随机函数从集合中随机取四个数字以形成验证码。
使用随机数的Axure旋转事件来实现字符随机旋转的效果。
至于背景图像，术语称为噪声图。在百度上查找图片，然后使用动态面板限制显示区域的效果，并使用随机移动来实现更改背景的效果。
噪音地图
输入实际操作
画框
拖动输入框，动态面板和按钮以调整到适当的大小。
双击进入动态面板并将噪声贴图放入其中。
这实现了噪声图的部分显示：
然后我们在动态面板的onclick上添加一个move事件：
功能是：
[[的Math.random（）toFixed（2）* - 100]]
原理说明：
Math.random（）生成0-1随机数，toFixed（2）保留2个小数位，并乘以-100，因为Axure轴的原点位于左上角，图像移动到负数。这会将噪点图片随机移动1-100点。
验证码生成
逻辑层与数据层直接一起写入。
您可以使用设置变量的形式，但这涉及其他知识，因此我们使用一种棘手的方式在标记中存储字符集。
在验证码背景上拖动四个标签（放在动态面板中）以表示4个随机字符。然后拖动下面的标签将其存储为字符串集合。图：
候选字符总共有26 + 26 + 10=62个字符
我们需要使用以下公式从这62个字符中随机选择。
[[LVAR1.charAt（（的Math.random（）* 62）.toFixed（0））]]
LVAR1指向一组字符。 charAt（）函数返回字符串中指定位置的字符。 Math.random（）返回0-1随机数，乘以62成为生成1-62的随机数，而toFixed（0）函数将结果保留为零位数分数，即舍入。
四个随机字符都是相同的功能。在动态面板的onclick中添加。
此时，已经可以通过单击验证码随机生成4个字符。为了实事求是，让我们添加一个随机旋转函数。
很简单，设置一个旋转角度为1-60的随机数。公式是
[[的Math.random（）* 60]]
好的，最后将字符集标签设置为隐藏，最终效果出来了。
预览.gif
随后，可以将动态面板的onclick事件粘贴到页面的onload事件中，以便在加载时加载随机字符。
如果要验证，只需编写一个函数，拼接4个随机字符，并判断它是否等于文本框输入。这不是讨论的范围。本文仅演示验证码高保真验证码生成。
