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