動效在今年融入了界面設(shè)計(jì)中，但總的來說很多的動效仍然沒有達(dá)標(biāo)。對于高級的動畫師而言，必須嚴(yán)格的掌握動畫的節(jié)奏、時(shí)間、速度、構(gòu)圖、結(jié)構(gòu)和動力學(xué)，而本文是關(guān)于國外大神的一些經(jīng)驗(yàn)，做好動效我們需要了解的一些細(xì)節(jié)。

譯者注：本篇文章有點(diǎn)難懂，我花了一天時(shí)間才把這篇給翻譯完。為方便大家理解且在不影響知識點(diǎn)表達(dá)的基礎(chǔ)上，我對原文做了一些刪減，如果有不對的地方，還望各位多多包涵，謝謝了?。?/p>

動效的設(shè)計(jì)，最關(guān)鍵的就是對時(shí)間的把控，時(shí)間是至關(guān)重要的。如果不考慮動效時(shí)間，你就不肯定算不上是合格的動效設(shè)計(jì)師。高級動畫師能熟練掌握動畫的節(jié)奏、時(shí)間、速度、構(gòu)圖、結(jié)構(gòu)和動力學(xué)。

現(xiàn)如今到了2018年，動畫終于融入了界面設(shè)計(jì)中，但很多都沒有達(dá)到目標(biāo)。它們在動畫上還顯得比較初級，而沒有考慮給用戶合理的動畫感受。經(jīng)典動畫中蘊(yùn)含著豐富的知識，我們不需要重復(fù)造輪子。

動畫能抓住用戶的注意力。當(dāng)你坐在電影院看電影之前，你可能會注意到出口標(biāo)志，屏幕的邊緣，你前排人的腦袋。如果這部電影非常吸引人，所有雜念都會消失，你會感覺你自己已經(jīng)沉靜在電影中。

換句話說，直到你身邊有一些白癡去看他們的Instagram通知時(shí)，你才又回到了現(xiàn)實(shí)。

我們通常會注意到在運(yùn)動的事物，當(dāng)它們靜止時(shí)又會逐漸被忽略。運(yùn)動能吸引我們的注意力，所以我們應(yīng)該要考慮如何利用它。

視覺疲勞

僅學(xué)習(xí)“迪士尼的12個(gè)動畫原理”是不夠的。

一個(gè)經(jīng)典的追波回復(fù)

初級的動效設(shè)計(jì)師傾向于把所有東西都做得過于活躍，追求炫技，他們不想浪費(fèi)任何一個(gè)關(guān)鍵幀，忘記了它會讓眼睛疲勞。

有一個(gè)不恰當(dāng)?shù)睦樱河^眾坐著，設(shè)計(jì)師設(shè)計(jì)了一堆誘餌，試圖向他們炫耀辛苦做出來的作品。這一點(diǎn)在像dribbble這樣的社區(qū)得到了印證，用戶在看到動畫時(shí)會興奮地點(diǎn)贊轉(zhuǎn)發(fā)動畫，因?yàn)樗麄円郧皬奈匆娺^如此炫酷的動畫。而事實(shí)上，最好的動畫應(yīng)該是無形的。

這是我們在界面中看到一個(gè)經(jīng)典錯(cuò)誤：彈簧動畫的濫用。

晃眼的界面元素

我們的注意力沒意義的被震蕩的界面元素所吸引。，我們的視線被集中在它上面，因?yàn)樗枰荛L的時(shí)間才能看清楚。 界面看起來有懸念，我們渴望終結(jié)它的跳動。

改進(jìn)，控制界面彈跳時(shí)間

如果減少夸張的振幅，元素上的內(nèi)容會更容易關(guān)注到。這比之前的會簡潔很多，但是其實(shí)還是會有一個(gè)比較夸張的緩沖。但其實(shí)還有改進(jìn)空間，自己的感受才是最重要的。

讓我們聊聊形變

點(diǎn)擊按鈕變成了漢堡菜單，然后再次點(diǎn)擊變成了關(guān)閉，在兩種形態(tài)之間往復(fù)。

另一個(gè)沒有意義的案例，彈跳過渡的漢堡菜單。即使沒有彈簧效果，它也很能吸引人的注意力。我們不需要太夸張的形式來感知一個(gè)狀態(tài)的變化，也不需要把所有的東西都成動的。

