通過動效學習UI設計

動效和UI的結合是未來遊戲的發展趨勢，UI設計也要過程也要注重動效的最終呈現，兩者結合才能做出更好的效果

遊戲行業越來越多的公司開始注重動效的設計，但動效的表現是建立在UI設計的基礎之上，更多的時候動效是拿到UI設計才開始的設計，其實這個過程就已經很被動了，會受UI設計的侷限而影響動效的發揮。

UI設計也需要通過動效來增強介面的互動感覺，UI設計和動效就需要有一定的磨合，動效如果能在前期介入到設計當中，那麼最終的遊戲中呈現的效果會更好。

我把多年的動效經驗送給大家，希望能給UI設計師帶來幫助

一、鏡頭方式的UI設計

介面中的鏡頭運用能提升遊戲的沉浸感和品質感，甚至能夠參與到敘事與指引功能之中。


這種設計的表達方式必然是在同一個畫面中以互動的方式存在，讓介面切換更有明確的指向性,

這種表現在某些遊戲裡可能是某一個系統，而非主介面


我們需要這種思考意識，有了這個意識，就會在UI創作中多了新的設計思路

之後我們還需要在創作前積累更多的鏡頭素材，我想大家也看過各種科幻類的電影，從這些電影，音樂MV等小片中都可以找到很多的設計靈感


我們看到圖中1,2,3,4,5...都代表著一個功能入口，在切換的過程中產生了畫面關聯，這樣的表達會讓我們的互動更加清晰，容易理解


二、模型能給我們帶來哪些靈感

3D模型，在介面中的運用也越來越普遍，它能將介面的空間層次提升到另外一個維度，增加我們的視覺感受，

空間層次將在後面講到，大家可以看下邊的圖




3D模型的融入可以提升UI的幾個點

1：提升空間感

2：維度的增加，可以讓UI動效立體感更強，豐富視覺

3：運用鏡頭增加帶入感，提升介面互動體驗


三、空間維度如何運用設計

空間想象是由平面素材聯想到3D空間展現的設計能力


當拓寬一個空間維度後，從動效的呈現效果上會得到明顯的提升。



UI設計在設計初期能考慮到空間這個維度，帶有入場式的思維去思考設計，那麼設計的介面在最終實現上也就會更利於動效的發揮，和最終表現的呈現


總結

一、鏡頭方式的UI設計

他存在的方式必然是在同一個畫面中以互動的方式存在，讓介面切換更有明      確的指向性,這種表現在我們的遊戲裡可能是某一個系統，而非主介面、

二、模型能給我們帶來哪些靈感

3D模型的融入可以提升空間感，維度的增加，可以讓UI動效立體感更強，豐富視覺。運用鏡頭增加帶入感，提升介面互動體驗

三、空間維度如何運用設計

當介面拓寬到一個空間維度後，從介面到動效的呈現效果上會得到明顯的提升。UI設計在設計初期能考慮到空間這個維度，帶有入場式的思維去思考設計，那麼設計的介面在最終實現上也就會更利於動效的發揮，和最終表現的呈現

來源：Leo動效
原文：https://mp.weixin.qq.com/s/orOjgB30KFSGFX_rO_qExw