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

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

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

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

KickMaterial

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

Animated Android Webview by Jovie Brett

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

Contacts by Jovie Brett

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

Icons for Business School Strategy Simulator by Valeria Ruiz-Schulze

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

Icon Animation | Immersus Media by James Prola

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

UX Camp Proposals by Tim Walsh

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

Twitter Canada by Al Boardman

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

Animated icons by Tommaso Dal Poz

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

Animated Icons by Zach Murphy

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

Concept Icon Animation 2 by ReignDesign

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

Houston, We Have a Problem by Mike Russo

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

Thumbs Down by Mike Russo

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

Tiny Icon Animations: New & Fixed by Fabricio Rosa Marques

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

Weather Icon by Miguel Natividad

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

Google Express by Jason Zigrino

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

B by Al Boardman

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

Sports Analytics Icons by Mike Mirandi

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

Concept Icon animation by ReignDesign

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

結(jié)語

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