UI图标分类汇总以及设计规范

图标是 UI 视觉体系中最基础的部分，它在 UI 设计师的日常工作中应用非常广泛。一个好图标已经足够让设计师呈现他的价值。了解清楚图标的设计分类，设计应用，正确的设计方法，才能将图标设计稳稳的拿捏，提升自己。

UI图标分类汇总及设计规范

• 04、图标的设计案例
  • 确定图标设计风格
    • 设计案例
      • 确定风格
      • 案例解析
  • 关键词的语义和延伸
    • 语意明确
      • 语意明确
    • 关键词延伸
      • 关键词 延伸
        • 关键词延伸可以进行划分为主要关键词和间接关键词，主要关键词（如 A1、A2、A3….），主要关键词A1可以再延伸间接关键词（如A1-1、A1-2、A1-3…），如果脑洞够大，还可以进行三级关键词类推。
  • 图标设计自检事项
    • 识别性
      • 语义 识别
        • 语义识别的理解就是当用户看到这个图标之后，很清晰的知道这个是干什么的。
      • 视觉识别
        • 图标颜色：
        • 复杂程度
        • 类型搭配
    • 统一性
      • 圆角大小
        • 圆角大小的细节很容易被忽略，因为他的成形和描边形式的选取也有很大的关联，描边方式有内描边、居中描边、外描边。描边的大小会根据基线来扩展。
      • 描边粗细
        • 图标的粗线也会影响整体图标的一致性如下图所示，对比很强烈
      • 断点类型
        • 断点类型选择也是需要根据场景去使用，平头断点比较生硬，圆头断点比较可爱活泼。如下图所示：
      • 视觉统一
        • 根据 keyline 网格规范设计保证图标的平衡统一
      • 图标角度
        • 角度也是统一性中常见的基本要素，一般根据相应的倍数规范进行角度变化。
      • 图标元素间距
        • 图标中的元素上下、左右之间的距离需统一对称。
      • 图标数据小数点
        • 当图标中的点的位置或者某一部分出现小数点的场景，需要调整至整数，根据四舍五入的计数方式进行精确，描边大小可以存在“X.5”这样的情况。
    • 美感
      • 饱满
        • 饱满度的提升也能体现图标的精致感，这也是考虑图标视觉识别的一个重要因素。根据网格系统，通常也是按照图标元素在固定矩形栅格中的位置比例来看整体效果，再判断是否饱满。如之前做的一个充值的图标，增加面积，增大圆角。
      • 透析感
        • 图标透析感的体现在于图标之间的间距，描边粗细，导致的空间留白是否合适，好的透析感图标设计会让图标更加有灵性，不会让用户看了之后觉得沉闷压抑，如下案例支付宝线性图标描边大小的对比，面性图标为自己项目设计的。
    • 风格
      • 属性
        • 图标设计是会需要先去根据对应图标的基本属性进行的造型绘制，给图标定型，首先语义表达上要精准，其次要根据具体业务和场景确定图标骨骼基调。
      • 表现
        • 图标表现形式在文章第一部分进行过详细的描述和分类。就是通过什么样的表达形式或技法去将造型塑造的更贴合场景。比如这组面型图标通过形式组合、留白、增加透气感、丰富层次感。
    • 品牌关联性
      • 品牌颜色
        • 品牌颜色：颜色是最基础的表现元素，图标设计也会考虑品牌颜色，给品牌传播赋能。如下案例支付宝。
      • 品牌 logo
        • 品牌 logo，不管是文字和图形、ip 形象，都可以在图标设计中进行体现和场景相结合，如下案例：美团、饿了么、盒马、飞猪
• 03、图标的设计规范
  • 尺寸规范
    • 设计规范
      • 尺寸要求
        • 为了保持图标元素的平衡感，通常需要使用基础的网格尺寸来进行绘制图标，常用的网格绘制尺寸为：16、24、36、48、64、128、512、1024。
  • 设计方法
    • 设计规范
      • 设计方法
  • 明名规范
    • 设计规范
      • 命名规范
        • 个人一般习惯命名顺序为：类型_位置_功能_状态_大小。其中类型和位置可以调整，状态和大小也可以调整，关于图标“大小”属性有时候在特定场景下可以省略。例如 iOS 自带大小的后缀：@1X，@2X，@3X。
  • 输出规范
    • 设计规范
      • 切片工具
      • 画板导出
      • 矢量输出
• 02、图标的设计应用
  • 业务和设备类型
    • B、C 端 业务
      • 说明
        • 业务类型常见的主要为 B、C 端业务，设备类型常见为移动端、网页端，其他覆盖的终端设备和业务不做过多赘述。图标的设计应用主要想重点介绍这几年比较主流的 B 端网页类大厂项目，案例如下所示，这三款产品基本都使用了比较流行的几款风格图标：C4D、2.5D、新拟态。这些风格的主要特点就是专业，严谨、科技感、震撼力强。现下 B 端 C 化已经成为了新的趋势，越来越多新的设计风格也会逐步融入到 B 端的业务中。
    • 移动端 网页端
      • 阿里云
      • 腾讯云
  • 应用类型
    • 应用场景
      • 功能图标
    • 应用场景
      • 启动图标
    • 应用场景
      • 导航图标
    • 应用场景
      • 氛围图标
• 01、图标的设计分类
  • 图标类型
    • 线性图标
      • 单色
      • 多色
      • 透明叠加
      • 渐变色
      • 断点
    • 面性图标
      • 单色
      • 多色
      • 透明叠加
      • 渐变色
    • 线面图标
      • 单色
      • 多色
      • 透明/叠加
      • 渐变色
    • 文字图标
      • 文字图标
  • 图标风格
    • 风格
      • 毛玻璃效果
    • 风格
      • 2.5D
    • 风格
      • 新拟态
    • 风格
      • 轻质感
    • 风格
      • 扁平
    • 风格
      • 卡通
    • 风格
      • 拟物写实
    • 风格
      • 实物贴图
    • 风格
      • C4D
    • 风格
      • IP 形象