交互设计五要素通常指文字、视觉表现、实体与空间、时间、行为这五个维度。它们共同决定用户如何理解界面、发起操作和接收结果。例如一个“保存”按钮：按钮名称属于文字，颜色与图标属于视觉，鼠标或手指涉及实体与空间，等待和提示持续多久涉及时间，点击后保存、失败或重试则属于行为。
五要素是用来拆解一次交互的观察框架，不是五个依次完成的制作步骤，也不同于“战略、范围、结构、框架、表现”的用户体验五层模型。
什么是交互设计
交互设计（Interaction Design，IxD）是对用户与产品之间的操作方式、规则、状态变化和反馈进行设计。它回答“这里能做什么”“怎样开始”“操作后发生什么”“做错了怎样回来”等问题。
比如登录页，UI设计会处理输入框、文字与按钮的视觉层级；交互设计还要说明未填写时能否提交、密码错误怎样提示、正在验证时能否重复点击、登录成功后去哪儿。画出页面，只完成了表达交互的一部分。
交互设计与用户体验设计的关系
交互设计是用户体验设计的重要组成部分。UX还涉及用户为什么使用产品、怎样发现服务、使用前后有什么感受，以及跨渠道任务能否顺利完成。交互设计更聚焦产品中的具体操作。
例如购物时，选择规格后能否看清价格、缺货后怎样提示，是交互问题；从广告承诺、下单、物流到退货的整体感受，则超出了一个页面的交互范围。两者需要配合，不必把岗位边界当成绝对分工。
交互设计的5个核心维度
五维模型由Gillian Crampton Smith提出的四个维度发展而来，Kevin Silver补充了“行为”这一维度。可参考Interaction Design Foundation对交互设计五维的说明。实际检查时，可以先用下面的表格快速定位问题。
| 维度 | 看什么 | 一个容易遗漏的问题 |
|---|---|---|
| 文字 Words | 按钮、标签、说明、反馈的含义 | “确定”之后到底会保存、发送还是删除？ |
| 视觉表现 Visual representations | 图标、字体、颜色、层级与位置 | 用户能否区分可以操作与已经选中？ |
| 实体与空间 Physical objects or space | 设备、输入方式与使用环境 | 鼠标可悬停，手机上如何发现同一信息？ |
| 时间 Time | 等待、动效、声音、进度与时序 | 提示消失前，用户来得及读完并采取行动吗？ |
| 行为 Behavior | 操作规则、状态转换与反馈结果 | 重复点击、取消或失败之后，系统怎样处理？ |
文字：让人知道这次操作意味着什么
按钮上的文字应描述动作或结果。资料页的“保存修改”、邀请页的“发送邀请”和文件页的“删除文件”，比脱离上下文的“确定”更容易理解。提示语也应指出对象：写“头像上传失败，请重试”，比“操作失败”更有帮助。
标签要符合用户语言。面向技术人员的系统可以使用其熟悉的术语，面向普通消费者的页面则应避免把内部字段名直接露出来。文字不宜一味压缩：价格旁清楚注明计费周期，通常比一个很短但有歧义的词更好。
检查方法：把按钮单独读出来，能否判断点击后会发生什么？错误提示是否告诉用户问题在哪里、下一步怎样做？同一个动作是否在各页面被叫成不同名字？
视觉表现：让关系和状态被看见
颜色、图标、字号、位置和留白共同影响用户先看什么。主要操作应该可被发现，选中、悬停、不可用等状态应能区分。一个图标如果含义并不普遍，配上短标签通常比要求用户猜测更稳妥。
视觉也会传递错误暗示。看起来像按钮的装饰卡片可能被误点；浅灰文字如果其实是可操作项，会让人以为不能使用。错误信息不能只有红色边框，应同时给出文字，便于不同视觉条件下的用户理解。
检查方法：暂时忽略文案，只看层级是否能找到主要操作；再用键盘移动焦点，确认可操作位置有清楚的视觉反馈。视觉一致性应来自相同语义，不是把所有按钮都画成同一种颜色。
实体与空间：操作方式要适合设备与环境
桌面鼠标、触摸屏、实体按键和语音输入有不同约束。鼠标可以精确指向小目标，手指会遮住屏幕；桌面上悬停显示的说明，移动端可能需要点击入口。用户站着单手操作，和坐在桌前使用双手键盘，也不能套用完全相同的设计。
这里的“空间”既指屏幕和设备，也包含用户所在环境。公共场所不宜只靠语音播报敏感信息；需要安静使用的功能应有文字或视觉替代反馈。触屏上的操作区域也不能只按图标看起来多大来决定。
检查方法：在目标设备上尝试点击、滚动、返回和输入，观察手指是否遮挡信息、软键盘是否盖住下一步操作、横竖屏与窄屏下是否还能找到入口。
时间：交互是一段过程，不是一张静态图
等待、进度、动画、声音和提示持续时间都会影响理解。保存需要等待时，立即给出“正在保存”的反馈；如果等待失败，则提供保留内容、重试或稍后处理的方案。需要用户采取动作的错误提示，不宜一闪而过。
动效可以说明页面从哪里来、元素移到哪里，但不应阻碍主要任务。频繁、幅度很大的动画可能造成干扰；重复操作的用户也不应每次都被迫观看完整展示。设计时可以写清动效何时发生、是否可打断、减少动态效果时怎样呈现。
检查方法：把慢网络、连续操作和中途返回加入预览。用户能否判断是还在处理、已经完成，还是出了问题？提示的持续时间是否与信息量和操作需求相称？
行为：说明动作、条件和结果怎样连起来
行为维度将其他维度组织成完整交互。以收藏为例，点击后图标变为选中状态、收藏数量变化；再次点击可以取消；请求失败时不能仍显示已收藏。文字、视觉和时间都应支持同一套规则。
规则不仅包含成功路径，还包含重复、取消、失败和权限不足。例如“加入购物车”再次点击是增加数量、保持原数量，还是提示已经加入？不同产品可以有不同选择，但页面之间必须一致。
检查方法：把每个关键操作写成一句话：“在什么条件下，做什么动作，出现什么结果”。无法写清的地方，通常也无法仅凭一张图让研发准确实现。
如何优化交互设计
五维模型用于寻找问题所在；信息架构、情感设计、可访问性、响应式和微交互，则是常见的改进方向。它们之间会互相影响，不能替代前面的五维定义。
- 信息架构：在搜索、导航和分类中使用用户能理解的分组，先解决“找不找得到”，再优化按钮外观。
- 情感表达：欢迎、完成和鼓励可以更有温度；金额错误、权限失败等关键问题，先把原因和处理方法说清楚，不用玩笑掩盖信息。
- 可访问性：为颜色增加文字信息，为键盘提供焦点，为重要操作提供可发现的入口，而不只在最后加一个所谓“无障碍模式”。
- 响应式设计：窄屏需要重排内容和操作，不是等比例缩小桌面界面；尤其要检查导航、表格、长标题与输入法出现后的空间。
- 微交互：先明确反馈的含义，再决定是否需要动画。好看的动效不能弥补错误的保存逻辑。
改进时，先找最影响任务的一处障碍。用户找不到功能，优先改结构与标签；不知道是否成功，优先补反馈；容易误操作，优先检查目标区域、条件与恢复路径。不要因为某个视觉效果流行，就同时重做所有维度。
设计后请没有参与制作的人完成一项任务，观察其操作而不是边讲解边演示。对照五维记录：“在哪个对象上发生什么误解、影响哪一步、准备怎样调整”。重新测试修改过的路径，才能看出问题是否缓解。
交互设计工具的选择
选择工具时，先看能否表达需要验证的动作与状态，再考虑视觉精细度。页面关系和导航可以从低保真开始；输入、条件分支、等待和失败则需要在可点击原型中表现。原型还应便于别人打开、试用和评论。
需要查看具体制作方法，可继续阅读交互原型设计教程；需要系统检查界面问题，可使用尼尔森十大可用性原则。五维帮助你说清交互由什么构成，评估原则则帮助你判断这些安排是否适合用户。
