果斷收藏！20組絕佳用戶體驗(yàn)的高素質(zhì)動(dòng)畫圖標(biāo)

雖然早期的GIF動(dòng)畫不論是從技術(shù)層面還是從應(yīng)用范疇來看，都和界面設(shè)計(jì)并無特別直接的關(guān)系，但是近幾年，動(dòng)畫圖標(biāo)開始在界面設(shè)計(jì)中大量運(yùn)用，并有流行開來的趨勢。

坦率的講，讓圖標(biāo)動(dòng)起來，或者通過動(dòng)態(tài)圖表達(dá)一些有趣的場景并非什么新鮮的東西，但是它們?cè)诤荛L的一段時(shí)間里都玩兒的比較簡單，居于次席，或者純是拿來搞笑。但是現(xiàn)在不一樣了，通過精巧的后期處理，這些動(dòng)態(tài)的圖標(biāo)成為了界面上令人流連忘返的重要組成部分，成為了提升用戶體驗(yàn)不可或缺的元素。如此一來，Gif圖所構(gòu)建的動(dòng)畫圖標(biāo)開始“大規(guī)模入侵”網(wǎng)頁設(shè)計(jì)和UI設(shè)計(jì)領(lǐng)域就不是什么難以理解的事情了。

當(dāng)然，空洞的概念描述都不如圖片來的直觀清晰。我想下面的20個(gè)案例會(huì)讓你更清晰的了解動(dòng)畫圖標(biāo)的使用。

KickMaterial

KickMaterial 是Kickstarter的Material風(fēng)格APP的動(dòng)態(tài)圖標(biāo)，這個(gè)令人討喜的設(shè)計(jì)是源于Material Design，柔和的色彩和平整的形態(tài)賦予圖標(biāo)精致而時(shí)尚的外觀，流暢的動(dòng)畫令賦予圖標(biāo)以動(dòng)感，強(qiáng)化用戶對(duì)于它功能的理解。

Animated Android Webview by Jovie Brett

微妙的色調(diào)讓簡單的齒輪擁有了立體感，加上旋轉(zhuǎn)效果之后，整個(gè)圖標(biāo)開始擁有了真實(shí)的質(zhì)感。

Contacts by Jovie Brett

這個(gè)聯(lián)系人圖標(biāo)同樣采用了樸素的藍(lán)白配色，色調(diào)營造出擬真的質(zhì)感，名片反轉(zhuǎn)的動(dòng)畫不僅暗示出了圖標(biāo)的含義，而且確保了設(shè)計(jì)的識(shí)別度。

Icons for Business School Strategy Simulator by Valeria Ruiz-Schulze

設(shè)計(jì)師展示了一組充滿活力的扁平風(fēng)圓形動(dòng)畫圖標(biāo)，每個(gè)圖標(biāo)都包含一個(gè)類別，圖片中的信息量比傳統(tǒng)的圖標(biāo)要大很多，能更好的傳達(dá)信息。

Icon Animation | Immersus Media by James Prola

這個(gè)設(shè)計(jì)項(xiàng)目中，三個(gè)動(dòng)畫圖標(biāo)的設(shè)計(jì)細(xì)致平整，其中各種元素的運(yùn)動(dòng)速率變化極為自然，使得整個(gè)圖標(biāo)的視覺體驗(yàn)非常優(yōu)秀。

UX Camp Proposals by Tim Walsh

單色的動(dòng)畫圖標(biāo)是否會(huì)讓人感到單調(diào)?并不是這樣，這個(gè)項(xiàng)目中，設(shè)計(jì)師融合了喇叭和地圖兩個(gè)不同的元素，通過快速的變動(dòng)呈現(xiàn)出圖標(biāo)演進(jìn)變化的過程，體現(xiàn)出和靜態(tài)圖標(biāo)截然不同的功能和體驗(yàn)。

Twitter Canada by Al Boardman

扁平化設(shè)計(jì)趨勢的一個(gè)重要的影響就是讓動(dòng)畫圖標(biāo)更易于制作也更富有生命力。這組活動(dòng)相關(guān)的圓形圖標(biāo)用色鮮明，但是效果足夠?qū)I(yè)，其中的動(dòng)作設(shè)計(jì)節(jié)奏感很強(qiáng)，看起來亮眼而獨(dú)特。

Animated icons by Tommaso Dal Poz

這是一組動(dòng)畫圖標(biāo)的設(shè)計(jì)能在第一時(shí)間吸引你的眼球，它的視覺設(shè)計(jì)堪稱典范，它最突出的地方有兩個(gè)，一個(gè)是開頭的色彩切換，一個(gè)是圖標(biāo)出現(xiàn)后微妙的運(yùn)動(dòng)效果。

