動(dòng)效是應(yīng)用程序或網(wǎng)站開(kāi)發(fā)的熱點(diǎn)：部分人認(rèn)為動(dòng)效會(huì)使屏幕和頁(yè)面超載，而其他人則表示它對(duì)用戶(hù)體驗(yàn)有很多大的幫助。無(wú)論如何，大多數(shù)用戶(hù)都認(rèn)為動(dòng)效是必須要有的。我們來(lái)看看哪些類(lèi)型的UI動(dòng)效受大家歡迎和廣泛使用，以及它們是如何影響用戶(hù)體驗(yàn)的。

加載和進(jìn)度

這可能是眾多的UI動(dòng)效中最多樣化的。它們的目的是告知用戶(hù)它們?cè)趹?yīng)用程序或網(wǎng)站上取得的進(jìn)展。很難想象有什么比等待更糟糕的事情——加載和進(jìn)度動(dòng)效解決了這個(gè)問(wèn)題。例如，pull-to-refresh動(dòng)效顯示頁(yè)面正在重新加載內(nèi)容。進(jìn)度條告知用戶(hù)進(jìn)入過(guò)程的時(shí)間和完成完成的時(shí)間。

Icons8團(tuán)隊(duì)制作的Bright加載動(dòng)效模仿了與等待相關(guān)的被公認(rèn)的沙漏型圖像。

Gal Shir的這個(gè)概念展示了付款確認(rèn)的過(guò)程：當(dāng)用戶(hù)正在等待時(shí)，進(jìn)度條正在填補(bǔ)的動(dòng)效使用戶(hù)對(duì)進(jìn)度有更加直觀的了解。

Dimest的進(jìn)度條動(dòng)畫(huà)是基于引人注目的色彩對(duì)比度和添加到主要部分的小顆粒的特殊效果。欄右側(cè)的計(jì)數(shù)器還包含進(jìn)度百分比。

導(dǎo)航

這種類(lèi)型的動(dòng)畫(huà)通過(guò)界面導(dǎo)航用戶(hù)。它提示著某些元素是可點(diǎn)擊的、可滑動(dòng)的、可拉動(dòng)的。例如，當(dāng)Web界面布局中的某些東西在懸停時(shí)的動(dòng)畫(huà)效果，通過(guò)增強(qiáng)視覺(jué)層次和直觀的導(dǎo)航，吸引用戶(hù)注意交互的核心元素。

Minh Pham的這個(gè)移動(dòng)概念具有照片的輕微的動(dòng)效，提示用戶(hù)可以移動(dòng)。

Piotr Kohut在UI設(shè)計(jì)概念中的動(dòng)畫(huà)微交互：當(dāng)您點(diǎn)擊卡片時(shí)，它會(huì)以動(dòng)效響應(yīng)，向您顯示按鈕被按下的狀態(tài)以及卡片的數(shù)量隨動(dòng)作的變化。

Dmitro Petrenko的動(dòng)畫(huà)概念具有顯示按鈕類(lèi)別的順序，這種方式讓人感覺(jué)項(xiàng)目逐一被顯示，而不是一次性將所有的東西統(tǒng)一顯示。

Icons8團(tuán)隊(duì)的動(dòng)效圖標(biāo)是快速吸引用戶(hù)使其注意操作反饋的好方法。此外，它們可以用作網(wǎng)站上的懸停動(dòng)效，以便向用戶(hù)提示可以進(jìn)行哪些交互。

Prekesh交互式標(biāo)簽欄是有趣的和引人注目的：配置文件圖標(biāo)向右或向左移動(dòng)，就好像它正在查看用戶(hù)按下的圖標(biāo)一樣。

Oleg Frolov的動(dòng)畫(huà)交互概念顯示了一個(gè)轉(zhuǎn)換成光標(biāo)的搜索圖標(biāo)

動(dòng)作完成

另一種類(lèi)型的UI動(dòng)畫(huà)對(duì)應(yīng)用程序或網(wǎng)站的可用性具有戰(zhàn)略意義?；旧?，這個(gè)動(dòng)效通知用戶(hù)動(dòng)作已經(jīng)完成，例如：按鈕被按下，菜單打開(kāi)或關(guān)閉，文件上載，付款被接受等等進(jìn)行反饋。

它為什么如此重要？因?yàn)橹恍椟c(diǎn)擊屏幕或點(diǎn)擊鼠標(biāo)進(jìn)行各種操作，我們就能了解正在發(fā)生的事情。它不同于物體間的相互作用。

