恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
小小图标功能大,10个最佳Material Design 图
0.0°
2018-05-24 原创文章 经验/观点 举报 1718 4 3 0

本文中,我将和大家分享10个优秀的material design 图标资源,希望对您的设计有所帮助。

Material design至发布以来,已然形成了其鲜明的设计风格,并渐渐成为统一 Android Mobile、Android Tablet、Desktop Chrome 等全平台设计语言规范。基于这样的趋势,设计师们对 Material Design 的青睐程度以及运用熟练度也越来越明显了。


Material design能给用户带来最贴近真实场景的使用体验,实现简洁直观的效果,这一切都和设计师对界面的把控和信息层次的掌握息息相关。而图标正是material界面设计一个必不可少的元素,对于设计师而言,丰富的图标资源意味着更快捷的设计和更多样的选择,所以本文中,我将和大家分享10个优秀的material design 图标资源,希望对您的设计有所帮助。


1. Google Material Deisgn Icons

格式:PNG, SVG

价格:免费


使用场景:Web, Android, and iOS项目


特点:900多个多种类型的图标,可供单个下载

          全浏览器支持

         矢量图标,适应所有屏幕和项目

         支持色彩,位置,大小自定义操作

         Google Material Design UI风格

 

Image title


该资源包含900多个material design设计系统所用的全部图标,多种尺寸选择,还包含可实际运用的网页字体。全部图标资源制作精美,完全可以在网页、Android和iOS项目中使用。 该图标资源完全免费,允许再设计并分享,提供者拒绝他人进项售卖。


点击下载:https://material.io/icons/


2. Material Icons form Icons8


格式:PNG, SVG

价格:免费

使用场景:Mac和Windows的所有项目


特点:支持打包下载

      提供色彩选择器,可自定义多种色彩

      矢量图标,适应所有屏幕项目

      提供material图标风格解析,与其他风格进行对比分析


Image title

 

该图标资源包含Facebook,Twitter,Youtube等各种社交媒体所用图标和各种箭头。也包括各种设计项目中所用的图标,包括设置图标,手机电话,首页图标等等。最大的特点是,该图标资源在传统的material design图标风格上加以改进,具有几分“非正统”的气息。 


点击下载:http://icons8.com/material-icons/


3. Material Design Icons


格式:PNGs, SVG, XAML

价格:免费

使用场景:全平台和全系统


特点:支持单个下载,且可自定义下载格式和下载尺寸

      可作网页字体

      矢量图标,适应所有屏幕项目

      免费更新


Image title


该图标资源库非常丰富,种类多样,包含近4000个免费图标资源。这个巨大的免费资源平台是无数的设计师分享自己的设计成果汇聚而成的,你可以在鼠标悬停的时候看到该图标的名称和其设计师。


点击下载:https://materialdesignicons.com


4. Materialpalette


格式:PNG, SVG

价格:免费

使用场景:iOS和Android


特点:16个图标种类

      支持压缩包下载

      矢量图标,适应所有屏幕项目


Image title

 

该图标资源库是典型的material design设计风格,页面提供搜索框可快速搜索你想要的图标,方便查找。该网站还提供调色板和色彩选择器。


点击下载:https://www.materialpalette.com/icons


5. Materializecss

格式:PNG, SVG

价格:免费

使用场景:全系统


特点:使用场景规则解析

      图标资源大小设定讲解


Image title

 

该网站提供了Google的932个Material Design图标,提供免费下载。可用于设计师原型,也可直接用于开发人员开发APP。


点击下载:http://materializecss.com/icons.html


6. Material Icons Design from Flaticon


格式:Vector icon (SVG & EPS), PNG, PSD and Iconfont

价格:免费

使用场景:全系统


特点:提供直接使用图标设计模板

      支持免费分享

      支持批量下载


Image title


该网站提供了全面的Google Material Design图标,共分为9个页面。图标和设计风格适应于Google Material Design和Monochrome。鼠标选中任意图标,可以查看该图标更多信息,以及进行编辑、分享、添加至收藏夹等操作。


点击下载:https://www.flaticon.com/packs/material-design


7. Webalys


格式:.Sketch, .AI, .SVG, .PDF, .EPS, .Iconjar files.

价格:免费 - 350个图标下载

           $87 - 1650个图标下载

           $127 - 4000个图标下载


使用场景:全系统


特点:提供免费和收费两种类型的下载

           Google material design设计规范

           面性和线性风格


Image title


该网站是我见过的最为齐全的Material Design图标。其自身也号称是世界最大material design图标包。每个图标都可选择面性和线性风格,可用于应用程序和网站设计。 


点击下载:http://www.webalys.com/nova/


8. Material UI


格式:SVGs, PNG

价格:免费 

使用场景:全系统


特点:搜索框快速搜索

          面性风格和线性风格具有


Image title


该图标资源库支持单个图标下载,并且每个图标有四种模式可选:Black, grey, white, SVG,且可选择多种尺寸。预览图标时可以详细查看图标信息,并且可以复制SVG代码。


