五種演繹法拯救單調

動效設計師在拿到的介面設計稿時，基本都會基於現有的頁面佈局和圖形設計元素去進行動態演繹。這在大部分情況下都沒啥問題。在遇到需要富有表現力的介面時，侷限於靜態稿的佈局去構思，可能就會進入一種思維侷限。

介面設計稿可以想象成完工後執行狀態的介面的一個快照。有時候還是多重曝光的快照，即不同狀態下的物件同時存在於一個畫面內。

如果把時間比作一個管道，那麼設計稿就像管道的一個橫截面。

基於這種思維模型，我認為在一些需要表現力的介面上，需要動效設計師去發揮想象力，構建出管道橫截面的前後階段。

也就是說，你應當把手上的那個設計稿看成是一箇中間態，或者複雜排程過後的一個最終態。

這時候，就需要轉場思維，來拯救你無法構思出精彩表現的靜態頁面了。

什麼叫轉場思維呢？簡單的說，就是最終的介面落腳狀態，應該至少經歷過兩次畫面轉接形成。比如遊戲《使命召喚手遊》的“復仇行動套裝”彈窗這樣：



相信動效設計師拿到的靜態稿大概率應該是這個樣子：



但是最終設計出了從下邊這個畫面



轉到這個畫面



最終到這個畫面的一個過程。



是不是一種大片的質感呼之欲出了呢。

那怎麼才能想到這樣的構思？有兩種途徑：第一，多工種配合；第二，從靜態稿找線索。

先說多工種配合。這是一種常見的遊戲視覺開發流程。

一個功能從提起策劃時，就會構思相關的設定，拿剛才那個圖為例，最早肯定是有“復仇情節”的初步設定。

接著就會有美術人員加入進來，提供草稿，然後是幾個版本迭代，改來改去，最後改一個大家都滿意的版本。

同時介面和動效也會參與進來，開始構思介面的整個操作流程。講不清楚的甚至還會畫一些分鏡，將整個操作流程逐漸明確下來。

接下來就是動手製作，視覺設計師會提供需要的控制元件、佈局等等。動效可能會有幾個預演版本，改來改去，直到最終有個大家都滿意的版本。

然後就是在版本里去落地，根據使用引擎的不同，在製作預演階段時，就會有提前的考慮。什麼效果可以做，什麼不可以做，都會體現在預演裡。版本里就會根據預演效果去切圖，劃分節點的層次和邏輯等等。動效K完幀，程式掛好邏輯，音效給好資源，齊活（簡單幾句話，但實際上是無數工作量）。

另外一種情況就是從靜態稿找線索。不是每個需求都如第一種情況那樣，有足夠資源去投入的，大量時間和人員可能集中在少數優先順序較高的需求上。也有可能整個專案組並沒有足夠多的經驗去組織這樣的協作流程。總之，你可能會遇到需要以動效為主軸去驅動某個設計的情況。這時候就需要動效多做一些工作。你可能拿到的所有資源就只是一張設計稿的PSD。那麼這時候就應該從這個稿子裡尋找線索，以支撐你後續的一個延續性設計。

每張富有資訊的設計稿都會有各自不同的情況，但有幾個訣竅可供參考：

創造縱深。當靜態稿有類似空間感的元素時，可以從縱深感著手去提升表現。如背景上的遼闊場景、虛無縹緲的粒子或是直觀的縱深線條等等。這時就可以利用這些元素，做一些攝像機縱深運動：先從遠景出發，迅速穿梭到落腳畫面。如果前景有些人物、物件之類的就更好了，可以讓他們從眼前入畫，更具有強烈的衝擊力。

如下圖所示的《雲圖計劃》的關卡進度操作過程。充分利用了3D圖層和3D場景結合的優勢，利用鏡頭穿梭與介面操作的同步，不僅直觀詮釋了關卡與場景切換的關係，還製造了富有衝擊的視覺效果。





鏡頭語言。如果是有故事性的畫面，可以為它們構建一個簡單的情節

也適用於多個場景的轉接，典型的如上文列舉的套裝彈窗效果，可以用這種方法構建幾個頁面的連貫性。

