| 導購 | 订阅 | 在线投稿
分享
 
 
當前位置: 王朝網路 >> 學院 >> MATERIAL DESIGN 圖標設計有哪些不同的玩法?
 

MATERIAL DESIGN 圖標設計有哪些不同的玩法?

2016-08-30 06:49:32  編輯來源:互聯網  简体版  手機版  評論  字體: ||
 
 
  作爲目前最有影響力的設計規範之一,Material Design 呈現出蓬勃而持久的生命力,不論是移動端UI設計還是網頁設計,設計師們對 Material Design 的運用越來越熟練了。在圖標和小型插畫的運用上,要匹配Material Design的整體風格還是需要一定技巧的,在保證直觀簡約的同時,確保色調的協調而不會産生喧賓奪主的效果,在排版設計上控制好留白和細節的優雅。

  Material Design 需要兼容不同的屏幕不同的平台,需要設計師爲用戶提供舒適一致的用戶體驗。這也是爲什麽設計師需要強化對于信息層次的把控,直觀的結構、大膽而圖形化的界面是每一個力圖掌控Material Design精髓的設計師應該做到的事情。

  今天,我們來從圖標的層面來聊一下如何實現真正意義上的Material Design,如何在五彩缤紛的扁平化界面中用對圖標,用好圖標。案例總是最鮮明最有說服力的,下面的案例中,許多圖標設計 都是設計師原創的概念設計,它們大多都很清晰地诠釋了Material Design。

  Material Web Icons [freebie] by Adrian Goia

  這組六個小圖標雖然尺寸不大,但是在尺寸和信息量上做到了平衡,色調搭配上符合Material Design 的特征,更重要的是,它延續了它“擬物”的特質,增加了僞3D的質感。

  Web Analytics Material Icon by Khuram Jameel

  Khuram Jameel 用簡單的幾何圖形來勾勒自己的想法,雖然並不複雜,但是看起來依然很精致,配色和留白的使用在整個設計中起到了重要的作用。

  Google Maps & Streetview icon by Jovie Brett

  Jovie Brett 基于流行的谷歌圖標風格,制作出了兩個獨特的修改版。整套設計使用了六種不同的色調,這些色調都是典型的谷歌品牌色,並且加入了些許陰影提升了整體的層次感和立體感。

  TaxPRo Docs Icons by Qaaim Goodwin

  Goodwin 在選取這組圖標的主色調上非常用心,整個配色方案上選取了6種扁平化的色彩來搭配,配合小幅度的陰影構造立體感。白色背景的使用讓整個設計擁有了開放的感覺。

  Flat Services Icons by Khuram Jameel

  Jamell 的這套扁平化圖標設計 走的是非常規路線,深色的背景並不多見,圖標本體的色調雖然使用的是飽和度不高的扁平色,但是在這套設計中看起來頗有活力。充滿棱角的圖標邊緣給人非常深刻的印象,讓人過目難忘。

  Set Of Material Design Hosting/Server Icons by Oxygenna

  Oxygenna 這套網絡服務器相關的圖標設計 相比于之前的圖標設計更冰冷一些,色調以灰色爲主,整體風格也貼合Material Design的要求,給人以務實的感覺。

  Icons by Diego Barrionuevo

  Material Design 對于擬物化的態度更加暧昧,貼合扁平化2.0的理念,而 Barrionueyo 的這套圖標設計也延續了這一點,雖然沒有漸變,但是陰影的回歸讓扁平化的各色物品擁有了更加真實的立體感。極簡的線條和令人眼前一亮的色彩,都讓這套圖標從諸多設計作品中脫穎而出。

  Angular Material Icons by Merissa Acosta

  Acosta 的這套圖標也使用了少見的暗色調來設計,不過獨特的折紙風還是非常有趣的。這種別具一格的配色方案雖然看起來略顯沈悶,但是對于習慣了色彩鮮豔的配色的用戶而言,還是挺有意思的。

  Icons Responsive Material Design Palette by Ramy Wafaa

  Wafaa的這套響應式圖標模板設計整體充滿了積極的情緒,協調的配色給人以奇妙的吸引力,統一的樣式避免了雜亂無章的外觀的出現。

  Material Design Icon Template – FreebiePSD

  如果你也想制作均勻漂亮的扁平風圖標,不妨下載這個免費的PSD圖標模板,它提供了類似線框圖一樣的功能,輔助你快速完成設計。

  Alcatel Launcher App Icons by Denys Nevozhai

  八種基本的色彩就可以創造出一套漂亮的扁平風圖標了,而Nevozhai 的這套應用圖標合集就是這麽來的。這套圖標走的極簡的風格,沒有使用陰影,組成圖標細節的幾何圖形精准而到位。

  Isometric Material Icons vol 3 – Charts by Oxygenna

  Material Design 中是否只能使用2D的圖標呢?並非如此,Oxygenna 的這套圖標設計就采用了3D的圖標設計,中性的灰色和熱情的橙色賦予了圖標獨特的性格。

  1,000 Flat And Material Design Avatars

  iconshock 提供的這組扁平風頭像合集營造了非常獨特的氛圍,長陰影在此處並不顯得過時,每個不一樣的頭像都擁有區別于其他的獨特個性。

  Material Inspired Icons Master Set by Jurre Houtkamp

  這位藝術家擅長于管理鮮豔、複雜的配色,僞陰影和大量的留白能體現出他的專業之處。更重要的是,他的設計手法賦予了經典的、傳統的圖標以新的感覺。

  Vegetables and Fruit Set Collection by Samira

  Material Design同樣可以優雅而複古。Samira 的這組用蔬菜和水果設計出來的圖標就是這樣的典型。色調柔和,形象鮮明,這樣還不夠麽?

  Material Facebook by Giulio “bart172” Smedile

  經典的Facebook 圖標被這位設計師重新設計出了不一樣的感覺,更富有活力也更幹脆了。

  Icons by Drawithpixels

  Drawithpixels 所提供的這組圖標已經接近于插畫的水平了,它們成爲了網頁用戶體驗設計的一部分,它們不僅賞心悅目,而且在頁面中起到了重要的內容引導的作用。

  Periodic Table Product Icon by Michael Cook

  Material Design 風格的元素周期表長什麽樣?Michael Cook 的這套設計就是答案。鮮豔而細致的配色是它的特色,略顯複雜的結構則給人以專業的感覺。

  Material Design Harry by Hannah Atkin

  Atkin 的這個圖標設計擁有類似傳統iOS圖標一樣的圓角矩形的輪廓,突出的呆毛則讓整個圖標充滿了活力于個性。

  Material Design Icon Templates by Zlatko Najdenovski

  這是一份AI格式的Material Design 圖標設計模板,其中專業的線框可以引導你的設計,獨特的視角則能夠讓你的圖標擁有全新的角度。

  結語

  Material Design 規範下的圖標設計不僅僅在配色上可以說道,在角度、風格、細節、功能上同樣可以不同凡響。發揮你的想象力吧。
 
 
 
