一、持續時長和速度

動效設計中的持續時長和速度是兩個密切相關的因素。在動效設計中，需要確保動效不要移動得太快或太慢，從而影響可用性，破壞使用體驗。

那么，動畫的最佳時長是多少呢？

一般來說，標準的UI動畫時長應該在200毫秒-500毫秒之間——這組數字是基于我們大腦的處理能力而得到的時長區間。

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

同時，我們也要考慮其他可能影響動畫速度的因素：

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

web動畫：在瀏覽網頁時，我們更習慣于網站的即時響應效果，因此網站的動畫速度也更快。因此對于網站來說，轉場動畫的時長保持在150-200毫秒之間，更符合用戶的瀏覽習慣。

以上提到的區間是相對保準的動效時長，并不是一成不變，具體的動效時長和速度需要根據具體的需求、場景，靈活分析。

二、緩動

現實中的物體由于受到重力、阻力等因素的影響，速度并不是恒定不變的。換句話說，物體都會有加速、減速、平滑等不同的運動狀態。

為了使動畫更真實，我們需通過緩動來模擬出這些因素，讓界面中的元素運動的更自然，避免過于死板。

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

1、線性勻速

當元素沒有受到物理力的影響，速度保持恒定，就會發生線性勻速運動的效果。

線性勻速在改變元素位置的設計中使用相對較少，更多是用在改變元素的狀態、屬性（透明度變化）等不涉及元素位置改變的設計中。

2、緩入

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

3、緩出

緩出是緩入的對立面，用于屏幕上的對象從高峰值進入，逐漸減速直到到達特定位置的過程。例如一個人從屏幕外全速進入屏幕內時，進入畫面時的速度最高，然后逐漸減速到零。

4、緩入緩出

緩入緩出也稱為標準曲線，指對象從畫面的一個部分移動到另一個部分，整個移動過程中始終保持在幀中，通常用于為在同一界面中改變位置的元素創建動畫。例如一個鐘擺，它的速度從峰值開始，緩慢減速到0，然后再次加速，不斷在一個固定的位置區域循環。

需要注意的是，不對稱標準曲線會使物體的運動變得更加自然。

在使用緩入緩出時，要強調減速而不是加速，因此減速的時間要比加速時間要長。在這種情況下，用戶會更關注物體的后半段，從而更容易關注物體的新狀態。

三、動效編排

動效編排是指對界面中不同的元素進行統一、有序的編排，讓元素間更協調，通過更流暢的動效來引導用戶的注意力。動效編排包括平等互動和從屬互動。

1、平等互動

平等互動指對象根據相同的規則移動。

在這種情況下，界面中的元素會變得整齊有序。以界面中的卡片列表為例，平等的互動編排保證卡片一個接一個，從上到下以一種協調的方式出現，能夠從上到下引導用戶的注意力。

如果不按照這種編排規則，界面中元素的出現順序會產生混亂，從而影響用戶的瀏覽。

在表格類頁面中，元素的運動情況會更復雜。

在表格視圖中，應該按照對角線的方式來引導用戶的關注點。如果使用水平方向的運動讓元素一個一個展示，會造成元素的加載時間過長，用戶的瀏覽路線來回曲折，體驗不流暢。

2、從屬互動

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

還需要注意元素的運動曲線。如果一個元素不成比例地改變大小，例如從一個正方形變成一個矩形，那么元素應該沿著弧線移動。

如果元素的大小按比例變化，元素應該沿著直線運動。

此外，我們可以將曲線運動分為兩類：垂直向外（水平開始，垂直結束）、水平向外（垂直開始，水平結束）。

例如如果頁面上下垂直滾動，頁面中的元素應該以垂直向外的方式展開，先移動到右側，然后向下運動。如果頁面是水平滑動，元素則以水平向外的方式展開。

另一個問題是元素的運動路徑相交時，元素間應該遵循物理定律，不能互相穿越。或者在元素移動前將元素提升到最上層，讓動效看起來更自然。

四、UI動效設計常用到的軟件

當看到一個好看的動效時，常常會有小伙伴問到使用什么軟件做的。

目前有很多軟件可以進行UI動效設計，借著這次講解動效的機會，我簡單列舉三個自己用過并感覺還不錯的軟件，僅供參考，建議大家可以去親自體驗一下每款軟件。

1、ProtoPie

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

ProtoPie操作頁面設計簡潔，上手相對簡單，沒用過的新手也能快速開始。ProtoPie通常和Sketch搭配起來使用，先在Sketch里設計UI頁面，之后導入到ProtoPie中進行動效設計，效率賊高。

2、Principle

Principle也算輕量的動效軟件，相對更成熟。Principle通常是和Axure搭配使用，產品經理或者交互設計師在設計界面原型和交互時用的比較多。需要注意的是，Principle只能在MAC系統中使用，可能對于不熟悉它的人來說，剛上手使用可能會有一點點困難。

3、After Effects

AE作為一個老牌的設計工具，大家應該都或多或少接觸過。AE功能非常強大，可以實現很多復雜的動效效果，但操作起來相對復雜，學習成本也相對較高。

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

五、最后

以上就是UI動效設計需要考慮的三要素，希望通過這些內容能幫助你對動效設計有更多的認識和思考。

 
作者：Clippp

轉載請注明：學UI網》UI動效設計指南！三個要素打造流暢的動效體驗

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司