大家好，我是大明同學。
這期內容，我們來用Axure來制作一個短信驗證登錄頁面的小案例。
驗證碼登錄小案例
創建手機號輸入框所需的元件
1.打開一個新的 RP 文件并在畫布上打開 Page 1。
2.在元件庫中拖出一個矩形元件，選中矩形元件，在樣式窗格中，命名為邊框，將寬值設置為350 ，高值設置為50，線寬值為1 填充顏色灰色（#CCCCCC）。
2.在元件庫中拖出一個文本框元件，選中文本框元件，在樣式窗格中，命名為輸入框，將寬值設置為260，高值設置為50，線寬值為0 ，附著于矩形元件上層，左側縮進 40。
3.在 iconfont素材庫里找一個手機icon，選中手機icon 在樣式窗格將寬設為40 高設為50，填充或字體顏色調整為灰色（#CCCCCC）。
4.在找一個清除按鈕icon，選中清除按鈕icon 在樣式窗格命名為清除，將寬高設置為50，填充或字體顏色調整為灰色（#CCCCCC）。
5.在元件庫里找一個動態面板元件，選中動態面板在樣式窗格中命名為驗證手機號，將寬高設置為50，在動態面板內拖入一個矩形元件輸入文本fx，并添加State2 用于輔助校驗手機號位數。
* 輔助校驗元件大小填充沒有必要的設計規則，可以根據自己的習慣設計，只要知道這個元件是用來干啥的就行，動態面板內必須添加State2，否則無法校驗。
好的，來看一下手機號輸入框所需的所有元件。
創建驗證碼輸入框所需的元件
1復制前面做好的矩形元件和文本框（輸入框），粘貼到畫布，選中文本框元件，將寬值改為120。
2.在 iconfont素材庫里找一個信件icon，選中信件icon 在樣式窗格將寬設為 40高設置為 50，填充或字體顏色調整為灰色（#CCCCCC）。
2.在元件庫中拖出一個熱區元件，選中熱區元件，在樣式窗格中，將熱區元件命名為 短信驗證碼熱區 寬值設置為120，高值設置為50。
好的，來看下驗證碼輸入框所需的全部元件。
創建獲取驗證碼按鈕所需的元件
1.在元件庫中拖出一個矩形元件，選中矩形元件，在樣式窗格中，命名為 短信驗證碼按鈕 字體顏色為藍色（#0052D9），將寬值設置為100 高值設置為50，線寬值為0 ，輸入文本 發送驗證碼。
2.在元件庫中拖出動態面板元件，選中動態面板元件，在樣式窗格中，命名為 按鈕狀態，將寬值設置為80 高值設置為30 ，在動態面板內添加State2，用于改變短信驗證碼倒計時交互。
好的，來看一下獲取驗證碼按鈕所需的全部元件。
創建登入按鈕所需的元件
1.在元件庫中拖出一個矩形元件，選中矩形元件，在樣式窗格中，將寬值設置為350 高值設置為50，線寬值為0 填充顏色為藍色（#0052D9），輸入文本 登錄 字體顏色為白色，并與手機號輸入框 左側對齊。
2.在 iconfont素材庫里找一個等待icon，選中等待icon 在樣式窗格中命名為加載圖標，將寬高設置為 20，填充或字體顏色調整為灰色（#CCCCCC）。
3.制作一個勾選復選框，在元件庫中拖出一個矩形元件，選中矩形元件，在樣式窗格中，命名為 TXT，將寬值設置為100 ?高值設置為34 ，線寬值為0 ，輸入文 自動登入，字體顏色為灰色 （#999999），邊距 左側 20。
4.復制上面做好的矩形元件，粘貼到畫布，在iconfont素材庫 找一個正方形和勾選 icon，正方形icon和矩形元件左側對齊，選中 自動登入，正方形、矩形 右鍵 組合。
好的，到這里大概需要的元件其實已經做得差不多，為了讓這個小案例更完美一些，還可以加入第三登錄能力。
創建第三方登錄icon所需的元件
1.在iconfont素材庫 找所需要一鍵登錄的icon，右鍵 組合 并與登入元件對齊。
這就是制作登錄案例需要用的所有元件了。
創建交互
創建手機號輸入框的交互狀態
邊框
1.選中矩形框，在交互窗格中點擊新建交互，鼠標移入時 設置選中 當前為 真 ；鼠標移出時 設置選中 當前為 假。
2.添加形狀屬性 交互樣式 元件選中時的樣式 線段顏色 藍色（#0052D9） 邊框寬度 1；元件禁用的樣式 線段顏色 藍色（#0052D9）外部陰影 淡藍色 （#0079FE） 80% 陰影 x y軸 0 模糊 3 。
fx 手機號校驗
1.在設計驗證手機號元件之前，需要先創建一個全局變量，在項目下拉選項中找到全局，點擊添加全局變量 phonenumber 默認值為 0。
2.選中 fx 元件，在交互窗格中點擊新建交互，單擊時，啟用情形判斷
情形1：?添加條件 元件文字長度 輸入框 等于 值 11 并且 元件文字 手機號輸入框 是 數字 ；
* 一般手機號都是11位數字組成，當然還有更復雜的需要判斷開頭前幾位。
添加動作 設置變量值 phonenumber 為 1；啟用 短信驗證碼按鈕；隱藏短信驗證碼熱區 。
情形2：否則 如果 真
復制情形 1 設置變量值 啟用/禁用 交互粘貼到情形 2 將phonenumber 為 1 改為 phonenumber 為 0，啟用短信驗證碼按鈕 改為禁用。
3.選中fx 元件設為隱藏，我們來看看 fx 手機號校驗元件的完整交互。
手機號文本輸入框
1.選中手機號文本輸入框，在交互窗格中點擊新建交互，文本改變時 啟用情形判斷。
情形1：元件文字長度 當前 不等于 值
添加動作 顯示/隱藏 顯示 清除 按鈕；觸發事件 驗證手機號 單擊時 。
情形 2 否則 如果 真；復制 情形 1 顯示/隱藏 觸發事件 粘貼到情形 2 將顯示清除 按鈕 改為 隱藏 。
2.復制邊框 鼠標移入時、鼠標移出時 交互 粘貼到手機文本框。
3.新建交互 獲取焦點時 啟用情形判斷
情形1：添加條件 元件文字 當前 不等于 文本 ；添加動作 顯示/隱藏 顯示清除 按鈕 ；啟用/禁用 禁用 邊框 。
情形 2 否則 如果 添加條件 元件文字 當前 等于 文本 ；添加動作 啟用/禁用 禁用 邊框 。
4.新建交互 失去焦點時 啟用/禁用 啟用 邊框 ；設置選中 邊框 值 為 假 ；等待 200 毫秒 ；顯示/隱藏 隱藏 清除 按鈕 。
5.設置文本框屬性 交互樣式 提示文字樣式的樣式 字色 灰色（#CCCCCC）提示文本 請輸入手機號 隱藏提示 選擇 獲取焦點 最大長度 11 。
清除按鈕
1.選中清除按鈕 在樣式窗格中設置為 隱藏 ；在交互窗格中點擊新建交互 單擊時 設置文本 手機號輸入框 值 為 。
組合手機號輸入框
1.選中 邊框 手機icon 手機號輸入框 清除按鈕 右鍵 組合。
預覽交互
點擊預覽，在預覽頁面 鼠標移入 移出手機號輸入框 會顯示設計交互效果 在手機號輸入框 輸入文本時 會顯示清除 按鈕 點擊清除 按鈕 清除輸入文本。
獲取驗證碼按鈕
1.選中獲取驗證碼按鈕在交互窗格中點擊新建交互，單擊時，啟用/禁用 禁用 當前 ；添加動作 設置動態面板狀態 循環 到下一項 勾選循環 勾選循環間隔 1000毫秒。
2.設置形狀屬性 交互樣式 元件禁用的樣式 勾選字色 灰色（#CCCCCC），并勾選禁用，如果沒有找到禁用勾選框，點擊顯示全部按鈕。
循環
1.在設置按鈕狀態元件之前，需要先添加一個全局變量 在項目下拉列表中找到全局變量 添加 RegisterTime 默認值 60。
2.選中按鈕狀態元件在樣式窗格中點擊新建交互 狀態改變時 啟用情形判斷
情形 1：添加條件 變量值 RegisterTime 大于 值 1。
添加動作 設置變量值 RegisterTime 值 [[RegisterTime-1]] ；設置文本 短信驗證碼按鈕 富文本 為 [[RegisterTime]]s 后重新獲取 字色灰色 （#CCCCCC）。
情形 2：否則 如果 真 ；將情形1設置文本交互復制粘貼到情形2 把 [[RegisterTime]]s 后重新獲取 改為 重新獲取 字色藍色 （#0153D9） ；添加動作 設置變量值 RegisterTime 為 60 ；啟用/禁用 啟用 短信驗證碼按鈕 ；設置面板狀態 按鈕狀態 停止循環。
*按鈕轉態 動態面板，添加 State2狀態，這一步別忘了，不然沒辦法循環。
3.選中按鈕轉態元件置于獲取驗證碼底層，在看看 按鍵狀態 的完整交互。
預覽交互
點擊預覽，在預覽頁面手機號輸入框輸入 11位數會點亮獲取驗證碼按鈕，點擊按鈕進入60秒倒計時，倒計時結束按鈕切換為重新獲取，點擊重新獲取，再次進入倒計時 循環。
*素材時長有限，做了剪切處理。
驗證碼輸入框
1.在設計驗證碼輸入框之前，需要先新建一個fx 校驗驗證碼，當然復制驗證手機號的fx 元件也行，選中復制的fx 校驗元件，在樣式窗格將驗證手機號改為校驗驗證碼。
2.在項目下拉列表中找到全局變量，添加Code 變量 ，默認值 為0 。
3.選中fx 校驗驗證碼元件，在交互窗格中點擊新建交互，單擊時，啟用情形判斷
情形 1：如果 元件文字長度 于 輸入框 ≤ 值 6 并且 元件文字長度 于 輸入框 ≥ 4。
添加動作 設置變量值 Code 為 1。
情形 2：否則 如果 真 添加動作 設置變量值 Code 為 0。
好的，我們來看看 校驗驗證碼的完整交互 。
4.復制清除按鈕，粘貼到驗證碼輸入框 右側，在交互窗格中將單擊時，設置文本，輸入框改為驗證碼輸入框。
5.選中驗證碼輸入框，在交互窗格中新建交互，文本改變時，啟用情形判斷
情形 1：如果元件文字 于 當前 不等于 文本
添加動作 顯示/隱藏 顯示 清除 按鈕 ；觸發事件 校驗驗證碼 單擊時 。
6.復制情形1 將元件文字 于 當前 不等于 文本，改為等于 ；顯示/隱藏 改為隱藏 清除按鈕，其他交互不變。
7.新建交互，鼠標移入時，設置選中 邊框 為 真。
8.復制鼠標移入時交互，粘貼到鼠標移出時，設置選中 邊框 改為 假 。
9.新建交互，獲取焦點時，啟用情形判斷
情形 1：元件文字 當前 不等于 文本，顯示/隱藏 顯示清除 按鈕 ；啟用/禁用 禁用 邊框。
情形 2：元件文字 當前 等于 文本，啟用/禁用 禁用 邊框。
10.新建交互 失去焦點時 啟用/禁用 啟用 邊框；設置選中 邊框 為 假；等待 200毫秒 ；顯示/隱藏 隱藏 清除 按鈕。
11.設置文本框屬性 交互樣式 提示文字的樣式 字色 灰色 （#CCCCCC）；輸入類型 Text ，提示文本 請輸入短信驗證碼 ，隱藏提示 獲取焦點 ， 最大長度 6。
好的，我們來看看 短信輸入框的完整交互 。
邊框
1.選中短信驗證碼邊框 ，在交互窗格中新建交互 鼠標移入時 設置選中 當前 為 真。
2.在交互窗格中新建交互 鼠標移出時 設置選中 當前 為 假。
3.將短信icon移動到邊框 左側對齊 。
4.將短信驗證碼熱區元件 附于短信驗證輸入框上層。
5.選中短信icon 、輸入框 、邊框、清除按鈕 發送驗證碼 循環 元件 右鍵 組合。
預覽交互
點擊預覽，在預覽頁面手機號輸入框輸入 11位數手機號，驗證碼輸入框支持輸入，點擊清除按鈕，清除驗證碼輸入框輸入文本 。
登錄按鈕
1.在創建登錄按鈕的交互之前，同樣也需要創建一個校驗元件fx，fx元件可以直接復制一面任意一個，用于校驗手機號和驗證碼。
1.選中復制fx 元件，在交互窗格中將命名改為 校驗手機號和驗證碼，新建交互，單擊時，啟用情形判斷
情形 1 ：添加條件 變量值 phonenumber 等于 值 1并且 變量值 Code 等于 值 1
添加動作 啟用/禁用 啟用 登錄 按鈕
情形 2 否則 如果 真 添加動作 啟用/禁用 禁用 登錄 按鈕
好的，我們來看一下 fx 的完整交互事件
選中驗證手機號 fx 給情形1、情形2分別 添加交互 觸發事件 校驗手機號和驗證碼 單擊時 。
選中校驗驗證碼 fx 給情形1、情形2分別 添加交互 觸發事件 校驗手機號和驗證碼 單擊時 。
1.選中登錄按鈕，在交互窗格中新建交互，單擊時 啟用情形判斷
情形 1: 顯示隱藏 顯示 加載 按鈕 逐漸 300毫秒 ；等待 1500毫秒。
*啟用情形判斷主要用于登錄成功，失敗，或其他情況，這里只做了登錄成功的情形判斷；加載icon如果不是SVG圖標，則需要設置旋轉交互。
1.設置 形狀屬性 交互樣式，鼠標懸停的樣式 勾選不透明 80；鼠標按下的樣式 勾選不透明 100；元件禁用的樣式 勾選填充顏色 灰色 （#CCCCCC）；按鈕默認為禁用狀態。
5.選中加載icon ?設置為隱藏 附于登錄文本左側居中對齊。
6.選中登錄、加載按鈕右鍵 組合。
預覽交互
點擊預覽，在預覽頁面手機號輸入框輸入 11位數手機號，驗證碼輸入文字4位點亮登錄按，點擊登錄 旋轉加載交互。
自動登錄復選框
1.選中自動登入復選框在交互窗格中創建交互，單擊時 設置選中 當前 為 切換。
2.新建交互 選中改變時 當前 為 空白符號。
3.新建交互 選中 當前 為 勾選符號。
4.設置 形狀屬性 交互樣式 鼠標懸停的樣式 字色 藍色 （#0052D9）；元件選中的樣式 字色 藍色（#0052D9）。
預覽交互
點擊預覽，在預覽頁面點擊自動登錄勾選框會出現藍色勾選效果。
第三方登錄icon
1.選中第三登錄icon，在交互窗格中 設置 形狀屬性 交互樣式 元件選中的樣式 字色 白色，填充顏色藍色（#0052D9），同步配置其他icon。
預覽交互
點擊預覽，在預覽頁面鼠標懸停在icon上會出現藍色填充交互。
因為fx校驗元件的交互事件是單擊時，雖然看不見，但為了防止誤觸，可以添加一個動態面板，把做好的元件和交互粘貼到動態面板內，將fx元件移到動態面板右側 。
預覽交互
點擊預覽。
預覽地址：https://bqeiac.axshare.com
那在實際工作中呢，登錄頁的交互其實要復雜的多，而且需要考慮很多條件，比如手機號開頭，驗證碼時效，登錄失敗等等。
好的，這期內容到這里就結束。
我是大明同學。
下期見。
試題總結)
)