Animated Icons by Zach Murphy

這組圖標(biāo)同樣是扁平風(fēng)，動(dòng)畫式的展示手法讓它可以在一個(gè)過程中包含三個(gè)不同類型的圖標(biāo)，三個(gè)獨(dú)立的動(dòng)效無縫地融為一體。

Concept Icon Animation 2 by ReignDesign

動(dòng)畫圖標(biāo)有一種流行的玩法，就是展示圖標(biāo)的制作過程，而這個(gè)Concept Icon 就是這么玩的，這個(gè)看起來漂亮的對(duì)話圖標(biāo)最開始就是這么簡單，但是簡單幾步之后，就是一個(gè)精致的扁平風(fēng)圖標(biāo)。

Houston, We Have a Problem by Mike Russo

這是兩個(gè)簡單明了的醫(yī)療類的動(dòng)畫圖標(biāo)，動(dòng)畫展示呈現(xiàn)出了圖標(biāo)中各個(gè)元素構(gòu)成的過程，包含了不少醫(yī)療相關(guān)的元素，有趣好玩，又包含隱喻。

Thumbs Down by Mike Russo

這個(gè)Thumbs Down 圖標(biāo)相比其他更富有藝術(shù)感，雖然它也接近于扁平風(fēng)，但是細(xì)致而復(fù)古的紋理和靈動(dòng)的運(yùn)動(dòng)過程讓它脫穎而出，雖然拇指向下但是整個(gè)動(dòng)畫的節(jié)奏卻是有趣而積極的。

Tiny Icon Animations: New & Fixed by Fabricio Rosa Marques

細(xì)致的勾勒和漂亮的色彩讓圖標(biāo)養(yǎng)眼，而微妙擬真的動(dòng)畫讓整個(gè)圖標(biāo)活了過來。雖然它們的變化并不復(fù)雜，但是使得整個(gè)設(shè)計(jì)都生動(dòng)了起來，這也就是所謂的點(diǎn)睛之筆吧。

Weather Icon by Miguel Natividad

這個(gè)動(dòng)畫圖標(biāo)展示了一組細(xì)膩有范兒的天氣圖標(biāo)控件，由太陽轉(zhuǎn)為雨天的圖標(biāo)不僅展示了圖標(biāo)的轉(zhuǎn)變過程，而且非常適合于天氣切換的動(dòng)效，這些簡單線條構(gòu)成的天氣圖標(biāo)本身更容易實(shí)現(xiàn)。

Google Express by Jason Zigrino

這個(gè)擬真又充滿活力的圖標(biāo)是為谷歌快遞所設(shè)計(jì)的，整個(gè)動(dòng)畫變化過程中，包裹從天而降，降落傘撐開，運(yùn)動(dòng)到中間構(gòu)成一個(gè)圓形的圖標(biāo)，自然而流暢。

B by Al Boardman

轉(zhuǎn)變是一個(gè)很有意思的是，動(dòng)畫就是為了呈現(xiàn)轉(zhuǎn)變過程的。從復(fù)雜變?yōu)楹唵魏屯唵位癁閺?fù)雜是同樣有趣的，復(fù)雜的元素共同組成了大寫字母B的輪廓，然后化繁為簡，一個(gè)扁平直觀的B就出來了。

Sports Analytics Icons by Mike Mirandi

這組運(yùn)動(dòng)相關(guān)的圖標(biāo)同樣也是走到額簡單直觀的路線，而它的突出之處和其他的幾個(gè)一樣，賦予節(jié)奏感而微妙的運(yùn)動(dòng)動(dòng)畫讓它充滿了活力，個(gè)人耳目一新的感覺。

Concept Icon animation by ReignDesign

這個(gè)概念圖標(biāo)設(shè)計(jì)同樣是展示從線框圖到最終圖標(biāo)成型的繪制過程，看著這個(gè)明艷細(xì)膩的成品再對(duì)比之前簡單的框圖，非常有趣。

結(jié)語

許多設(shè)計(jì)師還是習(xí)慣與使用After Effect來制作動(dòng)畫圖標(biāo)，其實(shí)用JS也同樣可以。扁平風(fēng)讓動(dòng)畫圖標(biāo)更加易于實(shí)現(xiàn)，但是你如果要讓它看起來不那么生硬，就得深入了解物理世界的真實(shí)運(yùn)動(dòng)過程了。當(dāng)然，最終的目標(biāo)還是要讓這些飽含大量信息的圖標(biāo)成為你的界面當(dāng)中，引導(dǎo)用戶的重要組成部分。既然一圖勝千言，那么動(dòng)畫能夠省略多少文章呢?你可以腦補(bǔ)一下。