4. 图片资源获取与设计：UI设计工具导出规范与协作流程
做嵌入式GUI，最头疼的事是什么？我个人觉得，不是代码写不出来，而是设计师给的图你用不了。或者你吭哧吭哧改完了，设计师又发来一版新的，切图命名全变了。嗯，这期我们就聊聊怎么把这事理顺。
说白了，图片资源从设计稿到嵌入式工程，中间隔着一道“翻译”的鸿沟。设计师用Figma、Sketch画得再漂亮，到了你手里，如果格式不对、尺寸不对、命名混乱，那都是白搭。我见过太多项目，因为资源交付不规范，硬生生多花了两周去返工。
4.1 主流UI设计工具与导出能力
目前市面上，Figma和Sketch是两大主流。我们嵌入式这边，跟它们打交道最多。
| 工具 | 平台 | 导出格式支持 | 插件生态 | 协作方式 |
|---|---|---|---|---|
| Figma | Web/跨平台 | PNG, JPG, SVG, PDF | 丰富，有自动切图插件 | 在线实时协作 |
| Sketch | macOS | PNG, JPG, SVG, PDF, WebP | 丰富，有代码标注插件 | 本地文件+插件同步 |
我个人习惯用Figma。为什么？因为团队里有人用Windows，有人用Mac，Figma一个浏览器就搞定了。而且它的“导出”功能非常直观，选中图层，右边面板直接设置倍率和格式。
4.2 导出规范：格式、倍率与命名
这里我踩过不少坑。有一次，设计师给了我一堆PNG，结果每张图都带@2x后缀，我以为是两倍图，直接用了，结果在屏幕上糊成一团。后来才发现，那是他习惯性勾了“导出@2x”，但实际原图就是1x的。
4.2.1 格式选择
- PNG： 最常用。支持透明通道，适合图标、按钮、非连续色调的图形。缺点是文件大。
- JPG： 不支持透明，适合照片、背景图。压缩率高，但会有画质损失。
- SVG： 矢量格式，理论上无限缩放。但嵌入式GUI引擎对SVG支持参差不齐，有些需要运行时解析，性能开销大。我一般只在图标库用SVG，且会提前转成二进制格式。
- WebP： 谷歌的格式，压缩率比PNG高30%，支持透明和动画。如果你的平台支持，强烈推荐。
4.2.2 倍率与DPI
嵌入式屏幕的DPI通常固定，不像手机那样有@1x、@2x、@3x。我们一般只需要一套资源。但要注意：
- 如果屏幕分辨率是480x272，那设计师就应该按这个尺寸出图。
- 不要给设计师“视网膜屏”的概念。嵌入式屏没有这个说法。你给他一个200x200的图标，他按200x200画就行。
- 如果UI中有大量小图标，建议统一使用偶数尺寸（如24x24、32x32）。为什么？因为奇数尺寸在部分2D加速引擎中会导致边缘模糊。我曾经因为这个，被一个像素的偏差折腾了一下午。
4.2.3 命名规范
这是协作中最容易出问题的地方。我建议团队内部定一个硬性规则：
模块_功能_状态_尺寸.png
示例：
btn_play_normal_48x48.png
btn_play_pressed_48x48.png
bg_main_menu_480x272.jpg
icon_wifi_connected_24x24.png
为什么这么定？因为代码里可以直接用字符串匹配。比如你写一个图片加载函数，传入“btn_play”，然后根据状态拼接“_normal”或“_pressed”，非常方便。如果设计师随便命名，比如“111.png”、“最终版.png”、“真的最终版.png”，那你就等着哭吧。
4.3 设计师与工程师的协作流程
很多团队的问题是：设计师画完图，扔给工程师，然后就不管了。工程师拿到图，发现尺寸不对，格式不支持，又回去找设计师。一来二去，时间全浪费在沟通上了。
我建议的流程是这样的：
- 需求对齐阶段： 工程师提供屏幕参数（分辨率、色深、支持的格式、最大资源大小）。设计师根据这些参数确定画布尺寸和色彩模式。
- 设计阶段： 设计师使用组件库，确保相同元素（如按钮、图标）复用同一份资源。不要同一个“返回箭头”画三遍，每遍还不一样。
- 导出阶段： 使用自动化插件（如Figma的“Export for Dev”插件），一键导出所有切片，并自动按命名规范重命名。
- 验收阶段： 工程师拿到资源后，先做一次“自动化校验”。写个脚本检查：文件名是否符合规范？尺寸是否与设计稿一致？是否有重复资源？
- 集成阶段： 将资源打包成嵌入式专用的资源文件（如.lvgl的bin文件、.bin的字体文件、.png的索引图）。
下面这张图，是我自己总结的协作流程，你可以参考一下：
4.4 避坑指南：我踩过的那些雷
做嵌入式GUI这么多年，有些坑我是一路踩过来的。分享几个典型的：
- 色深不匹配： 设计师用RGB888（1600万色）出图，你的屏幕只支持RGB565（6.5万色）。结果就是颜色失真，渐变出现色带。解决办法：导出前让设计师把色彩模式改成RGB565，或者你自己写个脚本批量转换。
- 透明通道问题： 有些嵌入式引擎不支持PNG的Alpha通道，或者支持得很差。我遇到过一张图，在PC上看是半透明的，烧到板子上直接变成黑色方块。后来我改成不带Alpha的PNG，或者用JPG+掩码图的方式解决。
- 资源体积爆炸： 设计师给了100张1920x1080的PNG，每张5MB。你的Flash只有16MB。怎么办？压缩、降分辨率、改用JPG、或者用索引色模式。我一般会跟设计师商量，把大背景图换成JPG，小图标用PNG，这样能省不少空间。
- 命名混乱： 这个前面说过了。最夸张的一次，我收到一个文件夹，里面全是“未命名-1.png”、“未命名-2.png”……我花了整整一天去猜每张图是干什么的。从那以后，我强制要求设计师用插件导出，并且命名规则写进项目文档里。
4.5 总结一下
图片资源获取与设计，说白了就是“定规矩、走流程、自动化”。规矩定好了，流程走顺了，工具用对了，你会发现，设计师和工程师之间的协作其实没那么难。嗯，关键是要有人站出来，把这些规矩定下来。如果你不做，那最后吃苦的还是你自己。