常用的六種圖標(biāo)動(dòng)效設(shè)計(jì)思路發(fā)布者：本站     時(shí)間：2020-06-20 14:06:56

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

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

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

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

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

這是最為普遍也最為簡(jiǎn)單的一種icon切換思路。

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

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

二、路徑重組法

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

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

三、點(diǎn)線面降級(jí)法

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

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