上一篇《爲什麽年輕設計師「越努力」未必「越幸運」?》
下一篇《給客戶展示設計方案的5個小技巧》
 
 
 
 
 
 
 
 
日版寵物情人插曲《Winding Road》歌詞

日版寵物情人2017的插曲,很帶節奏感,日語的,女生唱的。 最後聽見是在第8集的時候女主手割傷了,然後男主用嘴幫她吸了一下,插曲就出來了。 歌手:Def...

兄弟共妻,我成了他們夜裏的美食

老鍾家的兩個兒子很特別,就是跟其他的人不太一樣,魔一般的執著。兄弟倆都到了要結婚的年齡了,不管自家老爹怎麽磨破嘴皮子,兄弟倆說不娶就不娶,老父母爲兄弟兩操碎了心...

如何磨出破洞牛仔褲?牛仔褲怎麽剪破洞?

把牛仔褲磨出有線的破洞 1、具體工具就是磨腳石,下面墊一個硬物,然後用磨腳石一直磨一直磨,到把那塊磨薄了,用手撕開就好了。出來的洞啊很自然的。需要貓須的話調幾...

我就是掃描下圖得到了敬業福和愛國福

先來看下敬業福和愛國福 今年春節,支付寶再次推出了“五福紅包”活動,表示要“把欠大家的敬業福都還給大家”。 今天該活動正式啓動,和去年一樣,需要收集“五福”...

