1. 认识Figma界面与硬件原型画布：画布尺寸选择、图层管理、视图缩放与导航

1.1 概念解释

什么是硬件原型交互测试

硬件原型交互测试是指使用高保真交互式原型（而非真实硬件）来模拟硬件设备的操作流程、界面反馈与物理交互逻辑。在硬件开发早期（开模、打板之前），通过原型测试快速验证用户体验、按键布局、屏幕流程和交互直觉，从而大幅降低返板成本和开发风险。常见的测试对象包括智能家居面板、手持设备、车载中控、工业终端等。

Figma交互原理

Figma 的交互能力建立在「画板 → 连接 → 触发 → 动作」四层模型之上。设计师在画布中创建多个画板（代表不同设备页面或状态），然后在原型模式中通过连线（Connection）定义触发事件（如点击、拖动、悬停）和目标动作（如跳转画板、打开覆盖层、切换状态）。预览时，浏览器或 Figma Mirror 会模拟真实的设备交互流，测试人员可以像操作真机一样点按、滑动、观察反馈。

1.2 流程拆解

以下是从零开始构建硬件原型交互测试的标准三步流程，其中自然融入了画布尺寸选择、图层管理与视图导航的基础操作。

步骤1：创建组件——从元素到可复用单元

1. 选择画布尺寸：在 Figma 新建文件后，点击右侧「设计」面板底部的「画布尺寸」预设，或手动输入宽度×高度（单位 px）。硬件原型应依据目标设备的物理分辨率设定，例如智能家居面板常见 480×320、720×1280；手持设备按 375×812（iPhone 比例）或 360×640（Android 基准）。
2. 绘制界面元素：使用矩形、椭圆、文本工具绘制按键、显示屏、旋钮、指示灯等硬件控件。
3. 转为组件：选中元素后按 ⌘ Option K（Mac）或 Ctrl Alt K（Win），将其创建为组件。组件化后，所有实例自动同步修改，便于批量调整按键大小、配色或圆角。
4. 图层管理：在左侧图层面板中为每个组件和画板重命名（如 btn_ok、screen_home），并使用文件夹分组（如 01_Buttons、02_Screens），为后续添加交互提供清晰的层级索引。

步骤2：添加交互——连接画板与触发动作

1. 进入原型模式：点击顶部工具栏右侧的「原型」标签，画板边缘出现蓝色连接点。
2. 设置触发事件：选中一个元素（或画板本身），拖动右侧连接点到目标画板。在弹出面板中选择触发方式：点击、长按、悬停、拖动 等。
3. 配置动作与动效：选择动作类型（导航到、打开覆盖层、返回、切换状态等），并设置过渡动画（如推入、滑动、溶解）和时长（通常 200～400ms 符合硬件响应感）。
4. 视图缩放与导航：使用 ⌘ +/⌘ -（Mac）或 Ctrl +/Ctrl -（Win）缩放画布；按住空格键拖拽平移；在左侧页面面板中快速跳转任意画板。这些操作让你在搭建大量画板时仍能高效定位。

步骤3：预览测试——验证交互逻辑

1. 启动预览：点击原型模式右上角的「▶」按钮，或使用快捷键 ⌘ Shift Return（Mac）/ Ctrl Shift Enter（Win），在浏览器中打开可交互原型。
2. 模拟真实操作：用鼠标或触摸板点击原型中的按键、滑动页面、观察跳转与反馈。
3. 记录问题：发现交互缺失、跳转错误或过渡卡顿后，直接截图并标注返回 Figma 修改。

1.3 案例分析：智能家居面板原型测试

案例背景：某团队需要为一款 4 寸智能家居中控面板（分辨率 480×480）设计交互原型，核心功能包括：主页显示时间/天气、点击「灯光」图标进入灯光控制页、滑动滑块调节亮度、按压「返回」虚拟键回到主页。

测试实施过程：

1. 画布与组件：新建 Figma 文件，画布尺寸设为 480×480；创建 btn_light、slider_brightness、btn_back 等组件，并放入 01_Components 文件夹。
2. 画板搭建：制作三个画板：Home（主页）、LightCtrl（灯光控制页）、About（关于页），通过图层面板将背景、状态栏、控件分层管理。
3. 交互连接：在原型模式下，将 Home 中的 btn_light 连接到 LightCtrl，触发方式为「点击」，动效选择「推入」300ms；将 LightCtrl 中的 btn_back 连接到 Home，触发方式为「点击」，动效选择「推出」250ms；在 LightCtrl 中为 slider_brightness 添加「拖动」交互，控制一个圆形指示器的填充百分比（使用 Smart Animate）。
4. 预览测试：在浏览器中打开原型，逐项测试：点击灯光图标 → 跳转灯光页 → 拖动滑块 → 亮度指示器同步变化 → 点击返回 → 回到主页。发现滑块拖动时指示器响应有 1 帧延迟，返回 Figma 将 Smart Animate 匹配的图层名称统一后修复。

1.4 表格总结

交互类型对照表

测试记录模板

1.5 实践清单

每次开始硬件原型交互测试前，逐项确认以下要点：

• ☐ 画布尺寸与目标设备一致——确认宽度、高度与硬件分辨率完全匹配，避免预览时出现黑边或拉伸。
• ☐ 所有关键元素已组件化——至少将按钮、图标、状态栏、背景转为组件，确保批量修改一致性。
• ☐ 图层命名清晰且分组有序——使用统一前缀（如 btn_、screen_、icon_），文件夹层次不超过 3 级。
• ☐ 交互连接已覆盖所有核心路径——逐页检查每个可交互元素是否都有正确的目标画板和触发事件。
• ☐ 动效时长与硬件响应感匹配——按压反馈 ≤ 100ms，页面切换 200～400ms，长按触发 ≥ 800ms。
• ☐ 预览前关闭不必要的插件/图层——隐藏参考线、标注层和草稿图层，避免干扰测试。
• ☐ 至少在一台真实尺寸设备上预览——使用 Figma Mirror 在手机或平板上测试，验证触控区域大小是否符合手指操作（目标热区 ≥ 44×44pt）。