動效篇-從loading開始

2017年12月份起，團隊開始對 『洋蔥數學』 APP中的一些細節，進行統一規範化的重設計，這其中就包括loading的規範化使用，及動畫的重設計，很幸運組織將動畫設計的部分交給了我，也讓我從中學到了很多，在此就與大家分享這個項目的前世今生。

項目背景-loading的規範與創意

在APP功能性做到基本完善時，作為設計師總是需要思考，如何讓APP每一部分更為統一規範。此次對於loading的優化也是如此，在之前的項目中因為是不同的人參與設計與開發，一直沒有進行統一的梳理，就造成了不同頁面的loading並不太一致的情況，如圖所示：

我們經常可以在一些APP中看到有趣的loading動畫，在此次的優化項目中，為了讓loading變得更有創意，動畫的設計是最早被考慮進去的。如何將洋蔥的設計風格與動畫結合，是我在製作過程中一直在思考的問題，在這裡我會跟大家分享項目中遇到的問題及我的思考，也會在文章的後半段分享一些關於動效的感悟。

從何入手-Loading動畫的可能性

在探索階段，我嘗試著去聯想一些與學習有關的東西，比如一支筆、一本書、洋蔥數學logo、矢量圖形等，然後我做了以下的一些嘗試...

筆學習很貼切，但也可以代表任何一個教育類APP，表意太過寬泛。矢量動畫的效果還是太過於單調缺乏創意。

在嘗試了多種方案後，開始回歸問題本身，重新思考為什麼而設計？loading動畫需要承載怎樣的信息？這些信息是否能夠代表洋蔥數學？在一系列的設計倒推之後，發現loading應該具有一些品牌屬性，而不只是某一類型的事物。

結合洋蔥的定位及在洋蔥現有用戶的認知中，吉祥物『蔥寶』的形象對於loading設計的來說，不失為一個好的選擇。其一，蔥寶以為大多數的用戶所熟知，且我們的用戶也十分喜愛它。其二，在APP『蔥寶』這一形象設計也被大量引用，逐漸成為一個貫穿APP的設計元素，loading採用蔥寶更容易被用戶所接受，也與現在的設計風格更為統一。其三，我們不希望將loading做的很大，致使它過於影響用戶在操作上的體驗，在盡量小的有限尺寸中，蔥寶也是一個很好的選擇。

在確定了用『蔥寶』的形象作為載體後，我嘗試了兩種方案進行實現。第一種，是一個在不斷切換表情的蔥寶形象，但當demo出來以後發現，表情的變化太細微了，蔥寶的藍色佔比又太大，在切換的時候很容易讓人有一種沒有在切換的感覺。由此引出了第二種方案，即選擇一個表情深入刻畫，讓關注點更為聚焦。跟隨這個想法，我嘗試去做很多的表情進行選擇。

在表情的選擇上，希望傳達更加正向積極的情感，帶有負面情感的表情則不太適合，在這一大前提下我們選擇了耍酷、小丑和愛心這三個表情。並以動畫隨機播放的形式，製造更多的驚喜感。

動畫的關鍵-時間、節奏、情感、氛圍、技巧

動畫設計是一個很複雜的工種，需要考慮到的因素很多，基本的如時間的把控、節奏的把控、創意的體現等，複雜的如動畫與音效的結合。好在，動畫在APP中需要考慮的元素會稍少一點，但也需要一些基本原理的支撐。在此次loading動畫的設計中，我希望能夠製作出更加可愛、有趣、細膩的動畫。而因為最終確定的設計方向的特殊性，致使在設計過程中不僅需要考慮到時間、節奏的把控，還需要考慮到表情的合理傳達，這是表情動畫設計的關鍵。在這裡我會從以下5點，分享我在這個項目中的一些感受。

1.時間的影響-如何把握節奏

loading在不影響用戶操作的前提下，動畫的時長需要保持在在600-800毫秒以內。在短時長中需要將動畫節奏加快，來確保動畫的完整性。同時減去循環動畫的空白間隔，需要在有限的時長中把握好動畫的節奏。

短時長、快節奏的動畫，需要設計者能夠很好的把握關鍵的動畫節點，拋掉一些不必要的動畫效果，盡量在短時間內將必須要動的點解釋清楚，並將每一個效果的時間壓縮。比如眨眼這個表情。

2.真實表達-緩動的重要性

在現實生活中，因為有摩擦力等等因素的影響，所以不會存在線性運動既勻速運動。在製作動畫時，添加緩動不僅可以讓動畫更加有趣，還可以讓動畫更加真實。

左面的小球真實的還原了現實中的加速與減速，相反，右面的小球則僅是跟隨曲線運動，而沒有表現出力的存在，這樣的運動在現實生活中也是不存在的。

3.生動的表情-五官聯動的重要性

表情動畫的製作需要注意的關鍵點在於五官的聯動性。大致的意思是說，在做每一個特定表情是不能只考慮單個五官的動畫，也需要其他五官的配合，比如『害羞』這個表情，嘴巴張開的同時還會配合眼睛的伸縮、左右搖擺的聯動，使得表情更生動貼切。

4.營造氛圍-裝飾的重要性

在做『小丑』這一個表情時，為了能夠營造一些馬戲團的氛圍感，特意在其周圍添加了一些絲帶灑落的效果，讓這個表情變得更為活潑。同樣的道理在『耍酷』這一表情上也是一樣的，閃爍的星星讓表情的表達更有代入感。當然裝飾元素頁需要分情況而定，在一些比較細微的表情上還是需要酌情考慮的。

5.動畫的欺騙-眼見不一定為實

在動畫中有很多根據人的視覺錯覺來製造真實感覺的例子，這次的loading動畫中，『小丑』這個表情，就是利用這一點。為五官添加位移及縮放效果，來模擬蔥寶在旋轉的效果。同樣的方法也可用在人物的轉面動畫上。

如何落地-高度還原動效設計

在真實的項目中關於動效的實現，一直是UI設計師/動效設計師的痛點，也致使很多很好的動效設計沒有辦法真正落地。在這次loading的設計中，我們使用了Lottie這個開源的開發插件，大大的減少了開發成本。在最初也曾想使用序列幀圖片來實現，但序列幀還是會產生丟幀的情況，導致動畫不能夠無差別呈現。

Lottie需要設計師將在AE中製作的動畫，使用一個Bodymove的插件導齣動畫的json文件，來進行實現。但Lottie現階段還是有一些局限的，比如更適用於界面中一些比較獨立的動畫元素，例如點贊、收藏、loading、引導頁等等，這些不存在界面與界面之間交互的動畫元素，一旦涉及交互-界面切換則需要開發小哥哥們幫忙了。

ps: 如果有對Lottie有興趣的小夥伴，歡迎一起討論。對於異常載入的UI規範，如果大家感興趣的話，也會在之後進行分享的，本篇主要是講loading動畫的部分，不代表項目的全部內容哦~

推薦閱讀：