一、持續(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)畫(huà)的最佳時(shí)長(zhǎng)是多少呢？
一般來(lái)說(shuō)，標(biāo)準(zhǔn)的UI動(dòng)畫(huà)時(shí)長(zhǎng)應(yīng)該在200毫秒-500毫秒之間——這組數(shù)字是基于我們大腦的處理能力而得到的時(shí)長(zhǎng)區(qū)間。
小于100毫秒的動(dòng)畫(huà)是瞬時(shí)的，不會(huì)被用戶注意到；如果時(shí)長(zhǎng)大于1000毫秒(1s)，會(huì)讓用戶感到動(dòng)畫(huà)很緩慢，帶來(lái)一種拖沓的感覺(jué)。
同時(shí)，我們也要考慮其他可能影響動(dòng)畫(huà)速度的因素：
屏幕尺寸：由于手機(jī)和電腦有著不同物理尺寸的屏幕，尺寸的不同會(huì)影響動(dòng)效的速度，屏幕越小，運(yùn)動(dòng)路徑越短。對(duì)于移動(dòng)屏幕，動(dòng)效速度應(yīng)保持在200-300ms之間，平板電腦應(yīng)該保持在400-450ms之間；
web動(dòng)畫(huà)：在瀏覽網(wǎng)頁(yè)時(shí)，我們更習(xí)慣于網(wǎng)站的即時(shí)響應(yīng)效果，因此網(wǎng)站的動(dòng)畫(huà)速度也更快。因此對(duì)于網(wǎng)站來(lái)說(shuō)，轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的時(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í)中的物體由于受到重力、阻力等因素的影響，速度并不是恒定不變的。換句話說(shuō)，物體都會(huì)有加速、減速、平滑等不同的運(yùn)動(dòng)狀態(tài)。
為了使動(dòng)畫(huà)更真實(shí)，我們需通過(guò)緩動(dòng)來(lái)模擬出這些因素，讓界面中的元素運(yùn)動(dòng)的更自然，避免過(guò)于死板。
緩動(dòng)決定了元素在運(yùn)動(dòng)過(guò)程中速度的變化，常用的類(lèi)型包括：線性勻速、緩入、緩出、緩入緩出。
1、線性勻速
當(dāng)元素沒(méi)有受到物理力的影響，速度保持恒定，就會(huì)發(fā)生線性勻速運(yùn)動(dòng)的效果。
線性勻速在改變?cè)匚恢玫脑O(shè)計(jì)中使用相對(duì)較少，更多是用在改變?cè)氐臓顟B(tài)、屬性（透明度變化）等不涉及元素位置改變的設(shè)計(jì)中。
2、緩入
緩入對(duì)應(yīng)于元素的加速曲線，通常用于當(dāng)對(duì)象從靜止到加速離開(kāi)用戶視線的過(guò)程。例如一輛汽車(chē)駛出時(shí)，速度從0開(kāi)始逐漸增加，然后在駛出時(shí)達(dá)到最大值。
3、緩出
緩出是緩入的對(duì)立面，用于屏幕上的對(duì)象從高峰值進(jìn)入，逐漸減速直到到達(dá)特定位置的過(guò)程。例如一個(gè)人從屏幕外全速進(jìn)入屏幕內(nèi)時(shí)，進(jìn)入畫(huà)面時(shí)的速度最高，然后逐漸減速到零。
4、緩入緩出
緩入緩出也稱(chēng)為標(biāo)準(zhǔn)曲線，指對(duì)象從畫(huà)面的一個(gè)部分移動(dòng)到另一個(gè)部分，整個(gè)移動(dòng)過(guò)程中始終保持在幀中，通常用于為在同一界面中改變位置的元素創(chuàng)建動(dòng)畫(huà)。例如一個(gè)鐘擺，它的速度從峰值開(kāi)始，緩慢減速到0，然后再次加速，不斷在一個(gè)固定的位置區(qū)域循環(huán)。
需要注意的是，不對(duì)稱(chēng)標(biāo)準(zhǔn)曲線會(huì)使物體的運(yùn)動(dòng)變得更加自然。
在使用緩入緩出時(shí)，要強(qiáng)調(diào)減速而不是加速，因此減速的時(shí)間要比加速時(shí)間要長(zhǎng)。在這種情況下，用戶會(huì)更關(guān)注物體的后半段，從而更容易關(guān)注物體的新?tīng)顟B(tài)。
三、動(dòng)效編排
動(dòng)效編排是指對(duì)界面中不同的元素進(jìn)行統(tǒng)一、有序的編排，讓元素間更協(xié)調(diào)，通過(guò)更流暢的動(dòng)效來(lái)引導(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)生混亂，從而影響用戶的瀏覽。
在表格類(lèi)頁(yè)面中，元素的運(yùn)動(dòng)情況會(huì)更復(fù)雜。
在表格視圖中，應(yīng)該按照對(duì)角線的方式來(lái)引導(dǎo)用戶的關(guān)注點(diǎn)。如果使用水平方向的運(yùn)動(dòng)讓元素一個(gè)一個(gè)展示，會(huì)造成元素的加載時(shí)間過(guò)長(zhǎng)，用戶的瀏覽路線來(lái)回曲折，體驗(yàn)不流暢。
2、從屬互動(dòng)
從屬互動(dòng)指界面中有一個(gè)主體對(duì)象，用來(lái)吸引用戶的注意力，界面中的其他元素都從屬于這個(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)分為兩類(lèi)：垂直向外（水平開(kāi)始，垂直結(jié)束）、水平向外（垂直開(kāi)始，水平結(jié)束）。
例如如果頁(yè)面上下垂直滾動(dòng)，頁(yè)面中的元素應(yīng)該以垂直向外的方式展開(kāi)，先移動(dòng)到右側(cè)，然后向下運(yùn)動(dòng)。如果頁(yè)面是水平滑動(dòng)，元素則以水平向外的方式展開(kāi)。
另一個(gè)問(wèn)題是元素的運(yùn)動(dòng)路徑相交時(shí)，元素間應(yīng)該遵循物理定律，不能互相穿越?；蛘咴谠匾苿?dòng)前將元素提升到最上層，讓動(dòng)效看起來(lái)更自然。
四、UI動(dòng)效設(shè)計(jì)常用到的軟件
當(dāng)看到一個(gè)好看的動(dòng)效時(shí)，常常會(huì)有小伙伴問(wèn)到使用什么軟件做的。
目前有很多軟件可以進(jìn)行UI動(dòng)效設(shè)計(jì)，借著這次講解動(dòng)效的機(jī)會(huì)，我簡(jiǎn)單列舉三個(gè)自己用過(guò)并感覺(jué)還不錯(cuò)的軟件，僅供參考，建議大家可以去親自體驗(yàn)一下每款軟件。
1、ProtoPie
ProtoPie是一款輕量級(jí)的動(dòng)效軟件，將頁(yè)面原型、交互和動(dòng)畫(huà)整合到了一起，既可以直接在里面設(shè)計(jì)高保真的UI頁(yè)面，還能讓這些頁(yè)面快速動(dòng)起來(lái)。
ProtoPie操作頁(yè)面設(shè)計(jì)簡(jiǎn)潔，上手相對(duì)簡(jiǎn)單，沒(méi)用過(guò)的新手也能快速開(kāi)始。ProtoPie通常和Sketch搭配起來(lái)使用，先在Sketch里設(shè)計(jì)UI頁(yè)面，之后導(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ì)于不熟悉它的人來(lái)說(shuō)，剛上手使用可能會(huì)有一點(diǎn)點(diǎn)困難。
3、After Effects
AE作為一個(gè)老牌的設(shè)計(jì)工具，大家應(yīng)該都或多或少接觸過(guò)。AE功能非常強(qiáng)大，可以實(shí)現(xiàn)很多復(fù)雜的動(dòng)效效果，但操作起來(lái)相對(duì)復(fù)雜，學(xué)習(xí)成本也相對(duì)較高。
目前大部分的動(dòng)效都可以通過(guò)這三款軟件做出來(lái)，小伙伴們可以根據(jù)自己的需求，選擇適合自己的動(dòng)效軟件，從而提升設(shè)計(jì)效率。
五、最后
以上就是UI動(dòng)效設(shè)計(jì)需要考慮的三要素，希望通過(guò)這些內(nèi)容能幫助你對(duì)動(dòng)效設(shè)計(jì)有更多的認(rèn)識(shí)和思考。
作者：Clippp
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》UI動(dòng)效設(shè)計(jì)指南！三個(gè)要素打造流暢的動(dòng)效體驗(yàn)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司