【Axure 教程】驗證碼,除了 12306,我還沒有服過誰(文字點選篇)
在軟件設計中,為了防止暴力注冊或爬蟲爬取等機器請求,需要驗證操作者本尊是人還是機器,因此催生了驗證碼這個設計。目前驗證碼已經衍生出許多的形式,包括圖形驗證、數學運算、點選文字、滑動拼圖等,本文作者主要介紹怎么使用 Axure 來設計一個動態的文字點選驗證碼。
先看一下效果(傳送門>>):
一、功能介紹
可從預設的文字庫中隨機抽取3個待驗證的字,上方顯示抽取出來的文字及順序,下方隨機生成3個待點選的文字的位置和角度。用戶需按指定順序點選,只有點選順序完整正確才能成功。接下來開始分享它的設計。
二、外觀設計
如下圖,需要的內容主要有:
- 6個矩形,用來放從字庫中隨機抽出來的字,3個在上方,用來提示用戶需要點選的文字和順序,3個在下方,用來給用戶點選。
- 1個刷新按鈕,按鈕的主要作用是在用戶覺得當前驗證碼太難(比如生成的待點選文字重疊在一起,難以分辨如何點選)時,重新生成驗證碼。
- 1個確認按鈕,觸發驗證碼校驗。
- 1個成功提示。
- 1個錯誤提示。
除了以上的內容之外,我們還需要幾個全局變量:
- WordStock:用來存儲生成點選文字的字庫
- Validation:待驗證的文字及順序
- Choice:用戶點選的文字及順序
- Vldt_Result:驗證結果,這個項目用不到這個,主要是提供給想把這個項目嵌入到自己項目的朋友使用,可以在提交表單的時候,直接讀取這個變量是否等于 True 來判斷驗證碼的驗證結果。接下來我們開始寫邏輯。
三、生成待驗證文字及待點選文字
如下圖,首先待驗證的文字是從字庫隨機抽取出來的,取出來之后,待驗證和待點選文字都同時【設置文本】為所抽取的文字,然后再把這個文字【追加】到變量【Validation】中, concat 的作用就是在原來的文字基礎上追加文字,而不會把原來的文字覆蓋掉,待選2和待選3的文字都是按照上述的邏輯配置。
接著來給待選擇的文字添加邏輯:
【載入時】的事件是生成一個【-45° ~ 45°】的隨機角度和在背景圖片尺寸內生成一個隨機位置,然后【旋轉】和【移動】對應的文字;
【單擊時】判斷當前的文字是否已經被點選,如果未被點選,就【設置選中】,并將當前選中的文字【追加】到變量【Choice】中,一定要寫判斷條件,否則每點擊一次,就會追加一次文字。
四、刷新按鈕
刷新按鈕的邏輯比較簡單,大家看一下圖即可,主要就是做一些初始化和觸發一些元件的載入事件:
五、確認按鈕
確認按鈕直接比較變量【Choice】和【Validation】就可以,如果兩個完全相等,就將【Vldt_Result】設置為【True】,并顯示驗證成功提示,如果不相等,表示驗證失敗,就顯示驗證失敗提示,然后觸發刷新按鈕。
這樣,這個驗證碼就做完了,如果本教程對你有用,歡迎“收藏”或點擊“喜歡”,感謝閱讀!
本文由 @產品錦李 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
哦,解決了
為啥我按順序點了還是提示錯誤的提醒?