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

現在越來(lái)越多手機應用和web應用都開(kāi)始注重動(dòng)效的設計，恰到好處的動(dòng)效可以給用戶(hù)帶來(lái)愉悅的交互體驗，是應用顏值擔當的一大重要部分。

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

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

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

一、屬性轉換法

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

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

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

二、路徑重組法

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

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

三、點(diǎn)線(xiàn)面降級法

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

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