设计师必看的图标设计指南

超强干货！设计师必看的图标设计指南。本导图详细罗列了图标设计中的重要概念和设计思路，并辅以图片说明，帮助理解。仔细阅读、深入思考并云应用到图标设计中，在尺寸有限的界面上，简单高效地给用户传递正确的信息和友好的指引。

设计师必看的图标设计指南

• 图标概述及发展历程
  • 概述
    • 图标定义
      • 也称icon或Picoto
      • 是计算机世界对现实世界的隐喻和概括
      • 代表软件产品中的功能及操作
    • 图标用途
      • 商场导视：收银台图标、出口图标、卫生间图标等
      • App图标：微信、电话、短信等
    • 表现方式
      • 线
      • 面
      • 拟物
    • 图标分类
      • 标志性图标：如手机中应用启动图标
      • 功能性图标：常出现于 App 或网站中
    • 图标重要性
      • 全球通用
      • 节约空间
      • 快速定位
      • 上下文的定位
  • 发展历程
    • 起源
      • 实物 → 符号
        • “保存”图标来源：由软盘的外观而来 
      • 符号 → 新符号
    • 拟物图标
      • 接近于真实的实物
      • 拟物化图标和界面给予用户具象化的引导
      • 优点
        • 降低用户的学习成本
        • 缩短学习周期
        • 快速适应
      • 缺点
        • 过多的细节和修饰，对用户获取信息形成干扰
      • 
    • 扁平化图标
      • 简化真实的物体，通过抽象、简化、符号化的设计元素来表现
      • 元素边界干净利落，界面整齐简洁
      • 较多使用色块和符号化图形以及无衬线修饰的字体
      • 优点
        • 简单直接的将信息和事物工作方式展示出来
        • 弱化干扰信息
        • 减少认知障碍
      • 缺点
        • 表现形式太过于抽象、缺乏情感的传递
        • 同质化严重，缺乏个性
      • 
    • 微扁平、轻拟物
      • 面积比较小的区域使用扁平图标或线形图标
      • 面积比较大的区域使用加入渐变甚至轻质感的图标
      • 
    • 「新拟物」风格图标
      • 设计的精髓在于对光线的绝妙运用
      • 把光效拿捏在 ” 扁平 ” 与 ” 拟物 ” 之间
• 应用图标的类型及作用
  • 中文文字图标
    • 单字
      • 提取产品名称中最具代表性的文字，对笔画及整体骨架进行字体设计
      • 优点
        • 可直截了当的传递产品信息，识别性强
      • 
    • 多字
      • 注意
        • 整体的协调性和可读性
        • 一般为2-3个字，最多两行（四个字）排列
      • 优点
        • 更加直接的告诉用户产品名称，达到品牌推广的目的
        • 减轻用户记忆成本
      • 缺点
        • 如果图标上的文字和下面的辅助文字完全一样，会显得重复啰嗦
      • 
    • 字加图形组合
      • 注意
        • 做好文字和辅助图形间的平衡
      • 优点
        • 可显示更加丰富有独特的产品的气质和属性
      • 
  • 英文字母图标
    • 单字母
      • 提取英文首字母进行设计，设计感于识别性兼备
      • 注意
        • 英文字母少，字母创意容易雷同，难以形成差异化
      • 
    • 多字母
      • 提取产品全称或几个单词的首字母组合而成
      • 形成独有的产品简称，方便用户记忆
      • 
    • 字母加图形组合
      • 使应用图标视觉表现更加饱满
      • 
  • 数字图标
    • 优点
      • 数字识别性强，易于传播
      • 给人亲和力
    • 难点
      • 怎样与品牌形成强关联性
    • 
  • 特殊符号图标
    • 符号本身的含义会对产品属性有一定限制但也可以很好的诠释关联的产品属性
      • 
  • 几何图形
    • 给人简约、现代、个性等视觉感受
    • 不同的形状传递不同情感表达
    • 
  • 单双形/剪影
    • 应用图标只展示单个或两个的剪影图形
    • 两种设计方式
      • 深色背板上使图形反白，背景：单色或渐变色
      • 浅色的背板上让图形填充颜色，背景：单色或渐变色
    • 优点
      • 简洁明确，易于用户在众多的应用图标阵列中快速找到目标
    • 
  • 线形
    • 两种设计方式
      • 深色的背板上让图标反白，背景：单色或渐变色
      • 浅色的背板上让图标填充颜色，背景：单色或渐变色，或其他视觉效果
    • 
  • 动物图形/剪影
    • 提取动物整体形象或者局部特征部位作为设计元素，背景填充单色或渐变色
    • 常见表现形式
      • 剪影
      • 线性描边风格
      • 面性风格
    • 
  • 卡通形象
    • 让用户更有好感
    • 有助于加深用户对产品的印象
    • 
  • 正负形
    • 以正形为底突出负形特征，以负形表达产品属性，传递产品信息
    • 
  • 白色渐变
    • 通过白色不透明度来构建出图形的立体控件感
    • 优点
      • 比单纯的剪影图形更加具有质感
    • 
  • 彩色渐变
    • 图形的色彩表现丰富
    • 注意
      • 衔接的时候要注意色相的对比营造空间感
      • 背景和图形的色彩要拉开对比
    • 
  • 无
    • 即没有设计
    • 模式独特但不鼓励
    • 
  • 作用
    • 品牌传播
      • 在游戏领域比较常见，在应用图标上打上品牌的旗号就能或者用户的注意
    • 营销事件
      • 将营销事件（例如双11）展示在应用图标上，折扣、促销等都能吸引眼球
    • 核心卖点
      • 将核心卖点出现在应用图标上，引起用户注意，从而提高应用被打开的频率
    • 节日氛围
      • 节日通常伴随着消费，因此电商类应用最注重节日氛围的主题设计，每年春节期间桌面图标几乎一片红，非常有节日气氛
    • 
