作者：Clippp

大家好，今天為大家分享的是「動(dòng)效設(shè)計(jì)」。

UI設(shè)計(jì)中，好的動(dòng)效總能第一時(shí)間抓住用戶的注意力，通過多種形式的動(dòng)效能夠讓用戶與界面產(chǎn)生交互并確保良好的使用體驗(yàn)。

本次主要從動(dòng)效的持續(xù)時(shí)長(zhǎng)和速度、緩動(dòng)類型和動(dòng)效編排三方面，分析在設(shè)計(jì)UI動(dòng)效的過程中需要考慮的因素~

一、持續(xù)時(shí)長(zhǎng)和速度

動(dòng)效設(shè)計(jì)中的持續(xù)時(shí)長(zhǎng)和速度是兩個(gè)密切相關(guān)的因素。在動(dòng)效設(shè)計(jì)中，需要確保動(dòng)效不要移動(dòng)得太快或太慢，從而影響可用性，破壞使用體驗(yàn)。

那么，動(dòng)畫的最佳時(shí)長(zhǎng)是多少呢？

一般來說，標(biāo)準(zhǔn)的UI動(dòng)畫時(shí)長(zhǎng)應(yīng)該在200毫秒-500毫秒之間——這組數(shù)字是基于我們大腦的處理能力而得到的時(shí)長(zhǎng)區(qū)間。

小于100毫秒的動(dòng)畫是瞬時(shí)的，不會(huì)被用戶注意到；如果時(shí)長(zhǎng)大于1000毫秒(1s)，會(huì)讓用戶感到動(dòng)畫很緩慢，帶來一種拖沓的感覺。

同時(shí)，我們也要考慮其他可能影響動(dòng)畫速度的因素：

屏幕尺寸：由于手機(jī)和電腦有著不同物理尺寸的屏幕，尺寸的不同會(huì)影響動(dòng)效的速度，屏幕越小，運(yùn)動(dòng)路徑越短。對(duì)于移動(dòng)屏幕，動(dòng)效速度應(yīng)保持在200-300ms之間，平板電腦應(yīng)該保持在400-450ms之間；

web動(dòng)畫：在瀏覽網(wǎng)頁時(shí)，我們更習(xí)慣于網(wǎng)站的即時(shí)響應(yīng)效果，因此網(wǎng)站的動(dòng)畫速度也更快。因此對(duì)于網(wǎng)站來說，轉(zhuǎn)場(chǎng)動(dòng)畫的時(shí)長(zhǎng)保持在150-200毫秒之間，更符合用戶的瀏覽習(xí)慣。

以上提到的區(qū)間是相對(duì)保準(zhǔn)的動(dòng)效時(shí)長(zhǎng)，并不是一成不變，具體的動(dòng)效時(shí)長(zhǎng)和速度需要根據(jù)具體的需求、場(chǎng)景，靈活分析。

二、緩動(dòng)

現(xiàn)實(shí)中的物體由于受到重力、阻力等因素的影響，速度并不是恒定不變的。換句話說，物體都會(huì)有加速、減速、平滑等不同的運(yùn)動(dòng)狀態(tài)。

為了使動(dòng)畫更真實(shí)，我們需通過緩動(dòng)來模擬出這些因素，讓界面中的元素運(yùn)動(dòng)的更自然，避免過于死板。

緩動(dòng)決定了元素在運(yùn)動(dòng)過程中速度的變化，常用的類型包括：線性勻速、緩入、緩出、緩入緩出。

1、線性勻速

當(dāng)元素沒有受到物理力的影響，速度保持恒定，就會(huì)發(fā)生線性勻速運(yùn)動(dòng)的效果。

線性勻速在改變?cè)匚恢玫脑O(shè)計(jì)中使用相對(duì)較少，更多是用在改變?cè)氐臓顟B(tài)、屬性（透明度變化）等不涉及元素位置改變的設(shè)計(jì)中。

2、緩入

緩入對(duì)應(yīng)于元素的加速曲線，通常用于當(dāng)對(duì)象從靜止到加速離開用戶視線的過程。例如一輛汽車駛出時(shí)，速度從0開始逐漸增加，然后在駛出時(shí)達(dá)到最大值。

3、緩出

緩出是緩入的對(duì)立面，用于屏幕上的對(duì)象從高峰值進(jìn)入，逐漸減速直到到達(dá)特定位置的過程。例如一個(gè)人從屏幕外全速進(jìn)入屏幕內(nèi)時(shí)，進(jìn)入畫面時(shí)的速度最高，然后逐漸減速到零。

4、緩入緩出

緩入緩出也稱為標(biāo)準(zhǔn)曲線，指對(duì)象從畫面的一個(gè)部分移動(dòng)到另一個(gè)部分，整個(gè)移動(dòng)過程中始終保持在幀中，通常用于為在同一界面中改變位置的元素創(chuàng)建動(dòng)畫。例如一個(gè)鐘擺，它的速度從峰值開始，緩慢減速到0，然后再次加速，不斷在一個(gè)固定的位置區(qū)域循環(huán)。

需要注意的是，不對(duì)稱標(biāo)準(zhǔn)曲線會(huì)使物體的運(yùn)動(dòng)變得更加自然。

在使用緩入緩出時(shí)，要強(qiáng)調(diào)減速而不是加速，因此減速的時(shí)間要比加速時(shí)間要長(zhǎng)。在這種情況下，用戶會(huì)更關(guān)注物體的后半段，從而更容易關(guān)注物體的新狀態(tài)。

