起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識Axure教程：忘記密碼特效
今天和大家分享一個忘記密碼表單特效，enjoy~
一、最終效果
二、制作方法
我們先看一下，本案例使用到的元素：
文本部分，我們就咱不做介紹了，這里依次說一下“輸入框”的設置 & “動態(tài)面板”的設置。
/* 輸入框設置 */
我們從元件庫，拖拽一個文本框至對應位置，然后設置它的屬性。如圖所示：
/*?線條動態(tài)面板設置 */
（1）動態(tài)面板A-line
我們首先創(chuàng)建一個動態(tài)面板，命名為line，并且創(chuàng)建4種不同的面板狀態(tài)：
- default：默認狀態(tài)
- fcouse：輸入框獲得焦點狀態(tài)
- true：輸入框值驗證通過狀態(tài)
- flase：輸入框值驗證不通過狀態(tài)
每種狀態(tài)，使用不同顏色的線條來表示
（2）動態(tài)面板B-button
我們在創(chuàng)建一個動態(tài)面板，命名為button，同樣創(chuàng)建三種狀態(tài)：
- default：默認顯示submit字樣的按鈕
- false：顯示The account could not be found字樣的按鈕
- true：顯示Email has been sent字樣的按鈕
（3）動態(tài)面板C-reset
最后創(chuàng)建一個reset的動態(tài)面板，用于恢復“l(fā)ine”&“button”2個動態(tài)面板至默認狀態(tài)。
/* 交互設置 */
（1）輸入框交互
我們選擇輸入框，雙擊“獲取焦點時”，設置動態(tài)面板（line）顯示“fcouse”狀態(tài)。
同樣，給輸入框添加“失去焦點時”的交互，這里會要考慮到一個問題，如果輸入框有值得情況下，我們就不做任何變更；如果失去焦點時，輸入框沒有值，則設置動態(tài)面板為default狀態(tài)。
條件設置如下：
動作設置如下：
（2）button動態(tài)面板交互
button動態(tài)面板，前面說到過存在3種狀態(tài)，所以我們要對點擊動作進行條件判斷，當點擊按鈕時，如果輸入框值為demo@demo.com，則顯示true狀態(tài)，否則顯示false狀態(tài)。
（3）reset動態(tài)面板交互
reset動態(tài)面板的作用，是用于恢復輸入框和button面板默認狀態(tài)的，所以我們對其添加了點擊動作。設置如圖所示：
全部完成后，按F5進行演示即可。
下載地址
https://pan.baidu.com/s/1DlLApPUQMvQhaE89gvOJvA
如有問題，歡迎大家留言！
Axure教程：使用動態(tài)面板實現(xiàn)iOS開關(guān)效果
本文由 @ZQZ原型師 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自作者
講的啥，看不懂
email-input在哪里的？沒看見有這個呀