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

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

常見的科技感動態設計方法往往可以分割成以下兩點：

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

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

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

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

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

這三種樣式通常會根據界面或者游戲世界觀的具體設定去選擇性使用。總體上是一種遞進的關系。

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

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

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

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

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

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

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

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

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

如果是單獨的彈窗或者tip，具備詳細的結構化設計時，節奏掌握則更加重要，如下圖這樣的獲得類彈窗：
?

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

先看最終的效果，來看獲得類特有的節奏構成的張力：
?

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

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

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

這是因為這個動畫的節奏構成是有序的三段式：前奏→釋放→拖尾。

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

2.主軸元素是什么？

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

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

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

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

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

以上。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。