三、動(dòng)效編排

動(dòng)效編排是指對(duì)界面中不同的元素進(jìn)行統(tǒng)一、有序的編排，讓元素間更協(xié)調(diào)，通過更流暢的動(dòng)效來引導(dǎo)用戶的注意力。動(dòng)效編排包括平等互動(dòng)和從屬互動(dòng)。

1、平等互動(dòng)

平等互動(dòng)指對(duì)象根據(jù)相同的規(guī)則移動(dòng)。

在這種情況下，界面中的元素會(huì)變得整齊有序。以界面中的卡片列表為例，平等的互動(dòng)編排保證卡片一個(gè)接一個(gè)，從上到下以一種協(xié)調(diào)的方式出現(xiàn)，能夠從上到下引導(dǎo)用戶的注意力。

如果不按照這種編排規(guī)則，界面中元素的出現(xiàn)順序會(huì)產(chǎn)生混亂，從而影響用戶的瀏覽。

在表格類頁面中，元素的運(yùn)動(dòng)情況會(huì)更復(fù)雜。

在表格視圖中，應(yīng)該按照對(duì)角線的方式來引導(dǎo)用戶的關(guān)注點(diǎn)。如果使用水平方向的運(yùn)動(dòng)讓元素一個(gè)一個(gè)展示，會(huì)造成元素的加載時(shí)間過長(zhǎng)，用戶的瀏覽路線來回曲折，體驗(yàn)不流暢。

2、從屬互動(dòng)

從屬互動(dòng)指界面中有一個(gè)主體對(duì)象，用來吸引用戶的注意力，界面中的其他元素都從屬于這個(gè)主體對(duì)象。這樣的編排方式讓用戶的注意力更聚焦到界面中重要的元素上，保持元素的運(yùn)動(dòng)主次更清晰。

還需要注意元素的運(yùn)動(dòng)曲線。如果一個(gè)元素不成比例地改變大小，例如從一個(gè)正方形變成一個(gè)矩形，那么元素應(yīng)該沿著弧線移動(dòng)。

如果元素的大小按比例變化，元素應(yīng)該沿著直線運(yùn)動(dòng)。

此外，我們可以將曲線運(yùn)動(dòng)分為兩類：垂直向外（水平開始，垂直結(jié)束）、水平向外（垂直開始，水平結(jié)束）。

例如如果頁面上下垂直滾動(dòng)，頁面中的元素應(yīng)該以垂直向外的方式展開，先移動(dòng)到右側(cè)，然后向下運(yùn)動(dòng)。如果頁面是水平滑動(dòng)，元素則以水平向外的方式展開。

另一個(gè)問題是元素的運(yùn)動(dòng)路徑相交時(shí)，元素間應(yīng)該遵循物理定律，不能互相穿越?；蛘咴谠匾苿?dòng)前將元素提升到最上層，讓動(dòng)效看起來更自然。

四、UI動(dòng)效設(shè)計(jì)常用到的軟件

當(dāng)看到一個(gè)好看的動(dòng)效時(shí)，常常會(huì)有小伙伴問到使用什么軟件做的。

目前有很多軟件可以進(jìn)行UI動(dòng)效設(shè)計(jì)，借著這次講解動(dòng)效的機(jī)會(huì)，我簡(jiǎn)單列舉三個(gè)自己用過并感覺還不錯(cuò)的軟件，僅供參考，建議大家可以去親自體驗(yàn)一下每款軟件。

1、ProtoPie

ProtoPie是一款輕量級(jí)的動(dòng)效軟件，將頁面原型、交互和動(dòng)畫整合到了一起，既可以直接在里面設(shè)計(jì)高保真的UI頁面，還能讓這些頁面快速動(dòng)起來。

ProtoPie操作頁面設(shè)計(jì)簡(jiǎn)潔，上手相對(duì)簡(jiǎn)單，沒用過的新手也能快速開始。ProtoPie通常和Sketch搭配起來使用，先在Sketch里設(shè)計(jì)UI頁面，之后導(dǎo)入到ProtoPie中進(jìn)行動(dòng)效設(shè)計(jì)，效率賊高。

2、Principle

Principle也算輕量的動(dòng)效軟件，相對(duì)更成熟。Principle通常是和Axure搭配使用，產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師在設(shè)計(jì)界面原型和交互時(shí)用的比較多。需要注意的是，Principle只能在MAC系統(tǒng)中使用，可能對(duì)于不熟悉它的人來說，剛上手使用可能會(huì)有一點(diǎn)點(diǎn)困難。

3、After Effects

AE作為一個(gè)老牌的設(shè)計(jì)工具，大家應(yīng)該都或多或少接觸過。AE功能非常強(qiáng)大，可以實(shí)現(xiàn)很多復(fù)雜的動(dòng)效效果，但操作起來相對(duì)復(fù)雜，學(xué)習(xí)成本也相對(duì)較高。

目前大部分的動(dòng)效都可以通過這三款軟件做出來，小伙伴們可以根據(jù)自己的需求，選擇適合自己的動(dòng)效軟件，從而提升設(shè)計(jì)效率。

五、最后

以上就是UI動(dòng)效設(shè)計(jì)需要考慮的三要素，希望通過這些內(nèi)容能幫助你對(duì)動(dòng)效設(shè)計(jì)有更多的認(rèn)識(shí)和思考。