点击下载:https://www.materialui.co/icons


9. Material Design Icon Template PSD

格式:PSD

价格:免费 

使用场景:全系统


特点:适合设计师个人设计使用

           提供配套的UI工具包


Image title


该图标资源库是设计师Anton Kosolapov上传至设计网站Uplabs进行分享的。该图标资源是一个以Material风格设计为导向的全面的图标模板。它包括指南网格,material设计形式,Android屏幕等。 


点击下载:https://www.uplabs.com/posts/material-design-icon-template-psd


10. Material Design Icons By Brad Williams 


格式:SVGs, PNG

价格:免费 

使用场景:wordpress页面


特点:支持wordpress页面和其博客页面使用

           可用于短代码

 

Image title


该图标是设计师Brad Williams提供,包含1000多个可以在WordPress页面和博客中使用的Material Design图标,此外, 可以使用简码或HTML标记插入图标。该图标资源可以3种不同的方式使用:简码,HTML和TinyMCE。


点击下载:https://cn.wordpress.org/plugins/material-design-icons/


以上就是本文整理出的10个material design图标资源,绝大部分是免费提供,希望您能下载使用。但拥有优秀的图标资源并不意味着完成了优秀的设计,如何对这些图标资源进行有效运用呢?如何保证图标设计和APP的整体Material Design界面风格无缝融合呢?


最有效的方法就是实践设计,只有不断的实践,才能一步一步锤炼设计技能。快速运用图标资源进行设计,你需要一款高效简洁的原型工具。您可以使用国内最好的原型设计工具Mockplus进行设计。


Mockplus自身带有300多个组件,还包含2000多个矢量图标,只需简单拖拽进行界面设计。在其属性面板上,你可以对图标进行可见性、色彩、透明度等设置,还可一键将其转化为图片进行更多操作。


Image title


此外,你还可以将以上所有的图标资源导入Mockplus组件库加以利用。导入组件库后,你还可以共享给你的团队成员,提高组件复用性,来规范项目、减少工作量。

那么,如何在Mockplus中利用以上图标资源呢?我们一步一步来。


步骤一:打开Mockplus,新建一个项目。在左侧面板选中组件库图标,点击“+”新建一个组件库,并命名为material design icons,你还可以添加描述,或者更换缩略图。


Image title

 

步骤二: 选中新建组件库“material design icons”,点击“+”在下拉框中点击导入图片,或者右键新建组件库也可以找到导入图片选项。找到下载的material design图标资源,选中想要导入的图标资源,即可导入图标至该组件库。Mockplus目前支持PNG和JPE格式的图标资源,你可以批量选中,一次性导入100个图标资源。


Image title


步骤三:此刻,你可以看到图标资源已经在你的组件库里了,你可以随时随地使用它们。如何分享这些图标资源呢?点击“+”旁边的管理按钮,进入组件库管理界面,你可以进行同步、编辑、导出、删除等操作。同步后,点击分享按钮,输想要入共享的人的Mockplus账号,即可分享该组件库给他人。他人登录自己的Mockplus账号,更新组件库,就可以看到你分享的这些图标资源了。


Image title


使用Mockplus,进行更快更简单的设计。Mockplus中有更多优秀的组件和设计可以让您快速进项原型设计,只需简单拖拽,快速呈现界面设计。此外,交互设计也只需拖拽鼠标即可完成,你可以快速完成动态原型。


更多免费material design 图标资源:


1. https://github.com/Templarian/MaterialDesign


2. https://dribbble.com/shots/1938275-Icons-Free-PSD


3. http://materialdesignblog.com/free-master-set-of-material-design-icons/


4. https://dribbble.com/shots/1932096-Material-Design-Powerpoint-Keynote-icons


5. https://www.producthunt.com/posts/material-design-icons


6. https://cdnjs.com/libraries/material-design-icons


7. https://www.iconfinder.com/iconsets/google-material-design-icons


8. https://dribbble.com/shots/1932096-Material-Design-Powerpoint-Keynote-icons


以上资源由Mockplus团队整理,了解和获得更多优质设计资源,访问Mockplus官网

更新:2018-05-24

收藏

4人已收藏

mo311

一名PM,分享个人与设计(UI/UX等)相关的经验与教程。

  • 205

    作品

  • 271

    粉丝

  • 5

    关注

  • B端和C端产品设计有哪些差异?
  • 用户体验之如何设计一个完美的新手引导流程?(附带案例)
  • UI设计、交互设计、UI交互设计的联系和区别是什么?
  • 前方高能!15个外挂级别的设计插件, 助你效率逆天

    猜你喜欢

      2018-05-24 原创文章 经验/观点 举报 1718 4 3 0

      小小图标功能大,10个最佳Material Design 图

      0.0°

      你确定要举报小小图标功能大,10个最佳Material Design 图

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年05月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录