本篇教程將為大家展示如何使用Axure制作帶進(jìn)度顯示的注冊表單特效。瓜子，板凳，雪碧準(zhǔn)備好了嘛？好了我們就開始！

最終效果

效果解讀

本案例通過漸進(jìn)式的方式，引導(dǎo)用戶完成賬戶注冊，在每一步完成后，以背景色變換的方式顯示注冊正規(guī)流程的進(jìn)度，提高用戶體驗。

制作過程

默認(rèn)頁面由：觸發(fā)按鈕、按鈕文字、背景組成；通過點擊觸發(fā)按鈕，開始表單注冊過程。

同時為了方便點擊后的特效變化，我們將觸發(fā)按鈕定義名稱。

下面設(shè)置交互動作：選擇觸發(fā)按鈕，增加單擊動作，在該動作下添加“設(shè)置尺寸”的屬性。這里需要注意的是錨點的設(shè)置，我們?yōu)榱俗尠粹o由中心點向2邊擴(kuò)展，所以將錨點設(shè)置為中心點。動畫方式選擇線性。

完成了點擊后，背景色的擴(kuò)展效果，我們還需要對按鈕文字進(jìn)行隱藏、顯示輸入表單、以及提示線的內(nèi)容。再次給觸發(fā)按鈕增加幾個動作。

完成以上設(shè)置，我們就可以得到這樣的效果。

下一步，我們開始設(shè)置點擊剪頭按鈕后的顯示效果，從最終效果上可以看到，點擊按鈕后，隱藏username的表單，并且背景顯示進(jìn)度條，同時顯示創(chuàng)建密碼的表單。

大家可以看到，我使用了等待，這里的作用是為了在元件展示的時候，中間存在間隔，讓動畫看起來更加有條理性。完成以上設(shè)置，我們就可以得到這樣的效果。

下一步我們對輸入完密碼后的特效進(jìn)行設(shè)置，輸入完密碼后，點擊剪頭按鈕，我們需要隱藏密碼表單和白色的觸發(fā)按鈕，并且將背景綠色平鋪，最后將歡迎詞“Welcome?Jason”進(jìn)行顯示。

到這里，我們就完成本案例的全部制作過程。看一下最終效果。

源文件下載地址

鏈接：https://pan.baidu.com/s/1KCWl7Udjais5RedN4e9z0g
提取碼：wtjl

在線演示地址

https://57mcel.axshare.com/

更多Axure教程

Axure教程：跟隨鼠標(biāo)移動的導(dǎo)航菜單特效

Axure教程：使用動態(tài)面板實現(xiàn)iOS開關(guān)效果

Axure教程：登錄頁間轉(zhuǎn)場特效

Axure教程：App移動端單選效果美化

Axure教程：App移動端多選效果美化

Axure教程：App移動端彈窗廣告

Axure教程：登錄框交互特效

Axure教程：鼠標(biāo)移入移出特效

Axure教程：忘記密碼特效

如有疑問，可以給我留言。

歡迎&感謝大家訂閱，早日成為專欄作家，為大家分享更多教程。

本文由 @ZQZ原型師 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自作者