科技感圖形的動態(tài)表現(xiàn)手法極其多變和豐富。本文只列舉常見的設(shè)計手法，并試圖抽離一些普遍性的設(shè)計規(guī)律。希望能為大家在實踐中提供幫助。

所謂的科技感的動效設(shè)計，就是基于科技感風(fēng)格界面的動態(tài)設(shè)計。這類界面設(shè)計具備科技感設(shè)計的元素，或者擁有科技感設(shè)計的內(nèi)核。比如多以線條，應(yīng)切割面片等圖形組成。而科技感這種風(fēng)格本身也非常依賴動態(tài)層面去表現(xiàn)它的科技感氛圍。
?

常見的科技感動態(tài)設(shè)計方法往往可以分割成以下兩點：

閃爍。組成控件或者圖標(biāo)的部分可以進(jìn)行拆分后，進(jìn)行閃爍式的組合重現(xiàn)。這是一種經(jīng)典用法，模仿的是早期的二極管顯示器效果。這種效果在一些返古的科技感設(shè)計里也很常見。但基本上所有想要表現(xiàn)高科技的圖形動畫，都會或多或少的應(yīng)用這類效果。

閃爍的使用方式有多個變種，最常見的可以劃分成三大類：透明閃爍、色彩閃切和雜色閃切。
?

上圖所示的《星際公民》中，面板操作界面的出場動畫里，用到的許多透明閃爍效果。
?

上圖所示的《精英：危機》中一個面板的載入動畫屬于色彩閃切（做了慢放處理）。
?

上圖所示的《狂怒2》中的“新目標(biāo)提示”動畫，就屬于雜色閃切，是比較流行的壞信號效果，一種賽博朋克元素。

這三種樣式通常會根據(jù)界面或者游戲世界觀的具體設(shè)定去選擇性使用。總體上是一種遞進(jìn)的關(guān)系。

最簡單的情況下可以用透明閃爍的方式。如果這種方式不足以表達(dá)想要的效果，就可以嘗試用色彩閃切。而色彩閃切有反白閃切和多色閃切兩種。在此之上，如果想要更豐富的效果，就用雜色閃切。雜色閃切可以認(rèn)為就是壞信號效果。用AE的制作思路來看就是一種湍流圖形的置換效果。可粗可細(xì)、可快可慢，根據(jù)具體的風(fēng)格情況來應(yīng)用。
?

如上圖，Jeff Cheristy 為游戲《光環(huán)》所設(shè)計的界面動效演示動畫（局部）中，就使用了一些反白閃切效果。

生長。指的是圖形的生長。這種圖形動畫相對閃爍的方式要更復(fù)雜一些，在引擎內(nèi)實現(xiàn)又通常需要運用遮罩相關(guān)技術(shù)，如果一個組成部件極為復(fù)雜的控件應(yīng)用這種動畫，會使制作過程及其繁瑣。因而往往會看到比較復(fù)雜的生長動畫被用于儀式感強一些的界面中，以視頻內(nèi)嵌的方式進(jìn)行還原。這一方面避免過多的繁瑣還原過程，一方面利用視頻的高品質(zhì)效果來凸顯該有的操作節(jié)點效果。

比如在《云圖計劃》抽到人物時的展示界面中，就用圖形生長動畫去表現(xiàn)一些復(fù)雜圖形元素：
?

基于這兩點，可以制作出豐富多變的科技感動態(tài)效果。二手手游賣號平臺不過想要設(shè)計出觀感良好的效果，依然需要考慮參與動畫的各個元素之間的動態(tài)節(jié)奏關(guān)系。

當(dāng)單獨動畫基于一個組件時，需要考慮組件在界面整體布局中的位置。以及所承擔(dān)的功能，比如下圖所示的一個控件：

