如何讓動效更有細節-4

這次我們繼續《如何讓動效更有細節-3》中的話題。

讓動效設計更有細節，這次我們聊聊多圖形運動的運動趨勢一致性設計。

什麼是多圖形運動的運動趨勢一致性？

指的就是組成一個控制元件或者多個控制元件組的元素，在參與介面動畫時的運動趨勢，要保持一致。這個一致性建立在多元素組成的控制元件基礎上，那些結構單一的控制元件不在本次討論範圍內。

你可以將組成介面控制元件的所有要素，如文字、圖示、圖形等當成一起在舞臺上跳群舞的演員。他們需要保持一個一致的舞動韻律，才可能跳出優美的群舞。而合理安排其中的每個演員，才會讓動效的設計更加合理，也更具細節美感。

要做到這一點，主要需要注意以下三點：

1.主軸運動驅動

主軸運動指的是為多圖形構成的控制元件所設計的主體運動趨勢，這很像海中的魚群遊動。不同之處在於，這是一個明顯經過設計的，有目的的運動趨勢。其中的單個圖形運動趨勢一定為整體運動服務，並是整體運動的組成部分。

所以，主軸運動驅動的動力源選擇就很重要。一般來說，我們都會選擇將原本複雜的結構進行拆解，然後將代表性元素作為這個動力源，來驅動整個動效設計的運動趨勢。

我們在《什麼是前奏設計 2/2》一文中所列舉的例項用的就是這種方法。

這裡再總結一下的話，可以簡單的認為主體運動趨勢可以分成三個設計步驟：

第一步，抽離關鍵元素，作為主體運動的動力源；

第二步，根據具體的功能需要，對關鍵元素進行動作設計；

第三步，將控制元件中的其他元素融入主軸運動趨勢中，完成設計。

如果想要設計出足夠合理、擁有細節和生動的動效，第三步中的一些細節處理就顯得比較重要了。這裡主要解決的問題就是圖形間配合相應。

2.圖形間配合響應

圖形間的運動趨勢一定是一致的，同時也是有互相互動的。除了主軸運動元素外，相配合的其他圖形應該以互相互動和配合的關係存在。否則就只是多元素的堆積或者拼接，而無法合理解釋多圖形運動的合理性。

多圖形之間的互動作用非常簡單，就是對前後圖形的運動有所響應。

舉個簡單的例子，我們有下圖這樣的圖形設計：


假設將它們設計成獲得類的感覺，也就是從四周匯聚的運動趨勢，要做出圖形之間有互相互動的運動形式，就需要中央圖形與外圍圖形的運動有互相影響。

首先，我們利用主軸圖形設計出外圍圖形的動畫：


然後是中央圖形的動畫。如果沒有互相作用，它們的效果看起來是這樣的：


為它們加入互動，可以是外部圖形入場後對中央圖形的撞擊：


也可以是中央圖形對外圍圖形運動趨勢的一種延續：


這就是最簡單的設計出圖形間配合動畫的方式了。控制元件中的圖形元素越多，這種互相作用的細節也就越多。那怎麼才能讓它們看起來還是有序的呢？

一個方法是遵循主軸運動的趨勢，什麼時段是什麼趨勢，就只按照當前時段的趨勢去設計運動，不要強加過多的互動動作；另一個方法就是在前一個的基礎上，為各個元素設定相應的次序，構成合適的節奏。

3.節奏錯落有序

如何安排各個圖形元素的入場順序，對設計師來說似乎是一件比較難的事情，但事實上未必。

設計師只需要搞明白一件事就能讓這件事變得簡單。那就是現實中的物體運動是如何進行的。自然的運動從來不會嚴格的整齊劃一。板正有秩序的運動一定是人造物的特徵。

而我們為了讓動效的運動顯得自然和有趣，通常就會模仿自然運動。就會將原本板正的運動次序稍作處理，從而顯得自然。

比如下圖的圖形：


如果為它們設計摔入的入場動畫，嚴格的整齊劃一時，就是下圖的樣子：


但如果稍微為它們錯開一點點次序，按照從左到右的閱讀順序，會是這個樣子：


如果此時的效果還讓人感到“秩序”，那就是還不夠錯落，我們索性可以設計成這樣：


這是不是就顯得比較自然了呢？

實際工作中，我們處理的問題會比這個簡單的示例複雜很多，這時候就需要一個軸線圖來處理相應的問題：


從左到右是秩序到混亂，但我們要設計的效果大部分處於中間。有時候會為需要秩序感的東西多做一些稍顯整齊的動作，而有時候又會偏錯落一些。較少的情況下會做完全的整齊動作和完全的混亂動作。

動畫節奏與組成它的圖形的秩序強相關。這些我都會在動畫的節奏感中詳細討論，這裡就不再贅述。

想讓動效的設計更有細節，你是不是也有一些想法呢，歡迎提供反饋和意見。

以上。


來源：COTA五號
原文：https://mp.weixin.qq.com/s/2k3nJeRWW0fSpE17RNW3Pw