概念

图标是具有指代意义的图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性;
标局图标主要应用于中台产品的系统图标,系统图标设计应该是风格简洁的、表意清晰的、辨识友好的、构思巧妙的。


图标绘制关键线和栅格

图标栅格用于图标元素绘制的参考并帮助建立清晰的内容轮廓边界。
关键线有助于促进图标统一性,简化设计过程中比例调整成本。

图标栅格

基于 48dp 等分的方形栅格系统

图标关键线

明示了图标画布容器边界、矩形、圆形、方形、三等分线、对角线等关键参考线

图标绘制参考背景

结合和图标栅格和图标关键线一起,作为图标绘制时的参考背景

图标关键图形

图标栅格用于图标元素绘制的参考并帮助建立清晰的内容轮廓边界。
关键线有助于促进图标统一性,简化设计过程中比例调整成本。

方形轮廓

圆形轮廓

横矩形轮廓

竖矩形轮廓

方形轮廓图标示例

圆形轮廓图标示例

横矩形轮廓图标示例

竖矩形轮廓图标示例


图标大小尺寸

图标绘制基于 48x48dp 画布绘制的线性图标,线宽默认为 4dp。
不同场景缩放比例使用:
图标为 12x12dp 时线宽为 1dp,
图标为 24x24dp 时线宽为 2dp,等如右图表格。

图标尺寸 基准线宽 倍率
48x48dp 4dp 4X
36x36dp 3dp 3X
24x24dp 2dp 2X
12x12dp 1dp 1X
240 x 240px (4X)
180 x 180px (3X)
120 x 120px (2X)
60 x 60px (1X)

图标组成元素

  1. 线段端点
  2. 线段(直线、曲线)
  3. 直角拐角(90度拐角)
  4. 非直角拐角(非90度拐角)
  5. 封闭区域
  6. 非封闭区域
图标组成元素

图标组成 - 线段和端点

为保证风格的整体一致性,图标所有线段端点默认均应为与线段同宽的圆角端点;

通常情况下线段端点和可编辑节点坐标以整数坐标为佳。

推荐:所有端点均为圆角端点
不推荐:端点不是圆角端点

默认基于 48dp 画布绘制的线性图标,线宽默认为 4dp; 无论直线和曲线在任何时候均保持一致线宽。

推荐:图标线段均为相同宽度
不推荐:不同线段宽度不同

图标组成 - 直角拐角

直角拐角根据图标场景分为 1X 圆角、2X 圆角、3X 圆角。

1X 圆角
2X 圆角
3X 圆角

当基础图形为满容器正方形时,建议使用 3X 圆角。 当基础图形为满高(宽)矩形时,建议使用2X 圆角。 当基础图形为较小(小于1/2宽高)矩形时,建议使用 1X 圆角。

推荐:大中小三种直角拐角分别采用适合拐角大小
推荐:满容器正方形轮廓图标直角拐角采用 3X 圆角
推荐:满宽矩形轮廓图标直角拐角采用 2X 圆角
推荐:图标内较小图形拐点采用 1X 圆角
不推荐:中小直角拐角也使用 3X 圆角
不推荐:满容器正方形轮廓直角拐角使用了 1X 圆角,建议为 3X 圆角
不推荐:满宽矩形轮廓直角拐角采用 3X 圆角,建议为 2X 圆角
不推荐:图标内较小图形拐点采用 2X 圆角,建议为 1X 圆角

图标组成 - 非直角拐角

非直角拐角,通常情况下无论角度,默认均为 1X 圆角;
特殊弧度的曲线“拐角”情况除外,根据图标设计需要进行单独考虑。

推荐:保持拐角 1X 圆角较清晰整体更加协调
不推荐:拐角过于圆滑整体不协调,建议采用 1X 圆角
推荐:拐角和关键线重合且使用 1X 圆角整体更加协调
不推荐:拐角过于圆滑整体不协调,建议采用 1X 圆角

图标组成 - 封闭区域和非封闭区域

封闭区域,有闭合曲线构成的为封闭区域,可以进行独立颜色填充;

非封闭区域,由非闭合曲线构成的为非封闭区域,原则上是不能进行独立的颜色填充。

开放曲线,如果做风格变换时,不能进行颜色填充
封闭曲线,如果风格变换时,视情况可以进行颜色填充

图标风格变换

标局的图标的在特定规律下允许不同风格之间的变换,分别为线性风格(默认)、填充风格、混合风格、多色混合风格。

线性风格(默认)

标局图标的默认基础风格,所有图标绘制都基于线性风格

填充风格

基于线性风格,对适当的闭合曲线进行撞色的填充,形成颜色填充风格

混合风格

基于线性风格,只针对少量图标元素进行颜色填充,形成线性和填充混合的风格

多色混合风格

基于混合风格,对不同闭合曲线的区域和线段进行不同颜色调整后形成的多色混合风格

图标命名

对图标进行语义化的命名,良好的命名习惯和统一的命名格式,有助于减少新增、删改等后期维护成本,避免重复使用相同或相似图标。

中文命名要保持通用、易理解、无歧义的原则;
英文命名应为小写,多个单词之间用横杠分割,不能有大写字母、空格、特殊符号。长单词、复合单词视情况可采取首字母缩写,其他命名尽量同步 fontawesome 的命名方式。

相同含义图标的多个图标,通过后缀加数字方式区别,例如“like-1”,“like-2”。
如默认为颜色填充图标,通过后缀加“-f”来特殊区别,例如“qq”,“qq-f”。

常见英文单词表

  • bg(backgrond 背景)
  • nav(navbar 导航栏)
  • tab(tabbar 标签栏)
  • btn(button 按钮)
  • img(image 图片)
  • del(delete 删除)
  • msg(message 提示信息)
  • pop(pop up 弹出)
  • icon(图标)
  • default(默认)
  • selected(选中)
  • disabled(不可点击)
  • pressed(按下)
  • back(返回)
  • edit(编辑)
  • content(内容)
  • left/center/right(左/中/右)
  • top/middle/bottom(上中下)
  • logo(标识)
  • login(登录)
  • refresh(刷新)
  • banner(广告)
  • link(链接)
  • user(用户)
  • download(下载)
  • note(注释)

典型图标示例

书签收藏

编辑

全屏展开

方形图标轮廓

文件

黏贴板

书签

竖矩形图标轮廓

邮件

评论

拍照

横矩形图标轮廓

下载

系统分享

分享

圆形图标轮廓

闹钟提醒

垃圾桶

回形针

异形图标轮廓