什麼是前奏設計 1/2

什麼是前奏？

我們在幾篇文章裡都提過的一個動效結構概念：蓄力→爆發→釋放。這本質上就是前奏→演繹→拖尾的三段式結構。

前奏就是這種三段式動效結構的第一部分，起到了一種蓄力的作用。如果沒有前奏的蓄力，後續的階段很難體現出整個動作節奏的張力。某些情況下，一些瞬間爆發式的動態效果則顯得沒有前奏，只是因為它們的前奏過短，我們也在某種程度上認為那是一種二段式的動效結構。


上圖所示的《幻書啟示錄》的勝利結算動效其實就是一種三段式動效。但很容易被看作是二段式。原因在於它的前奏設計利用了圖形的主體結構進行演繹：將以“戰鬥勝利”字為主的圓盤型體進行先放大後縮小的一段動畫來體現“摔入”的動作力度。外加諸多的光效掩蓋，讓這種型體上的演繹顯得不是那麼明顯。從而顯得是一個“直接摔入”的二段式動畫。


上圖所示的《機動都市阿爾法》中的“恭喜獲得”彈窗的出場，就屬於典型的二段式動效結構。但是如果深究的話，置於整段時間最早部分的背板“張開”動作，本質上屬於三段式中的“前奏”部分。

什麼時候用前奏設計？

不管是具備三段式還是二段式結構的動效，它們所體現出的效果都會比較強烈一些。從這個角度來說，並不是遊戲介面中的每個動效設計都需要應用這種動效結構。絕大部分動效仍然都只是一段式（普通的移動、縮放、透明度變化等），但如果將一些動態設計，如抖動類效果，進行階段細分的話，也可以認為他們是有演繹→拖尾的二段式結構的。


比如上圖所示的手遊《全民奇蹟》中的“等級提升”提示，就沒有通過三段式的結構來形成張力，而是通過二段式演繹過程中強烈的特效光效果來形成引人注意的效果的。


上圖所示的《斗羅大陸魂師對決》“鬥羅之路”介面入場動畫中，地圖上的圖示入場以及左下角進度獎勵圖示的效果，都屬於典型的二段式動效。而且也都依賴大量的特效光效去烘托視覺強度。

正是因為三段式的動態節奏比較強烈，它們才會多被用於視覺效果強烈的互動點位。如“獎勵類”介面，強提示類介面等。


上圖所示示例同樣出自遊戲《機動都市阿爾法》中，戰鬥結算時的“MVP”勳章展示動效，就是一種典型的帶有前奏設計的三段式動效設計：先是被拆解的盾牌漸次從“眼前”入畫進入構成前奏，接著“MVP”字樣和金盃摔入構成演繹，最後閃電和靜置的閃光構成拖尾。


上圖《月神的迷宮》中的“獲得物品”彈窗，也是一種三段式動效結構：利用視覺設計中的“教堂玻璃彩色花窗”元素，將晶瑩剔透的質感進行演繹，形成中心向的動作趨勢。這構成一個小前奏，然後恭喜獲得的摔入與中心月牙圖形的“炸開”構成張力釋放。唯一的缺點在於那些圖示的出現時間被拖得太晚，以至於第二階段的張力釋放力度被相對減弱了很多，在操作流程上也增加了很多阻滯感。

同樣的，在一些相對這些表現要弱一些的地方，也可以用到前奏設計，如下圖模型所示：


這是一個介面中小控制元件經常會用的一個動作。通常用來表示某些資訊的重新整理，如級別上升之類的。它的主體動作是縮放，其縮放曲線如下所示：


顯然青色框內的區域是前奏動作曲線。但如果認為最終摔入才是這個動效的“釋放”過程的話，則玫紅色框內是前奏動作曲線。

一些遊戲介面內，也有利用動態前奏設計來表現風格特點的。比如《殺出重圍：人類分裂》裡的HUD載入效果，就在原本極簡的介面設計基礎上增加了豐富的前奏動態設計：


以上諸多示例都表明，前奏設計絕大部分目的是蓄力設計，通常是為了整段動效在演繹階段的力道釋放做準備的。

所以總結來看的話，在實際專案中涉及到此類動效設計時，所應注意的要點可以歸納為以下幾點：

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

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

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

根據這些要點，該如何設計出合適的三段式動效呢？在該系列文章的下一篇，我將會以一個例子來說明具體的設計方法，敬請期待。

以上。


來源：COTA五號
原文：https://mp.weixin.qq.com/s/_2ddzPHx-KlL1P8l5wSSnw