商品文章分析了Axure原型的三个层次：表现层、逻辑层、展示层，今天的这篇文章从这个层次思路入手，继续分享关于验证码的原型设计。

上次分享一个本专题的一个开篇，讲诉了Axure原型的三个层次，即表现层、逻辑层、展示层。并给出了一个简单的例子：音量调节。

这次将分享一个更为常见的组件：验证码。如下图

验证码

先说明一下，在实际工作没有必要像这篇文章写的这样去做一个如此高保真的验证码，是在浪费精力。做这些例子呢，主要是锻炼自己的逻辑能力，以及对Axure的熟悉程度。当然了，做完了可以存进自己的组件库里，需要用的时候直接拖动就能用。多么酷炫。

话不多述，直接进入正题。

分析如下：

表现层

• 4个自由角度随机字符
• 输入框
• 验证按钮

逻辑层

if 我点击验证码图片then 图片上字符发生随机变化，具体变化规则是：生成4个人随机字符，并旋转随机角度，背景也随机变化
if 我输入在输入框的字符与验证码上面的图片一致，则验证通过

关键就在于生成四个随机字符，随机旋转角度，随机背景。

数据层

我们可以很简单的假设字符就来自于26个大小写字母与10个数字的集合，即
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

分析到这里，我们的思路是：

1. 构建一个随机字符集合，然后利用随机函数从集合中随机取出四个数，组成验证码。
2. 运用Axure旋转事件配合随机数，达到字符旋转随机角度的效果。
3. 至于背景图，专业术语叫噪点图，在百度上找一张图，然后利用Dynamic Pannel限制显示区域的效果，通过随机移动来达到改变背景的效果。

噪点图

进入实操