商品文章分析了Axure原型的三個(gè)層次：表現(xiàn)層、邏輯層、展示層，今天的這篇文章從這個(gè)層次思路入手，繼續(xù)分享關(guān)于驗(yàn)證碼的原型設(shè)計(jì)。

上次分享一個(gè)本專題的一個(gè)開篇，講訴了Axure原型的三個(gè)層次，即表現(xiàn)層、邏輯層、展示層。并給出了一個(gè)簡(jiǎn)單的例子：音量調(diào)節(jié)。

這次將分享一個(gè)更為常見的組件：驗(yàn)證碼。如下圖

驗(yàn)證碼

先說明一下，在實(shí)際工作沒有必要像這篇文章寫的這樣去做一個(gè)如此高保真的驗(yàn)證碼，是在浪費(fèi)精力。做這些例子呢，主要是鍛煉自己的邏輯能力，以及對(duì)Axure的熟悉程度。當(dāng)然了，做完了可以存進(jìn)自己的組件庫(kù)里，需要用的時(shí)候直接拖動(dòng)就能用。多么酷炫。

話不多述，直接進(jìn)入正題。

分析如下：

表現(xiàn)層

• 4個(gè)自由角度隨機(jī)字符
• 輸入框
• 驗(yàn)證按鈕

邏輯層

if 我點(diǎn)擊驗(yàn)證碼圖片then 圖片上字符發(fā)生隨機(jī)變化，具體變化規(guī)則是：生成4個(gè)人隨機(jī)字符，并旋轉(zhuǎn)隨機(jī)角度，背景也隨機(jī)變化
if 我輸入在輸入框的字符與驗(yàn)證碼上面的圖片一致，則驗(yàn)證通過

關(guān)鍵就在于生成四個(gè)隨機(jī)字符，隨機(jī)旋轉(zhuǎn)角度，隨機(jī)背景。

數(shù)據(jù)層

我們可以很簡(jiǎn)單的假設(shè)字符就來(lái)自于26個(gè)大小寫字母與10個(gè)數(shù)字的集合，即
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

分析到這里，我們的思路是：

1. 構(gòu)建一個(gè)隨機(jī)字符集合，然后利用隨機(jī)函數(shù)從集合中隨機(jī)取出四個(gè)數(shù)，組成驗(yàn)證碼。
2. 運(yùn)用Axure旋轉(zhuǎn)事件配合隨機(jī)數(shù)，達(dá)到字符旋轉(zhuǎn)隨機(jī)角度的效果。
3. 至于背景圖，專業(yè)術(shù)語(yǔ)叫噪點(diǎn)圖，在百度上找一張圖，然后利用Dynamic Pannel限制顯示區(qū)域的效果，通過隨機(jī)移動(dòng)來(lái)達(dá)到改變背景的效果。

噪點(diǎn)圖

進(jìn)入實(shí)操

畫框架

拖動(dòng)一個(gè)輸入框、一個(gè)動(dòng)態(tài)面板、一個(gè)按鈕，調(diào)整至合適的大小。

雙擊進(jìn)入動(dòng)態(tài)面板，將噪點(diǎn)圖放到里面去

這樣就實(shí)現(xiàn)了噪點(diǎn)圖的局部顯示：

然后我們?cè)趧?dòng)態(tài)面板的onclick中添加move事件：

函數(shù)是：

[[Math.random().toFixed(2)*-100]]

原理解釋：

Math.random()生成0-1隨機(jī)數(shù)，toFixed(2)保留2位小數(shù)，乘以-100是因?yàn)锳xure的坐標(biāo)軸的原點(diǎn)是在左上角，則圖片要移動(dòng)則是變成負(fù)數(shù)。這邊即隨機(jī)將噪點(diǎn)圖片移動(dòng)1-100個(gè)點(diǎn)。

驗(yàn)證碼生成

這里直接將邏輯層與數(shù)據(jù)層一起寫了。

可以用設(shè)置變量的形式，但是這個(gè)又涉及到其他知識(shí)，故我們這里直接采用一種取巧的方式，把字符集合存儲(chǔ)在標(biāo)簽中。

拖動(dòng)四個(gè)標(biāo)簽在驗(yàn)證碼背景（放到動(dòng)態(tài)面板里面）上，表示4個(gè)隨機(jī)字符。再拖動(dòng)一個(gè)標(biāo)簽放在下面，作為字符串的存儲(chǔ)集合。如圖：

候選字符里面總共有26+26+10=62個(gè)字符

我們從這62個(gè)字符中隨機(jī)選取需要用到以下公式。

[[LVAR1.charAt((Math.random()*62).toFixed(0))]]

LVAR1指向字符集合。charAt()函數(shù)返回字符串中指定位置的字符。Math.random()返回0-1隨機(jī)數(shù)，乘以62則變成生成1-62的隨機(jī)數(shù)，toFixed（0）函數(shù)將結(jié)果保留0位小數(shù)，即取整。

4個(gè)隨機(jī)字符都是同樣的函數(shù)。在動(dòng)態(tài)面板的onclick中添加。

到這一步，已經(jīng)可以做到點(diǎn)擊驗(yàn)證碼隨機(jī)生成4個(gè)字符了。為了逼真一點(diǎn)，我們?cè)偌由想S機(jī)旋轉(zhuǎn)函數(shù)。

很簡(jiǎn)單，設(shè)置旋轉(zhuǎn)角度為1-60的隨機(jī)數(shù)即可。公式為

[[Math.random()*60]]

好了，最后把字符集合標(biāo)簽設(shè)為隱藏，最后的效果就出來(lái)了。

預(yù)覽.gif

后續(xù)可以在頁(yè)面onload事件中把動(dòng)態(tài)面板的onclick事件粘貼進(jìn)去，這樣加載時(shí)候就是隨機(jī)字符了。

如果要做驗(yàn)證的話，只要寫一個(gè)函數(shù)，拼接4個(gè)隨機(jī)字符，判斷與文本框輸入是否相等即可。這邊不在討論范圍。本文僅演示驗(yàn)證碼高保真驗(yàn)證碼生成。

本文由 @躚塵 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS，基于CC0協(xié)議