产品中的图标icon切图、标注、团队配合

切图

界面设计下的重要能力，将界面内元素单独存成透明背景（例如 PNG 格式）的图片，并且为了不同设备和屏幕分辨率生成多倍数理想结果。

切图手段

位图输出和矢量图输出，使用软件包括PS、AI、SKETCH、figma、XD

切图图标

目前最主要的切图输出针对功能图标为主，而最主要采用的是AI/figma来设计功能图标，并输出SVG格式给开发人显以及配合SKETCH、AI、XD的界面设计，并通过AE生成动效文件。

了解切图结构

切图主要包含视觉范围和切图范围，视觉范围是图标真实的尺寸，而切图范围主要针对用户手指触碰范围。（通常视觉范围比切图范围小一半）

切图命名

模块_类别_功能_状态.png (通俗来讲：在什么页面_具体位置 _做什么用_所处状态.png)

1. 必须字母不能中文 a
2. 必须下划线 _
3. 必须缩写 button = btn
4. 必须有状态 正常、按下
   eg：Home_nav_search_nor.png

状态类型

移动端手指状态
nor normal 默认/正常
sel selected 选中
dis disabled 不可用/禁用
电脑端鼠标状态
nor normal 默认/正常
sel selected 选中
dis disabled 不可用/禁用
hig highlight 高亮/划过
pre pressed 按下
触及、点击区域不同

文字显示尺寸不同
移动端最小字号 11pt.sp
电脑端最小字号 12px
文字字体

知识总结

1. 切图范围分为视觉范围和点击范围
2. 点击范围需要考虑使用情境和用户群体
3. 切图规范使用 模块_类别_功能_状态.png
4. 懂得切图和输出

AI软件使用教程：

1、先画好icon
2、窗口——资源导出
可以将刚画好的图标按住alt键拖入资源导出画板（或者将图标进行编组，在可直接拖入资源导出面板）
3、点击画板
figma软件使用教程：

1、按a键，然后再右侧选择 plugin icon 128*128
2、在这个画布上绘制好图标，并把图标编组
选择需要的倍数以及格式，点击 export 即可