设计神器Material Symbols!谷歌出品的免费可商用的ICON素材库

时间:2022-11-24
类别:设计素材
观众:1.8w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

设计神器Material Symbols!谷歌出品的免费可商用的ICON素材库

平面设计三要素是文字、图形、色彩,UI 设计其实也是平面设计的一类分支,所以也蕴含此三要素。icon 就属于三要素中的图形,又叫图标,是指类象符号,通过写实或模仿来表征其对象,它们在形状或色彩上与指称对象的某些特征相同。

相信小伙伴们在日常工作中已经接触并且收藏不少 icon 素材库了,比如最有名的 iconfont 图标库,由阿里巴巴出品,使用起来非常方便顺手,给开发交付 icon 资源时只需要创建一个共享收藏项目就可以了,但是大家知道吗,其实 iconfont 中相当一部分 icon 是不能免费商用的,可不能忽视这个问题!那这怎么办呢?别慌,现在就向大家推荐一款由 Google 公司出品并且完全可以免费商用的 icon 素材库!

设计神器Material Symbols!谷歌出品的免费可商用的ICON素材库

一、神器介绍

Google Fonts 字体库大家或许都听说过它的大名,毕竟是谷歌公司出品,里面全是高质量的免费可商用字体,没了解过的小伙伴也不用迷惑,去优优搜索关键词 Google Fonts 就可以找到相关文章去仔细了解一下。接下来要介绍的就是 Google Fonts 的孪生兄弟「Material Symbols」:

设计神器Material Symbols!谷歌出品的免费可商用的ICON素材库

「Material Symbols」是 Google 针对 icon 所开发的系列,包含 2500 个图标,面性、线性均在其中。这些 icon 就像字体一样,这意味着我们可以像调节字体一样,调节这些图标的大小、粗细和填充样式。无需登录注册就可以进行下载和编辑操作,那现在就马上开始了解如何使用这款神器吧!

二、界面内容介绍

网站的设计风格保持了 Google 经典的简约风,界面布局十分简洁明了也没有广告或者过多的说明介绍,毕竟人家是 Google,根本用不到那么多宣传。

设计神器Material Symbols!谷歌出品的免费可商用的ICON素材库

网站的内容主要分为四大版块,按照从上到下的顺序来讲,第一个版块就是「搜索栏」。「搜索栏」可以在输入关键词之前,事先选择 icon 的特殊属性,比如应用场景,看见放大镜图标前面的两项下拉框了吗,就在这里去定义:

设计神器Material Symbols!谷歌出品的免费可商用的ICON素材库

每一次的筛选都会把「icon 展示区」所显示的 icon 给更新一次。这两项下拉框其实分一级和二级类目的,左边的一项是一级类,下设两种选项「Material Symbols」和「Material icon」,我们第一次进入网站的时候显示的内容其实是「Material Symbols」的 icon,但是选择「Material icon」后,会使界面发生一些变化:

设计神器Material Symbols!谷歌出品的免费可商用的ICON素材库

最明显的就是「类型选择」由三种变为了五种,如果要总结一下两者区别的话,那我们可以把「Material icon」理解成iconfont,把「Material Symbols」理解成矢量插画网站,就可以了。这两项一级类还有一些不同的展示效果,咱们慢慢说。

说完一级类就该二级类了,二级类跟随一级类变化,不过总的来说,二级类的作用主要是筛选 icon 的使用场景,比如适用于安卓的 icon、适用于品牌项目的 icon:

设计神器Material Symbols!谷歌出品的免费可商用的ICON素材库

至于「搜索栏」输入框的使用就跟普通的文本输入框没什么区别,不过最好键入英文关键词,这样比较准确。

接下来说说「类型选择」吧,刚才说过这个地方会变化,具体怎么变呢?看看下图吧:

设计神器Material Symbols!谷歌出品的免费可商用的ICON素材库

「Material Symbols」三种分别是「Outlined(轮廓)」、「Rounded(圆边)」和「Sharp(尖角)」,「Material icon」比它多两种就是「Filled(面性)」和「Two tone(双色)」。大家可能不理解「Outlined(轮廓)」和「Sharp(尖角)」指的是什么,轮廓按照「描边」理解即可,尖角就是说 icon 的边边是尖锐的,跟圆边的反义词。

再下面就是「素材库介绍」了,这个版块再向我们说明素材库的作用和优点,还有五项额外的功能,这些功能都是方便我们使用这些 icon 的,就拿「Design guide(设计规范)」来说吧:

设计神器Material Symbols!谷歌出品的免费可商用的ICON素材库

上图所示的就是「Design guide(设计规范)」的页面,是在向我们讲解icon的各种设计规范和注意点,告诉我们怎么使用、制作icon是正确的。

最后剩下的就是「icon展示区」了,这个部分就是各种icon的集合地,会受到筛选条件和搜索关键词的影响,根据它们的结果变化而变化。不过有一个小小的地方需要给大家说明一下,「Material Symbols」的类目下,「icon展示区」的右侧会有一个「分类设置」的版块,但是「Material icon」不会有:

设计神器Material Symbols!谷歌出品的免费可商用的ICON素材库

就是上图所指示的地方,我们可以通过这个地方对 icon 的「填充程度」、「描边」、「尺寸」做定义,实时编辑实时响应:

设计神器Material Symbols!谷歌出品的免费可商用的ICON素材库

OK,界面介绍到这里告一段落啦,接下来就该讲讲这些 icon 的获取方式了,这个真的重要!

三、icon下载方式

无论是通过「搜索栏」的筛选或者是「类型选择」的筛选,下载 icon 的主要途径都是落在了「icon展示区」当中,Icon 下载方式也十分简单快速,选择你喜欢的一款 Icon,点击它,右侧就会滑出这个 Icon 的各种详情,跟在蓝湖里点选某一个图标是差不多的概念。之后想要 SVG 的话就点左下「下载SVG」,想要 PNG 的话就点右下「下载PNG」即可:

设计神器Material Symbols!谷歌出品的免费可商用的ICON素材库

还有 WEB、安卓、IOS 的代码直接提供,极度方便 UI 跟开发的对接!

四、使用授权范围

网站中的所有 icon 都是开源的,也就是说全部免费可商用!大家可以随意使用,大牌出品就是牛!免费这点网站也有明确说明,大家放心哈:

设计神器Material Symbols!谷歌出品的免费可商用的ICON素材库

五、值得一试的3个理由

  • Google官方出品资源极其靠谱
  • 资源分类明确查找效率极高
  • 下载方便一键即可下载并且提供前端代码减少沟通

结语

icon 这种元素在 UI 项目中,是起到画龙点睛作用的一类资源,如果一张界面中全是文字,那用户体验很不好,没有节奏感对不对,而且 icon 就是一个指代性质的元素,比起纯文字,肯定更能让用户 Get 到字段的意义。但是这种素材一定要擦亮眼睛,规避掉侵权问题,其次就是找一个正儿八经靠谱儿的网站,这关系到icon的质量。哎~上面这款神器不就是吗,网站链接就在下面,大家快去尝试一下吧!

神器链接:https://fonts.google.com/icons?icon.set=Material+Symbols

本文编辑:CCOA

使用过这款神器的朋友也使用过...

收藏 11

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 快来秀出你的观点

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片