Material design至发布以来,已然形成了其鲜明的设计风格,并渐渐成为统一Android Mobile、Android Tablet、Desktop Chrome 等全平台设计语言规范。基于这样的趋势,设计师们对Material Design 的青睐程度以及运用熟练度也越来越明显了。
Material design能给用户带来最贴近真实场景的使用体验,实现简洁直观的效果,这一切都和设计师对界面的把控和信息层次的掌握息息相关。而图标正是material界面设计一个必不可少的元素,对于设计师而言,丰富的图标资源意味着更快捷的设计和更多样的选择,所以本文中,我将和大家分享10个优秀的material design 图标资源,希望对您的设计有所帮助。
特点:
该资源包含900多个material design设计系统所用的全部图标,多种尺寸选择,还包含可实际运用的网页字体。全部图标资源制作精美,完全可以在网页、Android和iOS项目中使用。该图标资源完全免费,允许再设计并分享,提供者拒绝他人进项售卖。
点击下载:https://material.io/icons/
特点:
该图标资源包含Facebook,Twitter,Youtube等各种社交媒体所用图标和各种箭头。也包括各种设计项目中所用的图标,包括设置图标,手机电话,首页图标等等。最大的特点是,该图标资源在传统的material design图标风格上加以改进,具有几分“非正统”的气息。
点击下载:http://icons8.com/material-icons/
特点:
该图标资源库非常丰富,种类多样,包含近4000个免费图标资源。这个巨大的免费资源平台是无数的设计师分享自己的设计成果汇聚而成的,你可以在鼠标悬停的时候看到该图标的名称和其设计师。
点击下载:https://materialdesignicons.com
特点:
该图标资源库是典型的material design设计风格,页面提供搜索框可快速搜索你想要的图标,方便查找。该网站还提供调色板和色彩选择器。
点击下载:https://www.materialpalette.com/icons
特点:
该网站提供了Google的932个Material Design图标,提供免费下载。可用于设计师原型,也可直接用于开发人员开发APP。
点击下载:http://materializecss.com/icons.html
特点:
该网站提供了全面的Google Material Design图标,共分为9个页面。图标和设计风格适应于Google Material Design和Monochrome。鼠标选中任意图标,可以查看该图标更多信息,以及进行编辑、分享、添加至收藏夹等操作。
点击下载:https://www.flaticon.com/packs/material-design
价格:
使用场景:全系统
特点:
该网站是我见过的最为齐全的Material Design图标。其自身也号称是世界最大material design图标包。每个图标都可选择面性和线性风格,可用于应用程序和网站设计。
点击下载:http://www.webalys.com/nova/
特点:
该图标资源库支持单个图标下载,并且每个图标有四种模式可选:Black, grey, white, SVG,且可选择多种尺寸。预览图标时可以详细查看图标信息,并且可以复制SVG代码。
点击下载:https://www.materialui.co/icons
特点:
该图标资源库是设计师Anton Kosolapov上传至设计网站Uplabs进行分享的。该图标资源是一个以Material风格设计为导向的全面的图标模板。它包括指南网格,material设计形式,Android屏幕等。
点击下载:https://www.uplabs.com/posts/material-design-icon-template-psd
特点:
该图标是设计师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多个矢量图标,只需简单拖拽进行界面设计。在其属性面板上,你可以对图标进行可见性、色彩、透明度等设置,还可一键将其转化为图片进行更多操作。
此外,你还可以将以上所有的图标资源导入Mockplus组件库加以利用。导入组件库后,你还可以共享给你的团队成员,提高组件复用性,来规范项目、减少工作量。
那么,如何在Mockplus中利用以上图标资源呢?我们一步一步来。
步骤一:打开Mockplus,新建一个项目。在左侧面板选中组件库图标,点击“+”新建一个组件库,并命名为material design icons,你还可以添加描述,或者更换缩略图。
步骤二: 选中新建组件库“material design icons”,点击“+”在下拉框中点击导入图片,或者右键新建组件库也可以找到导入图片选项。找到下载的material design图标资源,选中想要导入的图标资源,即可导入图标至该组件库。Mockplus目前支持PNG和JPE格式的图标资源,你可以批量选中,一次性导入100个图标资源。
步骤三:此刻,你可以看到图标资源已经在你的组件库里了,你可以随时随地使用它们。如何分享这些图标资源呢?点击“+”旁边的管理按钮,进入组件库管理界面,你可以进行同步、编辑、导出、删除等操作。同步后,点击分享按钮,输想要入共享的人的Mockplus账号,即可分享该组件库给他人。他人登录自己的Mockplus账号,更新组件库,就可以看到你分享的这些图标资源了。
使用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官网:https://www.mockplus.cn