PS原创教程聚集地
我们一直在努力~

IconPark 开源图标库:字节CUX设计团队释出免费图标库

P大点S-会PS了不起吗

大家好!这里是P大点S!

越来有越多的公司,放出了越来越多的免费资源,供大家免费商用。比如 OPPO 释出的 OPPO Sans 字体,阿里巴巴 的 阿里巴巴普惠体,包图网 的 小白体,包括 Adobe Stock 和 Shutterstock 也都有释出免费的图片素材与多媒体资源,当然很多设计类站点都有释出很多东西,比如 站酷优设包图千图摄图 等,包括很多设计师也有很多分享,比如 胡晓波黄煜臣阿门 等。

今天要推荐给大家的东西,它来自 字节跳动(ByteDance)字节CUX设计团队它的名字叫做 IconPark 开源图标库 ,它于2019年7月正式立项,经历了一年多的研发工作,2020年9月3日正式开源!!!

 IconPark 开源图标库

https://iconpark.bytedance.com/

 

这里有你需要的图标,也有属于你的风格,让工作变得轻松!

IconPark 图标库是一个通过技术驱动矢量图标样式的 开源图标库,可以实现 根据单一SVG源文件变换出多种主题, 具备丰富的分类、更轻量的代码和更灵活的使用场景;致力于构建高质量、统一化、可定义 的图标资源,让大多数人都能够选择适合自己的风格图标。

丰富多彩的资源库免费使用

字节CUX设计团队上线了官方图标库:

  • 提供超过1400+预设图标,分类
  • 支持4种主题和在线换肤:线性、填充、双色、四色
  • 网站提供多种便捷操作:复制SVG code、复制React 组件、复制Vue组件、下载PNG、下载SVG
  • 针对技术同学,支持图标组件NPM包导出,包括React Icons/ Vue Icons/ Vue3 Icons / SVG Icons

官方图标库已开源,代码地址 https://github.com/bytedance/IconPark

字节CUX设计团队还贴心的准备了图标库使用教程,系统的图标使用教程,帮助你更快速的了解如何使用。

为什么要做?

开始做这个项目的初衷其实是为了满足内部设计的图标需求,字节CUX设计团队大部分是B端产品,对图标的需求量比较大,各平台之间的图标风格差异很大,在品牌体验上很难形成统一的体验和认知;无论是设计师还是开发同学,对于图标的管理和使用也没有统一的收口,导致管理成本很高。为了解决这些问题,字节CUX设计团队决定做内部图标库。后来随着绘制数量的增多,就发现这是一笔设计财富,相信这也会对其他有需要的人带来帮助,就把目标放到了开源上面,希望能为更多有需要的同学带来帮助。

 

做了什么?

通过收集各业务线的图标使用情况,字节CUX设计团队对全部图标进行汇总、分类和分析,抽离出高频的图标进行图标绘制规则的定义。这个过程中字节CUX设计团队会考虑到图标的屏显效果,复杂程度,疏密关系,线性还是面性等问题,让绘制规范变得更通用,更简单。

通过对图标的分析研究,制定出不同于常规思路的Keyline绘制规范,字节CUX设计团队在Keyline的制定上充分考虑了图标坐标小数点问题,所以字节CUX设计团队的Keyline是绘制版的,要求绘图时路径要落在Keyline上,很大程度上能够减少坐标小数点的出现,以保证屏显的最佳效果。

绘制方式是以线性绘制为标准,这样图标在使用中就可以通过调整线的属性来改变图标的样式了,这比用图形绘制的图标在修改和调整上会方便很多。线性天生就具有更好的灵活性,图形化的图标比较受限,大多数软件对线是有很多的属性调整设置的,对于面性的属性调整相对比较有限。

图标命名与分类是一个比较重要,也比较惹人烦的事情,字节CUX设计团队在前期没有特别严谨对待这件事情,所以后面的分类调整上遇到了很多的坑,后面不得不对线上1291个图标进行命名和分类的梳理优化,这是一个漫长又煎熬的事情,没办法,自己留的坑,边哭边改。

图标的样式配置,这也是图标库最有特色的一点,完全是通过技术能力实现的,通过改变一套基础图标的Svg基础属性配置,就能达到N多套图标风格,极大的提高了图标的可应用性;对于图标的大小、线粗、风格、拐角、端点都可实现灵活配置。在线性、填充、双色、多色的风格变化的方案实现中,经历了比较多的难题,最终字节CUX设计团队按照颜色最多的四色风格最为基础图标样式,通过对于颜色的删减实现双色、填充和线性图标风格,线上的最终功能实现比较符合预期。

 

