icon動效設(shè)計思路方法

icon動效設(shè)計思路方法：

　　歸納一下icon動效的一些設(shè)計方法

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

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

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

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

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

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

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

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

　　二、路徑重組法

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

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

　　三、點線面降級法

　　這是一個相當(dāng)有用的思路。

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

　　這么說有點抽象，我們來看幾個例子。

　　四、遮罩法

　　兩個圖形之間相互轉(zhuǎn)換時，可以用其中一個圖形作為另一個圖形的遮罩，也就是邊界，當(dāng)這個圖形放大的時候，因為另一個圖形作為邊界的緣故，轉(zhuǎn)換成了另一個圖形的形狀。

　　思路很簡單，卻又一點局限性，兩個圖形必須是包含關(guān)系。

　　在谷歌的Material design規(guī)范中也出現(xiàn)類似的動效。

　　五、分裂融合法

　　打個貼切的比方，就是把一把劍融成鐵水之后，鑄成一把新刀。

　　分裂融合法尤其適用于其中一個圖標(biāo)是一個整體，另一個圖標(biāo)由多個分離的部分組成的情況。由分裂融合法做出來的動效也相當(dāng)有趣。

　　六、圖標(biāo)特性法

　　以上的思路只是停留在如何讓icon動效有趣的層面上，那么如何讓icon動效不僅有趣而且有意義呢?這就需要考慮不同icon之間的特性來設(shè)計動效。

　　圖標(biāo)特性法，顧名思義就是利用圖標(biāo)表達的實際意義，做出與之吻合的動效，需要很強的思維發(fā)散性。

　　要做好一個icon動效，光有思路是不行的，還需要了解一些圖形運動方面的知識。如何做出令人愉悅的icon動效，可以考慮的方面有緩動、彈動、拖尾、時差、隨機、層次感、運動修飾等等。

　　如果這篇文章對你有所幫助，不如點個贊。

　　(*′?`*)