通过动画 UX 微交互提升您的电子商务之旅

当应用于整个电子商务体验时，动画微交互会传达系统进度、提高用户满意度并提高转化率。 当用户与 UI 组件（例如菜单或按钮）交互时，这些微妙的运动效果可提供快​​速的视觉反馈，旨在提高可查找性并指导用户在电子商务页面之间导航。 除了帮助用户查找和购买产品外，他们还可以培养导致回头客的习惯循环。

尽管它们在电子商务渠道中很重要，但动画微交互并不需要特别花哨。 自 2016 年以来一直是 Toptal 网络成员的 UX 设计师 Alexandre Brito 表示，即使是简单的动画效果（如滚动条、下拉刷新和滑动）也可以帮助创建直观的数字购物体验。

电子商务销售漏斗中的动画 UX 微交互

电子商务销售漏斗有四个常见步骤——主页、类别页面、产品页面和结帐——引导用户从公司的初始价值主张到购买。 在每个步骤中，都会显示更多信息。 动画微交互有助于这一发现之旅。 例如，电子商务主页上的搜索框可能会在用户悬停或点击时通过展开来表示交互性； 然后它可能会在用户键入搜索查询时显示动画自动建议。

“许多电子商务 UI 元素具有可以从微交互中受益的功能，以便吸引客户并提供重要信息，”产品设计师兼 Toptal 网络成员 Rashni Parichha 说。 “例如，当用户将商品添加到他们的购物车时，按比例缩小和放入购物车的微交互使这个动作感觉更真实，就好像用户在实体店购物一样，”她说。 “体验越真实，用户与产品之间的联系越深，重复访问该网站的可能性就越大。”

电子商务主页

数字购物者的注意力范围越来越小，对复杂的用户界面几乎没有耐心。 主页设计选择，例如导航，需要具有战略性以吸引用户的注意力。 动画可以使下拉菜单更具吸引力并加强产品分类，使用户更容易找到商品并降低掉线率。

Rashni 解释说，组织大量信息的动画有助于更直观的设计，这反过来又有助于吸引用户的注意力。

视差滚动是一种强大的动画技术，用于建立主页内容的视觉层次，例如产品照片、描述和类别。 当用户向下滚动主页时​​，内容会以不同的间隔和速度出现，模仿现实世界的视差，并作为一种渐进式披露的形式，使用户更容易扫描和消化屏幕上的信息。

电子商务分类页面

直接面向消费者的网站使用类别页面来展示单一产品的多种变体（例如该健身器材制造商网站上的杠铃），而电子商务市场使用类别页面来展示销售类似产品的众多品牌（例如 ASOS 的“衬衫”页面，其中包含来自不同零售品牌的服装）。

成功的类别页面允许用户在挖掘更多细节之前快速扫描他们的选项。 为了加快产品发现过程（并节省移动设备空间），许多电子商务网站在其类别页面上使用图像轮播。 宜家的“快速查看”功能允许快速浏览网站最受欢迎的类别——节省用户时间和点击次数。

研究表明，自动轮播让用户感到沮丧，因为快速移动可能会分散注意力。 相比之下，手动轮播（如宜家的）允许用户单击或滑动图像，而让用户控制其 UI 的动画微交互已被证明可以增加页面停留时间和转化次数。

为了获得最佳的图像轮播体验，Rashni 建议专注于平滑过渡和直观导航：

1. 平滑、连续的滑动微交互有助于创造与物理对象自然交互的错觉。 幻灯片动画开头的预期和结尾的跟进将有助于确保您的过渡是无缝的。 预期是主要动作序列（图像轮播中的左/右滑动动画）之前的动作。 这种与主要动作相反方向的短暂动作有助于建立动力和兴奋。 同样，follow through 是跟随运动序列的细微运动，这有助于使动画看起来更逼真。

2. 导航应该易于识别。 点或箭头控件可帮助用户识别如何在图像轮播中移动。 箭头应显示方向性。 默认情况下，点应为空心并填充以强调当前图像。

电子商务产品页面

产品页面都是关于帮助用户执行与转换相关的操作，例如选择项目样式和数量、将产品添加到购物车或为喜欢的项目添加书签。 这些行动中的每一个都必须通过反馈进行验证。

