想要做好遊戲介面動效？這個最基本的動效設計準則該收藏了！

遊戲介面系統全域性、同一介面內部、同一型別控制元件在不同介面佈局下……等諸多情況，有無動靜設計規則？你將從本文內容中看到多種形式和狀況下動效設計在動態與靜態設計思考方面應注意的問題。

一、動靜規則

動效設計講究適可而止。這其中，什麼需要動，什麼不需要。什麼時候需要，什麼時候不需要。即where 和when ，都是值得考慮的問題。

我們讓不讓一個東西動起來都是有原因的。它運動的形式內容也必然是有目標的。所以“適可而止”之前還需要加一個“有的放矢”。

你自己想象成一個鐵公雞，不到萬不得已千萬不要花錢，就好理解什麼是“有的放矢、適可而止”了。

這個規則，概括下來可以區分成以下幾種情況：

1.同時同地；2.同時異地；3.異時同地；4.異時異地。

二、同時同地

本篇所討論的情況大部分都被包含在第一種區間內：

1.同時同地。指的是同一時間內，同一“空間”內發生的動畫事件。注意，這裡的“動畫事件”指的是一段段的動畫，並非指引擎中的特定“事件”概念。

這基本包含了介面動效中的絕大部分情況。最典型的是一整個介面的入場，就是典型的同時同地事件：多個介面控制元件的動畫陸續發生在同一個畫面內。

這種情況下，基本上所有部件都是動態的，此時動靜規則應為：錯位有序、迅速敏捷。

錯位有序即所有動畫不能完全步調一致，需要按照一定的次序，這中次序的依據包括站位、視覺強度、型體、圖形邏輯等，讓所有的動畫按照一定的節奏錯落有致的發生。

迅速敏捷即總體時長要短，即便總體時長比較長，但主體動作要夠短，如果這些都做不到，那麼最低線則是觀感上要敏捷。

示例1，入場時的控制元件動效起始時刻安排。以通用型動效為例，一個郵件列表的入場，理想情況下應該是這樣：


左側藍色條表示的是郵件列表，右側灰色區域為郵件正文，右下角黃色塊為操作按鈕。

它們的入場動效，並不是由這些控制元件的動畫“同時”發生所構成的，而是按照特定的次序，這個次序遵守的是該頁面內控制元件之間的邏輯關係：


如上圖所示，紅框內是首先入場的左側列表控制元件，它們是這個頁面的最高層級，沒有它們就沒有後續內容，因此它們的動畫被安排在第一時間。而其內部單元之間又各有一幀的延遲；

黃框內則是右側的郵件內容區域，它雖然為本頁面內面積最大的控制元件，但由於是左側列表的子集，所以在左側列表之後入場；

藍框內是右下角的操作按鈕。通常來說這些按鈕的操作都是關於郵件內容本身的，如“收取附件”或“刪除郵件”等。所以此處將它們理解為郵件正文的子級。有時候會在整個郵件區域以外設定一個“全部已讀”之類的按鈕。這種情況下它就屬於整個頁面級別而非本例情況。因此，本例中，按鈕的入場動畫被安排在郵件內容區域之後。

以上的次序安排遵守的是錯位有序的設計原則，依據的是各個控制元件之間的邏輯關係。同時，透過安排前後元素之間較少的時間延遲而不是首尾相接的形式，來達成迅速敏捷的效果。

通常來說，一整個頁面的入場動效，都可以按照以上的原則進行設計。因為一般的介面內容都是由邏輯明確的幾個區塊構成的。這些原則在絕大部分情況下都是有效的。

三、同時異地

2.同時異地。指的是同一時間內，不同區塊內發生的動畫事件。它們之間互不從屬，但可能同時發生。

這種情況涉及到的塊面較多，所以應該在設計之初考慮極端情況，即所有動態元素同時以最強的視覺形態存在時，是否合適。如果不合適，有沒有最佳的方案。大部分情況下，應考慮捨棄一些沒有必要的設計。

這種情況下的動靜規則是：考慮極限、適當取捨。

示例2，多個重複控制元件的動效強度除錯。仍以通用型動效為例，一個模擬的主介面靜置狀態應該如下，此時新狀態提示較少：