• 应用图标绘制方法及流程
  • iOS应用图标
    • 尺寸
      • 设计启动图标（1024x1024px），按照程序员的要求切出几十个不同尺寸的图标
      • 手机中@3x
        • 桌面图标尺寸为180x180px
      • 手机中@2x
        • 桌面图标尺寸为120x120px
      • 应用商店中
        • 尺寸是1024x1024px
    • 设计流程
      • 寻找隐喻
      • 竞品分析
      • 提取关键词
      • 抽象图形
      • 图标栅格线
      • 丰富细节
      • 多场景测试
    • 注意
      • 应用图标会以不同的分辨率出现在不同场景中，例如在iPhone 8plus上需@3x(120px)的图，而在iPhone7的设置页需要58px的图，就需要将120px的图缩小
      • 将大图缩小成小图时，一些细节就会丢失，使画面变得模糊，因此设计师应对小尺寸图标进行细微调整，去除不必要的装饰元素，以确保应用图标在小分辨率应用场景下也能保持清晰的识别度
  • 安卓应用图标
    • 主流需求
      • 1024px、512px、144px、96px、72px、48px六种
• 功能图标的设计规范
  • 图标的规范
    • 
  • 图标尺寸
    • 一致性是设计图标的关键
    • 确保所有的图标相同大小
    • 
    • 知识点
      • 建议从最大的尺寸开始，逐渐删除和简化细节，做小尺寸的
      • 绘制描边图标需保证所有的笔画都是相同的粗细，且笔画之间的间距不要比笔画本身更细
  • 图标的keyline
    • 图标网格为图形元素的一致但灵活的定位建立明确的规则
    • keyline是网格的基础
    • 
  • 图标关键图形
    • 图标栅格用于图标元素绘制的参考并帮助建立清晰的内容轮廓边界
    • 关键线有助于促进图标统一性，简化设计过程中比例调整成本
    • 
  • 图标的拐角
    • 直角拐角
      • 基础图形为满容器正方形->建议使用3X圆角
      • 基础图形为满高（宽）矩形->建议使用2X圆角
      • 基础图形为较小（小于1/2宽高）矩形->建议使用1X圆角
      • 
    • 非直角拐角
      • 根据图标场景，通常情况下无论角度，默认均为1X圆角
      • 特殊弧度的曲线“拐角”情况除外，根据图标设计需要单独考虑
      • 
  • 图标区域 封闭和非封闭
    • 封闭区域
      • 有闭合曲线构成的为封闭区域，可进行独立颜色填充
    • 非封闭区域
      • 由非闭合曲线构成的非封闭区域，原则上不能进行独立的颜色填充
    • 
    • 封闭区域为曲线形状且有相交线段时，原则上不能进行独立的颜色填充
  • 图标绘制规则
    • 当线段与曲线相交或者与直线非垂直相交时，线段末端用圆头端点
    • 当线段与直线垂直相交时，线段末端用方头端点
    • 当圆点的直径与线宽一样时，圆点用图形绘制，不用线段
    • 当圆形和方形在小于16px时建议用图形绘制，不要用线
    • 
    • 注意
      • 倾斜角度
      • 线段和端点
      • 图标断口与间距
      • 图标风格变换
      • 单双像素描边
      • 线段闭合
      • 统一透视
  • 视觉栅格
    • 帮助找出图标中心位置
  • 视觉重量
    • 物理上大小统一
    • 视觉上大小统一
    • 调节图标大小以避开视觉上的觉错
  • 图标绘制细节
    • 参数不要有小数点，让图标占满像素网格
  • 图标的颜色
    • 功能图标
      • 建议使用一种颜色:黑色
    • 营销图标
      • 不要超过3种颜色
  • 功能图标的风格
    • 线性图标
      • 通过线条来表现物体的轮廓
      • 比面形图标更能塑造优美的外观
      • 辨识度高，清晰，简约易识别
      • 使用场景：APP产品的标签栏等
    • 面形图标
      • 以面为主要表现形式的图标
      • 表意能力强，细节丰富，情绪感强，视觉突出，创作空间大
      • 单色饱和度填充图标
      • 纯色渐变图标
      • 多色渐变图标
      • 使用场景：通常在运动、时尚类应用的标签栏出现
    • 扁平图标
      • 使用场景
        • 多用于引导页、空状态也的情感化设计
        • 标签栏、首页主要功能入口
  • 品类区图标
    • 位置
      • 通常是位于搜索框、banner之下
    • 作用
      • 聚合各类子版块的入口，为各个子版块分发内容引导流量
    • 常见设计手法
      • 圆形底板+45度渐变+白色面形+微投影
      • 45度渐变+扁平图标+微投影
      • 简单线性
      • 45度渐变+不透明度+面形图标
  • 文字图标
    • 用文字直接表示特定含义的图标符号
    • 自己绘制，不建议直接使用字体
  • 动态图标
  • 图标命名规则
    • 格式
      • 业务_类型_功能_大小_状态
