IconPark开源图标库项目分享

时间:2020-9-13 作者:admin

IconPark开源图标库项目分享

—— 字节跳动商业产品CUX设计团队IconPark是字节跳动商业化CUX设计团队精心打造的致力于图标应用规范化、统一化,提供丰富多样的高质量图标内容,满足批量配置图标样式的能力;同时满足技术同学在项目中调用 图标组件,让图标使用变得更简单,更高效。

图标是具有指代意义的图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性。能够在我们短暂的注意力下迅速决策、发现要找的信息,提高我们对于信息获取的效率。

IconPark图标库是一套拥有1300+数量及28个分类的高质量基础图标站点,同时具备个性配置的换肤能力,通过换肤属性配置可以延展出数百万计的图标样式。在设计中遵守去繁从简,风格统一,表意清晰的原则,可适用于更多的场景。体积小,调用灵活,这对于设计师和开发人员的管理协作提供了保障。支持 ​3种主流代码类型的使用:

项目背景

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

设计原则

  • 准确
  • 信息图形化,准确表达图标含义;屏显准确,减少锯齿的出现。
  • 简洁
  • 形式与笔画的简洁,去繁从简,在保证表意的前提下,去除多余细节;
  • 可用
  • 通过检测图标的访问情况,保证图标的可识别性和可用性;
  • 统一
  • 保证图标大小、线条粗细、感情特征、端点特征、拐角特征、倾斜角度、基本形状等的统一性;

KeyLine及栅格定义标准

通过对图标的分析研究,制定出不同于常规思路的Keyline绘制规范,我们在Keyline的制定上充分考虑了图标坐标小数点问题,所以我们的Keyline是绘制版的,要求绘图时路径要落在Keyline上,很大程度上能够减少坐标小数点的出现,以保证屏显的最佳效果。Keyline规范保证了设计图标的统一性,其大小、比例、复杂程度都会标准化、清晰化;栅格用于图标元素绘制的参考并帮助建立清晰的内容轮廓边界;

基础形状

组成图标的基本形状有:矩形、正方形、圆、三角形;

IconPark开源图标库项目分享

图标大小

图标绘制基于 48x48px 画布绘制的线性图标,线宽默认为 4px,不同场景等比缩放使用;

IconPark开源图标库项目分享

组成元素

  • 线段与端点:指组成图标的线段的粗细规范及线段端点规范;

  • 断口与间距:指图标内元素及断口之间间距规范;

  • 倾斜角度:指对非垂直及水平线的倾斜角度规范;

  • 拐角度数:指基于一定规则对图标的拐角弧度进行限定,从而规范图标拐角度数;

  • 封闭与非封闭:封闭区域由闭合曲线构成,可以进行独立颜色填充;非封闭区域则由非闭合曲线构成,无法进行填充;

1、线段与圆点

为保证风格的整体一致性,图标所有线段端点默认样式为圆;如有与线段同宽的圆点时,为保证视觉平衡,圆点的直径需比线段宽度略大;线段端点坐标和可编辑节点坐标为整数最佳;

IconPark开源图标库项目分享

2、间距规范

图标内部结构元素与外框的间距不得小于线宽;内部元素之间的间距不得小于线宽的1/2px;外形框的建议尺寸梯度为4的倍数,如:4px、8px、12px等;

IconPark开源图标库项目分享

3、倾斜角度

图标中的线段倾斜角度应为15度的倍数,保持与Keyline中的对角线或十字垂直相交线保持平行关系;

IconPark开源图标库项目分享

4、拐角设置

IconPark开源图标库项目分享

5、封闭与非封闭

图标的封闭与非封闭的属性,决定是否具有图标风格转换的能力,当图标的元素由为封闭图形时,则可以进行独立颜色填则,否则无法进行填充颜色的变换;

  • 封闭图形:

IconPark开源图标库项目分享

  • 非封闭图形:

IconPark开源图标库项目分享

  • 当封闭图形为曲线形状且有相交线段时,原则上是不能通过IconPark技术能力实现独立的颜色填充;

IconPark开源图标库项目分享

图标命名规范

图标命名符合图标表意,统一命名格式,加入分类的前缀作区分;更便于后期管理与维护;

IconPark开源图标库项目分享

  • 中文命名

中文名称要中文名称、易理解、无歧义的原则,当表达状态时用“-”连接;`例:收藏、喜欢、正方形、矩形、文件夹-下载、文件夹-添加`

  • 英文命名

英文命名应为小写,多个单词之间用横杠分割,不能有大写字母、空格、特殊符号,长单词、复合单词视情况可采取首字母缩写的命名方式;`例:collection、like、square、distance、folder-download、folder-add`

  • 相同含义图标命名

相同含义图标的多个图标,通过后缀加数字方式区别;`例:like、like-one、like-two`

图标风格配置方案

1、线性图标

适配规范:

  • 图标内部元素和外部元素属性保持统一,有填充时,填充色透明度为0%;

2、填充图标

适配规范:

  • 当图标内部元素与外部元素有闭合时,闭合元素填充,非闭合元素保持描边;

  • 当图标内部元素与外部元素有重叠,垂直时用增加一根外部描边属性的线解决,当非垂直时不推荐填充

3、双色图标

适配规范:

  • 图标外部元素(闭/开)与图标部元素(闭/开)属性保持统一;

4、**四色图标**

适配规范:

  • 图标外元素闭合,图标内元素闭合;

  • 当图标外部元素闭合,内部元素不闭合时使用3色方案,

图标元素拆分,Layer Style确立;

IconPark开源图标库项目分享

C1=外(开/ 闭)-描边C2=外(闭)-填充C3=内(开/闭)-描边C4=内(闭)-填充**配色方案:**颜色序列(收敛在4色):(1)#000;(2)#FFF;(3)#2F88FF;(4)#43CCF8

IconPark开源图标库项目分享

**图标示例**线框、填充、双色、四色

IconPark开源图标库项目分享

项目总结

现在整个图标库的基础服务已经开发完成,字节跳动公司内部已经投入使用,受到各业务团队的热捧,图标的整体使用情况也是比较正向的,每周,每月都会有比较明显的数据提升。截止2020-09-02,总下载量超过11万次,NPM包单周下载峰值达7300+,最近一个月下载量近3万次,被各部门近50个前端框架作为依赖包引入也正是因为如此的倍受亲赖,我们正式对外开源,把这套图标库开源给更多的人去使用,希望能为更多的人带来帮助,也欢迎大家能够多多的提供建议和需求,一块把图标库做的更好。

网站体验和使用指南

代码地址

联系我们

IconPark开源图标库项目分享

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。