常用的六種圖標動效設計思路發(fā)布者：本站     時間：2020-06-20 14:06:56

現(xiàn)在越來越多手機應用和web應用都開始注重動效的設計，恰到好處的動效可以給用戶帶來愉悅的交互體驗，是應用顏值擔當?shù)囊淮笾匾糠帧?

icon，也就是圖標。在交互過程中，應用各種icon都會跟隨不同的事件發(fā)生不同的轉(zhuǎn)換。舉兩個例子，一個音樂播放器的播放模式改變和充電時電量圖標的改變。

過去，icon的轉(zhuǎn)換都十分死板，而近年來開始流行在切換icon的時候加入過渡動畫，這種動效給用戶體驗帶來的正面效果十分明顯，給應用添色不少。

然而面對icon動效，我們應該如何設計？今天分享幾個設計icon動效的思路。在此說明一下，配圖的動效有些是臨摹有些是原創(chuàng)，只為了統(tǒng)一樣式方便閱讀。

一、屬性轉(zhuǎn)換法

這是最為普遍也最為簡單的一種icon切換思路。

屬性包含了位置、大小、旋轉(zhuǎn)、透明度、顏色等，在這些屬性上面做動效，若運用恰當，可以做出令人眼前一亮的動效。

現(xiàn)在絕大多數(shù)icon動效都離不開屬性變化，運動恰當，這個簡單而強大的方法大有可為之處。

二、路徑重組法

這可能是看慣了屬性變換的動效之后，又一個讓人眼前一亮的動效思路。

將icon的路徑（筆畫）進行重組，構(gòu)成一個新的icon，這期間考驗著更多的東西，比如觀察兩個icon筆畫之間的關(guān)系，這個思路最近相當流行，同時也具有挑戰(zhàn)性。

三、點線面降級法

這是一個相當有用的思路。

面和面進行轉(zhuǎn)換的時候，可以用線作為介質(zhì)，一個面先轉(zhuǎn)換成一根線，再通過這根線轉(zhuǎn)換成另一個面。同理，線和線轉(zhuǎn)換時，可以用點作為介質(zhì)，一根線先轉(zhuǎn)換成一個點，再通過這個點轉(zhuǎn)換成另一根線。