兰亭妙微ui设计公司分享：UI 设计里，图标是界面信息传递的核心载体。很多设计师会直接套用图标库、依赖 AI 生成图标，但想要做出一套风格统一、适配业务、可落地交付的图标，就必须吃透底层绘制参数与设计规范。本文基于 Material Design 体系，整理一套可直接上手的图标设计完整参数，帮你避开图标绘制常见坑。
一、UI 图标三大核心分类
界面设计偏向排版布局，重在元素组合，入门门槛较低；而图标设计属于图形创作，需要手动绘制图形，学习曲线更陡峭。不同类型图标，设计逻辑、绘制技法差异巨大，首先分清图标类型，才能选对对应的规范。
UI 图标主要分为启动图标、工具图标、装饰图标三类：
- 启动图标：应用入口标识，也就是手机桌面 App 图标。一般由背景底板 + 图形主体构成，主体可以是品牌 Logo、图形符号、插画、特殊字体等，不同操作系统有各自严格的尺寸与裁切规范。
- 工具图标：产品内部高频使用的功能符号，例如关闭、收藏、点赞、设置、播放等，以线性、面性样式为主，是 UI 设计师必须掌握的基础能力。
- 装饰图标：用于烘托页面氛围，提升视觉表现力，常使用 3D、毛玻璃、插画、拟物等复杂视觉效果，多用于空状态、运营活动页面。
学习建议：遵循由易到难，优先吃透工具图标，再进阶学习装饰图标、启动图标。
为什么不能只靠图标库与 AI 生成图标？
不少新人会有疑问：网上现成图标库资源丰富，AI 也能快速出图，为什么还要手动绘制图标？
- 图标库存在同质化，无法匹配品牌需求 开源图标库被大量项目复用，辨识度过高，很难贴合产品独有的品牌调性；项目中还经常出现库内没有的定制图标，现成素材无法覆盖全部业务场景。
- AI 生成图标落地缺陷明显 AI 擅长复杂创意图形，但基础功能图标往往细节崩坏；并且输出大多为位图，很难得到干净可用的矢量源文件，无法给到开发进行迭代交付。
真实项目中，定制图标需求是常态，素材库与 AI 只能作为辅助，掌握手绘图标能力，才能从容应对多变的业务需求。
二、工具图标核心设计规范
提示：工具图标规范属于行业参考建议，并非强制约束。不同设计系统会有各自的标准，下面以接受度最高的 Material Design 规范作为基准讲解。
1. 画布、内间距与格线系统
画布尺寸
常用画布区间：12‑48px，优先选用 4 的倍数；24px 是工具图标最通用画布尺寸，项目可根据组件场景定义多套图标尺寸。
内间距（出血边距）
作用：给图形预留呼吸空间，避免图形撑满画布，视觉上拥挤失衡，类似写字不能写满田字格。
- 24px 画布：内间距 2px，有效绘图区域 20px
- 小于 24px 画布：内间距 1px
- 大于 24px 画布：内间距 3‑4px
视觉基准格线系统
格线由圆形、正方形、垂直矩形、水平矩形组成，用于统一整套图标视觉重量，避免图标大小观感参差不齐。 以 24px 画布举例：
- 圆形：20px（与绘图有效区域一致）
- 正方形：18px
- 垂直矩形：16×20px
- 水平矩形：20×16px
其他画布尺寸，可按照这套比例逻辑，等比缩放建立专属格线。绘制图标时，参考格线校验图形大小，保证整套图标视觉均衡。
2. 图形核心参数速查表
✅ 线性图标
- 描边粗细：1 / 1.25 / 1.5 / 1.75 / 2px；以 0.25px 作为递进档位，不必局限整数，解决线条要么过粗、要么过细的痛点。
- 描边位置：统一居中描边 描边分为外描边、居中描边、内描边。内、外描边仅适合闭合路径，图标大量存在非闭合路径，全局居中描边兼容性最好。
- 外圆角：0.5‑4px；整套图标圆角档位保持统一，保证外轮廓圆润感一致。
- 内圆角（阴角）：0‑0.5px；内侧转角优先锐角，最多给到 0.5px 圆角，禁止和外部圆角数值相同，否则图形结构会臃肿变形。
✅ 面性图标
镂空线条：1‑4px，直接取整数设置。镂空属于反向挖空，视觉感受和普通描边不一样，不要直接套用线性图标的描边参数。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