• 如何绘制功能图标
  • 图标绘制方法
    • 布尔运算
    • 贝塞尔曲线
    • 钢笔工具
  • 制定规范
    • 拆分细节
      • 将图标中的细节元素（圆角、笔画末端等）进行分解，并在规范中制定细节元素的使用法则
    • 风格定位
      • 根据产品调性，业务属性在规范中制定相应的色彩、质感风格
    • 功能划分
      • 不同功能（金刚区和标签栏等）的图标要区分开来，功能相近的包括色彩、质感应该采取相近性
  • 线性or面性
    • 常用的手法
      • 在App的底部导航栏，选中状态使用面型图标，而非选中状态使用线性图标
      • 面型图标比起线性图标，除装饰性外具备更强的视觉信息层次感，更具引导性，比如金刚区功能图标、IOS设置界面，使用面型图标
      • 车载等系统界面，更适合用面型图标，面型图标的视觉面积较大，短时间内更加容易识别
      • 线性图标看起来通常会更加细腻精致，适合比较精致简洁的设计或者女性化产品设计
  • 图标导出
    • 外部合伙人
      • 提供1x、2x和3x.的png文件，以适应多种设备
    • 开发和其他设计人员
      • 导出.svg文件
  • 图标管理和交付
    • 视觉检视
      • 避免多余的线条或形状，保证尽可能整洁
      • 所有线条是否都在标准框架内
    • 免费的图标管理工具
      • Nucleo
• 图标设计的评判标准
  • 识别性
    • 含义识别
      • 视觉语言是否可替换文字语言，不产生歧义
    • 视觉识别
      • 图标的大小，复杂度，颜色，线条的粗细
  • 规范性
    • 视觉大小的一致性
      • 饱满度
      • 相同规律
      • 细节统一
  • 统一性
    • 线条粗细
      • 相同功能类型的图标线宽粗细统一，有背板的图标线条不易过细
    • 设计语言
      • 透明度（拉开层次）
      • 圆角（圆角还是直角）
      • 断线开口（开口位置）
      • 设计特征
    • 复杂程度
      • 如果不能简化图标，就保持同一组图标的墨水重量一致，简化太复杂的图标，增强辨识度
    • 颜色规范
      • 扁平图标建议最多用两种颜色
  • 呼吸感
    • 适当留白
  • 品牌感
    • 与品牌理念相符，传达给用户的感受一致
• 图标的品牌感
  • 提取品牌图形
  • 提取品牌色彩
  • 提取设计语言
  • 提取产品气质
  • 拆分品牌名称
  • 展开形象联想
  • 绘制整套图标时建立统一风格
    • 从外观和颜色上确立主风格
    • 在局部寻求个性特征
    • 将两者结合，并融合产品属性和符合用户定位完成设计