“加載中”是一個比較常見的交互效果，本文將會為大家介紹如何利用Axure做出加載的交互效果。

“加載中”是很常見的交互效果，因為網速，服務器接口等原因，等待網絡加載中，下拉刷新，上拉加載新內容，提交表單時彈出的浮層都會有一個加載圖標或者加載文案，反饋給我們系統正在執行我們的命令。

如上圖。案例中的登錄按鈕，當輸入完用戶名，密碼后，點擊登錄按鈕，登錄按鈕中的文字變化登陸中，且有一個正在快速旋轉的圖標，右側是提交操作命令時，系統返回的加載提示，都實時告訴我們正在執行，減少等待時的焦慮感。

第一步：做出環形

可以直接調用網絡上的，也可以利用Axure自己制作。

案例中的網絡的，我教會大家自己DIY一個。

拉一個圓環，大小改為25*25，線段類型修改為點點，線段寬度修改為稍寬一點，顏色為白色，填充為白色，要做在灰色按鈕上，比較明顯，如下圖：

第二步：設置動態面板 轉起來

拉入一個動態面板，隨便命名為“旋轉專用”。

復制兩個動態面板，不需要命名。

設置載入條件。

當頁面載入時，設置“旋轉專用”動態面板循環向后切換，間隔10ms。

4當“旋轉專用”動態面板狀態改變時，設置條件。

旋轉環形圖標逆時針旋轉，旋轉角度300，相對旋轉，錨點為中心。

設置完成，預覽看下效果，當頁面載入時——動態面板循環——環形圖標旋轉，可以添加其他條件，旋轉3-5s跳轉或者返回結果。

本文由 @胖子 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議