4、交互原型设计：从线框到动效的完整链路
原型设计，说白了就是把脑子里的想法变成看得见、摸得着的东西。我见过太多团队，需求文档写得天花乱坠，一进开发就发现各种矛盾。为什么？因为文字描述太模糊了。
这一章，我们聊聊原型设计的三个层次：低保真、高保真、动效。每个层次解决不同的问题，别想着一步到位。
4.1 低保真原型：用线框图快速验证逻辑
低保真原型，也叫线框图。它不关心颜色、字体、图标好不好看，只关心一件事：信息架构和交互流程对不对。
我个人习惯用 Balsamiq 或纸笔来画。为什么？因为画得太精致，别人就不敢提意见了。你想想看，一个像素完美的界面摆在那，产品经理和开发都不好意思说“这里逻辑不对”。
核心原则：低保真原型是用来“被推翻”的。越粗糙，越容易迭代。
4.1.1 线框图的核心要素
- 布局结构：导航栏、内容区、操作区的位置关系
- 信息层级：标题、正文、辅助信息的视觉权重
- 交互触点：按钮、输入框、滑动条、卡片点击区域
- 状态标注：空状态、加载中、错误提示、正常显示
我在项目中遇到过一个问题：设计师画了 50 页高保真，结果开发说“这个弹窗在车速 120km/h 时不能出现”。如果先用线框图确认逻辑，根本不会浪费那两周时间。
4.1.2 座舱 HMI 线框图的特殊要求
| 维度 | 普通 App | 座舱 HMI |
|---|---|---|
| 操作方式 | 触控为主 | 触控 + 旋钮 + 语音 + 手势 |
| 安全约束 | 无 | 驾驶分心限制（7 秒规则） |
| 显示环境 | 室内固定亮度 | 强光、夜间、偏光镜 |
| 响应要求 | 可接受 1-2 秒 | 触控反馈 < 100ms |
嗯，这里要注意：座舱的线框图必须标注交互区域的最小尺寸。比如，驾驶中的触控按钮不能小于 48x48px，否则根本点不准。
4.2 高保真原型：用 Figma/Sketch 还原真实体验
高保真原型，就是看起来、用起来都像真车机的东西。我建议在低保真确认后再做这一步，否则改起来想哭。
我个人主力用 Figma，原因很简单：协作方便，组件复用效率高。座舱 HMI 的控件库特别重要——一个仪表盘主题切换，可能涉及 30 多个组件的联动变化。
4.2.1 组件化设计系统
别从零开始画每个界面。先搭一套组件库：
- 基础控件：按钮、开关、滑块、列表项、标签页
- 复合组件：导航栏、卡片、弹窗、底部菜单
- 数据组件：仪表盘、进度环、地图控件、媒体播放器
- 状态组件：加载动画、空状态、错误提示、Toast
我的习惯：在 Figma 里用 Auto Layout + Variants 做组件。一个按钮可以切换 4 种状态（默认、悬停、按下、禁用），改一次全局生效。
4.2.2 高保真原型的交付标准
我曾经吃过一次亏：交付给开发的原型只有静态界面，结果开发猜交互逻辑，上线后跟预期差了十万八千里。后来我定了交付清单：
- 交互连线：每个按钮的点击跳转、返回路径
- 状态覆盖：正常态、空态、极限态（如 100 个联系人列表）
- 异常流程：网络断开、语音识别失败、GPS 信号丢失
- 动效标注：时长、缓动曲线、触发条件
- 多分辨率适配：1920x720、1280x480、异形屏
4.3 交互流程与动效设计：让原型“活”起来
静态原型只能展示“长什么样”，动效才能展示“怎么用”。座舱 HMI 的动效不是装饰，是功能反馈。
4.3.1 交互流程图的绘制方法
我习惯用 FigJam 或 Miro 画流程图。每个节点代表一个界面或状态，箭头代表用户操作或系统响应。
关键点：流程图要覆盖“快乐路径”和“异常路径”。比如用户点击“导航回家”，正常是开始导航；但如果没设置家庭地址呢？如果 GPS 信号弱呢？
下面这张图展示了座舱 HMI 中一个典型交互流程的结构：
4.3.2 动效设计的四个层次
动效不是越炫越好。座舱里动效的核心目的是降低认知负荷。我把它分成四个层次：
| 层次 | 作用 | 示例 | 时长参考 |
|---|---|---|---|
| 1. 反馈动效 | 告知操作已被接收 | 按钮按下变色、触控震动 | 50-100ms |
| 2. 转场动效 | 建立空间关系 | 页面滑动、菜单展开、卡片翻转 | 200-400ms |
| 3. 状态动效 | 展示系统状态变化 | 加载旋转、进度条填充、温度变化 | 持续或 300-600ms |
| 4. 叙事动效 | 引导注意力 | 导航箭头流动、来电呼吸灯 | 循环或 500-800ms |
避坑指南：我曾经在一个项目中把转场动效做到 600ms，结果测试时驾驶员说“感觉车机反应慢”。后来缩短到 250ms，配合缓出曲线，体感就流畅了。记住：座舱动效宁快勿慢，超过 400ms 就会让人觉得卡。
4.3.3 缓动曲线的选择
动效的“质感”很大程度上取决于缓动曲线。我常用的几个：
- ease-out：快速开始，缓慢结束。适合按钮反馈、弹窗出现
- ease-in-out：缓慢开始和结束。适合页面转场、卡片移动
- 自定义贝塞尔：cubic-bezier(0.25, 0.1, 0.25, 1) 是座舱里最安全的曲线
嗯，这里有个小技巧：在 Figma 里用 Smart Animate 配合“复制粘贴”做动效原型，比用 Protopie 快得多。但复杂交互（比如多指手势）还是得用 Principle 或 After Effects 做演示。
4.4 原型工具的选择与协作流程
工具只是手段，别纠结。我见过用 Axure 做出顶级座舱原型的团队，也见过用 Figma 画得一塌糊涂的。关键是团队协作效率。
| 工具 | 适合阶段 | 优势 | 劣势 |
|---|---|---|---|
| 纸笔 / Balsamiq | 低保真 | 快速、低成本、鼓励修改 | 无法做交互演示 |
| Figma | 高保真 + 动效 | 协作强、组件化、插件丰富 | 复杂动效能力有限 |
| Sketch | 高保真 | 插件生态成熟、性能好 | 协作不如 Figma |
| Principle / Protopie | 动效原型 | 动效细腻、交互逻辑真实 | 学习成本高、不适合大型项目 |
| After Effects | 动效演示 | 视觉效果顶级 | 无法交互、开发落地难 |
我的工作流：低保真用 FigJam 画流程图 → Figma 做组件库和高保真 → Protopie 做关键动效验证 → 导出视频给开发参考。别试图用一个工具搞定所有事。
4.5 原型评审的要点
原型做完了，怎么评审才能不流于形式？我总结了三个检查维度：
- 逻辑完整性：每个操作都有反馈吗？异常状态都覆盖了吗？
- 一致性：同类型控件的交互方式统一吗？动效时长一致吗？
- 安全合规：驾驶中的操作是否满足 7 秒规则？重要信息是否在视线范围内？
我曾经在一次评审中，发现导航界面的“返回”按钮在左上角，而音乐界面的“返回”在左下角。这种不一致在静态原型里根本看不出来，但一开车就会让用户困惑。所以，评审时一定要走查所有界面的相同操作。