晃眼的漢堡圖標(biāo)

讓我們結(jié)合內(nèi)容來看看這個(gè)動效，留心你自己眼睛看到的地方，你是否注意到：在內(nèi)容較大變動之后，這個(gè)圖標(biāo)在很長時(shí)間內(nèi)擺動？

最重要的內(nèi)容應(yīng)該是按鈕觸發(fā)的界面變化，而不是讓你去看那個(gè)過度彈跳的漢堡菜單。

一個(gè)更直接的方法是完全不改變圖標(biāo)。相反，我們可以專注于使用微妙的動畫來進(jìn)行交互。這不是為了吸引眼球，而是一個(gè)指導(dǎo)性原則。這個(gè)新按鈕的特點(diǎn)是先向下凹陷，然后快速的彈回，顯得自然輕松，強(qiáng)調(diào)按下一個(gè)按鈕的感覺。

謹(jǐn)防視覺疲勞

想想如何去引導(dǎo)用戶視線，這對做好動效來說很有幫助。想象一下你的眼球在眼眶里旋轉(zhuǎn)，快速移動、加速、減速。當(dāng)你做動畫時(shí)，其實(shí)你是在引導(dǎo)視線。你在哪里需要著重強(qiáng)調(diào)？視線應(yīng)該放在哪里？

更多的追蹤需要更多的身體和精神投入，是否值得用視覺疲勞來換取使用一些夸張的動畫？需要去平衡動效的細(xì)微差別，考慮最佳的適應(yīng)性。

理性vs感性

遵從自己的內(nèi)心感受，不要被那些僵死的規(guī)定給套住，并不是非黑即白，比如：像IBM和谷歌的一些公式理論，時(shí)刻保持懷疑的態(tài)度。

不要過于相信數(shù)據(jù)，首先應(yīng)該相信自己的眼睛和感覺。如今的一些規(guī)則是可以被打破的，好的動畫能給人帶來美好體驗(yàn)，而你則是可以創(chuàng)造這些的人。

考慮你編排的每個(gè)元素的意義和目的，嚴(yán)格按照理性數(shù)據(jù)做動畫也不總是好的，有時(shí)候，感覺可能才是正確的。

把這些例子放在一起進(jìn)行比較。它們在做同樣的事情，但是時(shí)間節(jié)點(diǎn)不同。左邊的例子太機(jī)械化了，彈出界面不一定要從0%的比例開始，縮放的比例跨度也不一定非要100%，這顯得不夠簡潔。

通過略微調(diào)整開始時(shí)間來設(shè)計(jì)一個(gè)更清爽的版本，我們需要做的就是用眼睛注意觀察。在右邊，我們從90%開始，很快接近100%，我們感受到了變化，而不必坐下來觀察0-100之間的每一個(gè)值。

沒有人有時(shí)間干這事！

譯者注：作者提到的那本書的一張插圖，有興趣的可以去翻翻，書的地址是：https://www.amazon.com/Animators-Survival-Kit-Richard-Williams/dp/0571202284/ref=as_li_ss_tl?ie=UTF8&linkCode=sl1&tag=psql-20&linkId=709f0b290533ce78ebbc9051c627d5af）

來嘗試一個(gè)更加抽象的例子，在屏幕上移動一個(gè)圖形：

一個(gè)線性的，機(jī)械的移動，對嗎？

現(xiàn)在，讓我們一起來看看調(diào)整后的結(jié)果，快速地滑過大部分距離，同時(shí)使用快速緩沖來實(shí)現(xiàn)停止。

動態(tài)模糊

調(diào)整曲線

如何更進(jìn)一步優(yōu)化呢？讓我們再來細(xì)心雕琢一下曲線，緩進(jìn)緩出，如果動作太快，還可以添加一個(gè)動態(tài)模糊來引導(dǎo)視覺。

用圖表來看時(shí)間

經(jīng)驗(yàn)豐富的動畫師能通過細(xì)微差別來感知時(shí)間，眼睛需要訓(xùn)練來觀察和感知時(shí)間。雖然這種能力需要幾年的時(shí)間來培養(yǎng)，但仍有可能通過計(jì)算機(jī)來剖析時(shí)間，說起來還得謝謝電腦！

http://www.navone.org/HTML/Tutorial_Splines2_2.html

