起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識譯文丨做好動效你需要了解的細節
動效在今年融入了界面設計中，但總的來說很多的動效仍然沒有達標。對于高級的動畫師而言，必須嚴格的掌握動畫的節奏、時間、速度、構圖、結構和動力學，而本文是關于國外大神的一些經驗，做好動效我們需要了解的一些細節。
譯者注：本篇文章有點難懂，我花了一天時間才把這篇給翻譯完。為方便大家理解且在不影響知識點表達的基礎上，我對原文做了一些刪減，如果有不對的地方，還望各位多多包涵，謝謝了！）
動效的設計，最關鍵的就是對時間的把控，時間是至關重要的。如果不考慮動效時間，你就不肯定算不上是合格的動效設計師。高級動畫師能熟練掌握動畫的節奏、時間、速度、構圖、結構和動力學。
現如今到了2018年，動畫終于融入了界面設計中，但很多都沒有達到目標。它們在動畫上還顯得比較初級，而沒有考慮給用戶合理的動畫感受。經典動畫中蘊含著豐富的知識，我們不需要重復造輪子。
動畫能抓住用戶的注意力。當你坐在電影院看電影之前，你可能會注意到出口標志，屏幕的邊緣，你前排人的腦袋。如果這部電影非常吸引人，所有雜念都會消失，你會感覺你自己已經沉靜在電影中。
換句話說，直到你身邊有一些白癡去看他們的Instagram通知時，你才又回到了現實。
我們通常會注意到在運動的事物，當它們靜止時又會逐漸被忽略。運動能吸引我們的注意力，所以我們應該要考慮如何利用它。
視覺疲勞
僅學習“迪士尼的12個動畫原理”是不夠的。
一個經典的追波回復
初級的動效設計師傾向于把所有東西都做得過于活躍，追求炫技，他們不想浪費任何一個關鍵幀，忘記了它會讓眼睛疲勞。
有一個不恰當的例子：觀眾坐著，設計師設計了一堆誘餌，試圖向他們炫耀辛苦做出來的作品。這一點在像dribbble這樣的社區得到了印證，用戶在看到動畫時會興奮地點贊轉發動畫，因為他們以前從未見過如此炫酷的動畫。而事實上，最好的動畫應該是無形的。
這是我們在界面中看到一個經典錯誤：彈簧動畫的濫用。
晃眼的界面元素
我們的注意力沒意義的被震蕩的界面元素所吸引。，我們的視線被集中在它上面，因為它需要很長的時間才能看清楚。 界面看起來有懸念，我們渴望終結它的跳動。
改進，控制界面彈跳時間
如果減少夸張的振幅，元素上的內容會更容易關注到。這比之前的會簡潔很多，但是其實還是會有一個比較夸張的緩沖。但其實還有改進空間，自己的感受才是最重要的。
讓我們聊聊形變
點擊按鈕變成了漢堡菜單，然后再次點擊變成了關閉，在兩種形態之間往復。
另一個沒有意義的案例，彈跳過渡的漢堡菜單。即使沒有彈簧效果，它也很能吸引人的注意力。我們不需要太夸張的形式來感知一個狀態的變化，也不需要把所有的東西都成動的。
晃眼的漢堡圖標
讓我們結合內容來看看這個動效，留心你自己眼睛看到的地方，你是否注意到：在內容較大變動之后，這個圖標在很長時間內擺動？
最重要的內容應該是按鈕觸發的界面變化，而不是讓你去看那個過度彈跳的漢堡菜單。
一個更直接的方法是完全不改變圖標。相反，我們可以專注于使用微妙的動畫來進行交互。這不是為了吸引眼球，而是一個指導性原則。這個新按鈕的特點是先向下凹陷，然后快速的彈回，顯得自然輕松，強調按下一個按鈕的感覺。
謹防視覺疲勞
想想如何去引導用戶視線，這對做好動效來說很有幫助。想象一下你的眼球在眼眶里旋轉，快速移動、加速、減速。當你做動畫時，其實你是在引導視線。你在哪里需要著重強調？視線應該放在哪里？
更多的追蹤需要更多的身體和精神投入，是否值得用視覺疲勞來換取使用一些夸張的動畫？需要去平衡動效的細微差別，考慮最佳的適應性。
理性vs感性
遵從自己的內心感受，不要被那些僵死的規定給套住，并不是非黑即白，比如：像IBM和谷歌的一些公式理論，時刻保持懷疑的態度。
不要過于相信數據，首先應該相信自己的眼睛和感覺。如今的一些規則是可以被打破的，好的動畫能給人帶來美好體驗，而你則是可以創造這些的人。
考慮你編排的每個元素的意義和目的，嚴格按照理性數據做動畫也不總是好的，有時候，感覺可能才是正確的。
把這些例子放在一起進行比較。它們在做同樣的事情，但是時間節點不同。左邊的例子太機械化了，彈出界面不一定要從0%的比例開始，縮放的比例跨度也不一定非要100%，這顯得不夠簡潔。
通過略微調整開始時間來設計一個更清爽的版本，我們需要做的就是用眼睛注意觀察。在右邊，我們從90%開始，很快接近100%，我們感受到了變化，而不必坐下來觀察0-100之間的每一個值。
沒有人有時間干這事！
譯者注：作者提到的那本書的一張插圖，有興趣的可以去翻翻，書的地址是：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）
來嘗試一個更加抽象的例子，在屏幕上移動一個圖形：
一個線性的，機械的移動，對嗎？
現在，讓我們一起來看看調整后的結果，快速地滑過大部分距離，同時使用快速緩沖來實現停止。
動態模糊
調整曲線
如何更進一步優化呢？讓我們再來細心雕琢一下曲線，緩進緩出，如果動作太快，還可以添加一個動態模糊來引導視覺。
用圖表來看時間
經驗豐富的動畫師能通過細微差別來感知時間，眼睛需要訓練來觀察和感知時間。雖然這種能力需要幾年的時間來培養，但仍有可能通過計算機來剖析時間，說起來還得謝謝電腦！
http://www.navone.org/HTML/Tutorial_Splines2_2.html
補間動畫通常使用圖形編輯器的概念，讓你可以更加精確的調整時間。雖然界面上老鼠窩一樣的曲線看著就讓人害怕，但其實它的核心很簡單。圖表上只是描述隨時間變化的值，再把這些值附加到屬性上。（例如：縮放、位置、旋轉、顏色、光澤、粗糙度等）
Motionscope
當我們處理這些圖形的形狀時，我們實際上是在編排時間。使用MotionScope(我們在Thinko的內部工具)，讓我們看看時間和間隔是如何與圖形相關聯的。它就像工程師的控制臺，或者攝影師的直方圖。
步幅 /阻塞 https://framer.cloud/aAdpl/
緩入 https://framer.cloud/vKGrR
緩入和緩出 https://framer.cloud/tfOhN
彈簧模擬 https://framer.cloud/deNRR
圓周運動可以用正弦和余弦函數來描述 https://framer.cloud/cTAKX
自定義的貝塞爾曲線 https://framer.cloud/lWHuB
多重復雜運動 https://framer.cloud/jBPYO
（譯者注：以上這些可能需要懂一些代碼，因為涉及到動畫的開發實現了，感興趣的設計師也可以了解下。）
如果我們以層的形式來管理動畫，就可以將復雜的運動縮減為更方便管理的維度。通過控制變量的好處就是方便觀察原始動畫，我們可以通過一次只調整一個動畫層來調試動畫。
總結
全文看下來，我覺得有至少有幾點是需要去關注到的：
- 不要為了動畫而動畫，做動畫的目的是引導用戶視線；
- 好的動畫是無形的，對用戶的核心需求干擾越小越好；
- 不要設計過度彈跳的動畫，要簡潔而不是繁瑣；
- 不要死板的套用數據做動畫，要遵從自己的內心感受，感性與理性相結合；
- 緩動動畫會比線性動畫更加自然，速度快的時候需要考慮動態模糊。
資源分享
有一座大山的知識需要你去學習，但幸運的是，其他動畫師已經寫了很多很棒的文章。
以下是一些有價值的資料可供參考：
- 動態保留：http://www.keithlango.com/tutorials/march05/movingHold.htm
- 迪士尼的7個動畫原則：（http://johnkstuff.blogspot.com/2009/02/anticipations.html）
- 12個動畫的基本原則：（http://blog.animationmentor.com/arc-the-12-basic-principles-of-animation）
- 皮克斯的Victor Navone的動畫函數曲線：（http://www.navone.org/HTML/Tutorial_Splines2.htm）
相關文章
過渡界面：（https://medium.com/@pasql/transitional-interfaces-926eb80d64e3）
空間界面：（https://medium.com/elepath-exports/spatial-interfaces-886bccc5d1e9）
我的朋友 Marcus Eckert有一個非常棒的訪談，主要講差值動畫的：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
如何像專業人士一樣學習：https://chicounity3d.wordpress.com/2014/05/23/how-to-lerp-like-a-pro/
理論是一回事，如何實現這些想法又是另一回事了。在不需要懂開發的情況下，使用LightBox（https://uselightbox.com/）這個軟件會很方便。
原文鏈接：https://blog.prototypr.io/common-ux-mistakes-made-by-business-developers-e837d0b31379
原文作者：Jason Teunissen
譯者：彩云Sky，公眾號：彩云譯設計
本文由 @彩云Sky 翻譯發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
感謝
很好，受教了
感謝