如何設計出色的動效?最近越來越多公司開始做動效設計，也有不少團隊意識到動效對產品的重要性。作為設計家族的新成員，動效在網頁設計中擁有巨大的潛力，能讓網頁設計更具有表現力和易用性。

很多人說UI動效設計很複雜，參數的選取也非常模稜兩可。但其實只要看完以下的內容，你會發現動效設計其實可以很簡單。

網頁設計技巧

製作動效設計，要從哪裡開始?

要製作動效設計，我們先了解一下動效的主要作用-用於呈現網頁中不同元素間的關係，幫助用戶在界面間進行導航;或加持到圖標、Logo、插畫等元素，給UI賦予個性，加深用戶對產品的印象。

在探討動效如何給網頁設計拓展調性和個性之前，首先我們應該關注如何藉助動效優化過渡，構建強大的動效基礎。

如何設計出色的動效?

一、關於轉場過渡的設計模式

在考慮網頁設計的過渡效果時，簡單性和一致性都是兩大關鍵屬性。為了做好這兩點，通常會根據以下兩種不同情況來設計：

1.基於某個容器的轉場動效

在網頁設計中，如果轉場動效牽涉到按鈕、卡片或列表等元素，通常會基於這些容器進行設計。

網頁設計技巧

大多容器空間都會有着清晰的邊緣，但在動效出現之前，邊緣可以是不可見的。

【運用方式】

網頁設計技巧

① 容器動效使用Material 中的標準緩動。

網頁設計技巧

② UI元素在容器內縮放過程中，會基於寬度自適應調整，使元素和容器之間的相互關係更加清晰。

網頁設計技巧

③ 動畫變化前階段，變化速度逐漸加快。當整個動效足夠快時，整個過程都顯得無縫而自然。

【特點】

這種動效設計規則非常清晰，如果將它應用到整個界面的不同控件上，能建立出一致的動效樣式。加之，整體動效設計的變化都是依靠容器連結，無論是開始還是結束的過程中，界面都有着非常清晰的邏輯關係。

2.不存在容器情況下的轉場動效

很多動效都是在沒有容器的承載下構建的，比如點擊APP設計中置於底部的導航按鈕，將會讓用戶進入一個全新的界面中。

網頁設計技巧

【運用方式】

①前一個組件或元素開始淡出消失，隨後新的組件或元素開始淡入。

②隨着前一個組件消失，後一組件會使用Material Design的減速換減速緩動動效，巧妙呈現。

網頁設計技巧

【特點】

如果網頁設計開始和結束的過程中，都有着清晰的空間關係和邏輯順序，那麼選用這種過渡轉場方式，能強化設計的一致性。

二、關於轉場過渡的設計案例

1.保持簡約

鑒於動效的使用頻率非常高，加上和設計的可用性有密切相關，所以導航過渡效果的功能性應更加優先，而非風格。

通常，引人矚目的動效並不一定需要風格化(具體視實際情況而定)，反而和小圖標、Logo、加載器和空狀態等元素或界面搭配會更加適合，所以這類動效確保品牌整體風格一致就可以了。

網頁設計技巧

2.選擇合適的時長和節奏

進行網頁設計的時候，要注意動效轉場所持續的時長，這應該是考慮到它的功能性。轉場速度太快會讓用戶感到迷惑，太慢則會讓用戶產生厭煩的情緒。

網頁設計技巧

這可以根據用戶在界面停留的時長來估算動效的持續時長。

按照以往導航過程中，用戶在導航中所駐留的時長進行判斷，300s的動效時長是個值得參考的數據。而其他更小的UI空間，動效持續時長需要縮短，通常100ms就足夠了。

* 如果以上參考數據無法套用到你的某個動效設計中，可以25ms為單位調整動效速度，直到它達到你的預期效果。

看完以上內容，如果你還是覺得運用動效設計有難度，可直接採用Material Design中的標準緩動。這種動效能讓元素具備更加自然的物理質感，讓用戶更容易注意到整個變化的結果。

完成基本的轉場動效設計後，就可以考慮更加細化和個性化的設計和挑戰。到這時簡單的動效不能滿足的地方，你可添加生動多變的動效，讓你的網頁設計更加有趣。