冰箱異味産生的原因和臭味去除的方法

有時候我們打開冰箱就會聞到一股異味,冰箱裏的這種異味是因爲一些物質發出的氣味的混合體,聞起來讓人惡心。 産生這些異味的主要原因有以下幾點。 1、很多人有這種習...

《極品家丁》1-31集大結局分集劇情介紹

簡介 《極品家丁》講述了現代白領林晚榮無意回到古代金陵,並追隨蕭二小姐化名“林三”進入蕭府,不料卻陰差陽錯上演了一出低級家丁拼搏上位的“林三升職記”。...

李溪芮《極品家丁》片尾曲《你就是我最愛的寶寶》歌詞

你就是我最愛的寶寶 - 李溪芮 (電視劇《極品家丁》片尾曲) 作詞:常馨內 作曲:常馨內 你的眉 又鬼馬的挑 你的嘴 又壞壞的笑 上一秒吵鬧 下...

烏梅的功效與作用以及烏梅的食用禁忌有哪些?

烏梅,又稱春梅,中醫認爲,烏梅味酸,性溫,無毒,具有安心、除熱、下氣、祛痰、止渴調中、殺蟲的功效,治肢體痛、肺痨病。烏梅泡水喝能治傷寒煩熱、止吐瀉,與幹姜一起制...

什麽是脂肪粒?如何消除臉部脂肪粒?

什麽是脂肪粒 在我們的臉上總會長一個個像脂肪的小顆粒,弄也弄不掉,而且顔色還是白白的。它既不是粉刺也不是其他的任何痘痘,它就是脂肪粒。 脂肪粒雖然也是由油脂...

網絡安全治理:國家安全保障的主要方向是打擊犯罪,而不是處置和懲罰受害者

來源:中國青年報 新的攻擊方法不斷湧現,黑客幾乎永遠占據網絡攻擊的上風,我們不可能通過技術手段杜絕網絡攻擊。國家安全保障的主要方向是打擊犯罪,而不是處置和懲罰...

河南夫妻在溫嶺網絡直播“造人”內容涉黃被刑事拘留

夫妻網絡直播“造人”爆紅   1月9日,溫嶺城北派出所接到南京警方的協查通告,他們近期打掉了一個涉黃直播APP平台。而根據掌握的線索,其中有一對涉案的夫妻主播...

如何防止牆紙老化?牆紙變舊變黃怎麽辦?

如何防止牆紙老化? (1)選擇透氣性好的牆紙 市場上牆紙的材質分無紡布的、木纖維的、PVC的、玻璃纖維基材的、布面的等,相對而言,PVC材質的牆紙最不透氣...

鮮肌之謎非日本生産VS鮮肌之謎假日貨是謠言

觀點一:破日本銷售量的“鮮肌之謎” 非日本生産 近一段時間,淘寶上架了一款名爲“鮮肌之謎的” 鲑魚卵巢美容液,號稱是最近日本的一款推出的全新護膚品,産品本身所...

中國最美古詩詞精選摘抄

系腰裙(北宋詞人 張先) 惜霜蟾照夜雲天,朦胧影、畫勾闌。人情縱似長情月,算一年年。又能得、幾番圓。 欲寄西江題葉字,流不到、五亭前。東池始有荷新綠,尚小如...

關于女人的經典語句

關于女人的經典語句1、【做一個獨立的女人】 思想獨立:有主見、有自己的人生觀、價值觀。有上進心,永遠不放棄自己的理想,做一份自己喜愛的事業,擁有快樂和成就...

未來我們可以和性愛機器人結婚嗎?