做成什么样?

现在整个图标库的基础服务已经开发完成,字节跳动公司内部已经投入使用,受到各业务团队的热捧,图标的整体使用情况也是比较正向的,每周,每月都会有比较明显的数据提升。

也正是因为如此的倍受青睐,字节CUX设计团队正式对外开源,把这套图标库开源给更多的人去使用,希望能为更多的人带来帮助。

进入 iconpark 图标库,网站的界面是这个样子的。整个界面非常的直观,右上方的菜单有一个使用指南,一个反馈建议,甚至还有中英文两种语言可选,这是要走出国门,走向国际的步骤吗?最右边则是 github 的图标,你懂的!

最上方有一个搜索框,我们将很容易查找到我们想要的图标类型,比如说,我搜索了社交,我们可以看到搜索结果,包含了“交流”分类的5种图标,“品牌”分类的8种图标。

搜索栏右边,还有个不同的页面查看方式,非常的贴心,有木有。

网页的左侧部分,是分类,我们上下拉动,可以看到包含了许多的分类,非常的清晰有序。

而网页的右侧,就是我们今天要说的重点了,最上面的是“批量下载SVG”,这个没什么可说的,点击了,就会弹出下载整个SVG压缩包的对话框,下就是了!

我们往下走,图标大小,我想以诸位的智商,这个是可以理解的吧!

同样的,线段粗细,应该不难理解吧,在这里,我再一次相信大家的智商!

接着往下,图标风格(颜色),这里有四个选项可选,线性,填充,双色,多色,到了这里,可千万别让我怀疑大家的智商哦!

不管是线性,填充,还是双色,多色,颜色都是可以更改的,你可以根据你的喜爱,或者你的需求,换成你需要的颜色,超级棒,良心大大的。

线性与填充一样,你可以修改描边和填充的颜色,单击色块,会弹出一个拾色器(像极了PS),你可以选择你要的颜色,或者直接输入颜色代码。

而双色和多色,则能让你选择外部描边颜色,外部填充颜色,内部描边颜色,内部填充颜色,我依然相信大家的智商。

再一个强大的地方,就是,我们可以更改端点类型,以及拐点类型,非常强大,有木有。

当然,如果我们想恢复默认设置,点击一下最下面的“清空设置”就行了,图标就会恢复默认设置,不过清空设置完,不能恢复,慎点。

我想,大家最关心的可能都是下载,其实很简单,当你把鼠标移到哪个图标时,就会有个菜单,包括:复制SVG代码,复制React代码,复制Vue代码,下载SVG,下载PNG,五个选项,选择你要的就行了。

如果这些图标,我们并不想全部选择,我们可以用鼠标在图标上点击(点一下选中,再点一下取消),就可以选中这个图标,然后,我们按搜索框右边的“只看已选”,就OK了。

可能很多朋友最关心的是使用上有什么限制,其实,从最开始看到 GitHub 你就应该明白了,开源的,以 Apache License 2.0 协议释出。

根据本许可证的条款,每个贡献者授予用户永久性的、全球性的、非专有性的、免费的、无版权费的、不可撤销的版权许可证,许可用户通过源程序形式或目标形式复制、准备衍生作品、公开显示、公开执行、授予分许可证、以及分发作品和这样的衍生作品。

当然,免费可商用,但是,你必须遵守 Apache-2.0 License 的另外其他条款。

 

IconPark 开源图标库  https://iconpark.bytedance.com/

GitHub  https://github.com/bytedance/IconPark

下载React包  https://www.npmjs.com/package/@icon-park/react

下载Vue包  https://www.npmjs.com/package/@icon-park/vue

下载SVG包  https://www.npmjs.com/package/@icon-park/svg

使用指南  https://bytedance.feishu.cn/docs/doccnLPwy983J6oaMu5Zfpm166f

 

赞(4) 支持作者
转载请注明来自:P大点S » IconPark 开源图标库:字节CUX设计团队释出免费图标库
分享到: 更多 (0)
P大点S官方公众号

感谢对P大点S的支持

支付宝扫一扫打赏

微信扫一扫打赏