當新狀態提示為極端狀況時，它們往往會多個同時出現在同一個畫面內，此時其動態設計應該考慮一種不構成強烈干擾的方案。

而不妥的設計通常忽視了單個小元素的強度在極端情況下的表現。舉個誇張的例子，當它們比較少時：


可能還勉強覺得合適，但當它們比較多時，基本上已經是過度干擾了：


這種方案的問題在於，這種比較弱度的提示類控制元件搶佔了介面內過多的動態注意力資源，與其強度級別不相匹配。所以應該酌情將這種設計強度進行減弱。

而減弱到什麼程度，就需要根據實際情況去判斷。最小的情況是“靜止”，而最常用的則是以比較“中間態”的形式：


所以最終比較提倡的設計大致上會是這樣：


可能單獨的元素看起來沒有那麼強烈，但它們好在大量出現時可以避免過度干擾。

另外，處理類似問題時，具體到這種新狀態提示的控制元件，也還需要綜合考慮原本的視覺設計樣式。如果本例中的控制元件樣式被設計得色彩不那麼明顯，就需要考慮加強動效的“干擾”從而將這個小控制元件的視覺強度提升回它原本應有的層級。

類似的情況都可以按照這種設計方式去進行分析，然後綜合實際情況去尋找合適的方案。

示例3，複雜介面內動效的強度安排。依然以通用型動效為例，看一下在模擬的任務系統介面中，應該如何安排相應的動效細節處理。

有時設計師為了體現細節而設計了過多的細節，就會產生一些問題。如下圖所示：


這看起來是個比較不錯的設計，各個控制元件的入場都錯落有序，動作安排也比較合理。

但事實上，某些時候這樣的設計可能會不合適（或者說不太安全）：

• 一個頁面內過多的動態細節，造成與上一例同樣的問題--搶佔了介面內過多的動態注意力資源，從而讓視覺資訊過載；
• 還會在技術上引起不必要的麻煩，如與介面重度不相匹配的工作量、和要解決的一些技術（效能）問題等。
  

所以，最安全的做法是減去不必要的細節：如較小型體的框體內容物的動態細節、一些圖形結構細節以及其他憑藉動效三原則判斷後認為無用的細節。

經過這樣處理過後的方案大致如下圖所示：


主要去除了右側框體內容物的動效細節，這使得右側的資訊入場過程更利索。

另外，按照動效三原則去判斷，右側內容物的入場動作並不能起到明顯的連線和反饋意義上的作用，可能只有一點風格化的情感表達，它使整個介面看起來優雅和有序。但在這樣的列表式頁面內，我們應該主要顧及資訊傳達速度及關聯成本。在特定的情況下，最好的選擇是去除這些細節設計。

針對本例，右側內容物的入場形式影響的不僅是整個介面的入場效果，還會影響每次內容重新整理。如下兩圖所示，為左側頁籤切換時，不同方案下的效果對比：



目前看來兩者似乎不分伯仲，但如果相關操作頻繁或者右側內容物更多更豐富，那這種效果就會讓人感到粘滯和拖沓。

話說回來，事情不能一概而論。如果遊戲整體上就是很清爽和簡約的風格，這種多細節的方案可能反而會更好。

綜合各種情況，從而平衡資訊表達的量級，是在視覺資訊集中的地方，於特定情況下，要設計更少動效的本質原因。

四、異時同地

3.異時同地。就是不同時發生的動畫，但兩者在同一個地方。大部分情況下，不同功能的控制元件在不同時間出現在同一處是可以被接受的。由於動效的時長設計各異，不同的動畫有可能會交疊在一起，在某個瞬間同時出現在某處地方。但設計的初衷並不如此。

如《碧藍檔案》結算時偶爾會發生的情況：


畫面焦點的結算的圖示，頂部的任務完成提示，以及切換畫面後的資訊、新的任務完成提示等，在短時間內集中出現且出現層層交疊的情況，資訊密度極大。

這種情況很多時候沒辦法避免，因為動效並不是固定的線性動畫，而是由一系列比較隨機發生的動畫組合而成的。很多極端情況雖然可以被預測，但並不能覆蓋所有必須的情況。設計層面上能夠最佳化的就是整理好交疊在一起的控制元件的優先程度和層次，並且做好相關情況的權衡。

