交互设计：把产品流程变成可点击原型

交互设计与 UI、UX 和原型设计有什么区别

这些概念经常一起出现，但解决的问题并不相同。区分它们有助于确定评审重点，也能避免把“界面已经画好”误认为“流程已经可用”。

概念	主要关注	常见产出
交互设计	用户如何操作，系统如何反馈，页面状态如何变化	用户流程、状态说明、交互规则、可点击原型
UI 设计	视觉层级、颜色、字体、组件和界面一致性	高保真界面、组件库、视觉规范
UX 设计	用户从接触、使用到完成任务后的整体体验	研究结论、用户旅程、流程、原型和测试报告
原型设计	用不同保真度的页面表达产品结构与方案	线框图、低保真原型、高保真原型
人机交互	人与计算系统之间的行为、认知和技术关系	交互模型、实验、界面与设备交互方案

如果你需要了解更完整的体验范围，可阅读UX 设计是什么；涉及设备、认知与系统关系时，可参考人机交互设计。

交互设计从需求到验证的完整流程

明确用户任务和业务约束

先写清主要用户、使用场景、目标任务和成功条件。与其写“优化登录体验”，不如明确为“让首次使用者在忘记密码或验证码失败时仍能找到恢复路径”。同时记录设备尺寸、网络环境、权限、数据来源和技术限制。

梳理信息架构和用户流程

确定内容如何分类、入口在哪里、任务需要经过哪些页面，以及用户在每一步需要什么信息。复杂流程可先用流程图标出主路径、返回路径和异常分支，再进入页面设计。

列出页面状态和异常分支

交互问题经常出现在“正常情况之外”。除了默认状态，还应考虑加载中、输入错误、权限不足、网络中断、内容为空、重复提交和操作成功等状态，并明确每种状态的提示与下一步。

制作线框图和可点击原型

先用低保真页面验证结构和步骤，再根据评审需要提高保真度。可点击原型应覆盖核心任务、高风险路径和关键状态，不必在早期把所有页面都做成最终视觉稿。

进行评审与可用性测试

评审时让参与者围绕具体任务操作原型，观察其是否知道从哪里开始、是否理解反馈、在哪里停顿，以及出错后能否恢复。不要只问“觉得好不好看”，也不要用讲解代替真实操作。

根据证据迭代并完成交接

把发现的问题按影响范围和严重程度排序，更新页面、流程和状态说明。交付研发时同步提供触发条件、页面跳转、组件状态、数据规则、异常提示和适配要求。

交互设计需要表达哪些状态和规则

类型	需要说明的问题	示例
触发条件	什么操作会启动交互	点击、悬停、输入、滚动、长按、定时
系统反馈	系统如何告诉用户操作结果	按钮状态、提示、进度、页面变化、声音或动效
页面状态	同一页面在不同条件下如何显示	默认、加载、空、成功、失败、禁用
流程分支	不同条件下用户会进入哪条路径	已登录与未登录、通过与驳回、有权限与无权限
错误恢复	用户出错后如何返回可继续的状态	撤销、重试、重新输入、返回上一步、联系客服
数据规则	输入、保存和刷新有什么限制	必填、格式、字符数、自动保存、刷新频率

值得优先检查的交互设计原则

让系统状态保持可见

用户操作后应尽快看到结果或进度。加载、保存、提交和同步需要明确反馈，避免让用户重复点击或怀疑操作是否生效。

让操作结果符合用户预期

按钮名称、图标、位置和反馈应与用户已有经验一致。如果设计必须打破常见模式，应通过清晰提示降低理解成本。

保持相同含义的一致表达

相同组件、状态和操作在不同页面应保持一致。不要让同一种颜色既代表成功又代表告警，也不要频繁改变返回、关闭和确认的位置。

优先预防错误并提供恢复路径

通过输入限制、实时校验、危险操作确认和默认值减少错误；错误发生后，用具体语言说明原因和解决办法，而不是只显示“操作失败”。

让高频任务更短，但不牺牲可理解性

快捷操作、默认选项和批量处理可以提高效率，但应保留清楚的状态反馈和撤销机制。复杂功能可以渐进展开，避免把所有选项同时放在主界面。

