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

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

當(dāng)然，空洞的概念描述都不如圖片來(lái)的直觀清晰。我想下面的20個(gè)案例會(huì)讓你更清晰的了解動(dòng)畫(huà)圖標(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)畫(huà)令賦予圖標(biāo)以動(dòng)感，強(qiáng)化用戶對(duì)于它功能的理解。

Animated Android Webview by Jovie Brett

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

Contacts by Jovie Brett

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

Icons for Business School Strategy Simulator by Valeria Ruiz-Schulze

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

Icon Animation | Immersus Media by James Prola

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

UX Camp Proposals by Tim Walsh

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

Twitter Canada by Al Boardman

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

Animated icons by Tommaso Dal Poz

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

Animated Icons by Zach Murphy

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

Concept Icon Animation 2 by ReignDesign

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

Houston, We Have a Problem by Mike Russo

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

Thumbs Down by Mike Russo

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

Tiny Icon Animations: New & Fixed by Fabricio Rosa Marques

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

Weather Icon by Miguel Natividad

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

Google Express by Jason Zigrino

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

B by Al Boardman

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

Sports Analytics Icons by Mike Mirandi

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

Concept Icon animation by ReignDesign

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

結(jié)語(yǔ)

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

【動(dòng)效設(shè)計(jì)好文】

告訴你為什么要做動(dòng)效設(shè)計(jì)：
《設(shè)計(jì)師的經(jīng)驗(yàn)總結(jié)！我們?yōu)槭裁葱枰獎(jiǎng)有гO(shè)計(jì)？》

改善動(dòng)效實(shí)戰(zhàn)：
《點(diǎn)睛還是敗筆？手把手教你改善界面交互動(dòng)畫(huà)（附案例）》

Windows用戶動(dòng)效設(shè)計(jì)工具：
《WINDOW黨福利！這才是適合設(shè)計(jì)師的免費(fèi)動(dòng)效神器PIXATE》

原文地址：designmodo
優(yōu)設(shè)譯者：@陳子木

「子木說(shuō)」

我們似乎正在走向一個(gè)更廣泛意義上“擬物”的時(shí)代。告別了繁復(fù)的紋理、大高光和深陰影，但是我們的動(dòng)效需要具有物理世界的運(yùn)動(dòng)規(guī)律，新的iPhone 也開(kāi)始借助3D Touch在固定的屏幕上模擬真實(shí)的按壓質(zhì)感。

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量100萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com