如何讓動效更有細節-3

本系列前一篇為《如何讓動效更有細節-2》，可點選篇名回顧。

動效的細節設計應注意塑造更合理的圖形動作。

圖形動作的合理性是從圖形結構上來的，遵守圖形結構的動畫會更“好看”。因為符合客觀規律的設計本身就會帶給人以美感（引自《遊戲UI設計原則與例項指導手冊》P032 “1.3.3 介面的美醜”小節）。

魔鬼藏在細節中。當你的動畫看起來不夠合理時，就需要檢查一下，那些圖形是不是沒有遵守在符合規律的情況下，理應具有的運動規律。

在遊戲介面動效中，需要注意以下介面控制元件中出現的圖形動畫的合理性：

有邊界圖形的運動形式

不出畫的圖形都可以被看做有邊界圖形。相對來說，如果不是後文提及的情況，這些圖形的動畫形式限制更少。可以根據它們具體的形態或功能去設計具體的運動方式。如彈窗，tip，一些背板等。

比較常見的有邊界圖形就是按鈕、彈窗和tip類的控制元件。它們可以像下幾圖所示的樣子，支援比較多型別的動態變化。



無邊界圖形的運動形式

無邊界圖形指出畫圖形，這類圖形邊界不在畫面內。如果沒有特定的設計，它們實際上是向畫外無限延伸的。因此最好不要認為它們的邊界就是畫面的邊緣，從而以畫面為邊緣做一些伸縮運動。這對這類圖形來說就是一種特意展示破綻的動畫。

這類圖形主要有跨屏彈窗，貼邊控制元件等。

無邊界圖形中最常見也最容易出現動態設計問題的就是類似下圖的跨屏彈窗。下圖所示的樣子為建議的入場方式。


如下圖所示貼邊控制元件的樣式，也是一種邊緣在畫外的圖形。建議的入場方式如圖所示：


跨屏彈窗的錯誤處理方式往往如下圖所示：


主要問題在於，設計師將它視作有邊框型體去處理了。這種動態方式的破綻主要在縮放過程中，這個型體所暴露的兩側邊緣，並非它被設計成的無邊緣樣式。屬於破壞原始圖形結構的設計方法，應儘量去避免。

而處理這樣的圖形樣式動態設計問題，除了上文中出現的上下擴充套件形式外，還可以用左右虛邊的擴充套件方式，如下圖所示。抑或是利用抽象圖形入場的形式，如下下圖所示。這兩種方式都避免它原本不具備的左右邊框被在運動過程中暴露出來，形成破綻。



類似的，貼邊控制元件也應該避免如下圖所示的縮放入場，這同樣犯了“將它們當作有邊框控制元件處理”的錯誤。


還有一些並不顯著的控制元件型體，也容易出現類似的問題，比如斜向但位於頁面邊角的圖形。它們往往會被按照圖形運動趨勢的方向設計入場動畫，這時候就總會出現一些“端頭”。這些“端頭”其實也類似跨屏彈窗的那兩個並不存在的左右邊緣：


正確的處理方式可以參照跨屏彈窗的處理方式，也可以簡單的如下圖這樣進行處理：



直圖形運動

直圖形指橫平豎直的圖形。這類圖形的變形伸縮通常不會導致外形或內含結構的變形擠壓。因此在各種情況下的運動設計都會比較自由，但需要注意某些情況下的旋轉運動和特有旋轉角度時的單維度縮放。這類圖形通常在按鈕，底框，一些圖形結構複雜的結算中。

下圖是一個帶紋理的按鈕，它的動態設計方式是將襯底與紋理分開進行處理，由於它是個平直的圖形襯底，因此這種縮放動畫並不造成整個圖形的擠壓變形。但如果沒有將紋理與襯底分開，仍然設計為當前的縮放動畫，就會造成紋理擠壓變形。


下圖所示的菱形動畫中，菱形的旋轉與縮放過程中都始終保持等比，因此整個型體的動畫都比較穩。


但如果在動畫過程中不保持等比，就會出現很奇特的現象。因此除非刻意追求這種怪異的效果，這種平直的圖形應在任何情況下保持等比變化，以維持圖形本身的穩定。


斜圖形運動

斜圖形則是帶有斜切造型的，或者其他形狀的平直圖形。這些斜切或者其他形狀在伸縮，旋轉時應格外注意變形擠壓的的情況。這些圖形也通常出現在按鈕，底框以及其他圖形結構複雜的控制元件中。

如下圖所示的控制元件組，由多個斜圖形組成。它的入場動畫沒有考慮到斜圖形在橫向縮放過程中產生的變形擠壓問題。


正確的處理方法應該如下圖所示，將所有的斜圖形按照三宮拉伸的方式進行橫向縮放變形，保證斜邊不會因為這種動畫而產生變形擠壓。


中心對稱圖形運動

中心對稱圖形包括圓形，星形，放射型等等中心對稱的圖形。這類圖形往往只適合中心伸縮，並非常適合中心旋轉運動。如果用它們做其他型別的運動，則同樣在很多情況下會產生破壞型體的效果。它們通常在一些特別的控制元件中，如結算、勳章類等控制元件。

如下圖所示，中心對稱圖形在等比縮放和旋轉時的效果都比較穩定。


下圖所示，多箇中心對稱圖形同時組合運動時，也能在保持等比縮放的情況下保持圖形結構的穩定性。


但如果不保持等比縮放，如下圖所示的多個圖形單一維度縮放時，會產生類似透視翻轉的效果。但這與真正的三維透視翻轉效果又有所不同。在特定情況下使用問題並不大，但需要看情況決定。


這些是遊戲介面中常見的圖形，也是動效設計師很容易在複雜動畫中忽略掉的細節。希望對你的實際工作有所幫助，並歡迎提供相關意見和反饋。

以上。


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