第4章 测试环境搭建步骤

4.1 适用场景

本章流程适用于以下产品与项目阶段：

• 硬件产品交互原型验证 —— 车载中控、智能家居面板、工业手持终端等带物理按键的设备。
• 嵌入式UI与触控融合测试 —— 需要同时验证屏幕触控交互和物理按键反馈的场景。
• 多模态交互原型评估 —— 语音+按键+触控组合交互的早期原型环境搭建。
• 跨团队集成测试前准备 —— 在设计、硬件、测试三方协作前建立统一的交互测试基线。

4.2 前置条件

开始环境搭建前，必须确认以下资源与权限已就绪：

类别	具体要求	确认方式
软件	Figma 桌面应用 v116+ 或 Web 端（需专业版/企业版）	「帮助 > 关于」查看版本号
硬件	物理按键设备（USB键盘 / 定制按键板 / 蓝牙按钮）	设备管理器或系统偏好设置中可见
插件	Figma 插件「KeyMapper」或「Hardware Bridge」已安装	「插件 > 已安装」列表中存在
原型文件	待测 Figma 原型文件（.fig / 团队链接），版本 ≥ v2.0，图层命名符合规范	原型检查清单已签署
映射表	物理按键 → 交互动作的映射关系表（纸质或电子版）	产品经理 / 交互设计师确认签字
权限	Figma 团队编辑权限 & 系统驱动安装权限（若需自定义HID驱动）	IT 工单已完成

4.3 操作步骤

测试环境搭建共包含4个核心步骤，整体流程如下：

步骤一：Figma 原型导入

将待测原型文件导入 Figma 工作区，并建立图层结构与交互面板的基线。

1. 获取原型文件 —— 从交互设计师处获取 .fig 文件或团队项目链接。
2. 打开 Figma 应用 —— 使用桌面客户端（推荐）或 Web 端登录企业版账号。
3. 导入文件 —— 拖拽 .fig 文件到工作区，或通过「菜单 > 文件 > 导入」选择文件。
4. 检查图层结构 —— 展开图层面板，确认所有页面、组件、变体完整且命名符合《Figma 图层命名规范 v2.1》。
5. 验证交互面板 —— 切换到「Prototype」面板，确认至少存在一条已配置的交互连线。

步骤二：交互触发器配置

为每个需要物理按键触发的交互元素配置触发器事件与目标动作。

1. 选择触发元素 —— 在画布中选中按钮、滑块或热区图层。
2. 打开 Prototype 面板 —— 右侧面板中点击「Prototype」选项卡。
3. 配置交互事件 —— 点击「+」添加交互，选择触发方式（点击 / 拖拽 / 悬停）。
4. 绑定目标页面 —— 拖拽连线到目标页面或选择「滚动到」「切换状态」等动作。
5. 设置过渡动画 —— 选择缓动曲线与时长（推荐 ≤300ms 以贴近真实硬件响应）。
6. 验证逻辑链 —— 使用「Flow」模式从头到尾走查所有交互路径，记录断点。

步骤三：物理按键映射设置

通过映射插件将物理按键信号与 Figma 交互事件绑定。

1. 安装并打开映射插件 —— 在 Figma 中搜索「KeyMapper」或「Hardware Bridge」并启动。
2. 连接物理设备 —— 将按键板通过 USB 或蓝牙连接到测试主机，确认系统识别。
3. 识别按键码 —— 在插件界面点击「识别」模式，按下物理按键，记录插件输出的 KeyCode。
4. 创建映射条目 —— 在插件配置表中为每个 KeyCode 指定交互动作（如 click / swipe_up）和目标元素名称。
5. 导出映射配置 —— 将映射关系保存为配置文件，便于复用与版本管理。

映射配置文件示例（JSON）：

{
  "plugin": "KeyMapper",
  "version": "2.1.0",
  "device": "USB_Keyboard_HID",
  "polling_rate_hz": 60,
  "mappings": [
    {
      "key_code": "0x52",
      "action": "click",
      "target": "btn_next",
      "modifier": "none",
      "description": "下一页"
    },
    {
      "key_code": "0x51",
      "action": "click",
      "target": "btn_prev",
      "modifier": "none",
      "description": "上一页"
    },
    {
      "key_code": "0x5A",
      "action": "swipe_up",
      "target": "list_container",
      "modifier": "none",
      "description": "向上滚动列表"
    }
  ]
}

步骤四：预览模式启动

启动 Figma 原型预览，验证整个环境从按键输入到交互反馈的完整链路。

