譯文丨做好動效你需要了解的細(xì)節(jié)

4 評論 9204 瀏覽 50 收藏 17 分鐘

動效在今年融入了界面設(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é)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 感謝

    回復(fù)
  2. 很好,受教了

    來自江蘇 回復(fù)
    1. 感謝

      回復(fù)