此時的動靜規則是：上下有序，規劃合理。

五、異時異地

4.異時異地。不同時也不在一處的動效，彼此間還有關聯嗎？當然有，這種關聯性主要體現在風格的一致性上。

風格一致性不僅是對設計師而言，而且是對玩家而言的。不管是介面設計還是原畫，亦或是我們現在討論的動效，風格的一致性在哪個維度上都有同樣的意義。

對設計師而言，是控制品質的好工具。對玩家而言，是對同類體驗維度的認知一致性。

比如，同樣是獲得物品，為何有的是冒tip，有的是走彈窗？同樣是勝利，為什麼有的強烈有的平緩？為什麼不同的系統內可能存在同型別的動態效果？為什麼同一個系統記憶體在不同型別的效果。這都是動效設計時，跨系統，全域性範圍內需要考慮的設計要點。

通常，決定一個控制元件的動靜設計到什麼程度，其原則依據就是其風格調性，同時決定於其所在整體頁面內的節奏。

我們可以從《賽馬娘》的介面示例中進行橫向和縱向對比來理解這一問題：

下兩圖分別是兩種排名的結算：



這兩個結算中，橫向對比時，其介面佈局和動靜安排都是一致的。自身進行對比時，都是名次控制元件動，而其他介面部件不動。尤其是作為列表的排名展示區域。

縱向對比，可以看到在該遊戲的其他型別頁面中，相似的列表佈局如何處理動靜：

下圖為“編組強化”介面的入場，強化功能的幾個主要入口是人物前方的幾個卡片狀控制元件，它們被處理成典型的陣列入場形式，這顯然又是相對於介面中其他控制元件的“動”處理：


同樣系統內，切換到“支援卡片”強化的詳情頁時，其轉場動畫中，列表的處理是相似的。不管是右上的強化細則列表還是下方的卡片矩陣列表，都用經典列表處理方式。

這個流程的後續中也出現幾個列表，其中最有特點的是強化成功後出現的介面裡的列表，這也是前邊詳情頁中右上區域的那個列表。不透過的是，它這次的入場效果要相對簡單一點，而且另外加了一個“新增項”效果：


縱向對比，我們可以得出這樣一個結論。同樣作為列表，在依據整體風格調性的維度，需要儘量保持列表的入場設計樣式。但是需要根據各個頁面內的具體情況去協調具體的樣式。這兩個都是必要條件，而且後者需要建立在前者的基礎上。

在結算頁，雖然名次控制元件的樣式和大小都比較顯著，但為了促使玩家注意力進一步聚焦至此，同頁面內的列表直接就省略了列表式入場動畫；在“編組強化”頁面內，那些入口卡片顯然被設計成視覺強度高的樣式，它們不僅是卡片狀，還有每項專門設計的圖示，這表明這裡是它們的主場。依我看，它們不僅可以被設計成展示完全版的列表動效樣式，動態樣式上甚至可以做得更誇張一些；切換到詳情頁時也有類似的情況，但這裡也有個細節處理需要注意，那就是在類似這樣資訊非常密集的頁面中，列表項是相對比較重要的資訊，因此也只保留了列表項的動態樣式，其他反而被處理成靜態；最終強化成功的介面，與結算有類似的情況，需要引導玩家將注意力放在左邊的強化成功區域。但同時需要告訴玩家強化完成後的新增項，因此這些項被設計成我們所見的樣式，出現在列表內。

正如上例所言，異時異地的動靜處理手法非常多，看起來也比較複雜。但邏輯其實是很簡單的。你需要著眼全域性，知道統一樣式的邊界；同時要聚焦區域性，觀察互動結構和功能佈局，合理安排對應控制元件的動態多寡，也就能設計出合理的動靜節奏了。

這其實就是我們所說的動效設計適可而止的精髓。你沒必要時時處處設計動效，水滿則溢月盈則虧，物極必反。不是細節越多越好，而是安排合理的細節越多越好，這裡的度的把握核心要點就在知道如何適可而止。


來源：COTA五號