UI動效應該怎樣設計?麻溜的看一看!

學UI設計的不會不知道UI動效，動效讓UI更加富有表現力，更加易用，它表現出巨大的潛力。但是，在很大程度上依然算是 UI設計領域當中的邊緣學科，會做的人不多。今天譽財教育就來告訴大家如何起步設計UI動效。

一、要從哪裡開始

動效的主要功能是用來呈現 UI 中不同元素之間的關係，來幫助使用者在介面和介面之間進行導航。動效還可以加持到圖示、Logo、插畫等元素上，來賦予 UI以個性，但是 UI本身的可用性的優先順序是一定要高於視覺和動效的表達。在展示探討藉助動效拓展個性和調性之前，我們應該優先關注如何藉助動效來優化導航和過渡，構建強大的動效基礎。

二、轉場過渡的設計模式

在考慮設計導航的過渡效果的時候，簡單性和一致性是兩個關鍵屬性。為了做好這一點，我們通常會基於以下兩種情況來設計，基於某個容器的轉場動效和不存在容器情況下的轉場動效。關於這個我們會在下次詳細說明。

三、保持簡約

鑑於動效的使用頻率非常高，它和設計的可用性密切相關，導航過渡效果的功能性更加優先，而不是風格。當然，這並不是說它不應該風格化，只是說在確保品牌整體風格一致就可以了。引人矚目的動效，通常更加適合和小圖示、LOGO、載入器和空狀態等元素或者介面搭配。

四、選擇合適的時長和節奏

諸如導航切換的動效轉場，所持續的時長，應該優先考慮到它的功能性，要利落，但是也不能過快。太快會讓使用者感到迷惑。可以根據使用者在介面停留的時長來估算動效應該持續的時長。根據以往導航過程中，使用者在導航頁面中所駐留的時長來進行判斷，300ms的動效時長，是一個值得參考和使用的時長。相比之下，更小的UI控制元件當中，動效的持續時長還要短，通常100ms就足夠了。如果你覺得某個動效設計得太快或者太慢，請以 25ms 為單位，進行增速或者減速的調整，直到它達到你所預期的視覺和體驗。

以上就是譽財今天為大家講解的UI動效相關內容，只是希望能給剛開始做基本轉場動效設計的同學們帶來一點小的啟發，後期你就可以開始考慮更加細化和個性化的設計和挑戰了，更高階有趣的動效才能滿足工作中的實際需求。