例如，电子零售商 Etsy 有一个心形图标，允许用户将商品添加到他们的收藏夹中。 单击或点击后，生成的动画会将之前无色的心变成红色。 尽管这看起来微不足道，但这种互动时刻通过确认输入和传达品牌个性来提高用户满意度。

此外，当界面使用动画效果之类的视觉提示来识别用户动作时，用户会对转到下一个任务充满信心。

电子商务结帐页面

最好的结账流程被设计为无摩擦：亚马逊用户可以通过一键“立即购买”按钮快速跟踪付款。 但结帐也是用户在输入购买所需的个人信息时需要额外指导的时候。

进度步进器将购买信息分解为可消化的块，例如登录、交付和计费详细信息。 向步进器添加动画微交互可提供视觉反馈，指导和激励用户完成结帐过程。 例如，当用户在支付表单字段中输入数据时，动画进度步进器可能会显示一条从一个步骤（由圆圈表示）到下一个步骤的行。 这种效果会在用户接近购买目标时为他们提供持续的反馈。

设计动画电子商务微交互的最佳实践

动画微交互由四部分组成：触发器、规则、反馈、循环和模式。 除了了解它们的基本结构之外，在为电子商务平台设计动画微交互时，还需要考虑几个最佳实践。

创建一个诱人的习惯循环

习惯循环是理解反动行为的框架。 它由提示、例行程序和奖励组成。 由于人们回到愉快的活动中，许多电子商务网站提供鼓励重复行动的奖励，例如结账后提供的储蓄代码以诱使未来购买。

此外，当我们遇到新的和令人兴奋的事情时，我们的大脑会释放多巴胺，从而产生寻求奖励的循环。 动画微交互有助于创造这些发现和愉悦的时刻，形成促进互动和持续参与的习惯循环。 例如，当用户将商品添加到购物车或愿望清单（提示）时，Etsy 引入了一个动画通知图标。 当用户点击图标（例程）时，他们会发现相关的优惠和折扣（奖励）。

保持动画功能

功能性动画微交互提供了简单的视觉提示，可加快销售漏斗中的许多流程。 例如，在结帐期间，鼠标单击时的淡入淡出效果将清除输入字段的占位符文本并向用户发出他们可以开始写作的信号。

但是，如果用户单击该字段并且占位符没有返回，那么如果他们无法回忆起占位符读取的内容，他们可能会感到沮丧。 微交互不需要注意，但必须以不影响用户体验的方式实施。 Brito 强调动画“应该补充用户体验，而不是从中窃取焦点”。

产品设计师 Muhammad Junaid 自 2020 年以来一直是 Toptal 网络的成员，他重申微交互应该有明确的目的，并避免分散用户的注意力。 “在电子商务网站上，它们应该推动转化，而不仅仅是提供审美价值。 多余的动画会导致认知超载和购物车遗弃。”

每个操作使用一个微交互

UI 组件，例如号召性用语按钮和购物车图标，在各个电子商务网站中反复出现。 但是，分配给这些组件的动画微交互应该是不同且一致的。 假设在类别页面图像轮播中向左或向右滑动触发了动画产品照片的出现：产品页面图像轮播应该使用相同的交互组合（以匹配用户的心理模型），而不是“增加商品数量”纽扣。

从设计的角度来看，动画微交互为创造性决策引入了一层复杂性。 Motion 使 UI 组件具有传达意义的独特角色特征，并且很难在整个电子商务网站上设计和实现具有凝聚力的动画风格。 幸运的是，您不必为每个电子商务组件添加动作：我们创建了一个信息图，将高影响力的微交互可视化，以便在电子商务销售漏斗的每个步骤中进行动画处理。

充分利用电子商务的动画微交互

动画微交互是电子商务设计的一个重要方面，它可以提高参与度，使 UI 设计功能更加直观和信息丰富，并有助于将休闲购物者转变为回头客。 通过牢记最佳实践和专家见解，您可以避免多余的运动效果并设计可转换的动画微交互。

进一步阅读 Toptal 设计博客

• 电子商务网站设计终极指南
• 通知设计综合指南
• 引人注目和感动：运动设计原则指南