需要更系统地检查界面，可参考尼尔森十大可用性原则和交互设计五要素；涉及视觉层级、状态反馈与动效时，可继续阅读视觉交互设计方法。

交互原型应该做到什么程度

原型保真度取决于当前要验证的问题，而不是越高越好。需求早期可用低保真页面确认结构和步骤；复杂交互评审需要补充组件状态、真实文案和关键动效；进入开发前，还要说明异常状态、数据规则和适配方式。

• 低保真：验证信息架构、页面数量、入口和任务顺序。
• 中保真：验证组件、状态、文案、表单和主要交互。
• 高保真：验证视觉层级、动效节奏、真实内容和交付细节。

原型不是正式上线产品，也不能替代数据、权限和技术实现验证。它的价值是让团队更早发现问题，并围绕同一份方案讨论。

如何用墨刀完成在线交互设计

先搭建页面与可复用组件

从页面结构、导航和关键任务开始，使用组件与模板减少重复绘制。相同按钮、表单和导航应尽量复用，便于统一调整。

设置触发条件和页面动作

根据任务设置点击、悬停等触发方式，并连接页面跳转、返回、状态切换和弹层显示。每条连接都应对应明确的用户动作和系统结果。

补充状态变化和必要动效

动效应帮助用户理解层级、方向、状态和操作结果，而不是只增加视觉装饰。对加载、成功、失败和禁用状态，应优先保证信息清楚。

通过预览链接组织评审

把可点击原型分享给团队成员，让参与者直接执行任务并在具体页面留下反馈。评审结论应同步回原型和需求说明，避免意见散落在多个截图和聊天记录中。

按角色管理编辑和查看范围

团队项目可根据协作需要设置编辑、查看和管理范围，并保留版本记录，帮助产品、设计和研发围绕同一版本推进。

如果团队正在比较不同产品，可查看交互设计工具选择标准；习惯使用其他软件时，也可参考Figma 交互设计教程和Axure 交互设计教程。

交互设计评审检查清单

• 是否能用一句话说明主要用户、使用场景和核心任务？
• 用户是否知道从哪里开始，以及完成后发生什么？
• 主路径、返回路径和异常分支是否完整？
• 点击、输入、提交和等待是否都有清楚反馈？
• 空数据、加载、失败、禁用和权限不足是否有页面状态？
• 相同组件和状态是否使用一致的名称、位置和视觉表达？
• 危险操作是否有确认、撤销或恢复方式？
• 键盘、触控、不同屏幕和弱网环境是否需要单独说明？
• 评审是否让参与者真实操作，而不是只观看设计师演示？
• 交付研发的说明是否覆盖触发条件、状态、数据和异常规则？

交互设计常见问题

交互设计需要会写代码吗？

交互设计的核心是理解用户任务、系统规则和页面状态，并不要求所有设计者都编写代码。但理解技术约束有助于判断方案可行性，并与研发讨论实现成本和边界。

交互设计和 UI 设计哪个先做？

通常先确认任务流程、信息架构和关键状态，再逐步完善视觉。实际项目会并行迭代，但不应在流程尚未确定时过早投入大量高保真细节。

交互设计必须制作高保真原型吗？

不一定。只要当前原型足以验证目标问题即可。验证流程可以用低保真，验证组件状态和动效时再提高保真度。

交互设计师和产品经理的工作有什么不同？

产品经理通常负责业务目标、需求范围和优先级，交互设计师更集中于用户流程、页面行为、状态和可用性。不同团队的岗位边界会变化，关键是共同维护需求、原型和交互规则的一致性。更多内容可查看交互设计师职责与技能。

没有专职交互设计师，如何开始？

可以先选一个核心任务，画出主流程和异常分支，再用在线工具搭建可点击原型。邀请业务、设计、研发和实际使用者共同操作，优先修复阻碍任务完成的问题。

从一个真实任务开始交互设计

交互设计不是为每个页面增加更多动效，而是让用户更容易理解、操作、获得反馈并从错误中恢复。选择一个高频或高风险任务，先把流程、状态和规则表达清楚，再通过原型验证，通常比从视觉效果开始更有效。

现在可以使用墨刀搭建页面、设置交互并分享预览链接，让团队围绕可点击原型完成评审和迭代。