交互设计是对用户行为、页面流程、系统反馈和产品状态进行规划的工作。它要回答的是：用户从哪里开始、下一步能做什么、操作后会发生什么、遇到错误如何恢复，以及整个任务是否容易理解和完成。
交互设计不只是添加页面跳转或动效。一个完整方案通常包含用户任务、信息架构、流程、页面状态、交互规则、可点击原型和测试结论，并需要产品、设计、研发和业务共同确认。
如果你已经理解基础概念并准备制作原型，可以进入墨刀在线交互设计页面；想继续学习原则与工具，可参考交互设计五要素和交互设计工具选择方法。
交互设计的快速答案
一句话定义：交互设计是围绕用户目标，设计操作路径、页面状态与系统反馈，使用户能够理解并完成任务。
- 输入：业务目标、用户场景、功能需求、数据和技术约束。
- 过程：研究用户、梳理流程、设计状态、制作原型、评审和测试。
- 输出：用户流程、线框图、可点击原型、交互说明和测试结论。
- 判断标准：用户是否知道怎么开始、是否看懂反馈、是否能完成任务和恢复错误。
交互设计主要解决什么问题
界面中很多问题并不是颜色或字体造成的，而是用户不知道下一步、系统没有反馈、关键状态缺失，或者流程与真实任务不一致。交互设计会优先处理这些问题。
- 入口是否容易发现，名称是否符合用户理解。
- 任务步骤是否必要，能否减少重复输入和无效跳转。
- 用户操作后是否立即看到系统状态和结果。
- 加载、空数据、失败、禁用和权限不足是否有清楚说明。
- 误操作是否可以预防、撤销、返回或重新尝试。
- 相同组件与动作在不同页面是否保持一致。
例如注册页面视觉上可能很精致，但如果验证码失败后没有原因、密码规则只在提交后出现、关闭页面会丢失填写内容，用户仍然很难完成任务。这些都属于交互设计需要解决的问题。
交互设计与 UI、UX、原型设计有什么区别
| 领域 | 核心问题 | 常见产出 |
|---|---|---|
| 交互设计 | 用户如何操作，系统如何反馈，状态如何变化 | 流程、状态、交互规则、可点击原型 |
| UI 设计 | 界面如何建立清晰、美观和一致的视觉层级 | 高保真界面、组件库、视觉规范 |
| UX 设计 | 用户在接触、使用和完成任务后的整体体验 | 研究、旅程、流程、原型、测试和指标 |
| 原型设计 | 如何用页面把产品结构和方案表达出来 | 线框图、低中高保真原型 |
| 人机交互 | 人与计算系统之间的认知、行为和技术关系 | 交互模型、实验、设备与界面方案 |
实际工作中这些领域会交叉。交互设计是 UX 工作的重要组成部分，也会使用原型表达方案，并与 UI 设计共同完善最终界面。关于体验范围，可继续阅读UX 设计是什么。
交互设计师日常在做什么
理解用户和业务任务
通过需求访谈、用户反馈、数据、客服问题或现场观察，了解用户为什么使用产品、最重要的任务是什么、当前在哪里遇到障碍。
梳理信息架构与用户流程
确定信息如何分类、页面如何组织、入口在哪里，以及任务从开始到完成需要经过哪些步骤。复杂流程还要标出条件分支、权限和返回路径。
设计页面状态与交互规则
说明按钮、表单、弹层、导航和组件在不同条件下如何变化，包括触发方式、系统反馈、加载、空数据、失败和禁用等状态。
制作线框图与可点击原型
用不同保真度的页面表达结构和行为。早期可以用低保真验证流程，进入评审和开发前再补充真实文案、组件状态、主要动效和异常流程。
组织评审和可用性测试
让参与者直接操作原型完成任务，观察其点击、停顿、返回和错误。根据证据调整方案，而不是只收集“喜欢或不喜欢”的意见。
与研发确认实现和交付
同步触发条件、状态变化、数据规则、权限、异常提示、适配和性能要求，并在实现过程中继续核对设计意图。
想了解岗位能力和成长路径，可查看交互设计师职责与技能。
交互设计的基本工作流程
定义问题，而不是直接画页面
先明确用户、场景、目标任务和成功条件。问题描述应具体到行为，例如“用户不知道提交后是否成功”，而不是笼统地说“体验不好”。
画出主路径与异常分支
从用户进入任务的入口开始，列出每一步操作和系统响应。除了理想路径，还要补充取消、返回、失败、无权限和数据缺失等情况。
确定页面与组件状态
为页面、按钮、输入框、列表和弹层定义状态。涉及表单时，提前说明必填、格式、字符长度、校验时机和错误恢复方式。
制作原型并明确评审任务
原型应围绕具体问题制作。验证流程时不必追求完整视觉；验证动效、内容密度或视觉层级时，则需要更接近真实页面。
测试、记录并迭代
记录用户是否完成任务、在哪里停顿、出现什么错误以及是否理解反馈。把问题按影响和频率排序，再更新流程、页面和交互说明。
交互设计常用方法怎么选
| 方法 | 适合解决的问题 | 使用提醒 |
|---|---|---|
| 用户流程图 | 任务步骤、页面关系和条件分支 | 同时画出主路径、返回路径和异常路径 |
| 信息架构 | 内容分类、导航和查找路径 | 分类名称应符合用户理解，不只反映内部组织结构 |
| 线框图 | 页面布局、优先级和功能位置 | 早期避免被颜色和视觉细节干扰 |
| 状态图 | 组件或页面在不同条件下如何变化 | 明确触发条件、当前状态和目标状态 |
| 可点击原型 | 任务路径、页面跳转、反馈和动效 | 围绕评审任务制作，不必复制完整产品 |
| 可用性测试 | 用户能否理解并完成任务 | 观察实际行为，避免用讲解帮助参与者完成 |
| 设计评审 | 业务、设计、数据和技术是否理解一致 | 记录结论、未决问题和后续负责人 |
示例：设计一个登录与找回密码流程
假设任务是让已有账号的用户完成登录，同时保证忘记密码和验证码失败时可以恢复。交互设计可以按下面的顺序推进：
- 确认登录方式、账号规则、验证码策略和安全限制。
- 画出账号密码登录、验证码登录和第三方登录入口。
- 补充密码错误、账号不存在、验证码过期和网络失败状态。
- 设计找回密码的身份验证、重置和完成反馈。
- 说明多次失败、退出、返回和重新发送验证码的规则。
- 制作可点击原型，让参与者完成“忘记密码后重新登录”的任务。
评审重点不是页面数量，而是用户能否理解错误原因、找到恢复入口并确认最终结果。
交互设计常见交付物
| 交付物 | 主要作用 | 常见使用阶段 |
|---|---|---|
| 用户任务与场景 | 明确设计对象、使用环境和目标 | 需求与研究阶段 |
| 信息架构 | 说明内容分类、导航与查找关系 | 结构设计阶段 |
| 用户流程图 | 表达步骤、条件、页面和系统动作 | 流程设计阶段 |
| 线框图 | 表达页面布局、重点和功能位置 | 方案探索阶段 |
| 可点击原型 | 模拟页面跳转、状态和主要交互 | 评审与测试阶段 |
| 交互说明 | 记录触发、反馈、数据、权限和异常规则 | 开发交付阶段 |
| 测试报告 | 记录任务、问题、证据、严重度和建议 | 验证与迭代阶段 |
交互设计有哪些基本原则
- 状态可见：让用户知道系统正在做什么，以及操作是否完成。
- 反馈及时：点击、输入、保存和提交后提供与结果匹配的反馈。
- 表达一致：相同组件、名称和状态在不同页面保持一致。
- 预防错误：通过限制、校验、确认和默认值减少错误发生。
- 支持恢复：允许撤销、返回、重试或重新编辑。
- 降低记忆负担：让选项和状态保持可见，不要求用户记住上一步细节。
- 兼顾效率：为高频任务提供快捷操作，同时保留可理解性和控制感。
更完整的检查方法可参考交互设计五要素与优化方法以及尼尔森十大可用性原则。
新手如何学习交互设计
- 选择一个熟悉的产品任务，例如登录、搜索、下单或创建项目。
- 画出当前流程，标记停顿、错误和不确定的状态。
- 阅读交互原则，并分析现有产品为什么这样设计。
- 用线框图重新组织页面、入口和反馈。
- 制作可点击原型，请其他人完成具体任务。
- 根据观察结果调整，而不是只模仿作品的视觉风格。
工具不需要一次掌握全部功能。先学会页面、组件、连接、状态和预览，再逐步学习复杂条件、变量和动效。需要实际制作时，可从在线交互设计与原型评审开始。
交互设计常见误区
- 把交互等同于动效：动效只是反馈方式之一，流程和状态更基础。
- 只设计正常路径：真实用户会取消、返回、输错、断网或没有权限。
- 用高保真掩盖流程问题：视觉完成度不能替代任务可用性。
- 评审时只做演示：设计师讲得顺畅，不代表用户能独立完成。
- 交付只给页面截图：研发还需要触发、状态、数据和异常规则。
- 把所有反馈都做成弹窗：应根据重要程度选择就地提示、状态变化、轻提示或确认框。
交互设计常见问题
交互设计需要学哪些软件？
软件只是表达方案的工具。新手应先掌握流程图、线框图、组件、页面连接、状态和预览，再根据团队协作、复杂逻辑和交付要求选择工具。可参考交互设计工具对比与选择标准。
交互设计需要会视觉设计吗？
理解视觉层级、排版、颜色和组件有助于表达方案，但交互设计的重点仍是任务、流程、状态和反馈。复杂团队中，交互与 UI 可以由不同角色负责并共同迭代。
产品经理可以做交互设计吗？
可以。很多团队由产品经理先梳理需求和流程，再与设计师共同完善交互与视觉。无论岗位如何分工，都应保证原型、需求和交互规则一致。
交互设计和人机交互是一回事吗？
不完全相同。交互设计更侧重具体产品的任务、界面和反馈；人机交互研究范围更广，还包含认知、设备、技术和人与系统关系。可继续阅读人机交互设计与 HCI。
交互设计原型要做到多详细？
以当前需要验证的问题为准。流程评审可以低保真，状态和动效评审需要中高保真，开发交付还要补充数据、权限、异常和适配说明。
从一个核心任务开始练习
学习交互设计最有效的方式，是选择一个真实任务，把用户、流程、页面、状态和反馈完整表达出来，再让其他人操作原型。每次练习重点解决一个问题，比一次复制完整产品更容易形成判断能力。
准备开始时，可以用墨刀搭建页面、连接交互并分享预览，让团队围绕同一份可点击原型讨论和迭代。