如何讓動效更有細節-1

想讓動效體現出細節，往往最先需要從兩個方面著手：

第一，豐富原有靜態圖形的表現方式。

動效是基於靜態設計稿去做進一步的動態設計的，除了要弄懂介面設計本身表達的功能含義外，在細節上要尊重原有的圖形設計。

我們在上一篇文章中提到過一點：複雜介面控制元件的動態設計要在讀懂靜態圖形的運動趨勢的基礎上去做進一步的設計。但是這種設計絕不意味著原地踏步，而是要學會去演繹原有的圖形。

比如下圖這樣的一個面片，我們很明顯能看到它的一些紋理特徵。


那麼就可以從這些紋理特徵入手去做一些動畫設計，首先是最基本的伸縮動作，和表面上文字圖示的隨動動態：


但是這樣並不能延伸原本靜態設計的風格特點，也就是那些斜切型體所應有題中之意。那麼我們可以為它們也設計一些小細節，比如說閃動：


又如這樣一個獨立的控制元件，具備層次比較豐富的圖形設計。


此時可以通過提取它的主要設計元素來參與到它的整個動畫生命週期（蓄力→爆發→拖尾）中：


這種基於靜態去思考動態的思維並沒有超脫出我們在《五種演繹法拯救單調》中提到的方法，最核心的思路還是補充它在時空上的前後關係。

第二，增加多層細節表現。

在上一個做法的基礎上，如果控制元件的視覺層級很高，目前的方式不足以體現它的某種視覺層級時，就可以為它增加“濾鏡”。

記住，上一點指的實際上是設計控制元件的結構細節，而這一點指的則是設計控制元件的樣式細節。樣式細節應該基於結構細節。除了某些特別的情況，一般先考慮結構細節再考慮樣式細節。

比如說常見的按鈕動態細節，當我們有這樣一個按鈕時：


如果需要設計動態讓它更有視覺強度，應該先設計結構細節，比如像這樣：


如果這樣的結構細節仍然不足以表達它的視覺層級重度，或者想體現某些特別狀態，就可以考慮增加樣式細節，比如粒子、光效等（為了更好觀看光效，這一效果背景變更為暗模式）：


以上，就是遊戲介面中動效更具細節的初步設計方法，如果想了解更多方式，請關注本系列的第二篇：動效細節設計之元素互動和曲線微調。

以上。


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