交互设计定义了用户如何与数字产品进行交流。每次点击、触摸、手势和动作都会有预计的响应。本指南介绍了创建自然、令人满意的交互的原则和技术。
什么是交互设计
定义
纪律侧重于用户和系统之间的对话。行动如何产生响应。
范围
行为、反馈、转换、状态、手势。
与用户体验的关系
用户体验的一部分。虽然 UX 很广泛，但 IxD 特别关注交互。
基本原则
###反馈
每个行动都需要回应。用户知道发生了什么事。
一致性
相似的元素表现相似。可预测性。
可供性
设计传达如何使用。按钮看起来可点击。
映射
以逻辑方式控制与结果相关的控制。
限制
限制选项以防止错误。
错误预防
设计让人很难犯错。
交互模型
命令行
文字。对于专家来说功能强大，曲线陡峭。
弱者
窗口、图标、菜单、指针。传统桌面。
###触摸
直接手势。移动标准。
###语音
口头命令。虚拟助理。
手势
空气中的动作。虚拟/增强现实。
视觉反馈
悬停状态
悬停时更改。表示交互性。
活跃状态
单击/点击期间。动作确认。
焦点状态
选定的元素。对于[辅助功能0 至关重要。
残疾人状态
不可用。视觉上截然不同。
加载状态
加工。进度指示器或旋转器。
成功/错误状态
行动的结果。绿色表示成功，红色表示错误。
微交互
定义
互动的小时刻集中在一个任务上。
组件
触发器、规则、反馈、循环。
示例
比如动画、切换开关、下拉刷新。
重要性
令人着迷的细节。差异化。
动画和过渡
目的
引导注意力、展示关系、反馈、娱乐。
原则
- 快速（200-500毫秒）
- 平滑（缓动）
- 目的
- 不要阻止
缓和
线性是机器人。缓进缓出是自然的。
动作设计
符合产品个性的动画。
触摸手势
###点击
单击等效项。主要行动。
长按
次要行动、背景。
滑动
导航、破坏性操作、列表。
捏
放大/缩小。
拖动
移动元素，重新排序。
###可发现
手势被隐藏。教导或提供可见的替代方案。
互动表格
清除标签
需要填写什么。
占位符
例如，不替换标签。
内联验证
实时反馈。不要等待提交。
错误消息
具体、贴近现场、有解决方案。
进展
带进度指示器的多步骤。
组件状态
空状态
没有数据。指导下一步。
加载状态
正在获取数据。骨架或旋转器。
部分状态
一些数据。渐进式加载。
错误状态
失败。解释并提出重试。
成功状态
完成。确认并下一步。
导航
清晰的层次结构
我在哪里，我能去哪里。
面包屑
采取的路径。
渐进式披露
逐渐揭示复杂性。
返回/撤消
总是有可能回来的。
交互的可访问性
键盘导航
元素之间的 Tab 键，按 Enter 激活。
焦点管理
行动后焦点转移到逻辑位置。
屏幕阅读器
宣布动态变化。
减少运动
尊重用户偏好。
工具
原型设计
Figma、Principle、ProtoPie 用于复杂的交互。
动画
After Effects、Lottie 用于动画。
切换
为开发人员提供的详细规范。
交互模式
莫代尔
集中注意力，阻止先前的上下文。
抽屉
滑动侧边菜单。
吐司/小吃店
临时非阻塞反馈。
###下拉菜单
选项的选择。
###手风琴
展开/折叠内容。
轮播
在项目之间水平导航。
交互测试
可用性
用户能否完成任务？
性能
动画流畅吗（60fps）？
辅助功能
它可以与键盘、屏幕阅读器配合使用吗？
边缘情况
在不寻常的状态下会发生什么？
常见错误
缺少反馈
用户不知道操作是否有效。
慢动画
阻碍流动。保持快速。
不一致
相同的元素，不同的行为。
隐藏手势
没有任何线索它存在。提供替代方案。
结论
交互设计将界面转化为体验。每一个反馈、每一次转变、每一个回应都很重要。有目的地设计，与用户一起测试，并不断完善。
##常见问题解答
1) UI 和 IxD 有什么区别？ UI 是静态的视觉效果。 IxD 是动态行为。
2) 动画会影响性能吗？ 他们可以。使用 CSS/GPU 加速。在弱设备上进行测试。
3) 我需要特殊的工具来构建交互原型吗？ Figma 的基本工作原理。 ProtoPie，复杂的原理。
4) 如何记录开发人员的交互？ 原型视频、计时/缓动规格、状态。
5) 微交互是一种奢侈吗？ 不。细节是区分好产品和优秀产品的关键。
另请阅读
- [数字信息架构：如何为用户组织内容1
- 【交互设计：如何用清单进行选择2
- 【交互设计：如何选择合适的模式，结合实例3
- 【数字信息架构-常见错误快速指南4
- [用户体验中的深色模式：完整指南5
- [以用户为中心的设计：UCD完整指南6