如下圖所示，在常見介面轉場形式一文中提到的《陰陽師百聞牌》的主介面轉場形式也是利用了鏡頭語言的技法來進行多個頁面的跳轉和銜接。



組合構建。這類似於一般介面動效中的解構動態玩法。就是把原先的圖形結構進行拆解，在它的入場動畫中重新進行組合。需要擁有適當的節奏感，否則很容易玩脫。這條的前提是，介面本身具有足夠豐富的結構供你拆解。

比如下圖所示的《雲圖計劃》抽卡時人物的出場效果。人物出場之前，會對所屬陣營的標識（可能）進行組合構建，然後才是模仿縱深運鏡的人物入場動作。整個過程細節滿盈，視覺衝擊力強，明確表達了“抽卡”這一行為的高價值屬性。這個動效其實結合了鏡頭語言（縱深運鏡）、組合構建（標誌的動態構建）和下一條的多重迭代三種手法。



多重迭代。這是組合構建的升階版本。即將落腳圖形演繹之前加入一個引子，使整個演繹多一重節奏。這個“引子”多數需要動效自己去引申，也可求助視覺設計師幫忙設計靜態圖形。這種圖形以落腳圖形為基礎引申而來，兩者之間應該有圖形邏輯上的連續性。一般情況下，一個引子足矣，過多無直觀意義的演繹只會拖長節奏。

和上面舉例的《雲圖計劃》的多重迭代相似，下圖所示的《漫威超級戰爭》中，主介面入場的動效，也是同種結構的多重迭代，它從一個類似穿梭的效果到主介面背景的刷入效果，都同樣運用了三角圖形，可見這種圖形是這款遊戲的核心元素。



除了上面示例的多重迭代樣式外，還有一種是本體的多重迭代，比如下圖所示的同款遊戲中頁籤的點選效果：



這個效果也同樣利用的是前文所說的，這款遊戲的核心圖形元素，以三角陣列的形式先鋪開整個白底，而後在白底上刷過一道斜切的紅色面片，與面片運動同時會有三角形構成的網格形掃光。整個效果正是典型的多重迭代，使它與其他遊戲或其他點選效果有著明顯不同的設計感，從而體現出獨一無二的質感。

抽象障眼。對於沒有圖形邏輯連線的控制元件轉換，可以使用此法。應該注意的是，抽象圖形的使用，應基於整體設定。比如一般情況下你不能在國風遊戲裡用科技感的圖形去做抽象圖形來演繹。這個使用方法類似我們在轉場方法裡提到的抽象圖形過場法，也是一種障眼法，使原本相貌平平的介面顯得富有細節和戲劇化。

如下圖所示的遊戲《Ballistic Overkill》中的模式切換彈窗，就是以抽象圖形的方式入場的。除了抽象遮罩的形式外，它還利用了3D面片的效果，讓整個框體的出入效果擁有一定的視覺強度。



有些情況下，用介面系統內通用型的動效去展示某些控制元件，可能並不能體現出特有介面的氛圍，或者該有的視覺強度。這時候用抽象障眼法去體現這些因素，也是不錯的手段。

如下圖所示的《機動都市阿爾法》中出現的禮包促銷彈窗的入場動畫。它本身顯而易見的是一個促進玩家有消費慾望的介面。所以動效上的設計，不僅要它從畫面上部邊緣掉下來，還要為它增加綵帶，光效等等額外效果。其中最重要的就是三個禮包的卡片控制元件了。它們的入場形式就是用的抽象障眼法去體現的：利用方格矩陣遮罩，由上到下將它們依次刷出。在刷出動畫結束後，做為收尾，以同樣的圖形作為流光再次播放。

正是這樣通過多個層次的重複，動效才讓整個介面體現出了應有的質感。



這些就是拯救動效單調的五種演繹方法。

動效在絕大部分情況下依然應用著最簡便和通用的演繹形式。當你的專案需要特別的動態風格時，或者通用的風格已然無法承擔特別的功能表現、強烈的情緒表現時，希望這些方法能夠為你提供參考。

以上。


來源：COTA五號
原文：https://mp.weixin.qq.com/s/y5-Pz4oGpkkwQ-w0QNqnXA