綠色排版工具|熱門專題|網站地圖|移動官網
您的當前位置:網站首頁 > 產品經理 > 正文

Axure教程:忘記密碼特效

來源: 編輯: 時間:2019-11-18 15:19:45 閱讀:

今天和大家分享一個忘記密碼表單特效,enjoy~

Axure教程:忘記密碼特效

一、最終效果

Axure教程:忘記密碼特效

二、制作方法

我們先看一下,本案例使用到的元素:

Axure教程:忘記密碼特效

文本部分,我們就咱不做介紹了,這里依次說一下“輸入框”的設置 & “動態面板”的設置。

/* 輸入框設置 */

我們從元件庫,拖拽一個文本框至對應位置,然后設置它的屬性。如圖所示:

Axure教程:忘記密碼特效

/*?線條動態面板設置 */

(1)動態面板A-line

我們首先創建一個動態面板,命名為line,并且創建4種不同的面板狀態:

  1. default:默認狀態
  2. fcouse:輸入框獲得焦點狀態
  3. true:輸入框值驗證通過狀態
  4. flase:輸入框值驗證不通過狀態

每種狀態,使用不同顏色的線條來表示

Axure教程:忘記密碼特效

(2)動態面板B-button

我們在創建一個動態面板,命名為button,同樣創建三種狀態:

  1. default:默認顯示submit字樣的按鈕
  2. false:顯示The account could not be found字樣的按鈕
  3. true:顯示Email has been sent字樣的按鈕

Axure教程:忘記密碼特效

(3)動態面板C-reset

最后創建一個reset的動態面板,用于恢復“line”&“button”2個動態面板至默認狀態。

Axure教程:忘記密碼特效

/* 交互設置 */

(1)輸入框交互

我們選擇輸入框,雙擊“獲取焦點時”,設置動態面板(line)顯示“fcouse”狀態。

Axure教程:忘記密碼特效

同樣,給輸入框添加“失去焦點時”的交互,這里會要考慮到一個問題,如果輸入框有值得情況下,我們就不做任何變更;如果失去焦點時,輸入框沒有值,則設置動態面板為default狀態。

條件設置如下:

Axure教程:忘記密碼特效

動作設置如下:

Axure教程:忘記密碼特效

(2)button動態面板交互

button動態面板,前面說到過存在3種狀態,所以我們要對點擊動作進行條件判斷,當點擊按鈕時,如果輸入框值為[email protected],則顯示true狀態,否則顯示false狀態。

Axure教程:忘記密碼特效

Axure教程:忘記密碼特效

(3)reset動態面板交互

reset動態面板的作用,是用于恢復輸入框和button面板默認狀態的,所以我們對其添加了點擊動作。設置如圖所示:

Axure教程:忘記密碼特效

Axure教程:忘記密碼特效

Axure教程:忘記密碼特效

全部完成后,按F5進行演示即可。

下載地址

https://pan.baidu.com/s/1DlLApPUQMvQhaE89gvOJvA

如有問題,歡迎大家留言!

 

本文由 @ZQZ原型師 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自作者

圖文精選:

欄目分類
最新文章
熱門文章
推薦文章

Copyright?2012-2019 小螞蟻信息網版權所有 粵ICP備14061018號-1


鄭重聲明:本網站資源、信息來源于網絡,完全免費共享,僅供學習和研究使用,版權和著作權歸原作者所有,如有不愿意被轉載的情況,請通知我們刪除已轉載的信息。

Top 双色球10000期走势图表