ui動(dòng)效界面交互設(shè)計(jì)技巧

ui動(dòng)效界面交互設(shè)計(jì)技巧：動(dòng)效廣泛運(yùn)用于網(wǎng)頁內(nèi)容和背景當(dāng)中，用來強(qiáng)化功能，提升美感，它會(huì)直接影響用戶的行為，引導(dǎo)用戶注意到特定的內(nèi)容，今天小編主要給大家分享ui動(dòng)效界面交互設(shè)計(jì)技巧，希望對(duì)你們有幫助!

加載過程不應(yīng)讓用戶感到單調(diào)乏味

如果不能縮短加載和等待過程，那么應(yīng)該盡量讓用戶在等待過程中感到愉快，此時(shí)的動(dòng)態(tài)效果基是提醒用戶后臺(tái)正在加載。幾乎所有的網(wǎng)站和應(yīng)用都會(huì)遇到這種情況，好的設(shè)計(jì)通常會(huì)用微妙有趣的動(dòng)態(tài)效果來轉(zhuǎn)移用戶對(duì)動(dòng)態(tài)效果本身的注意力，而不是受無聊情緒的影響。所以設(shè)計(jì)師可以讓界面從基本框架結(jié)構(gòu)加載，明顯縮短了等待的主觀體驗(yàn)。

不要讓狀態(tài)改變太僵硬

動(dòng)效最重要的功能之一是加強(qiáng)過渡效應(yīng)，因此需要清楚地呈現(xiàn)這一過程的開始和結(jié)束。一個(gè)設(shè)計(jì)良好的動(dòng)效應(yīng)合理的把用戶的注意力引導(dǎo)到需要注意的地方。

Adrian Zumbrunnen有一個(gè)非常好的案例，展示了滾動(dòng)效果如何讓用戶在點(diǎn)擊鏈接后理解變化過程，大家可以去看一下。

闡明元素之間的關(guān)系

動(dòng)效還可以增強(qiáng)用戶對(duì)界面的控制感。

菜單按鈕以平滑的動(dòng)效展開為播放控制界面，然后單擊返回，又收縮為一個(gè)按鈕。這種特效不僅讓界面看起來很棒，還告訴用戶按鈕的實(shí)際功能。有趣的是，這種動(dòng)效也強(qiáng)調(diào)了播放和暫停之間的差異，這種差異可以在不共存的情況下相互改變。

在這種情況下，動(dòng)效將用戶的注意力引導(dǎo)到了屏幕的正中央，播放和暫停兩種狀態(tài)的改變是用戶注意力的焦點(diǎn)。

另一種情況是更常見的浮動(dòng)按鈕，單擊“+”按鈕可展開其其它隱藏功能按鈕，而按鈕中的“+”則變化為編輯的鉛筆圖標(biāo)。該圖標(biāo)變化的細(xì)節(jié)向用戶指示接下來會(huì)發(fā)生什么，并闡明按鈕不同狀態(tài)的差異。

出錯(cuò)時(shí)向用戶提供反饋

當(dāng)用戶執(zhí)行操作時(shí)，動(dòng)效可以增強(qiáng)交互產(chǎn)生的效果，報(bào)錯(cuò)是最常見的反饋機(jī)制之一。

一個(gè)簡(jiǎn)單的左右晃動(dòng)的特效給用戶一種界面在“搖頭”的感覺，讓他們明白所輸入的內(nèi)容是不正確的。這種擬人化的動(dòng)態(tài)效果使界面充滿真實(shí)的質(zhì)感，信息反饋更加直觀。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://www.hebeijilong.cn/news-id-72783.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注UI設(shè)計(jì)頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050