B端图标设计指南

B端图标使用场景相对C端场景少，但数量众多，更有甚者可以用“密集”来形容。如果图标设计风格不统一，将会展现出凌乱的视觉系统，影响视觉系统效果。此外因B端图标往往关联业务众多，考虑到简并性等因素，需要从多方面注意图标系统的设计。那么到底有哪些问题是必须要注意的呢？看看这份指南。

B端图标设计指南

• 常见设计元素
  • 色彩 color
  • 文字 font
  • 图标 icon
  • 图形 shape
  • 空间 space
• 图标
  • 作用
    • 影响整个产品的形象与气质
    • 画龙点睛
  • 大原则
    • 严谨的设计态度->提升产品视觉表现
    • 兼顾设计效率->节约企业开发成本
  • 图标发展史
    • 远古时期->图片与雪碧图
    • 发展时期->字体图标
    • 成长时期->iconfont的兴起
    • 崛起时期-svg
• B端图标组成
  • 基础图标
    • 整个B端图标当中的基石，是页面中最为基础的图标组成
    • 特点：可以复用
    • 举例：设置、编辑、搜索、时间日期等
  • 业务图标
    • B端图标设计中的业务分支，和每个产品的业务模块保持一致
    • 特点：满足特定产品的需求，不会进行多场景复用
    • 举例：公海池、线索池、归属人管理、商机管理、客户管理等
• 与C端图标差异
  • 图标内容不同
    • B端求同
      • 表达形式差距不可太大，相似性要高
      • 减小用户切换B端软件的成本
    • C端存异
      • 同样文字形式的变化，形成个性差异
      • 突出设计理念独具一格，给用户烙印
  • 设计难点不同
    • B端变化多
      • 关联业务名称多
      • 在各业务含义不同
      • 兼顾需多维度思考
    • C端趣味强
      • 偏向趣味性的表达
      • 纯视觉优化，无需考虑业务层面
  • 设计侧重点不同
    • B端讲究扩展性
      • 场景少，数量多
      • 用图标表达多个业务的联系
    • C端讲究整体性
      • 数量少，场景复杂
      • 多场景图标串联设计
      • 保持视觉统一性
  • 设计风格不同
    • B端更直接
      • 多采取面性图标或者2px的线条图标，增强图形识别度
      • 对比度要求：W3C的AA、AAA原则
    • C端更多元
      • 硬件提升使视觉风格表达更加多元
      • 设计师发挥空间大
• 设计规范原则
  • 图标中的「语法」 即图标规范文档
    • 设计原则
      • 确定产品方向，高效做出决策
      • 准确、简单、节奏、愉悦
    • 轮廓模版
      • 明确图标视觉尺寸
      • 设计大小统一的图标
      • 
    • 操作热区
      • iOS->最小操作热区44px
      • 安卓->最小操作热区48px
      • 桌面端->12px(被公认的最小值)
      • 
    • 命名规则
      • 组件_类别_功能_状态（常见规则）
      • 组件_类别_状态（B端规则）
  • 图标中的「单词」
    • 图标性格
      • 根据自身产品特性选择和优化
      • 注意与产品的设计理念相融合
      • PS:粗旷与商务是更适合的图标性格
    • 图标场景
      • 场景不同含义不同
      • 基础组件场景->象形图标
        • 根据实际生活中物体的提炼所得
        • 需贴合真实使用场景
        • 举例：编辑（铅笔）、筛选（漏斗）
      • 运营模块场景->表意图标
        • 生活中原本不存在的物体，约定俗成创造
        • 通常出现在各种插件市场以及运营商城的页面中
        • 举例：砍价、社群
      • 专业性场景->文字图标
        • 行业中没有约定俗成的表达形式
        • 将相应的专业词汇文字化
        • 举例：拼团、清仓
      • 导航菜单场景->组合图标
• B端图标如何搭建规范
  • 常见搭建模式
    • 开源图标
      • 优点：快速建立，减少设计成本
      • 缺点：有局限性
      • 效率：★★★★★ 品牌：★★★☆☆ 完整度：★★★☆☆
    • 自主搭建
      • 优点：拥有独特的视觉风格与表达形式
      • 缺点：设计成本高
      • 效率：★★★☆☆ 品牌：★★★★★ 完整度：★★★★★
    • 在我们搭建B端图标规范之前，需要明确自身的产品的「定位」，根据产品的不同阶段，我们会采取不同方式进行规范的搭建
  • 根据公司不同阶段进行搭建
    • 初创期的产品
      • 特点：经常迭代，变化快
      • 推荐：开源图标库
    • 成长期的产品
      • 特点：逐渐稳定
      • 推荐：设计师根据产品调性规划后续整体方向，两者兼用
    • 成熟期的产品
      • 特点：稳定，变化少
      • 推荐：自主搭建
  • 图标资源如何设计
    • 基础图标
      • 形大角大、形小角小
      • 透视正确
    • 业务图标
      • 拆解整理
        • 图标的共性与个性
      • 模块分区
        • 了解图标的结构
      • 分区绘制
        • 落地分区的图标形式
      • 细节调整
        • 保留相应的细节
      • 模块化设计
• 资源分享
  • 图标规范参考
    • Lightning
    • ATLASSIAN
    • Material Design
  • 图标库
    • REMIXICON
    • Fearher
    • EVA Icons
    • heroicons
    • IconPark
    • Ikonate