第二章 设计工具入门：Figma/Sketch界面介绍、画板与图层、基础绘图工具

说实话，很多刚入行的朋友问我：「做汽车HMI，到底该学Figma还是Sketch？」

我的回答很直接——现在主流车厂和Tier1供应商，基本都在用Figma。Sketch虽然曾经是王者，但Figma的协作能力和跨平台优势太明显了。我个人习惯是Figma为主，Sketch为辅，但今天咱们重点讲Figma，因为它是目前HMI设计圈的「通用语言」。

2.1 Figma界面速览：别被密密麻麻的工具栏吓到

第一次打开Figma，你可能会觉得：「这玩意儿怎么这么多面板？」

别慌，我带你捋一遍核心区域：

• 顶部工具栏：移动、形状、文字、画板等最常用工具。记住快捷键就好——V是移动，R是矩形，T是文字。
• 左侧图层/页面面板：所有元素的「家」。你画的每个矩形、每条线，都会在这里按层级排列。
• 中央画布区：你真正干活的地方。可以无限缩放，按住空格键拖拽平移。
• 右侧属性面板：选中一个元素后，这里会显示它的位置、尺寸、颜色、圆角等参数。HMI设计里，精确到像素是基本功。

2.2 画板与图层：HMI设计的「地基」

画板（Frame）是Figma里最重要的概念。你可以把它理解成「一张纸」——每张纸代表一个屏幕或一个组件。

在汽车HMI中，我们通常这样设置画板：

屏幕类型	推荐尺寸（px）	备注
仪表盘（Cluster）	1920 × 720	宽屏比例，注意安全区域
中控屏（Center Display）	1920 × 1080	横屏为主，部分车型竖屏
HUD抬头显示	1280 × 400	细长条，视野范围有限
副驾屏	1280 × 720	娱乐功能为主

图层管理这块，我吃过不少亏。曾经有个项目，我画了200多个图层全堆在一起，后期改一个按钮颜色找了半小时……

2.3 基础绘图工具：从矩形到HMI界面

你可能会觉得：「画个矩形谁不会？」

嗯，但HMI里的矩形，不是随便画的。举个例子——按钮的圆角。在汽车上，圆角太小显得廉价，圆角太大又不符合安全规范。我一般用8px或12px，具体看屏幕PPI。

咱们过一遍最常用的几个工具：

• 矩形工具（R）：按住Shift画正方形，按住Alt以中心点缩放。HMI里的卡片、按钮、输入框，90%都是矩形变来的。
• 椭圆工具（O）：画圆形图标、仪表盘指针的轴心、或者作为遮罩使用。
• 钢笔工具（P）：画自定义形状。比如仪表盘上的弧形速度表，就是用钢笔描点+贝塞尔曲线调出来的。
• 文字工具（T）：HMI里的字体选择很讲究。中文一般用「思源黑体」或「阿里巴巴普惠体」，英文用「Inter」或「Roboto」。别用宋体，那是在做Word文档。

2.4 实战小练习：画一个仪表盘速度表

光说不练假把式。咱们用刚学的工具，画一个最简单的速度表：

1. 新建画板，尺寸设为 400×400（模拟仪表盘局部）
2. 用椭圆工具画一个直径300px的圆，填充设为深灰色（#1A1A1A）
3. 再画一个直径280px的圆，填充设为黑色（#000000），居中对齐——这就是表盘底色
4. 用钢笔工具画一条弧线，描边设为白色，粗细4px——这就是速度刻度
5. 用文字工具在中间打上「120 km/h」，字体用Inter，字号48px
6. 最后画一个小矩形作为指针，旋转到合适角度

你看，一个简单的速度表就出来了。实际项目中，我们会在这个基础上加动画、加渐变、加交互，但底层逻辑就是这些基础图形的组合。

2.5 本章小结

这一章我们聊了：

• Figma的界面分区和核心快捷键
• 画板的概念和HMI常用尺寸
• 图层管理的重要性（别像我一样踩坑）
• 四个基础绘图工具的实际用法
• 一个速度表的实战小练习

下一章，我们会深入讲「颜色与字体」——这是HMI视觉设计的灵魂。你会发现，同样的布局，换一套配色和字体，效果天差地别。

先别急着往下翻，打开Figma，把今天讲的速度表画一遍。画完你就知道，原来HMI设计没那么神秘。