再一次工作中遇到了產品設計的注冊和登錄模塊，今天和大家聊聊如何利用Axure實現圖片驗證碼的隨機切換。
以往都為了方便或者說是偷懶每次在設計驗證碼的時候，總會手工設置幾張圖片驗證碼作為動態面板的幾個狀態，利用動態面板的狀態切換，基本也算實現了切換驗證碼的交互效果，但總覺得缺少了什么，保真度不夠。
回到正題，首先來分析下需要實現的效果：
1、圖片中的驗證碼為數字和字母的隨機組合
2、點擊驗證碼和右側的文字，左側的驗證碼隨機出現4位字母或數字
隨機驗證碼是顯示在一個矩形框內，這里只需要從26個大寫英文字母和10個數字中隨機獲取一位字符，四個字符拼成一個隨機驗證碼。
交互效果其實很簡單，下面我們來看下如何實現：
第一步：準備好相關的部件，拖入一個矩形框至設計區域，矩形框中默認輸入A C 5 8；拖入文本標簽至矩形框右側，輸入文字“看不清，請換一張”；
第二步：選中右側文本標簽，選擇鼠標單擊事件，選擇設置變量新增動作，配置動作中選擇新增變量，新增全局變量random_str，并給予賦值ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789（驗證碼就是從這里隨機抽取）
第三步：給驗證碼矩形框隨機賦值，繼續第二步的操作新增動作中選擇設置文本，配置動作選中驗證碼矩形框，下方的文本賦值中，點擊fx，插入字符串函數[[random_str.substr(random_str.length*Math.random(),1)]]，插入4遍，每一遍之間用空格隔開，這段函數表達的是從全局變量那一串內容中，隨機抽取一個字符，插入4遍，即表示抽取4個字符。將用例復制到矩形框單擊事件中。
按下F5預覽驗證效果，看下是不是點擊文字和驗證碼，驗證碼是不是隨機刷新了，祝你成功。
總結：本案例的難點在于字符串函數[[random_str.substr(random_str.length*Math.random(),1)]]的應用，對于沒有接觸過開發的同學來說，這點可能很難想到，也不一定明白其中的意思，通過這次的接觸，大致了解意思即可，希望本案例的講解，能夠對你有所幫助。
如果你對Axure或原型設計有興趣，希望系統性地學習Axure知識，掌握更多Axure使用技巧；或者希望通過臨摹交互案例，進一步提升高保交互設計能力。請點擊下方關注按鈕，查看更多連載作品。