它是一個面板的局部，經(jīng)過了一些處理，一些文字被塊狀圖形替代。方便我們看到最終動畫效果。它雖然是面板的局部，但視覺強度上要強于框體內(nèi)的其他部件，攜帶了需要強調(diào)的信息。因此為它設(shè)計了復(fù)雜的入場動畫。可為它設(shè)計整體上從左側(cè)延展生長出現(xiàn)的動畫：
?

也可以為它設(shè)計從右至左延展生長的動畫，但這種方向除了考慮它在界面整體中的位置外，還要考慮構(gòu)成它自身的那些圖形的結(jié)構(gòu)權(quán)重。顯然左側(cè)的輪廓圖標(biāo)要顯得更重一些，因此以它為頭的話就是從左至右生長的動畫。

從這個示例可見，多個圖形元素組合起來的控件，不僅需要酌情進(jìn)行分層次漸次入場以控制整體動畫的節(jié)奏感，還要結(jié)合常用的科技感動效設(shè)計手段：閃爍與生長。

如果是單獨的彈窗或者tip，具備詳細(xì)的結(jié)構(gòu)化設(shè)計時，節(jié)奏掌握則更加重要，如下圖這樣的獲得類彈窗：
?

這樣的彈窗需要強烈的儀式感，還要有獲得感受。其中儀式感通過擁有層次和節(jié)奏的動效來表現(xiàn)，而獲得感受則通過動畫的“張力釋放”獲得。

先看最終的效果，來看獲得類特有的節(jié)奏構(gòu)成的張力：
?

整體上，這個提示動畫是一種先收后張的效果。這種效果是基于主軸元素的縮放以及特有的曲線設(shè)計來達(dá)成的。

那么這里就會提出兩個問題：

1.同樣是縮放動作，為什么有些情況下它并不能夠帶來張力呢？

這是因為這個動畫的節(jié)奏構(gòu)成是有序的三段式：前奏→釋放→拖尾。

前奏的大幅度縮小動作構(gòu)成了整個畫面有被菱形壓縮的趨勢。當(dāng)它縮至落腳點的最小值時，控件中心的結(jié)構(gòu)承接了這個趨勢，積蓄能量進(jìn)行了釋放動作。此時，主體信息構(gòu)件，即“恭喜獲得”那一塊圖形，開始釋放。于此同時，又有菱形圖形被迅速放大擴散，并逐漸消失。后續(xù)的這些動作就構(gòu)成了拖尾。

2.主軸元素是什么？

就是構(gòu)成一個控件的骨架式元素。沒有它，整個控件就會散架。

每個合格的動效設(shè)計師都需要能夠敏銳的觀察并提取到靜態(tài)設(shè)計中的主軸元素。

在此例中，這個主軸元素就是中央的菱形輪廓。我們正是利用它的本體與復(fù)制件來進(jìn)行前奏入場動作與拖尾擴散動作。動效設(shè)計師不要局限于拿到的靜態(tài)稿的樣式去思考動態(tài)設(shè)計，而是應(yīng)該主動構(gòu)建該“快照”的前后時間狀態(tài)。在此例中亦然。不要局限于靜態(tài)中單個的菱形結(jié)構(gòu)，用到多少就可以將它復(fù)制多少。目的就是完善形成“獲得”張力的動態(tài)節(jié)奏。

以上只是兩個小的示例，它們的動態(tài)設(shè)計都是基于具體的情況去考慮的。但你會發(fā)現(xiàn)想要設(shè)計出科技感的風(fēng)格，依然要先利用我們提到的兩個基礎(chǔ)元素：閃爍與生長。在此基礎(chǔ)之上，功能性越強的界面，越完整的界面，考慮就越是通用性的東西，如節(jié)奏次序，體現(xiàn)張力、爆發(fā)力等。

科技感的動效設(shè)計方式還需要注意哪些問題和有什么具體的設(shè)計方法？請關(guān)注本系列的下一篇。

以上。

總結(jié)

以上是生活随笔為你收集整理的科技感的动态设计方法-1的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。