簡(jiǎn)單的例子：用鍵盤(pán)輸入文字，感受按鍵紋理，阻力和聽(tīng)到聲音，與在智能手機(jī)屏幕上輸入文字完全不同，后者沒(méi)有給出任何物理反饋。因此，振動(dòng)和視覺(jué)符號(hào)發(fā)揮了重要作用，讓用戶(hù)在交互過(guò)程中得到反饋。

當(dāng)您點(diǎn)擊電子商務(wù)網(wǎng)站上的“支付”按鈕，但是沒(méi)有任何反應(yīng)時(shí)也會(huì)發(fā)生同樣的情況。你會(huì)覺(jué)得付款完成了嗎？你應(yīng)該再次按下“支付”按鈕，還是再注冊(cè)一次支付方式并付款那么他將兩次拿走你的錢(qián)？給出一個(gè)快速的視覺(jué)提示，例如更改按鈕的顏色，將其轉(zhuǎn)換為勾號(hào)符號(hào)或或者打開(kāi)一個(gè)彈出窗口，提供進(jìn)一步的細(xì)節(jié)，不僅可以幫助用戶(hù)，而且能幫助那些不會(huì)亂花錢(qián)或數(shù)以百計(jì)的錯(cuò)誤點(diǎn)擊的企業(yè)主。

Gal Shir的這個(gè)簡(jiǎn)單動(dòng)畫(huà)顯示了從待辦事項(xiàng)列表中刪除任務(wù)的過(guò)程。它同步模仿了我們?cè)诩埳纤龅牟襟E：用戶(hù)只需在文本上滑動(dòng)，當(dāng)復(fù)選框轉(zhuǎn)換為勾選時(shí)，它就會(huì)被劃掉。

Kreativa Studio的時(shí)尚動(dòng)畫(huà)概在屏幕顯示中表現(xiàn)的較為出色，同時(shí)提供從系統(tǒng)到用戶(hù)的快速反饋。

Anton Skvortsov與電影院應(yīng)用程序的交互流程中將確認(rèn)設(shè)置更改為從票證條形碼中刪除的標(biāo)簽。

Jakub Antalik的這個(gè)移動(dòng)界面顯示了勾選動(dòng)畫(huà)，以標(biāo)記動(dòng)作在單獨(dú)的屏幕上完成。

滾動(dòng)

我們花了幾個(gè)小時(shí)的時(shí)間滾動(dòng)可能沒(méi)有特效效果和動(dòng)畫(huà)效果。然而，加上動(dòng)態(tài)照顧使得過(guò)程更加優(yōu)雅和諧。它經(jīng)常模仿來(lái)自物理世界的自然相互作用，并賦予界面整體外觀。滾動(dòng)可以應(yīng)用于不同的方向，不僅是垂直方向，也可以是水平方向。

然而，這不僅僅是關(guān)于美。這種動(dòng)畫(huà)還可以幫助支持屏幕上更多空間的視覺(jué)錯(cuò)覺(jué)，或者快速闡明元素的限制。特別是在移動(dòng)界面和有限的屏幕空間。

Nathan Riley的網(wǎng)站滾動(dòng)動(dòng)畫(huà)創(chuàng)造了層次互動(dòng)的效果，使頁(yè)面看起來(lái)完整而美觀。

在Tubik的這個(gè)概念中，應(yīng)用程序庫(kù)中的水平滾動(dòng)使移動(dòng)過(guò)程感覺(jué)像異步移動(dòng)。

Nathan Riley對(duì)角卷軸的實(shí)驗(yàn)動(dòng)畫(huà)：結(jié)合大膽的色彩和引人注目的形象，使它看起來(lái)既新穎又時(shí)尚。

Robbin Senijn的活潑的滾動(dòng)動(dòng)效將滾動(dòng)和視覺(jué)拆卸物品形象和諧地結(jié)合起來(lái)。

轉(zhuǎn)變

在許多設(shè)計(jì)師的作品集中都可以找到轉(zhuǎn)換這一動(dòng)效的實(shí)驗(yàn)。動(dòng)效過(guò)渡為用戶(hù)界面的交互增添了原創(chuàng)性和趣味性。它們?cè)试S應(yīng)用程序、登錄頁(yè)面或網(wǎng)站脫穎而出。更重要的是，他們經(jīng)常與現(xiàn)實(shí)世界有著強(qiáng)烈的聯(lián)系。當(dāng)網(wǎng)頁(yè)像紙質(zhì)雜志的頁(yè)面翻過(guò)來(lái)一樣，或者像真實(shí)的那樣拉出卡片時(shí)，它會(huì)是多么吸引人的，令人難忘。它甚至可能是用戶(hù)在網(wǎng)站上停留更長(zhǎng)時(shí)間的原因（這對(duì)SEO有好處）或APP。

