UI動(dòng)效的規(guī)則

      UI動(dòng)效的四大屬性：位置、旋轉(zhuǎn)、縮放、透明度
      UI動(dòng)效需要遵循的原則：提升用戶體驗(yàn)，注重交互邏輯（落地回彈、先快后慢、慣性回彈）

      動(dòng)效的本質(zhì)是服務(wù)產(chǎn)品和愉悅用戶的，并不是所有的頁面及元素都適合加動(dòng)效，所以我們?cè)谧鰟?dòng)效的之前，就應(yīng)該明確目標(biāo)以及動(dòng)效的合理性。下面來具體講一下UI動(dòng)效的使用規(guī)則和適用場(chǎng)景。

1、交互層級(jí)展現(xiàn)

      交互層級(jí)動(dòng)效實(shí)際運(yùn)用到APP的并不多，因?yàn)橛行��?fù)雜的動(dòng)效對(duì)產(chǎn)品和用戶來說實(shí)質(zhì)意義不大，而且開發(fā)的成本也不低。當(dāng)然如果交互層級(jí)做得好的話，可以幫助用戶更好的理清關(guān)系，降低用戶的學(xué)習(xí)成本，以動(dòng)效來體現(xiàn)整個(gè)系統(tǒng)的空間感。

      適用場(chǎng)景：適合層級(jí)邏輯性較強(qiáng)的頁面，比如iOS系統(tǒng)的日歷，點(diǎn)擊年月日是一個(gè)層層遞進(jìn)的感覺，無論是從年到月到日，還是日返回到年月，整個(gè)放大和回縮的交互動(dòng)效都很一致，非常符合這種層級(jí)關(guān)系。

2、吸引眼球

      這類的UI動(dòng)效在運(yùn)營設(shè)計(jì)中比較常見，主要目的是吸引用戶的注意力，促使用戶點(diǎn)擊，來達(dá)到一個(gè)轉(zhuǎn)化的目的。這類動(dòng)效并不復(fù)雜，它一般只在重要的元素上做動(dòng)效，這種微動(dòng)效的方式不僅可以降低視覺元素的干擾，還使得界面更加清爽簡潔，開發(fā)成本也比較低。

      適用場(chǎng)景：適用于運(yùn)營專題頁、banner、懸浮紅包優(yōu)惠券等，比如下圖的banner，它只有兩個(gè)元素做了動(dòng)效，一個(gè)是GO的按鈕，一個(gè)是人物的投影閃光。元素動(dòng)效很簡潔但很有效，讓人一眼就看到了點(diǎn)擊的按鈕，懸浮優(yōu)惠券也是如此。

3、操作反饋

      操作有反饋是交互體驗(yàn)的一個(gè)必備因素，這就不用多說了，至于反饋是要用靜態(tài)的方式呈現(xiàn)還是動(dòng)效的方式呈現(xiàn)，這都取決于反饋是否重要，重要的反饋采用動(dòng)效的形式展現(xiàn)，不僅可以幫助用戶更好的了解當(dāng)前操作的響應(yīng)情況，還能為用戶帶來安全感和愉悅感。

      適用場(chǎng)景：適用于重要的操作反饋，大多使用在按鈕和圖標(biāo)動(dòng)效上。比如App Store的獲取按鈕，它是一個(gè)從安裝到完成對(duì)勾的一個(gè)動(dòng)效，還伴隨著小震動(dòng)和聲音，整個(gè)體驗(yàn)流暢且愉悅。標(biāo)簽欄的選中圖標(biāo)動(dòng)效其實(shí)也是屬于一個(gè)操作反饋動(dòng)效，它能更好的突出選中氛圍。

4、轉(zhuǎn)場(chǎng)過渡

      頁面轉(zhuǎn)場(chǎng)過渡的動(dòng)效也非常常見，它最主要的目的是給內(nèi)容加載提供一個(gè)緩沖，好的轉(zhuǎn)場(chǎng)動(dòng)效不僅能降低用戶等待的焦慮情緒，還能使頁面更加生動(dòng)有趣。

      適用場(chǎng)景：頁面內(nèi)容加載、加載小動(dòng)效、刷新等。比如下圖的一個(gè)loading動(dòng)效，它能在等待中有效的分散用戶的注意力，降低用戶等待的焦慮情緒。如果沒有動(dòng)效的話，可想而知，用戶可能直接就走了，不等你加載了，所以一個(gè)生動(dòng)的loading動(dòng)效在轉(zhuǎn)場(chǎng)加載中是非常必要的。

5、增強(qiáng)表現(xiàn)力

      表現(xiàn)力交互動(dòng)效在dribbble上比較多，雖然酷炫的可能都是飛機(jī)稿，但真正有實(shí)用價(jià)值的也不少，像空間擴(kuò)展、圖片放大延伸這些表現(xiàn)力的動(dòng)效不僅能節(jié)省頁面空間，還能減弱用戶的挫敗感，增強(qiáng)產(chǎn)品表現(xiàn)力。

      適用場(chǎng)景：頁面跳轉(zhuǎn)、內(nèi)容滑動(dòng)、空間表現(xiàn)等。比如下圖的愛彼迎列表頁面，點(diǎn)擊圖片，圖片放大至頂部，內(nèi)容隨之出現(xiàn)，點(diǎn)擊返回，圖片縮小，內(nèi)容不見。整個(gè)動(dòng)效從列表到詳情的過渡非常自然，是給產(chǎn)品加分的，表現(xiàn)力就不言而喻了。

6、提升流暢度

      提升產(chǎn)品流暢度相當(dāng)于是對(duì)產(chǎn)品的一個(gè)不斷打磨和挖掘的過程，增強(qiáng)與用戶的互動(dòng)，加深用戶對(duì)產(chǎn)品的挖掘，增加頁面的活力，給用戶制造驚喜，形成依賴。

      適用場(chǎng)景：任何有優(yōu)化空間的地方都適用。網(wǎng)易云播放歌曲頁面就是一個(gè)很好的例子，播放時(shí)中間的唱片緩緩旋轉(zhuǎn)，唱頭也一直搭在唱片上面，暫停歌曲后，唱片停止旋轉(zhuǎn)，唱頭也隨之移開。整個(gè)動(dòng)效過程的現(xiàn)實(shí)隱喻感很強(qiáng)，播放也非常流暢，個(gè)人非常喜歡這個(gè)設(shè)計(jì)。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://m.dedgn.cn/news-id-18498.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