2020-11-6 資深UI設(shè)計(jì)者
如今，很難用界面動(dòng)畫(huà)給人留下深刻的印象甚至驚喜。它顯示了屏幕之間的交互，解釋了如何使用該應(yīng)用程序，或者只是引起用戶(hù)的注意力。在瀏覽有關(guān)動(dòng)畫(huà)的文章時(shí)，我發(fā)現(xiàn)幾乎所有的文章都只是描述了關(guān)于動(dòng)畫(huà)的特定的用例或一般事實(shí)，并沒(méi)有遇到任何關(guān)于界面動(dòng)畫(huà)通用規(guī)則的文章。在本文中我收集了界面動(dòng)畫(huà)的主要原則和規(guī)則，以便給想要設(shè)計(jì)動(dòng)畫(huà)界面的設(shè)計(jì)人員提供一些幫助。
當(dāng)元素改變它們的狀態(tài)或位置時(shí)，動(dòng)畫(huà)的持續(xù)時(shí)間應(yīng)足夠慢，以使用戶(hù)可以注意到變化，但同時(shí)也要足夠快，以免引起等待。
在動(dòng)畫(huà)中使用適當(dāng)?shù)某掷m(xù)時(shí)間，不要太快，更不要讓用戶(hù)過(guò)長(zhǎng)等待
大量研究發(fā)現(xiàn)，界面動(dòng)畫(huà)的最佳速度在200-500毫秒之間。這些數(shù)據(jù)是基于人類(lèi)大腦的特殊性得出的。任何小于100毫秒的動(dòng)畫(huà)都是瞬時(shí)的，根本不會(huì)被識(shí)別。而超過(guò)1秒的動(dòng)畫(huà)時(shí)長(zhǎng)會(huì)傳達(dá)延遲感，因此對(duì)用戶(hù)來(lái)說(shuō)很無(wú)聊。
最好在界面中保留動(dòng)畫(huà)的持續(xù)時(shí)間
在移動(dòng)設(shè)備上，《材料設(shè)計(jì)指南》還建議將動(dòng)畫(huà)的持續(xù)時(shí)間限制在200-300毫秒之間。至于Web端，持續(xù)時(shí)間應(yīng)延長(zhǎng)30％，大約為400-450毫秒。原因在于：屏幕尺寸越大，物體在改變位置時(shí)可以克服的路徑更長(zhǎng)。因此，在可穿戴設(shè)備上，持續(xù)時(shí)間應(yīng)縮短30％，大約為150-200ms，因?yàn)樵谳^小的屏幕上，移動(dòng)距離更短。
移動(dòng)設(shè)備的大小會(huì)影響動(dòng)畫(huà)的持續(xù)時(shí)間
Web動(dòng)畫(huà)的處理方式有所不同，由于我們已經(jīng)習(xí)慣了在瀏覽器中即時(shí)打開(kāi)網(wǎng)頁(yè)，所以我們希望也能在不同狀態(tài)之間快速轉(zhuǎn)換。因此，Web轉(zhuǎn)換的持續(xù)時(shí)間應(yīng)比移動(dòng)設(shè)備短約2倍，150-200毫秒之間。在其他情況下，用戶(hù)將不可避免地認(rèn)為計(jì)算機(jī)死機(jī)或網(wǎng)絡(luò)連接出現(xiàn)問(wèn)題。
但是，如果你要在網(wǎng)站上創(chuàng)建裝飾性動(dòng)畫(huà)或試圖吸引用戶(hù)對(duì)某些元素的關(guān)注，則無(wú)需考慮這些規(guī)則。在這些情況下，動(dòng)畫(huà)可以更長(zhǎng)一些。
大屏幕電腦=慢動(dòng)畫(huà)？決不是！
需要記住的是，無(wú)論平臺(tái)如何，動(dòng)畫(huà)的持續(xù)時(shí)間不僅取決于移動(dòng)距離，還取決于對(duì)象的大小。更小的元素或帶有小變化的的動(dòng)畫(huà)應(yīng)該移動(dòng)得更快。因此，大而復(fù)雜元素的動(dòng)畫(huà)在持續(xù)時(shí)間稍長(zhǎng)的時(shí)候看起來(lái)更好。
在相同大小的移動(dòng)物體中，停下來(lái)的是經(jīng)過(guò)最短距離的物體。與大物體相比，小物體移動(dòng)得更慢，因?yàn)樗鼈兊钠屏扛蟆?
動(dòng)畫(huà)的持續(xù)時(shí)間取決于對(duì)象的大小和移動(dòng)距離
當(dāng)物體碰撞時(shí)，根據(jù)物理定律，碰撞的能量必須均勻分布在物體之間。因此，最好排除反彈效應(yīng)，只在特殊情況下使用它才有意義。
避免使用彈跳效果，因?yàn)樗鼤?huì)分散注意力
物體的運(yùn)動(dòng)應(yīng)該是清晰和銳利的，所以不要使用運(yùn)動(dòng)模糊。即使在現(xiàn)代移動(dòng)設(shè)備上也很難再現(xiàn)這種效果，并且根本不用于界面動(dòng)畫(huà)中。
不要在動(dòng)畫(huà)中使用模糊效果
列表項(xiàng)(新聞卡片、電子郵件列表等)在其出現(xiàn)之間應(yīng)該有一個(gè)很短的延遲時(shí)間，每次出現(xiàn)的新元素應(yīng)該持續(xù)20-25毫秒。元素出現(xiàn)較慢的話(huà)可能會(huì)惹惱用戶(hù)。
列表項(xiàng)的動(dòng)畫(huà)應(yīng)持續(xù)在20–25毫秒
緩和有助于使物體的運(yùn)動(dòng)更加自然，這是動(dòng)畫(huà)的基本原則之一。這一點(diǎn)在《迪士尼動(dòng)畫(huà)原則》(The Illusion of Life: Disney Animation)一書(shū)中得到了充分的描述，這本書(shū)是由兩位重要的迪士尼動(dòng)畫(huà)師——奧利·約翰斯頓和弗蘭克·托馬斯所寫(xiě)。
為了使動(dòng)畫(huà)看起來(lái)不顯得機(jī)械和人造，物體應(yīng)以一定的加速或減速的方式移動(dòng)，就像物理世界中的所有活動(dòng)對(duì)象一樣。
與線(xiàn)性動(dòng)畫(huà)相比，具有緩動(dòng)效果的動(dòng)畫(huà)看起來(lái)更自然（這里提示下：注意看每段豎格的間距）
不受任何物理力影響的物體直線(xiàn)運(yùn)動(dòng)，換句話(huà)說(shuō)就是勻速運(yùn)動(dòng)。正因?yàn)槿绱耍鼈兛雌饋?lái)非常不自然，對(duì)人眼來(lái)說(shuō)是人為的。
所有動(dòng)畫(huà)應(yīng)用程序都使用動(dòng)畫(huà)曲線(xiàn)，我將嘗試解釋如何閱讀它們以及它們的含義。曲線(xiàn)顯示了物體的位置( y axis=position )在相同的時(shí)間間隔內(nèi)物體的位置如何變化(x axis=time)。在當(dāng)前情況下，運(yùn)動(dòng)是線(xiàn)性的，因此物體在同一時(shí)間行進(jìn)相同的距離。
直線(xiàn)運(yùn)動(dòng)曲線(xiàn)
例如，直線(xiàn)運(yùn)動(dòng)只能在物體改變顏色或透明度時(shí)使用。一般來(lái)說(shuō)，我們可以用它來(lái)表示物體不改變其位置的狀態(tài)。
我們可以在曲線(xiàn)上看到，在開(kāi)始時(shí)物體的位置變化緩慢，而速度則逐漸增加，這意味著物體正在以一定的加速度移動(dòng)。
加速度曲線(xiàn)
當(dāng)物體以全速飛出屏幕消失時(shí)，應(yīng)使用此曲線(xiàn)，比如說(shuō)系統(tǒng)通知或者是界面卡片。但請(qǐng)記住，只有當(dāng)對(duì)象永遠(yuǎn)離開(kāi)屏幕且我們無(wú)法調(diào)用或返回它們時(shí)，才應(yīng)使用這種類(lèi)型的曲線(xiàn)。
將卡片滑出屏幕的加速曲線(xiàn)
動(dòng)畫(huà)曲線(xiàn)有助于表達(dá)正確的情緒。在下面的示例中，我們可以看到所有物體的移動(dòng)持續(xù)時(shí)間和距離是相同的，但是即使曲線(xiàn)上的微小變化也可以影響動(dòng)畫(huà)的氣氛。當(dāng)然，通過(guò)改變曲線(xiàn)，你可以使物體盡可能地接近于真實(shí)世界。
持續(xù)時(shí)間和距離相同，但卻是不同的氛圍
它與緩入曲線(xiàn)相反，因此物體會(huì)快速覆蓋很長(zhǎng)一段距離，然后緩慢的降低速度，直到最終停止。
減速曲線(xiàn)
當(dāng)元素出現(xiàn)在屏幕上時(shí)應(yīng)使用這種類(lèi)型的曲線(xiàn)——它以全速向上飛入屏幕中，然后逐漸減速直到完全停止，這也可以應(yīng)用于從屏幕外部出現(xiàn)的其他卡片或?qū)ο蟆?
減速曲線(xiàn)，使動(dòng)畫(huà)更好地呈現(xiàn)
該曲線(xiàn)使物體在開(kāi)始時(shí)獲得速度，然后慢慢地將速度降回零。這種類(lèi)型的移動(dòng)是界面動(dòng)畫(huà)中最常用的。當(dāng)你猶豫在動(dòng)畫(huà)中使用哪種類(lèi)型的運(yùn)動(dòng)時(shí)，可以使用標(biāo)準(zhǔn)曲線(xiàn)。
標(biāo)準(zhǔn)曲線(xiàn)
根據(jù)《材料設(shè)計(jì)指南》，最好使用非對(duì)稱(chēng)曲線(xiàn)，使移動(dòng)看起來(lái)更加自然和真實(shí)。曲線(xiàn)的末端必須比它的開(kāi)始更加突出，以使加速的持續(xù)時(shí)間短于減速的持續(xù)時(shí)間。在這種情況下，用戶(hù)將更加關(guān)注元素的最終移動(dòng)，從而關(guān)注元素的新?tīng)顟B(tài)。
查看對(duì)稱(chēng)和非對(duì)稱(chēng)標(biāo)準(zhǔn)曲線(xiàn)之間的區(qū)別
當(dāng)對(duì)象從屏幕的一部分移至另一部分時(shí)，使用緩入緩出功能。在這種情況下，動(dòng)畫(huà)避免了引人注目的戲劇效果。
卡片在屏幕上的移動(dòng)以及相應(yīng)的不對(duì)稱(chēng)曲線(xiàn)
當(dāng)元素從屏幕上消失時(shí)，應(yīng)該使用相同的移動(dòng)類(lèi)型，但用戶(hù)可以在任何時(shí)候?qū)⑵浞祷氐较惹暗奈恢?。它涉及抽屜式?dǎo)航等。
抽屜式導(dǎo)航從屏幕上隱藏了標(biāo)準(zhǔn)曲線(xiàn)
從這些例子中可以看出，許多初學(xué)者忽略了一個(gè)基本的規(guī)律——開(kāi)始動(dòng)畫(huà)并不等于結(jié)束動(dòng)畫(huà)。與抽屜式導(dǎo)航一樣，它以減速度曲線(xiàn)出現(xiàn)，而以標(biāo)準(zhǔn)曲線(xiàn)消失。另外，根據(jù)谷歌的材料設(shè)計(jì)語(yǔ)言，物體出現(xiàn)的時(shí)間應(yīng)該更長(zhǎng)，以吸引更多的關(guān)注。
側(cè)面菜單的出現(xiàn)和消失，分別通過(guò)減速度和標(biāo)準(zhǔn)曲線(xiàn)實(shí)現(xiàn)
使用函數(shù)cubic-bezier()來(lái)描述曲線(xiàn)。之所以稱(chēng)為立方，是因?yàn)樗谒膫€(gè)點(diǎn)。在圖上已經(jīng)定義了具有坐標(biāo)的第一個(gè)點(diǎn)0;0（左下）和具有坐標(biāo)的最后一個(gè)點(diǎn)1;1（右上）。
基于此，我們僅需描述圖形上的兩個(gè)點(diǎn)，這些點(diǎn)由函數(shù)的四個(gè)參數(shù)給出cubic-bezier()：前兩個(gè)是坐標(biāo)x和y第一個(gè)點(diǎn)，后兩個(gè)是坐標(biāo)x和y第二個(gè)點(diǎn)。
為了簡(jiǎn)化曲線(xiàn)的工作，建議使用easings.net和cubic-bezier.com網(wǎng)站。第一個(gè)包含最常用曲線(xiàn)的列表，你可以將其參數(shù)復(fù)制到原型工具中。第二個(gè)來(lái)源使你可以使用曲線(xiàn)的不同參數(shù)，并立即查看到物體將是如何移動(dòng)的。
函數(shù)三次貝塞爾曲線(xiàn)的不同類(lèi)型的曲線(xiàn)及其參數(shù)
就像在芭蕾舞蹈設(shè)計(jì)中一樣，主要思想是在從一種狀態(tài)轉(zhuǎn)換為另一種狀態(tài)的過(guò)程中，引導(dǎo)用戶(hù)注意一個(gè)流動(dòng)的方向上。舞蹈編排有兩種類(lèi)型——平等交互和從屬交互。
平等交互意味著所有對(duì)象的外觀都遵循一個(gè)特定的規(guī)則。在這種情況下，所有卡片的外觀都被視為一種流程，可以引導(dǎo)用戶(hù)的注意力集中在一個(gè)方向上，即從上到下。如果我們不按照順序，那么用戶(hù)的注意力將會(huì)分散。所有元素同時(shí)出現(xiàn)看起來(lái)也會(huì)很糟糕。
用戶(hù)的注意力應(yīng)引導(dǎo)在一個(gè)流動(dòng)的方向上
對(duì)于表格視圖，它有點(diǎn)復(fù)雜。在這里，用戶(hù)的焦點(diǎn)應(yīng)指向?qū)蔷€(xiàn)，所以逐個(gè)地顯示元素是一個(gè)很糟糕的主意。單個(gè)展示元素會(huì)使動(dòng)畫(huà)過(guò)長(zhǎng)，并且用戶(hù)的注意力會(huì)呈鋸齒狀，這是錯(cuò)誤的。
卡片形式的對(duì)角線(xiàn)外觀
從屬交互意味著我們要有一個(gè)吸引用戶(hù)注意力的中心對(duì)象，而所有其他元素都從屬于它。這種類(lèi)型的動(dòng)畫(huà)給人一種有序的感覺(jué)，從而引起用戶(hù)對(duì)主要內(nèi)容的更多關(guān)注。
在其他情況下，用戶(hù)將很難知道該關(guān)注哪個(gè)對(duì)象，因此他的注意力將被分散。所以，如果有多個(gè)要設(shè)置動(dòng)畫(huà)的元素，則需要明確它們的運(yùn)動(dòng)順序，并盡可能將動(dòng)畫(huà)設(shè)置為最小的對(duì)象。
只有一個(gè)中心對(duì)象的動(dòng)畫(huà)很有必要，其余元素應(yīng)是被引導(dǎo)的。否則，用戶(hù)將不知道關(guān)注什么對(duì)象
根據(jù)材料設(shè)計(jì)語(yǔ)言，當(dāng)移動(dòng)的物體尺寸發(fā)生不均衡變化時(shí)，它們應(yīng)沿著弧線(xiàn)而不是直線(xiàn)移動(dòng)。這有助于使動(dòng)作更自然?！安怀杀壤笔侵肝矬w的高度和寬度的增加/減少是不對(duì)稱(chēng)的，即以不同的速度進(jìn)行(例如，一個(gè)正方形的卡片變成了一個(gè)長(zhǎng)方形)。
當(dāng)移動(dòng)的物體不按原有比例變化時(shí)，應(yīng)沿著弧線(xiàn)運(yùn)動(dòng)
當(dāng)物體按比例改變其大小時(shí)，使用沿直線(xiàn)的移動(dòng)。由于這種移動(dòng)的實(shí)現(xiàn)比較容易，因此通常會(huì)忽略不成比例的圓弧移動(dòng)的規(guī)則?？纯磳?shí)際應(yīng)用的例子，你會(huì)看到線(xiàn)性運(yùn)動(dòng)的主導(dǎo)地位。
尺寸的比例變化是沿著直線(xiàn)上運(yùn)動(dòng)的
曲線(xiàn)上的運(yùn)動(dòng)可以通過(guò)兩種方式實(shí)現(xiàn)：第一種稱(chēng)為垂直向外——物體開(kāi)始水平移動(dòng)并以垂直移動(dòng)結(jié)束；第二種是水平向外——物體開(kāi)始垂直移動(dòng)并以水平運(yùn)動(dòng)結(jié)束。
物體沿曲線(xiàn)的移動(dòng)路徑必須與滾動(dòng)界面的主軸線(xiàn)重合。例如，在下一張圖片上，我們可以上下滾動(dòng)界面，相應(yīng)的卡片以“垂直輸出”的方式展開(kāi)-首先從右到下，然后向下。反向移動(dòng)以相反的方式進(jìn)行-即卡片首先垂直上升，最后水平移動(dòng)。
卡片的展開(kāi)/折疊方向應(yīng)與界面的軸線(xiàn)一致
如果移動(dòng)物體的路徑彼此相交，則它們將無(wú)法彼此移動(dòng)。這些物體應(yīng)通過(guò)減慢或加快自身的速度，為另一個(gè)物體的移動(dòng)留下足夠的空間。另一種選擇-他們只是推開(kāi)其他物體。為什么？因?yàn)槲覀兗僭O(shè)界面中的所有物體都位于一個(gè)平面中。
在移動(dòng)過(guò)程中，物體之間不應(yīng)相互穿過(guò)，而應(yīng)為另一個(gè)物體的移動(dòng)留下空間
另一種情況，移動(dòng)物體可以高于其他物體。但也不能通過(guò)其他物體消失或移動(dòng)。為什么？因?yàn)槲覀兿嘈沤缑嬖氐男袨榉衔锢矶桑F(xiàn)實(shí)世界中沒(méi)有任何固體物體能夠做到這一點(diǎn)。
物體可以超越其他物體，然后移動(dòng)
從以上總結(jié)的規(guī)則和原則能明白，UX界面動(dòng)畫(huà)是反映物理世界中存在的運(yùn)動(dòng)，如摩擦、加速等，模仿現(xiàn)實(shí)世界存在的行為。我們可以創(chuàng)建一個(gè)序列，讓用戶(hù)能夠理解期望從界面得到什么。如果動(dòng)畫(huà)是正確構(gòu)建的，那么它不會(huì)太引人注目，并且不會(huì)分散用戶(hù)的目標(biāo)，動(dòng)畫(huà)不應(yīng)該影響用戶(hù)使用或完成任務(wù)。
但是不要忘記動(dòng)畫(huà)更多的是一種藝術(shù)而不是科學(xué)，所以最好的方法是在用戶(hù)身上試驗(yàn)和測(cè)試你的決定。
文章來(lái)源：站酷 作者：UX辭典
藍(lán)藍(lán)設(shè)計(jì)( m.ssll180.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)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.ssll180.com