Zhenya Rynzhuk的優(yōu)雅的設(shè)計(jì)特點(diǎn)是翻頁(yè)與翻頁(yè)之間的過(guò)渡。

Minh Pham的UI概念：產(chǎn)品圖像屏幕之間過(guò)渡的動(dòng)效是基于物體圖像的光滑運(yùn)動(dòng)和下面頁(yè)面指示符的同步運(yùn)動(dòng)。

在Anton Skvortsov的這個(gè)概念中，動(dòng)效讓你感覺(jué)你正深入一個(gè)屏幕，而不僅僅是從一個(gè)屏幕移動(dòng)到另一個(gè)屏幕。

解釋器

這種類(lèi)型的動(dòng)效通常出現(xiàn)在教程、工具提示和具有信息性視覺(jué)內(nèi)容的屏幕中。Motion允許設(shè)計(jì)師吸引用戶(hù)注意圖形并提供快速提示。在這里您還可以找到動(dòng)畫(huà)人物和插圖。

Adam Zielonko的移動(dòng)入職教程的概念：動(dòng)效用于更好的敘事，并使視覺(jué)更具信息性。

Virgil Pana上傳教程的另一個(gè)動(dòng)作設(shè)計(jì)：圖形看起來(lái)非常簡(jiǎn)單，但動(dòng)畫(huà)將它們轉(zhuǎn)換成一個(gè)統(tǒng)一的故事，為用戶(hù)提供簡(jiǎn)單明了的指示。

由Miko?ajSzymanowski制作的具有突出3D圖形的動(dòng)畫(huà)教程，其中提供了關(guān)于應(yīng)用程序如何以最少的元素產(chǎn)生清晰的視覺(jué)指導(dǎo)。

品牌化

在UI設(shè)計(jì)中整合視覺(jué)品牌標(biāo)識(shí)現(xiàn)在并不是什么新鮮事。公司的顏色和排版、標(biāo)志和吉祥物，提供可視化、自定義插圖和照片。這些所有東西使產(chǎn)品和市場(chǎng)攜手共進(jìn)。動(dòng)效在這個(gè)視角中越來(lái)越多地出現(xiàn)。例如，標(biāo)志動(dòng)效可以增添情緒并引起用戶(hù)的注意。

Zhenya Rynzhuk的啟動(dòng)畫(huà)面動(dòng)效使應(yīng)用程序加載過(guò)程變得美觀，并為應(yīng)用程序創(chuàng)造了與跑步者性質(zhì)相呼應(yīng)的動(dòng)態(tài)。

Tubik的有趣標(biāo)志動(dòng)效為角色增添了俏皮感，使其迅速引人注目。

標(biāo)志動(dòng)效在屏幕上變化的移動(dòng)UI設(shè)計(jì)理念由Johny Vino設(shè)計(jì)。

要考慮的要點(diǎn)

無(wú)論動(dòng)效看起來(lái)多么吸引人和時(shí)尚，您在應(yīng)用程序或網(wǎng)站中應(yīng)用它的應(yīng)該經(jīng)過(guò)充分權(quán)衡和充分測(cè)試來(lái)決定的。讓我們簡(jiǎn)要回顧一下交互設(shè)計(jì)中UI動(dòng)效的優(yōu)缺點(diǎn)和缺點(diǎn)。

優(yōu)點(diǎn)：

• 增強(qiáng)了可用性
• 節(jié)省屏幕或頁(yè)面的空間
• 為交互增加便利和速度
• 明確從系統(tǒng)到用戶(hù)的反饋
• 支持視覺(jué)層次和完整性

設(shè)計(jì)師必須考慮的缺點(diǎn)：

• 更高的加載時(shí)間（與靜態(tài)圖像相比）
• 分心因素（太多動(dòng)效對(duì)用戶(hù)來(lái)說(shuō)很累）
• 耗費(fèi)時(shí)間和精力的技術(shù)實(shí)現(xiàn)（開(kāi)發(fā)此類(lèi)交互需要更多的工作時(shí)間）

因此，在做出決定之前，要將所有這些因素與用戶(hù)一起分析。