1. 进入预览模式 —— 点击 Figma 右上角「▶」按钮，或按快捷键 Ctrl+Shift+P（Win）/ Cmd+Shift+P（Mac）。
2. 选择设备类型 —— 在预览工具栏选择与目标硬件匹配的机型与分辨率（如 1920×720 车载横屏）。
3. 开启交互热区显示 —— 勾选「Show interactive hotspots」以可视化所有可触发区域。
4. 连通性验证 —— 依次按下每个已映射的物理按键，观察屏幕是否执行对应交互动作。
5. 记录环境状态 —— 使用系统截图工具或录屏软件保存预览初始状态，作为环境基线附件。

4.4 输入输出物

方向	物项	格式/载体	提供方
输入	Figma 原型文件	.fig / 团队项目链接	交互设计师
输入	物理按键映射关系表	纸质 / Excel / 在线文档	产品经理 + 交互设计师
输入	物理按键设备	USB / 蓝牙 HID 设备	硬件工程师
输出	可交互测试环境	Figma 预览会话（含映射激活）	测试工程师
输出	按键映射配置文件	.json	测试工程师
输出	环境搭建配置日志	.log / .txt	测试工程师

4.5 责任边界

角色	负责步骤	核心交付物	签字确认点
交互设计师	步骤一、步骤二	图层结构检查报告、触发器配置清单	原型导入完整性、交互逻辑正确性
硬件工程师	步骤三	按键设备驱动安装确认、密钥映射表	按键信号识别率 ≥ 99%
测试工程师	步骤四、整体验收	环境搭建记录表、验收签字单	预览模式连通性、映射响应正确性

4.6 记录材料

以下材料需在本章流程执行过程中同步填写或归档，作为可追溯性证据：

• 原型导入检查表 —— 记录页面数量、图层总数、异常图层数，由交互设计师签字。
• 交互触发器配置清单 —— 列出所有配置了交互的元素、触发事件、目标页面，由交互设计师确认。
• 物理按键映射配置表 —— 含按键码、动作、目标元素、映射日期与操作人。
• 环境搭建验收记录 —— 包含测试环境搭建记录表（见下表）及截图/录屏附件。

测试环境搭建记录表（模板）：

字段	填写内容	示例
搭建日期	YYYY-MM-DD	2025-06-18
Figma 版本	桌面版版本号	v116.4.0
KeyMapper 插件版本	插件市场显示版本	v2.1.0
物理设备型号	品牌 + 型号	Cherry MX Board 3.0S
映射配置文件路径	相对路径	./config/mapping_20250618.json
预览启动时间	HH:MM:SS	14:32:10
连通性验证结果	通过 / 不通过	通过
搭建人签字	姓名	张明

4.7 异常处理

异常现象	可能原因	处理方案	升级路径
原型导入失败 / 文件损坏	.fig 文件版本不兼容、网络传输中断	重新导出 .fig（v134 兼容格式），使用团队链接替代文件导入	若仍失败 → 联系交互设计师重新发布原型
Prototype 面板无交互连线	交互设计师未配置触发器、图层被锁定	检查图层锁定状态，要求交互设计师补全交互配置	阻塞项 → 暂停搭建，待交互设计师完成后继续
按键映射后无响应	KeyCode 识别错误、映射目标元素名称不匹配	重新识别 KeyCode，核对目标元素名称与图层命名一致	若映射配置正确仍无响应 → 检查 HID 驱动
预览模式卡顿 / 掉帧	原型包含大量高分辨率图片、复杂矢量效果	关闭「Show hotspots」、降低预览分辨率、使用性能模式	仍卡顿 → 考虑简化原型资源后重试
多个物理按键映射到同一动作	KeyCode 配置表中的值重复	去重映射条目，确保每个 key_code 唯一	插件自动检测重复时强制保存失败的，需手工修正 JSON

4.8 验收标准

完成本章全部步骤后，须逐项确认以下标准全部满足，方可在环境搭建验收记录中签字：

• 完整性：所有待测页面均已导入 Figma 项目，图层数量与原型清单偏差 ≤ 2%。
• 交互正确性：步骤二中配置的触发器逻辑链与交互需求文档完全一致，无断点、无错误跳转。
• 映射准确率：物理按键映射配置表中的每个 KeyCode 在测试中均能触发对应的 Figma 交互动作，准确率 100%。
• 预览连通性：预览模式启动后，通过物理按键可完整走通至少一条端到端用户流程（如首页 → 设置页 → 返回首页）。
• 文档完整性：测试环境搭建记录表、映射配置文件、截图/录屏附件齐全且命名规范。

验收通过后，测试工程师在测试环境搭建验收记录上签字，本章流程结束。