掌握這6種動(dòng)效設(shè)計(jì)思路,你也是APP動(dòng)效設(shè)計(jì)大神

據(jù)說(shuō)在互聯(lián)網(wǎng)行業(yè)的做動(dòng)效,這兩種人會(huì)比較吃香:

1、動(dòng)態(tài)圖形設(shè)計(jì)能力一流,隨便給你個(gè)元素你就能做出花來(lái),如下圖:

APP UI動(dòng)效為什么那么受歡迎

2、原型設(shè)計(jì)能力強(qiáng),能快速幫UED Team實(shí)現(xiàn)可交互原型,并且有優(yōu)化交互設(shè)計(jì)的能力。

擴(kuò)展閱讀:http://www.ui.cn/detail/41420.html

 

而且最近這幾年,會(huì)動(dòng)效設(shè)計(jì)的設(shè)計(jì)師的薪資和受歡迎的程度都會(huì)比UI設(shè)計(jì)師吃香一點(diǎn)。

 

所以,要想成為動(dòng)效設(shè)計(jì)師 或 全棧設(shè)計(jì)師,動(dòng)效設(shè)計(jì)是必備一項(xiàng)技能。

今天學(xué)堂君就傳授大家6種動(dòng)效設(shè)計(jì)思路,讓你們分分鐘成為app動(dòng)效設(shè)計(jì)大神。

 

第1種、屬性轉(zhuǎn)換法

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

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

2a400a8505eff60f5405684e57e6eab0

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

第2種、路徑重組法

這可能是看慣了屬性變換的動(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)性。

第3種、點(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)換成另一根線。

這么說(shuō)有點(diǎn)抽象,我們來(lái)看幾個(gè)例子。

第4種、遮罩法

兩個(gè)圖形之間相互轉(zhuǎn)換時(shí),可以用其中一個(gè)圖形作為另一個(gè)圖形的遮罩,也就是邊界,當(dāng)這個(gè)圖形放大的時(shí)候,因?yàn)榱硪粋€(gè)圖形作為邊界的緣故,轉(zhuǎn)換成了另一個(gè)圖形的形狀。

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

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

6dx20151206

第5種、分裂融合法

打個(gè)貼切的比方,就是把一把劍融成鐵水之后,鑄成一把新刀。

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

第6種、圖標(biāo)特性法

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

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

2dx20151206

1dx20151206

?

以上6點(diǎn)就是最基本的圖標(biāo)動(dòng)效設(shè)計(jì)方法。掌握好這6種動(dòng)效設(shè)計(jì)思路,還需要你了解一些圖形運(yùn)動(dòng)方面的知識(shí)。才能做出令人愉悅的icon動(dòng)效,這個(gè)時(shí)候需要大家更多的去學(xué)習(xí),比如考慮的方面有緩動(dòng)、彈動(dòng)、拖尾、時(shí)差、隨機(jī)、層次感、運(yùn)動(dòng)修飾等等。

更多關(guān)于APP動(dòng)效的知識(shí)和干貨如下:

1、國(guó)外酷炫的手機(jī)UI動(dòng)效設(shè)計(jì),雞皮疙瘩都起來(lái)了

2、9張超全面的非??犰诺腁PP交互動(dòng)效設(shè)計(jì)案例欣賞

3、APP交互設(shè)計(jì)雞湯:10條非常實(shí)用的UI動(dòng)效設(shè)計(jì)原則

4、APP UI動(dòng)效設(shè)計(jì)中六個(gè)基本原則與最高原則

 

 

每天更新,
全站高品質(zhì)素材免費(fèi)下載!