什麼是前奏設計 2/2

在本系列的前一篇文章“【半周談】017 什麼是前奏設計 1/2”中，我們總結了三段式結構動效的設計要點：

1，判斷介面的互動節點重要程度，以決定前奏設計時長；

2，提煉核心圖形元素，作為前奏演繹的主要元素，並貫穿三個階段；

3，需要注意動作與時長的組合設計，以構建合適的張力。

這一篇將舉一個例項模型來說明如何具體的設計出這樣的動效。

如何設計前奏？

正是因為節奏有序的三段式結構能夠體現出十足的力道和視覺衝擊力，在進行動態設計的時候，如果注意進行三段式設計思維的培養，也會讓原先設計出的單調平鋪的動態效果，顯得更具節奏感。

如果結合以前文章（【半周談】013 五種演繹法拯救單調）所講的，前奏設計其實就是我們提到過的“動效設計師補充靜態設計稿前後時空狀態”中的前部時空。即你需要在靜態設計稿的基礎上提煉出關鍵元素，將該元素進行演繹以構成前奏（和主軸），繼而牽引主體入場，乃至於延續到拖尾階段。

從這層意義上講，前奏其實也是吸引玩家注意力的一個引子，是動效設計“連線”意義的一種體現。

從這套邏輯出發，前奏設計的重點就是提煉靜態設計稿中的核心元素。這種核心元素基本上會構成將要設計的那段動效的主軸元素。

比如我們有下圖這樣的一張設計稿（這是我隨便製作的一個有一定圖形結構的稿子，為了描述方便，沒有設計顏色進去）。


根據上文提到的設計要點，我們來一步步進行設計：

首先要做的就是判斷這個稿子大致會用在介面中的什麼功能上。由於這是個抽象的案例，我們已經將它設定為某種獲得類或者重要的升級提示類介面。在實際工作中，這一判斷過程其實是可以省略的。畢竟真實可靠的設計稿在靜態視覺上就會直接給你答案。如果對設計稿有理解不清，請務必與視覺設計師溝通清楚。

第二步就是抽離它的核心圖形元素，為設計前奏動畫做準備。

很顯然的，整個稿子都是以菱形為基準圖形構成的。包括菱形的一部分，箭頭狀的圖形。所以它的核心元素就很好提取了，大致分成兩種，菱形與箭頭。


在實際情況中這一提取過程一般都會比較容易。因為合格的設計稿也會明確為你展示它的核心圖形元素。

但如果遇到不那麼容易提取的元素呢？也好辦，找設計稿中的細節。有時候一個細節上的圖形也可以用來作為前奏動畫所用的核心圖形元素。

第三步就是利用提取來的核心元素，構建前奏動畫了。在本例中，我們需要設計的張力應該是有“爆出”的感覺的，所以前奏應該塑造“收縮”的趨勢，這樣的話，才會為第二段演繹過程裡“爆開”的感覺蓄力。

所以可以將箭頭形狀設計為從兩側入畫，當他們交叉的一刻，一個巨大的菱形收縮入畫。


為什麼設計成這種動作呢？你細想一下，不管是箭頭的兩頭衝擊，還是巨大菱形的收縮動作，是不是都是一種“聚集”動作？

對，這就是前奏構建張力的方法。

完成這一步動作設計後，我們需要考慮演繹階段對這個張力的繼承和釋放。此時就可以讓主體入場了。這裡我的處理方法就是讓中央的菱形面片承接前奏中巨大菱形的收縮勢能，在短時間內繼續往中心收縮，之後迅速反彈完成釋放。這個過程中，外圍的其他圖形也一併入場。並且與其他元素有所互動。


等所有的其他元素都完成入場，就可以為整體動畫設計拖尾了。拖尾往往是釋放張力後的一種延續，這時只要注意合適的時長與動作節奏即可。


這裡可能會涉及兩個問題，一個是釋放過程中各個元素的互動動作設計；另一個是拖尾後退場的處理。

第一個問題，我們在【半周談】019-如何讓動效更有細節-2中講過類似的設計方法，感興趣可以去複習一下；

第二個問題，一般情況下彈窗類的控制元件不必考慮退場。

通常彈窗承擔的功能完成後，主要在玩家有進一步操作後迅速消失。我們要麼是為它設計極快速的退場動畫，要麼就設定為對映。從實踐上講，硬切可能是更經濟的處理方法，所以一般都用硬切。也就是說不為彈窗類控制元件設計退場動畫。

從這個示例的大致設計過程可以看到，前奏所構成的張力是由你所設計的具體動畫帶來的。這種張力是多種動作與時長控制所共同組成的。

通常來講，越是相對“不那麼重要”的“常見的”和“高頻的”介面動效裡的前奏，越會短快一些，反之亦然。只在有些極其重要點位上的介面動效，才可以被允許設計出時間較長的前奏動畫。

期待大家在具體實踐中多進行嘗試，如有任何問題，歡迎吐槽。

以上。


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