3、视觉设计工具链：Adobe Photoshop、Illustrator、After Effects在HMI设计中的应用

说到HMI的视觉设计，很多人第一反应就是「画图嘛」。其实没那么简单。我做了这么多年座舱系统，见过太多「画得好看但跑不起来」的设计稿。视觉工具链，说白了就是要把设计师的创意，变成工程师能用的资产。

今天咱们聊聊三款Adobe工具：Photoshop、Illustrator、After Effects。它们各自在HMI设计里扮演什么角色？我踩过哪些坑？来，一个一个说。

3.1 Photoshop：位图处理的「老大哥」

Photoshop，简称PS，做UI设计的没人不知道。但在HMI领域，它的用法跟网页设计不太一样。

3.1.1 核心用途：纹理与质感

HMI界面里，很多元素不是纯色块。比如仪表盘的碳纤维纹理、中控台的拉丝金属、氛围灯的渐变光晕。这些东西，PS是首选。

我个人习惯，用PS做两件事：

• 背景纹理：比如星空背景、科技感网格、磨砂玻璃效果。PS的滤镜和图层样式，效率很高。
• 图标精修：虽然矢量图标用AI更合适，但有些复杂光影的图标（比如3D风格的空调出风口），PS的图层混合模式更好用。

3.1.2 避坑指南：分辨率与性能

HMI屏幕分辨率越来越高。1920x720是基础，现在很多车都上2K、4K了。PS里画图，分辨率设低了模糊，设高了卡死。

我曾经有个教训：给一个12.3寸的仪表盘做背景，PS里设了300dpi，结果文件2个G，打开要5分钟。后来我学乖了，用72dpi，画布尺寸按实际像素来就行。HMI不是印刷品，不需要300dpi。

3.2 Illustrator：矢量设计的「主力军」

Illustrator，简称AI。如果说PS负责「质感」，那AI就负责「结构」。HMI里90%的UI元素，其实都应该用AI做。

3.2.1 为什么HMI偏爱矢量？

原因很简单：HMI要适配不同分辨率。同一个仪表盘，可能用在低配车（1280x480）和高配车（1920x720）上。矢量图放大缩小不失真，这是位图做不到的。

我建议，所有图标、控件、字体轮廓，都在AI里完成。具体来说：

• 图标库：用AI的符号功能，建一个图标库。改一个，所有引用自动更新。这个功能我用了好多年，效率提升明显。
• 布局线框图：AI的网格和对齐工具，比PS精准得多。做仪表盘的刻度、中控台的卡片布局，AI是首选。
• 切图标注：AI可以精确标注尺寸、间距、颜色值。给开发交付时，直接导出标注图，省得来回沟通。

3.2.2 导出格式：SVG与PDF

AI导出的格式，我推荐两种：

嗯，这里要注意：SVG导出时，记得把画板裁剪掉多余空白。不然开发导入代码后，图标周围有一圈透明区域，点击热区会偏大。这个小细节，我吃过亏。

3.3 After Effects：动效验证的「试金石」

After Effects，简称AE。很多人觉得AE只是做视频特效的，跟HMI没关系。其实大错特错。HMI的动效设计，AE是验证工具。

3.3.1 动效原型：让设计「动起来」

静态设计稿看不出交互体验。比如仪表盘指针的转动、菜单的滑入滑出、空调温度的旋钮反馈。这些动效，用AE做原型，比用代码调效率高得多。

我一般的工作流是这样的：

1. AI里画好静态元素，导出为矢量图层
2. 导入AE，给每个元素加关键帧动画
3. 调整缓动曲线（easing），让动效符合物理直觉
4. 导出视频或Lottie文件，给开发参考

3.3.2 避坑指南：性能与实现

AE里做得再炫，最终要在车机上跑。车机的GPU性能有限，不是所有动效都能实现。

我曾经做过一个3D翻转的卡片动效，AE里看着很酷。结果开发说，车机芯片跑不动，掉帧严重。最后只能改成2D缩放+透明度变化。

所以，做动效时心里要有数：

• 能用2D就别用3D：车机的3D渲染能力普遍弱
• 能用透明度就别用模糊：高斯模糊很耗性能
• 动效时长控制在300ms以内：超过500ms，用户会觉得卡顿

3.4 三款工具的分工协作

最后总结一下，这三款工具在HMI设计里的分工：

说白了，PS负责「好看」，AI负责「准确」，AE负责「流畅」。三者配合好了，HMI的视觉设计才能既养眼又实用。

下一章，咱们聊聊原型设计工具链。到时候我会讲讲Figma和Sketch在HMI里的实际用法，还有一些跟开发协作的坑。嗯，先到这儿吧。