中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

這次將分享一個更為常見的組件：驗證碼。如下圖

驗證碼

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

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

分析如下：

表現(xiàn)層

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

邏輯層

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

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

數(shù)據(jù)層

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

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

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

噪點圖

進(jìn)入實操

畫框架

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

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

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

然后我們在動態(tài)面板的onclick中添加move事件：

函數(shù)是：

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

原理解釋：

Math.random()生成0-1隨機(jī)數(shù)，toFixed(2)保留2位小數(shù)，乘以-100是因為Axure的坐標(biāo)軸的原點是在左上角，則圖片要移動則是變成負(fù)數(shù)。這邊即隨機(jī)將噪點圖片移動1-100個點。

驗證碼生成

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

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

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

候選字符里面總共有26+26+10=62個字符

我們從這62個字符中隨機(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個隨機(jī)字符都是同樣的函數(shù)。在動態(tài)面板的onclick中添加。

到這一步，已經(jīng)可以做到點擊驗證碼隨機(jī)生成4個字符了。為了逼真一點，我們再加上隨機(jī)旋轉(zhuǎn)函數(shù)。

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

[[Math.random()*60]]

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

預(yù)覽.gif

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

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

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

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