補(bǔ)間動畫通常使用圖形編輯器的概念，讓你可以更加精確的調(diào)整時(shí)間。雖然界面上老鼠窩一樣的曲線看著就讓人害怕，但其實(shí)它的核心很簡單。圖表上只是描述隨時(shí)間變化的值，再把這些值附加到屬性上。（例如：縮放、位置、旋轉(zhuǎn)、顏色、光澤、粗糙度等）

Motionscope

當(dāng)我們處理這些圖形的形狀時(shí)，我們實(shí)際上是在編排時(shí)間。使用MotionScope(我們在Thinko的內(nèi)部工具)，讓我們看看時(shí)間和間隔是如何與圖形相關(guān)聯(lián)的。它就像工程師的控制臺，或者攝影師的直方圖。

步幅 /阻塞 https://framer.cloud/aAdpl/

緩入 https://framer.cloud/vKGrR

緩入和緩出 https://framer.cloud/tfOhN

彈簧模擬 https://framer.cloud/deNRR

圓周運(yùn)動可以用正弦和余弦函數(shù)來描述 https://framer.cloud/cTAKX

自定義的貝塞爾曲線 https://framer.cloud/lWHuB

多重復(fù)雜運(yùn)動 https://framer.cloud/jBPYO

（譯者注：以上這些可能需要懂一些代碼，因?yàn)樯婕暗絼赢嫷拈_發(fā)實(shí)現(xiàn)了，感興趣的設(shè)計(jì)師也可以了解下。）

如果我們以層的形式來管理動畫，就可以將復(fù)雜的運(yùn)動縮減為更方便管理的維度。通過控制變量的好處就是方便觀察原始動畫，我們可以通過一次只調(diào)整一個(gè)動畫層來調(diào)試動畫。

總結(jié)

全文看下來，我覺得有至少有幾點(diǎn)是需要去關(guān)注到的：

1. 不要為了動畫而動畫，做動畫的目的是引導(dǎo)用戶視線；
2. 好的動畫是無形的，對用戶的核心需求干擾越小越好；
3. 不要設(shè)計(jì)過度彈跳的動畫，要簡潔而不是繁瑣；
4. 不要死板的套用數(shù)據(jù)做動畫，要遵從自己的內(nèi)心感受，感性與理性相結(jié)合；
5. 緩動動畫會比線性動畫更加自然，速度快的時(shí)候需要考慮動態(tài)模糊。

資源分享

有一座大山的知識需要你去學(xué)習(xí)，但幸運(yùn)的是，其他動畫師已經(jīng)寫了很多很棒的文章。

以下是一些有價(jià)值的資料可供參考：

• 動態(tài)保留：http://www.keithlango.com/tutorials/march05/movingHold.htm
• 迪士尼的7個(gè)動畫原則：（http://johnkstuff.blogspot.com/2009/02/anticipations.html）
• 12個(gè)動畫的基本原則：（http://blog.animationmentor.com/arc-the-12-basic-principles-of-animation）
• 皮克斯的Victor Navone的動畫函數(shù)曲線：（http://www.navone.org/HTML/Tutorial_Splines2.htm）

相關(guān)文章

過渡界面：（https://medium.com/@pasql/transitional-interfaces-926eb80d64e3）

空間界面：（https://medium.com/elepath-exports/spatial-interfaces-886bccc5d1e9）

我的朋友 Marcus Eckert有一個(gè)非常棒的訪談，主要講差值動畫的：http://push-conference.com/news/getting-from-a-to-b-the-art-of-interpolation-by-marcus-eckert/

一些對提升感知能力有幫助的想法：https://amzn.to/2rno2bV

動畫師的生存工具包：https://amzn.to/2w8NrM0

如何像專業(yè)人士一樣學(xué)習(xí)：https://chicounity3d.wordpress.com/2014/05/23/how-to-lerp-like-a-pro/

理論是一回事，如何實(shí)現(xiàn)這些想法又是另一回事了。在不需要懂開發(fā)的情況下，使用LightBox（https://uselightbox.com/）這個(gè)軟件會很方便。

原文鏈接：https://blog.prototypr.io/common-ux-mistakes-made-by-business-developers-e837d0b31379

原文作者：Jason Teunissen

譯者：彩云Sky，公眾號：彩云譯設(shè)計(jì)

本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議