2021-5-18 seo達(dá)人
今天分享一篇在medium很火的文章《UI交互動(dòng)效設(shè)計(jì)標(biāo)準(zhǔn)與規(guī)范探索》這篇文字將系統(tǒng)性的給你介紹UI交互動(dòng)畫該如何深入研究，希望對(duì)您有用！
現(xiàn)如今，優(yōu)秀的界面動(dòng)畫很能讓人產(chǎn)生深刻印象，甚至是帶來驚喜。它一方面表達(dá)了界面之間的交互過程，解釋說明如何使用應(yīng)用，另一方面也能正確引導(dǎo)用戶的注意力。在瀏覽關(guān)于動(dòng)效的文章時(shí)，我發(fā)現(xiàn)幾乎所有的文章都只描述了特定的案例或者關(guān)于動(dòng)畫的一般事實(shí)，但是我還沒有遇到過任何一篇文章能夠清晰的描述所有關(guān)于界面動(dòng)畫的使用規(guī)范。在這篇文章中我不會(huì)寫任何新的知識(shí)，我只是想把所有的主要原則和規(guī)范做一個(gè)收集歸納，這樣就能便于其他設(shè)計(jì)師進(jìn)行快速?zèng)Q策了。
當(dāng)界面元素改變他們的狀態(tài)和位置時(shí)，動(dòng)畫的持續(xù)時(shí)間應(yīng)該以用戶能注意到又不用等待為標(biāo)準(zhǔn)。
合適的動(dòng)畫時(shí)長，既不要太快也不至于慢到讓用戶打哈欠。
大量的研究發(fā)現(xiàn)在界面中最優(yōu)的時(shí)間是200-500ms。這個(gè)數(shù)字是根據(jù)人類大腦的認(rèn)知水平得出來的。任何小于100ms的動(dòng)畫是人類很難感知到的，而其他大于1秒的動(dòng)畫又會(huì)讓用戶覺得有些延遲，不夠流暢。
動(dòng)畫的持續(xù)時(shí)間是使得界面流暢的關(guān)鍵
在手機(jī)上，谷歌設(shè)計(jì)規(guī)范同樣建議動(dòng)畫的持續(xù)時(shí)間在200-300ms為宜。在平板電腦上，這個(gè)時(shí)間會(huì)稍微長30%，大約在400-450ms。原因很簡單，在更大的屏幕上，元素變化的位置路徑會(huì)更長?；诖?，在可穿戴設(shè)備中，持續(xù)時(shí)間又要縮短30%了，大約在150-200ms，因?yàn)樾∑聊簧显刈兓奈恢寐窂綍?huì)更短。
設(shè)備的大小會(huì)影響動(dòng)畫的持續(xù)時(shí)間
在網(wǎng)頁上又會(huì)是另外一種方式。由于我們習(xí)慣于在瀏覽器中快速打開網(wǎng)頁，所以我們也希望在不同的狀態(tài)之間能夠快速切換。所以，在網(wǎng)頁上的動(dòng)畫應(yīng)該要比在手機(jī)上持續(xù)時(shí)間少2倍多，在150-200ms之間。一旦超過這個(gè)時(shí)間區(qū)間，用戶就會(huì)覺得網(wǎng)頁是不流暢的，或者覺得是不是網(wǎng)絡(luò)有了問題。
但是，如果你是在頁面中創(chuàng)建一些裝飾性的動(dòng)畫或者目的是為了吸引用戶的注意力，此時(shí)就應(yīng)該拋棄這些規(guī)范，時(shí)間你可以做的更長一些。
大界面中的動(dòng)畫就一定是慢的嗎？并不一定。
還需要記住的一點(diǎn)就是，無論在什么平臺(tái)，動(dòng)畫的持續(xù)時(shí)間不僅跟它的移動(dòng)距離有關(guān)，還跟它本身的大小有關(guān)系。小的元素或者變化不大的動(dòng)畫應(yīng)該要移動(dòng)的更快，而大的元素或者復(fù)雜的元素持續(xù)時(shí)間稍長一些看起來會(huì)更好。
在大小相同的對(duì)象中，移動(dòng)距離最短的物體應(yīng)該最先停止。小的對(duì)象與大的對(duì)象相比較，小對(duì)象移動(dòng)速度顯得更慢，因?yàn)闀?huì)產(chǎn)生更大的偏移量。
動(dòng)畫的持續(xù)時(shí)間取決于物體的大小和移動(dòng)的距離
當(dāng)對(duì)象發(fā)生碰撞時(shí)，根據(jù)物理原則，碰撞的能量必須在碰撞對(duì)象之間平均分布。而如果在界面中只能看到碰撞體的一部分回彈，往往會(huì)顯得不夠自然。因此，最好避免回彈效果，只在一些特殊情況下才用到它。
避免使用彈跳效果，因?yàn)樗鼤?huì)分散注意力。
物體的運(yùn)動(dòng)軌跡應(yīng)該是清晰銳利的，所以盡量不要使用動(dòng)態(tài)模糊（在AE中做動(dòng)畫效果除外）。即使是在現(xiàn)在最新的設(shè)備上也很難重現(xiàn)這些效果，不能把這種動(dòng)態(tài)模糊的動(dòng)畫效果應(yīng)用到界面中。
動(dòng)畫中盡量不要使用動(dòng)態(tài)模糊
列表項(xiàng)的出現(xiàn)應(yīng)該只允許有一個(gè)短暫的延遲。每一個(gè)新列表項(xiàng)的出現(xiàn)間隔應(yīng)該在20-25ms之間。元素出現(xiàn)太慢的話，會(huì)讓用戶感到很不爽。
列表項(xiàng)出現(xiàn)的動(dòng)畫應(yīng)該在20-25ms之間。
緩動(dòng)可以讓物體運(yùn)動(dòng)的更加自然。這是動(dòng)畫的基本原理之一，在?Ollie Johnston 和 Frank Thomas所寫的《 The Illusion of Life: Disney Animation》書中有詳細(xì)的解釋。
為了讓動(dòng)畫看起來不會(huì)覺得太過機(jī)械，物體的運(yùn)動(dòng)應(yīng)該會(huì)同時(shí)伴有一些加速度，就像現(xiàn)實(shí)世界中的運(yùn)動(dòng)一樣，不會(huì)有絕對(duì)勻速的運(yùn)動(dòng)形式。
緩動(dòng)的物體會(huì)比較線性運(yùn)動(dòng)的物體看起來更加自然
不受任何物理因素影響的運(yùn)動(dòng)叫做勻速運(yùn)動(dòng)，這種動(dòng)畫在用戶眼中看來是非常的機(jī)械和不真實(shí)的。
所有的APP動(dòng)畫都會(huì)用到動(dòng)畫曲線。我將試著去解釋如何閱讀它們并說明它們的含義。下面的例子中，運(yùn)動(dòng)就是勻速的，可以看到對(duì)象在相同的時(shí)間間隔中移動(dòng)了相同的位置。
線性運(yùn)動(dòng)
線性動(dòng)畫在什么時(shí)候會(huì)用到？舉個(gè)例子，對(duì)象僅改變它的顏色和透明度的時(shí)候會(huì)用到。一般來說，當(dāng)一個(gè)對(duì)象不改變它的位置而只是改變狀態(tài)時(shí)，可以嘗試用線性動(dòng)畫來改變狀態(tài)。
我們可以在曲線上看到，在相同時(shí)間內(nèi)，位置的變化會(huì)越來越大。這就說明一個(gè)物體是在進(jìn)行加速運(yùn)動(dòng)。
加速運(yùn)動(dòng)曲線
這種曲線一般應(yīng)用在對(duì)象移出界面時(shí)，這些可能是系統(tǒng)通知，也可能只是界面中的卡片設(shè)計(jì)。但是記住，這種動(dòng)畫曲線只是會(huì)用在物體移出界面時(shí)，而反過來就不適用了。
加速曲線應(yīng)用在物體移出界面時(shí)
動(dòng)畫曲線有助于表達(dá)正確的情緒。在下面的例子中，物體動(dòng)畫的持續(xù)時(shí)間和位移大小都是相同的，但你會(huì)發(fā)現(xiàn)即使是曲線上一些微小的變化也會(huì)讓你看動(dòng)畫的感受不同。
當(dāng)然，通過改變曲線，可以讓物體的運(yùn)動(dòng)顯得更加真實(shí)自然。
相同的持續(xù)時(shí)間和相同的位移變化，但是會(huì)有不同的感受
與緩入恰恰相反，物體的運(yùn)動(dòng)在開始時(shí)位移變化很大，但是后面會(huì)越來越小直到最后完全停止。
減速曲線
這種類型的運(yùn)動(dòng)曲線通常是用在物體進(jìn)入界面中時(shí)——快速進(jìn)入屏幕然后再慢慢停下來，在不同卡片或?qū)ο髲钠聊煌膺M(jìn)入界面時(shí)可以應(yīng)用上。
減速曲線在此時(shí)會(huì)讓動(dòng)畫顯得更加自然
這種曲線使物體有加速和減速的過程。這種類型的動(dòng)畫在界面中是最常用的，當(dāng)你還在遲疑該用怎樣的動(dòng)畫曲線時(shí)，選擇標(biāo)準(zhǔn)曲線準(zhǔn)沒錯(cuò)。
標(biāo)準(zhǔn)曲線
根據(jù)谷歌規(guī)范，建議最好是用一些非對(duì)稱曲線來使得物體運(yùn)動(dòng)的更加自然真實(shí)。動(dòng)畫的結(jié)尾會(huì)比動(dòng)畫的開頭更加需要去強(qiáng)調(diào)，這樣的結(jié)果是加速時(shí)間要小于減速時(shí)間。在這個(gè)情況下，動(dòng)畫能夠引導(dǎo)用戶更加關(guān)注元素的結(jié)束部分，以至于關(guān)注到其新的狀態(tài)。
注意觀察對(duì)稱與非對(duì)稱曲線的區(qū)別
緩入緩出動(dòng)畫常被用在界面中對(duì)象從一個(gè)位置移動(dòng)到另一個(gè)位置時(shí)。在這種情況下，動(dòng)畫的目的是為了不讓人有過多不必要的關(guān)注。
卡片的非對(duì)稱曲線運(yùn)動(dòng)
同樣的情況還適用于，元素在界面中消失后用戶還能隨時(shí)顯示，抽屜導(dǎo)航就是這樣的例子。
抽屜導(dǎo)航的收起過程就是應(yīng)用到了標(biāo)準(zhǔn)曲線
從很多例子中可以看出許多初學(xué)者都忽略了一個(gè)基本的規(guī)則——開始動(dòng)畫不等同于結(jié)束動(dòng)畫，應(yīng)該分別去設(shè)置，比如在抽屜導(dǎo)航動(dòng)效中——打開是一個(gè)減速動(dòng)畫但關(guān)閉時(shí)卻是一個(gè)標(biāo)準(zhǔn)曲線動(dòng)畫。另外，根據(jù)谷歌設(shè)計(jì)規(guī)范，物體出現(xiàn)的動(dòng)畫持續(xù)時(shí)間應(yīng)該略長，以吸引用戶更多的注意力。
側(cè)邊欄的動(dòng)畫是配合減速曲線和標(biāo)準(zhǔn)曲線一起來實(shí)現(xiàn)的
有一個(gè)立方貝塞爾函數(shù)常用來描述這種速度曲線。之所以叫立方是因?yàn)樗腔?個(gè)點(diǎn)來的。第一個(gè)點(diǎn)在坐標(biāo)軸中是（0，0）（左下），最后一個(gè)點(diǎn)是（1，1）(右上)。
基于此，我們只需要描述圖上的兩個(gè)點(diǎn)，這是由貝塞爾函數(shù)的四個(gè)參數(shù)給出的:前兩個(gè)是第一個(gè)點(diǎn)的坐標(biāo)x和y，后兩個(gè)是第二個(gè)點(diǎn)的坐標(biāo)x和y。
為了便于實(shí)際工作，我建議使用2個(gè)工具網(wǎng)站來操作
https://easings.net/zh-cn
http://cubic-bezier.com
第一個(gè)包含一些最常使用的曲線列表，可以直接將其復(fù)制到原型工具中去。第二個(gè)是可以給你自己自定義動(dòng)畫的曲線，并能實(shí)時(shí)查看效果。
不同類型的動(dòng)畫曲線以及他們不同的參數(shù)
就像芭蕾舞編排一樣，主要思想是從一個(gè)狀態(tài)到另一個(gè)狀態(tài)的過渡引導(dǎo)用戶注意力方向。
一般會(huì)有2種編排形式——同級(jí)動(dòng)畫和從屬動(dòng)畫。
同級(jí)動(dòng)畫意味著所有對(duì)象的外觀都服從一個(gè)特定的規(guī)則。
在這種情況下，所有卡片都按一個(gè)相同的流程出現(xiàn)，引導(dǎo)用戶注意力在一個(gè)方向上，即從上到下。如果我們不按照這個(gè)順序，用戶的注意力就會(huì)分散，如果所有元素同時(shí)出現(xiàn)也會(huì)很糟糕。
用戶的注意力應(yīng)被引導(dǎo)在一個(gè)方向上
至于表格視圖，就會(huì)略微有些復(fù)雜。這種情況下，用戶往往是以對(duì)角線為焦點(diǎn)去看界面的，所以逐個(gè)出現(xiàn)的形式也比較糟糕。另外，逐個(gè)出現(xiàn)的動(dòng)畫在時(shí)間上也會(huì)過長，而且把用戶的注意力引導(dǎo)成鋸齒狀，這是很不友好的。
按對(duì)角線出現(xiàn)的表格視圖動(dòng)畫
從屬動(dòng)畫是指有一個(gè)核心運(yùn)動(dòng)的元素，它吸引用戶所有的注意力，其他元素也都跟隨它的運(yùn)動(dòng)。這種類型的動(dòng)畫會(huì)顯得更有秩序感，讓用戶更多的去關(guān)注到內(nèi)容本身。
而在其他情況下，用戶是很難知道他到底要去看哪個(gè)元素，注意力很容易被分散。如果要設(shè)置多個(gè)動(dòng)畫元素，一定要清楚的知道他的動(dòng)畫順序，并盡可能的將其他動(dòng)畫元素弱化。
只賦予一個(gè)中心對(duì)象生命是值得的，而所有其他的對(duì)象都服從于它。否則，用戶就不知道到底應(yīng)該注意哪個(gè)元素。
根據(jù)谷歌規(guī)范，當(dāng)運(yùn)動(dòng)物體的大小不成比例地改變時(shí)，它們應(yīng)該沿著弧線而不是直線運(yùn)動(dòng)。這有助于使動(dòng)畫更自然。所謂“不成比例”，是指物體的高度和寬度的增加/減少是不對(duì)稱地進(jìn)行的，即以不同的速度變化(例如，一個(gè)正方形變成一個(gè)矩形)。
物體的運(yùn)動(dòng)如果不成比例，那應(yīng)該按弧線變化。
當(dāng)對(duì)象按比例改變其大小時(shí)，則此時(shí)直線運(yùn)動(dòng)的形式會(huì)更好。由于這種運(yùn)動(dòng)形式做起來容易得多，弧線軌跡運(yùn)動(dòng)的規(guī)律就往往被忽視。在現(xiàn)在很多應(yīng)用中，我們都能找到這種例子。
等比的物體運(yùn)動(dòng)軌跡應(yīng)該使用直線
曲線軌跡運(yùn)動(dòng)也會(huì)有兩種實(shí)現(xiàn)方式:第一種是開始水平移動(dòng)，然后以垂直運(yùn)動(dòng)結(jié)束;第二種是開始垂直移動(dòng)，然后以水平運(yùn)動(dòng)結(jié)束。
物體沿曲線移動(dòng)的路徑必須與滾動(dòng)界面的方向重合。例如，在下面的例子中，我們可以上下滾動(dòng)界面，相應(yīng)地，卡片以垂直的方式展開更合適——先向右，然后向下。
展開/折疊卡片的方向應(yīng)與界面的軸線重合
如果物體的運(yùn)動(dòng)路徑彼此相交，它們就應(yīng)該不能穿過對(duì)方。物體應(yīng)該通過減慢或加速自身的速度為另一個(gè)物體的運(yùn)動(dòng)留下足夠的空間。另一種方式——只是推開其他物體。為什么要這么做？因?yàn)槲覀兗僭O(shè)界面中的所有對(duì)象都位于一個(gè)平面上。（譯者注：對(duì)于這一點(diǎn)我不是很認(rèn)同，為了更加真實(shí)么？）
在運(yùn)動(dòng)過程中，物體不應(yīng)該互相穿透，而是為另一個(gè)物體的運(yùn)動(dòng)留下空間。
在另一種情況下，移動(dòng)的物體可以通過抬高于其他物體，而不會(huì)以溶解或通過其他物體的形式來移動(dòng)。為什么?因?yàn)槲覀兿嘈沤缑嫔显氐男袨閼?yīng)該要符合物理定律，在現(xiàn)實(shí)世界中沒有任何實(shí)體能夠做到直接穿透對(duì)方。
物體可以被抬高于其他元素之上來移動(dòng)
如果我們總結(jié)上述所有的規(guī)律和原則，可以得出界面動(dòng)畫應(yīng)該要反映物質(zhì)世界的運(yùn)動(dòng),例如我們都知道的，摩擦，加速等等。模仿現(xiàn)實(shí)世界的行為我們可以創(chuàng)建一個(gè)優(yōu)秀的動(dòng)畫，滿足用戶的心理預(yù)期。
一個(gè)優(yōu)秀的動(dòng)畫，應(yīng)該是不會(huì)那么刻意，也不會(huì)分散用戶對(duì)目標(biāo)的注意力。如果是的話，就需要優(yōu)化它，或者干脆把動(dòng)畫去掉。核心標(biāo)準(zhǔn)是動(dòng)畫不應(yīng)該降低用戶執(zhí)行任務(wù)的效率。
但是不要忘記，用戶對(duì)動(dòng)畫的好壞感受，是感性大于理性的。所以，最好是把做出來的動(dòng)畫給用戶進(jìn)行評(píng)鑒，然后再不斷優(yōu)化它。
文章來源：云端網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn