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

“加載中”是很常見的交互效果，因?yàn)榫W(wǎng)速，服務(wù)器接口等原因，等待網(wǎng)絡(luò)加載中，下拉刷新，上拉加載新內(nèi)容，提交表單時(shí)彈出的浮層都會(huì)有一個(gè)加載圖標(biāo)或者加載文案，反饋給我們系統(tǒng)正在執(zhí)行我們的命令。

如上圖。案例中的登錄按鈕，當(dāng)輸入完用戶名，密碼后，點(diǎn)擊登錄按鈕，登錄按鈕中的文字變化登陸中，且有一個(gè)正在快速旋轉(zhuǎn)的圖標(biāo)，右側(cè)是提交操作命令時(shí)，系統(tǒng)返回的加載提示，都實(shí)時(shí)告訴我們正在執(zhí)行，減少等待時(shí)的焦慮感。

第一步：做出環(huán)形

可以直接調(diào)用網(wǎng)絡(luò)上的，也可以利用Axure自己制作。

案例中的網(wǎng)絡(luò)的，我教會(huì)大家自己DIY一個(gè)。

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

第二步：設(shè)置動(dòng)態(tài)面板 轉(zhuǎn)起來

拉入一個(gè)動(dòng)態(tài)面板，隨便命名為“旋轉(zhuǎn)專用”。

復(fù)制兩個(gè)動(dòng)態(tài)面板，不需要命名。

設(shè)置載入條件。

當(dāng)頁面載入時(shí)，設(shè)置“旋轉(zhuǎn)專用”動(dòng)態(tài)面板循環(huán)向后切換，間隔10ms。

4當(dāng)“旋轉(zhuǎn)專用”動(dòng)態(tài)面板狀態(tài)改變時(shí)，設(shè)置條件。

旋轉(zhuǎn)環(huán)形圖標(biāo)逆時(shí)針旋轉(zhuǎn)，旋轉(zhuǎn)角度300，相對(duì)旋轉(zhuǎn)，錨點(diǎn)為中心。

設(shè)置完成，預(yù)覽看下效果，當(dāng)頁面載入時(shí)——?jiǎng)討B(tài)面板循環(huán)——環(huán)形圖標(biāo)旋轉(zhuǎn)，可以添加其他條件，旋轉(zhuǎn)3-5s跳轉(zhuǎn)或者返回結(jié)果。

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

題圖來自Unsplash，基于CC0協(xié)議