3. 原型设计工具：Figma / Axure RP 基础、HMI 常用组件库搭建、低保真与高保真原型制作

说到原型设计，很多刚入行的朋友会问：「到底用 Figma 还是 Axure？」

我的答案是：两个都要会。但侧重点不同。

Figma 适合做视觉稿、高保真原型，尤其是多人协作时，它的实时同步能力太香了。Axure RP 则强在逻辑交互，比如复杂的变量判断、条件分支，这些在 HMI 项目中经常用到。我个人习惯是：用 Axure 搭骨架，用 Figma 做皮囊。

3.1 Figma 基础操作与 HMI 适配

Figma 是浏览器端的工具，不用安装，打开就能用。这一点在团队协作时特别方便。我记得有一次项目紧急，客户要远程看原型，我直接甩了个链接过去，对方连软件都不用装，打开就能点。

在 HMI 项目中，Figma 有几个关键设置要注意：

• 画板尺寸：工业屏常见分辨率有 1024×600、1280×800、1920×1080。我建议直接按实际屏幕尺寸建画板，别缩放，否则后期标注会乱。
• 网格与对齐：HMI 界面讲究整齐，打开「显示网格」和「对齐网格」，间距统一用 4 的倍数（4px、8px、16px）。
• 组件复用：按钮、仪表盘、报警灯这些，做成组件（Component），改一个全部更新。

3.2 Axure RP 基础与交互逻辑

Axure RP 是我最早用的原型工具。说实话，它的界面有点老气，但交互能力是真的强。在 HMI 项目中，我主要用它来做：

• 页面跳转流程：比如从主界面点击「参数设置」进入设置页，再点「返回」回到主界面。
• 变量与条件判断：模拟设备状态变化。比如「当温度 > 80℃ 时，报警灯变红」。
• 动态面板：模拟多状态切换，比如电机的「运行/停止/故障」三种状态。

嗯，这里要注意一点：Axure 的交互逻辑是「事件驱动」的。说白了就是「当用户做了什么，系统就响应什么」。这和 HMI 的真实运行逻辑很像，所以用 Axure 做低保真原型，客户很容易理解。

3.3 HMI 常用组件库搭建

组件库，说白了就是你的「积木箱」。把常用的按钮、仪表、指示灯、表格等做成标准件，下次直接拖出来用。我见过很多团队，每个项目都从零开始画按钮，效率极低。

我建议按以下分类搭建组件库：

在 Figma 中搭建组件库时，我习惯用「团队组件库」功能。这样整个团队都能共用一套组件，谁改了按钮样式，所有人的项目都会同步更新。你想想看，这比每个人各自维护一套要省多少事？

3.4 低保真原型制作

低保真原型，说白了就是「草稿」。不需要颜色、不需要精细图标，只需要把布局和功能逻辑画清楚。

我一般用 Axure 做低保真，因为快。用矩形、圆形、文本框这些基础元件，搭出页面骨架。比如一个设备监控页面，就是几个方块代表仪表盘，几条线代表趋势图，几个按钮代表操作入口。

为什么要先做低保真？

• 快速验证：花 1 小时画完，给客户看布局是否合理。如果客户说「这个仪表盘应该放在右上角」，改起来也就几分钟。
• 聚焦逻辑：没有颜色干扰，客户和开发人员会更关注「这个页面怎么用」，而不是「这个按钮好不好看」。
• 节省成本：我见过有人花 3 天做高保真，结果客户一看说「整体结构不对」，全部重来。嗯，那感觉太酸爽了。

3.5 高保真原型制作

高保真原型，就是「以假乱真」的版本。颜色、字体、图标、交互效果，都要和最终产品一致。

我通常用 Figma 做高保真。因为它的视觉表现力更强，而且可以直接导出设计标注给开发人员。

高保真原型的关键点：

• 像素级还原：间距、字号、颜色值，都要和设计规范一致。我习惯在 Figma 里建一个「设计规范页」，把主色、辅色、字体、阴影等全部定义好。
• 交互动效：比如按钮按下有反馈、页面切换有过渡动画。Figma 的「原型」模式可以设置简单的点击跳转和过渡效果。
• 真实数据模拟：不要用「12345」这种假数据。比如温度显示就用「25.6℃」，报警时间就用真实的时间格式。这样客户看起来更有代入感。

3.6 从低保真到高保真的工作流

我个人的工作流是这样的：

1. 需求分析：和客户确认功能列表、页面数量、操作流程。
2. 低保真原型（Axure）：快速搭建页面骨架，和客户确认布局和逻辑。
3. 设计规范制定：确定颜色、字体、图标风格、组件样式。
4. 高保真原型（Figma）：基于低保真原型，套用设计规范，制作精细视觉稿。
5. 交互演示：在 Figma 中设置页面跳转和交互反馈，生成可点击的原型链接。
6. 设计评审与交付：客户确认后，导出设计标注和切图，交付给开发。

你可能会问：「为什么不用一个工具从头做到尾？」

我的回答是：工具各有专长。Axure 强在逻辑，Figma 强在视觉。用对工具，事半功倍。就像你不会用螺丝刀去钉钉子一样，对吧？