3、图标设计基础：图标分类（功能/状态/警示）、图标网格与像素对齐、SVG图标导出
好，咱们进入第三节课。说实话，图标设计这事儿，看着简单，做起来全是坑。我刚开始做车载HMI那会儿，觉得画个图标嘛，不就是几个形状拼一拼？结果第一次评审就被怼回来了——「你这图标在阳光下根本看不清」「像素没对齐，边缘发虚」「SVG导出后多了好几层没用的路径」……嗯，从那以后我才老老实实把基础打扎实。
今天咱们就聊三个核心点：图标怎么分类、网格和像素对齐到底怎么做、SVG导出有什么讲究。你想想看，这些基础打好了，后面画什么图标都顺手。
3.1 图标分类：功能、状态、警示
车载图标跟手机APP图标不一样。手机图标你点错了顶多关掉重来，车载图标点错了可能影响驾驶安全。所以分类必须清晰。
我个人习惯把车载图标分成三大类：
| 分类 | 用途 | 典型例子 | 设计要点 |
|---|---|---|---|
| 功能图标 | 触发某个操作 | 音量加减、空调开关、导航箭头 | 形状简洁，语义明确，一眼看懂 |
| 状态图标 | 显示当前系统状态 | 蓝牙连接、电量、信号强度 | 动态变化时要有过渡动画 |
| 警示图标 | 提醒用户注意 | 故障灯、安全带未系、胎压异常 | 颜色醒目，通常用红/黄/橙 |
关键原则：功能图标用「面」表达，状态图标用「线」表达，警示图标用「面+颜色」表达。这是我踩过坑后总结出来的——功能图标如果太细，手指点不准；状态图标如果太实，容易跟功能图标混淆。
举个例子。空调温度调节图标，功能图标就是「+」和「-」，简洁明了。但如果你把「+」画得太复杂，加个圆圈加个箭头，司机扫一眼根本反应不过来。说白了，车载图标不是艺术品，是工具。
3.2 图标网格与像素对齐
好，分类搞清楚了，接下来是实操中最容易翻车的地方——网格和像素对齐。
为什么要有网格？我刚开始也不理解，觉得「差不多对齐就行了」。直到有一次，我把一个48px的图标放在屏幕上，边缘总是模糊。后来才发现，我的路径点落在了48.5px的位置，渲染时系统只能做抗锯齿处理，边缘就虚了。
你想想看，车载屏幕分辨率越来越高，但像素对齐的问题反而更明显。因为像素密度大了，半个像素的偏移都会被放大。
3.2.1 网格系统怎么设
我个人建议用 8px 网格。为什么是8？因为大多数车载屏幕的像素是4的倍数，8px网格能保证所有图标尺寸都是偶数，对齐最省心。
- 图标尺寸： 24px、32px、48px、64px（都是8的倍数）
- 安全区域： 图标内容不要贴边，留出2px内边距
- 关键点： 所有路径点必须落在整数坐标上
我的小技巧：在Figma或Sketch里画图标时，打开「网格对齐」和「像素对齐」两个开关。导出前放大到400%检查一遍，看有没有半像素的路径点。我曾经因为这个习惯，避免了一次量产车上的图标模糊问题。
3.2.2 像素对齐的实操方法
说白了，像素对齐就一句话：所有坐标值都是整数。但实际操作中，有几个容易忽略的点：
- 描边对齐： 如果图标有描边，描边宽度必须是偶数（比如2px、4px），否则描边会落在半像素上。
- 圆角处理： 圆角半径也必须是整数。我见过有人用3.5px圆角，结果渲染出来一边圆一边方。
- 布尔运算： 用「合并」「减去」等布尔运算后，检查新生成的路径点是否还是整数。很多工具在布尔运算后会偷偷产生小数坐标。
注意： 不同设计工具对像素对齐的处理不一样。Sketch默认会帮你对齐，Figma需要手动开启。我建议导出前用SVG代码检查一遍，别完全信任工具的预览效果。
3.3 SVG图标导出
好，图标画完了，网格对齐了，最后一步——导出SVG。这一步看着简单，但坑最多。我记得有一次，前端同事拿着我导出的SVG说：「你这文件里怎么有base64图片？还有一堆没用的组？」
嗯，从那以后我总结了一套SVG导出的标准流程。
3.3.1 导出前的清理工作
在导出之前，先做这几件事：
- 合并路径： 把能合并的形状都合并成一个路径，减少文件体积
- 删除隐藏图层： 设计稿里可能有不用的参考线、标注，导出前删干净
- 检查命名： 给图层起有意义的名称，比如「icon-volume-up」，别留「Layer 1 Copy 3」这种
3.3.2 导出设置
我个人习惯用「导出为SVG」功能，但有几个参数必须调：
| 参数 | 推荐值 | 原因 |
|---|---|---|
| SVG版本 | 1.1 | 兼容性最好，所有浏览器都支持 |
| 小数精度 | 1位小数 | 保留太多小数没意义，反而增加文件体积 |
| 样式方式 | 内联样式 | 避免外部CSS引用，方便前端直接使用 |
| 视图框 | 0 0 24 24 | 统一视图框，方便缩放 |
3.3.3 手动优化SVG代码
导出后，我建议用文本编辑器打开SVG文件，手动做几件事：
<!-- 原始导出内容（有冗余） -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g id="icon-group">
<path d="M12 2 L12 22 M2 12 L22 12" stroke="#000" stroke-width="2"/>
</g>
</svg>
<!-- 优化后（去掉多余的g标签） -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2 L12 22 M2 12 L22 12" stroke="#000" stroke-width="2"/>
</svg>优化要点：
- 去掉多余的
<g>标签，除非有特殊用途 - 把
fill和stroke的颜色值统一，别混用 #000000 和 black - 检查路径命令，把
M、L、C等命令后的坐标值改成整数
3.3.4 车载场景的特殊要求
车载图标跟网页图标不一样，有几个额外的点要注意：
- 颜色分离： 图标本身的颜色和背景色要分开定义，方便夜间模式切换
- 最小尺寸： 车载图标最小不要小于20px，否则在阳光下看不清
- 触控区域： 功能图标的实际点击区域要比视觉尺寸大一圈（至少44px），这是苹果的HIG建议，车载也适用
避坑指南： 我曾经导出一个SVG图标，前端说加载后图标位置偏移了。查了半天，发现是视图框（viewBox）的起始坐标不是0 0，而是从负坐标开始的。所以导出前一定要确认viewBox的起点是0 0。
小结
好，这一章的内容就这些。总结一下：
- 图标分三类：功能、状态、警示，设计手法不一样
- 网格用8px系统，所有坐标对齐整数
- SVG导出前清理冗余，导出后手动优化代码
下一章咱们开始动手画第一个图标——音量控制图标。到时候我会带着你一步步走完从草图到SVG导出的全过程。嗯，到时候见。