谁会把交互工作带给我们
界面看起来已经完成，但每个控件如何响应却被留给了构建它的人去决定，于是重复提交、无声保存和走投无路的错误便呈现给了用户。交互设计在更多此类问题被构建出来之前，一次性地决定这些行为。
- 正在为现有应用添加滑动、拖拽或离线行为的移动团队
- 有长时间运行的导入、导出或报表任务的 SaaS 团队
- 运行支付、预订或结账流程、重复操作会造成金钱损失的团队
告诉用户正在发生什么的交互
用户通过产品的响应方式来评判它:按钮是否确认了点击、耗时较长的任务是否显示进度、支付失败时是否说明下一步该怎么做。交互设计涵盖的正是这些时刻。我们设计微交互、转场、手势以及每一种界面状态,只在有助于用户理解的地方使用动效。所有内容都会做成原型、检查无障碍性和性能,并编写规格以便开发人员实现,无论作为单独的项目,还是在设计与开发项目之中。
AI 辅助原型设计,动效由设计师判断
AI 如何协助
- 为每个组件和页面构建状态清单,确保不遗漏任何空、加载、错误或成功状态。
- 在原型中生成多种动效和交互变体,以便在实际使用中比较时序和行为。
- 用 CSS 或 Framer Motion 起草原型代码,以便尽早在真实浏览器中试用交互。
- 根据已批准的原型起草动效规格和实现说明,供设计师审阅。
我们的专家负责什么
- 由设计师决定动效在何处有益、在何处会分散注意力。每个动画都必须有其目的。
- 设计师在真实设备上判断时序、缓动和手感,而不仅仅在设计画布上。
- 无障碍性由设计师负责:减少动效的替代方案、焦点处理,以及不单靠动效来传达含义。
- 设计师和工程师共同设定性能上限，并在你的用户所使用的设备上进行测试。
一个表单的各种状态，从空闲到恢复
带有提交按钮的表单的示例状态图；每个关键组件都有自己的状态图。
空闲
字段显示可见的标签和提示文本；在用户操作之前不会有任何动画。
悬停与聚焦
为指针提供悬停提示，为键盘用户提供可见的焦点环，绝不仅用颜色表示。
输入与校验
错误在用户离开某个字段后出现，在其旁边用文字说明问题所在。
加载中
提交时，按钮显示进度并忽略重复按压；等待较久时会增加一条状态消息。
检查点: 设计师在目标设备上判断时序
成功或错误
成功会确认发生了什么改变；提交失败会解释原因，并保留用户输入的全部内容。
恢复
焦点移动到消息处，屏幕阅读器将其朗读出来，用户可以重试或编辑。
检查点: 由设计师核查的屏幕阅读器输出
当出现故障时: 如果在提交过程中连接中断，表单会在约定之处保留本地草稿，告知用户这一点，并仅在用户选择时才重新提交。
我们如何设计交互
- 01
审计
我们审查现有的流程和组件，查找缺失的状态、不清晰的反馈，以及分散注意力或拖慢用户的动效。
- 02
设计与原型
我们定义每个交互及其状态，然后在 AI 辅助下制作多种原型方案，并在真实设备上进行试用。
- 03
明确规格
动效规范、令牌和实现说明，并为每个交互附上无障碍和性能要求。
- 04
构建与验证
由我们的工程师或你的工程师实现这些交互；我们与 QA 一起在目标设备上审查构建，分别在减弱动效开启和关闭的状态下进行。
您将获得什么
交互设计交付物
交互状态
为每个关键组件和界面设计的空状态、加载状态、错误状态、成功状态、禁用状态和离线状态，包括用户看到的文案。
微交互
针对按钮、开关、表单校验、保存和通知的反馈，让用户知道他们的操作已生效。
转场与导航
界面和页面的转场让用户在多步骤流程中保持方向感，同时不拖慢他们的速度。
手势设计
移动端的滑动、拖拽、长按和下拉刷新行为，并为无法使用手势的用户提供可见的替代方案。
动效规范
时长、缓动、编排和动效令牌只需记录一次，让每个团队都以相同的方式制作动画。
原型与实现
交互式原型，加上 Lottie 文件、CSS 或 Framer Motion 代码，在范围内由我们的工程师构建，或按规格交由你的工程师实现。
典型的交互设计需求
我们所界定范围的典型场景，而非客户案例研究。
没有反馈的支付按钮
顾客再次点击“支付”，因为按钮没有任何正在处理的迹象。我们会设计按下、处理中和已确认的状态，在请求进行期间阻止重复点击，并明确指定超时后用户看到的内容。
藏在加载图标后面的长时间导入
用户开始一次大型数据导入，只看到一个加载图标，然后重新加载并再次开始。我们会设计可见的进度、一种离开后再回来的方式，以及一份需要修正的行记录汇总。
移动列表上的滑动操作
一款移动应用想在其任务列表上实现滑动归档和拖拽重排。我们会在真实手机上制作两者的原型，为误触滑动设计撤销操作，并为每个手势保留一个菜单选项。
交互设计不涵盖的内容
- 视觉语言，例如布局网格、色彩和字体，来自 Figma 与视觉设计或你现有的 UI；我们设计界面如何响应和变化。
- 有些交互需要后端支持，例如长任务的进度更新或支付的安全重试；这部分工程单独界定范围。
- 跨产品共享的组件库和令牌属于设计系统的工作；我们的动效令牌和状态规格可以为其提供输入。
- 讲解视频、动画广告和营销插画不包含在内；这里的动效服务于产品的控件和流程。
交互如何与构建、QA 和运营相连接
开发者可据以构建的规格说明
原型展示精确的行为，动效令牌定义时长和缓动，让工程师实现约定的交互，而非凭猜测。
由 QA 核查的状态
QA 在构建中验证加载、错误和空状态，以及键盘使用、焦点顺序和减弱动效的行为。
为真实的失败而设计
超时、连接丢失和被拒绝的操作都与工程团队共同设计，让生产环境中的问题以清晰、可恢复的消息呈现给用户。
上线后持续打磨
分析数据、支持反馈和会话回放揭示哪些交互让用户困惑或变慢，我们会在后续版本中加以改进。
常见问题
常见问题解答
动画会拖慢我们的应用吗？
如果动画在设计时就考虑了性能，就不会。我们只对浏览器能高效处理的属性做动画，例如 transform 和 opacity，避免在长列表上使用繁重的效果，并在你的用户所使用的低端设备上进行测试。如果某个动画损害了响应速度，我们会简化或移除它。
用户可以关闭动画吗？
可以。我们会尊重用户操作系统或浏览器中的减弱动效设置，用简单的淡入淡出或即时变化替代移动，而且关键信息不会仅依赖动画来传达。
你们是实现交互，还是只做设计？
两者都可以。独立的设计合作会为你的开发者提供原型、动效规格和实现说明；开发和托管不包含在内。如果你希望由我们来构建，我们的工程师会将这些交互作为开发范围的一部分来实现，由我们的设计师审查成果。
你们使用哪些动画工具？
用 Figma 和 ProtoPie 做原型，用 After Effects 配合 Lottie 做复杂动画，在 Web 构建中用 CSS 或 Framer Motion。原生移动项目使用各平台自带的动画工具。AI 助手帮助生成多种方案和原型代码，再由设计师和工程师审查。
