【Axure 教程】驗證碼,除了 12306,我還沒有服過誰(文字點選篇)

2 評論 7207 瀏覽 6 收藏 6 分鐘

在軟件設計中,為了防止暴力注冊或爬蟲爬取等機器請求,需要驗證操作者本尊是人還是機器,因此催生了驗證碼這個設計。目前驗證碼已經衍生出許多的形式,包括圖形驗證、數學運算、點選文字、滑動拼圖等,本文作者主要介紹怎么使用 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協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 哦,解決了

    來自上海 回復
  2. 為啥我按順序點了還是提示錯誤的提醒?

    來自上海 回復