一起搖擺!20組賦予絕佳用戶體驗的高素質動畫圖標 - 優設網 - UISDC

一起搖擺!20組賦予絕佳用戶體驗的高素質動畫圖標

2015/09/10 15134評論區

20-perfect-gif-icons-design-1

云南体彩网雖然早期的GIF動畫豈論是從技術層面還是從應用范疇來看,都和界面設計并無特別直接的關系,但是近幾年,動畫圖標開始在界面設計中大量運用,并有流行開來的趨勢。

云南体彩网坦率的講,讓圖標動起來,或者通過動態圖表達一些有趣的場景并非什么新鮮的器械,但是它們在很長的一段時間里都玩兒的比較簡單,居于次席,或者純是拿來搞笑。但是現在紛歧樣了,通過精巧的后期處理,這些動態的圖標成為了界面上令人流連忘返的重要組成部分,成為了提升用戶體驗弗成或缺的元素。如此一來,Gif圖所構建的動畫圖標開始“大規模入侵”網頁設計和UI設計領域就不是什么難以理解的事情了。

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

云南体彩网KickMaterial 是Kickstarter的Material風格APP的動態圖標,這個令人討喜的設計是源于Material Design,柔和的色彩和平整的形態賦予圖標精致而時尚的外觀,流暢的動畫令賦予圖標以動感,強化用戶對于它功能的理解。

微妙的色調讓簡單的齒輪擁有了立體感,加上旋轉效果之后,整個圖標開始擁有了真實的質感。

這個聯系人圖標同樣采取了樸素的藍白配色,色調營造出擬真的質感,名片反轉的動畫不僅暗示出了圖標的含義,而且確保了設計的識別度。

設計師展示了一組充斥活力的扁平風圓形動畫圖標,每個圖標都包含一個類別,圖片中的信息量比傳統的圖標要大很多,能更好的轉達信息。

這個設計項目中,三個動畫圖標的設計細致平整,其中各種元素的運動速率變更極為自然,使得整個圖標的視覺體驗非常優秀。

云南体彩网單色的動畫圖標是否會讓人感到單調?并不是這樣,這個項目中,設計師融合了喇叭和地圖兩個分歧的元素,通過快速的更改涌現出圖標演進變更的過程,體現出和靜態圖標截然分歧的功能和體驗。

云南体彩网扁平化設計趨勢的一個重要的影響就是讓動畫圖標更易于制作也更富有生命力。這組活動相關的圓形圖標用色鮮明,但是效果足夠專業,其中的動作設計節奏感很強,看起來亮眼而奇特。

這是一組動畫圖標的設計能在第一時間吸引你的眼球,它的視覺設計堪稱范例,它最突出的地方有兩個,一個是開頭的色彩切換,一個是圖標涌現后微妙的運動效果。

這組圖標同樣是扁平風,動畫式的展示手法讓它可以在一個過程中包含三個分歧類型的圖標,三個自力的動效無縫地融為一體。

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

這是兩個簡單明了的醫療類的動畫圖標,動畫展示涌現出了圖標中各個元素構成的過程,包含了不少醫療相關的元素,有趣好玩,又包含隱喻。

這個Thumbs Down 圖標相比其他更富有藝術感,雖然它也接近于扁平風,但是細致而復古的紋理和靈動的運動過程讓它脫穎而出,雖然拇指向下但是整個動畫的節奏卻是有趣而積極的。

細致的勾勒和漂亮的色彩讓圖標養眼,而微妙擬真的動畫讓整個圖標活了過來。雖然它們的變更并不復雜,但是使得整個設計都生動了起來,這也就是所謂的點睛之筆吧。

云南体彩网這個動畫圖標展示了一組細膩有范兒的天氣圖標控件,由太陽轉為雨天的圖標不僅展示了圖標的轉變過程,而且非常適合于天氣切換的動效,這些簡單線條構成的天氣圖標自己更容易實現。

這個擬真又充斥活力的圖標是為谷歌快遞所設計的,整個動畫變更過程中,包裹從天而降,降落傘撐開,運動到中間構成一個圓形的圖標,自然而流暢。

轉變是一個很有意思的是,動畫就是為了涌現轉變過程的。從復雜變為簡單和同簡單化為復雜是同樣有趣的,復雜的元素共同組成了大寫字母B的輪廓,然后化繁為簡,一個扁平直觀的B就出來了。

云南体彩网這組運動相關的圖標同樣也是走到額簡單直觀的路線,而它的突出之處和其他的幾個一樣,賦予節奏感而微妙的運動動畫讓它充斥了活力,個人耳目一新的感覺。

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

結語

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

【動效設計好文】

告訴你為什么要做動效設計:
《設計師的經驗總結!我們為什么需要動效設計?》

改善動效實戰:
《點睛還是敗筆?手把手教你改善界面交互動畫(附案例)》

Windows用戶動效設計工具:
《WINDOW黨福利!這才是適合設計師的免費動效神器PIXATE》

原文地址:
優設譯者:

「子木說」

云南体彩网我們似乎正在走向一個更廣泛意義上“擬物”的時代。告別了繁復的紋理、大高光和深陰影,但是我們的動效需要具有物理世界的運動規律,新的iPhone 也開始借助3D Touch在固定的屏幕上模擬真實的按壓質感。

云南体彩网本文由優設網原創翻譯,請尊重版權和譯者結果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網7daer.cn“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.7daer.cn/book/
設計微博:擁有粉絲量100萬的人氣微博 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.7daer.cn

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.7daer.cn/20-perfect-gif-icons-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

您還沒有登錄

優設啟用更平安省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里