你想體驗機器人性愛嗎?你想和性愛機器人結婚嗎?如果你想,機器人有拒絕你的權利嗎? 近日,第二屆“國際人類-機器人性愛研討會”大會在倫敦金史密斯大學落下帷幕。而...

全球最變態的十個地方

10.土耳其地下洞穴城市 變態指數:★★☆☆☆ 這是土耳其卡帕多西亞的一個著名景點,傳說是當年基督教徒們爲了躲避戰爭而在此修建。裏面曾住著20000人,...

科學家稱,人類死亡後意識將在另外一個宇宙中繼續存活

據英國《每日快報》報道,一位科學家兼理論家Robert Lanza博士宣稱,世界上並不存在人類死亡,死亡的只是身體。他認爲我們的意識借助我們體內的能量生存,而且...

《屏裏狐》片頭曲《我愛狐狸精》歌詞是什麽?

《我愛狐狸精》 - 劉馨棋   (電視劇《屏裏狐》主題曲)   作詞:金十三&李旦   作曲:劉嘉   狐狸精 狐狸仙   千年修...

 
 
 
作爲目前最有影響力的設計規範之一,Material Design 呈現出蓬勃而持久的生命力,不論是移動端UI設計還是網頁設計,設計師們對 Material Design 的運用越來越熟練了。在圖標和小型插畫的運用上,要匹配Material Design的整體風格還是需要一定技巧的,在保證直觀簡約的同時,確保色調的協調而不會産生喧賓奪主的效果,在排版設計上控制好留白和細節的優雅。 Material Design 需要兼容不同的屏幕不同的平台,需要設計師爲用戶提供舒適一致的用戶體驗。這也是爲什麽設計師需要強化對于信息層次的把控,直觀的結構、大膽而圖形化的界面是每一個力圖掌控Material Design精髓的設計師應該做到的事情。 今天,我們來從圖標的層面來聊一下如何實現真正意義上的Material Design,如何在五彩缤紛的扁平化界面中用對圖標,用好圖標。案例總是最鮮明最有說服力的,下面的案例中,許多圖標設計 都是設計師原創的概念設計,它們大多都很清晰地诠釋了Material Design。 Material Web Icons [freebie] by Adrian Goia 這組六個小圖標雖然尺寸不大,但是在尺寸和信息量上做到了平衡,色調搭配上符合Material Design 的特征,更重要的是,它延續了它“擬物”的特質,增加了僞3D的質感。 Web Analytics Material Icon by Khuram Jameel Khuram Jameel 用簡單的幾何圖形來勾勒自己的想法,雖然並不複雜,但是看起來依然很精致,配色和留白的使用在整個設計中起到了重要的作用。 Google Maps & Streetview icon by Jovie Brett Jovie Brett 基于流行的谷歌圖標風格,制作出了兩個獨特的修改版。整套設計使用了六種不同的色調,這些色調都是典型的谷歌品牌色,並且加入了些許陰影提升了整體的層次感和立體感。 TaxPRo Docs Icons by Qaaim Goodwin Goodwin 在選取這組圖標的主色調上非常用心,整個配色方案上選取了6種扁平化的色彩來搭配,配合小幅度的陰影構造立體感。白色背景的使用讓整個設計擁有了開放的感覺。 Flat Services Icons by Khuram Jameel Jamell 的這套扁平化圖標設計 走的是非常規路線,深色的背景並不多見,圖標本體的色調雖然使用的是飽和度不高的扁平色,但是在這套設計中看起來頗有活力。充滿棱角的圖標邊緣給人非常深刻的印象,讓人過目難忘。 Set Of Material Design Hosting/Server Icons by Oxygenna Oxygenna 這套網絡服務器相關的圖標設計 相比于之前的圖標設計更冰冷一些,色調以灰色爲主,整體風格也貼合Material Design的要求,給人以務實的感覺。 Icons by Diego Barrionuevo Material Design 對于擬物化的態度更加暧昧,貼合扁平化2.0的理念,而 Barrionueyo 的這套圖標設計也延續了這一點,雖然沒有漸變,但是陰影的回歸讓扁平化的各色物品擁有了更加真實的立體感。極簡的線條和令人眼前一亮的色彩,都讓這套圖標從諸多設計作品中脫穎而出。 Angular Material Icons by Merissa Acosta Acosta 的這套圖標也使用了少見的暗色調來設計,不過獨特的折紙風還是非常有趣的。這種別具一格的配色方案雖然看起來略顯沈悶,但是對于習慣了色彩鮮豔的配色的用戶而言,還是挺有意思的。 Icons Responsive Material Design Palette by Ramy Wafaa Wafaa的這套響應式圖標模板設計整體充滿了積極的情緒,協調的配色給人以奇妙的吸引力,統一的樣式避免了雜亂無章的外觀的出現。 Material Design Icon Template – FreebiePSD 如果你也想制作均勻漂亮的扁平風圖標,不妨下載這個免費的PSD圖標模板,它提供了類似線框圖一樣的功能,輔助你快速完成設計。 Alcatel Launcher App Icons by Denys Nevozhai 八種基本的色彩就可以創造出一套漂亮的扁平風圖標了,而Nevozhai 的這套應用圖標合集就是這麽來的。這套圖標走的極簡的風格,沒有使用陰影,組成圖標細節的幾何圖形精准而到位。 Isometric Material Icons vol 3 – Charts by Oxygenna Material Design 中是否只能使用2D的圖標呢?並非如此,Oxygenna 的這套圖標設計就采用了3D的圖標設計,中性的灰色和熱情的橙色賦予了圖標獨特的性格。 1,000 Flat And Material Design Avatars iconshock 提供的這組扁平風頭像合集營造了非常獨特的氛圍,長陰影在此處並不顯得過時,每個不一樣的頭像都擁有區別于其他的獨特個性。 Material Inspired Icons Master Set by Jurre Houtkamp 這位藝術家擅長于管理鮮豔、複雜的配色,僞陰影和大量的留白能體現出他的專業之處。更重要的是,他的設計手法賦予了經典的、傳統的圖標以新的感覺。 Vegetables and Fruit Set Collection by Samira Material Design同樣可以優雅而複古。Samira 的這組用蔬菜和水果設計出來的圖標就是這樣的典型。色調柔和,形象鮮明,這樣還不夠麽? Material Facebook by Giulio “bart172” Smedile 經典的Facebook 圖標被這位設計師重新設計出了不一樣的感覺,更富有活力也更幹脆了。 Icons by Drawithpixels Drawithpixels 所提供的這組圖標已經接近于插畫的水平了,它們成爲了網頁用戶體驗設計的一部分,它們不僅賞心悅目,而且在頁面中起到了重要的內容引導的作用。 Periodic Table Product Icon by Michael Cook Material Design 風格的元素周期表長什麽樣?Michael Cook 的這套設計就是答案。鮮豔而細致的配色是它的特色,略顯複雜的結構則給人以專業的感覺。 Material Design Harry by Hannah Atkin Atkin 的這個圖標設計擁有類似傳統iOS圖標一樣的圓角矩形的輪廓,突出的呆毛則讓整個圖標充滿了活力于個性。 Material Design Icon Templates by Zlatko Najdenovski 這是一份AI格式的Material Design 圖標設計模板,其中專業的線框可以引導你的設計,獨特的視角則能夠讓你的圖標擁有全新的角度。 結語 Material Design 規範下的圖標設計不僅僅在配色上可以說道,在角度、風格、細節、功能上同樣可以不同凡響。發揮你的想象力吧。
󰈣󰈤
 
 
 
  免責聲明:本文僅代表作者個人觀點,與王朝網路無關。王朝網路登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述,其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
 
 
時尚麗人(16)
時尚麗人(15)
時尚麗人(14)
時尚麗人(13)
石林,奇觀,攬勝
傍晚的教堂
TIME
世紀金源
 
>>返回首頁<<
 
 
 
 
 
 
 
 熱帖排行
 
 
 
 
© 2005- 王朝網路 版權所有