当应用于整个电子商务体验时，具有动画效果 microinteractions 沟通系统进度，提高用户满意度，提高转化率. 当用户与UI组件交互时，这些微妙的运动效果提供了快速的视觉反馈, 例如菜单或按钮, 它们的目的是提高可查找性，并在用户浏览电子商务页面时为他们提供指导. 除了帮助用户找到并购买产品, 他们可以培养习惯循环，从而产生回头客.

尽管它们在电子商务渠道中很重要, 动画微交互不需要特别花哨. 根据UX设计师 亚历山大·布里托, 自2016年起成为Toptal网络成员, 即使是简单的动画效果，比如滚动条, pull-to-refresh, 刷屏可以帮助创造直观的数字购物体验.

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

电子商务 销售漏斗 有四个共同的步骤-主页, 分类页面, 产品页面, 结帐——引导用户从公司最初的价值主张中购买. 在每一步，更多的信息被揭示. 动画 microinteractions 帮助这一发现之旅. 例如，电子商务主页上的搜索框可能通过 扩大 when a user hovers or taps on it; then it may reveal animated autosuggestions as users type 搜索查询.

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

电子商贸网页

数字购物者的注意力持续时间越来越短，对复杂的ui几乎没有耐心. 主页设计的选择，如导航，需要是 战略 抓住用户的注意力. 动画可以制作下拉菜单 更吸引人 和加强 产品分类，使用户更容易找到项目和 减少流失率.

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

视差滚动是一种强大的动画技术 视觉层次结构 主页内容，如产品照片、描述和类别. 当用户向下滚动主页时， 内容以不同的时间间隔和速度出现模仿真实世界 视差 作为一种形式 进步的信息披露 这使得用户更容易浏览和消化屏幕上的信息.

电子商务类别页面

直接面向消费者的网站使用类别页面来呈现单一产品的多个变体(像杠铃一样 在这个健身器材制造商的网站上)，而电子商务市场则使用分类页面来展示销售类似产品的众多品牌(比如ASOS的“衬衫页面，展示了不同零售品牌的服装).

成功的分类页面允许用户在挖掘更多细节之前快速浏览他们的选项. 加速产品发现过程(并节省空间) 移动)许多电子商务网站在他们的分类页面上使用图像轮播. 宜家的“快速查看”功能允许快速查看 导航 通过网站最受欢迎的分类，节省用户的时间和点击量.

研究显示 自动旋转木马会让用户感到沮丧，因为快速移动会分散他们的注意力. 与此形成鲜明对比的是, 手动旋转木马(比如宜家的)允许用户点击或滑动图片, 还有动画的微互动 让用户控制 他们的美国人已经证明了这一点 增加页面停留时间和转化率.

为了获得最佳的图像旋转体验, Rashni建议专注于流畅的过渡和直观的导航:

1. 光滑的, 连续的幻灯片微互动有助于创造与物理对象自然互动的幻觉. 期待 在幻灯片的开始动画和 跟进 最后将有助于确保你的过渡是无缝的. 预期是在主要动作序列之前的动作(图像传送带中的左/右滑动动画). 这种与主要动作相反方向的短暂动作有助于建立动力和兴奋感. 同样地，跟进是指跟随动作的细微动作 运动序列，这有助于使动画看起来更真实.

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

电子商务产品页面

产品页面都是为了帮助用户执行与转换相关的操作, 例如选择项目样式和数量, 向购物车中添加产品, 或者收藏喜欢的项目. 每一个动作都必须通过反馈进行验证.

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

此外，当一个界面使用像 动画效果 为了识别用户的动作，用户有信心进入下一个任务.

电子商务结帐页面

的 最佳结帐流程 的设计是无摩擦的:亚马逊用户可以通过一键“立即购买”按钮快速进行支付. 但结账时，用户也需要额外的指导，因为他们需要输入购买所需的个人信息.

进度步进器将购买信息分解成易于消化的块, 像登录, 交付, 以及账单明细. 添加 动画microinteractions To steppers提供了指导和激励用户完成结帐过程的视觉反馈. 例如，当用户在支付表单字段中输入数据时 动画进度步进器 可能显示一条线从一个步骤(用圆圈表示)移动到下一个步骤. 这样的效果会让用户在接近购买目标时得到持续的反馈.

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

动画微交互包括 四个部分:触发器、规则、反馈、循环和模式. 除了了解它们的基本结构, 在设计动画微交互时，有几个最佳实践需要考虑 电子商务平台.

创造一个诱人的习惯循环

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

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

保持动画功能

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

然而, 如果用户单击该字段，而占位符没有返回, 如果他们想不起占位符读了什么，他们可能会感到沮丧. 微交互不需要被注意, 但它们必须以不影响用户体验的方式实现. Brito强调，动画“应该补充用户体验, 而不是转移人们的注意力.”

产品设计师 默罕默德Junaid, 自2020年起成为Toptal网络的成员, 重申微交互应该有明确的目的，避免分散用户的注意力. “在电子商务网站，它们应该推动转化率，而不仅仅是提供审美价值. 过多的动画会导致 认知超载 和 弃车.”

每个动作使用一个微互动

UI组件, 比如号召行动按钮和购物车图标, 反复出现在各个电子商务网站. 然而, 分配给这些组件的动态微交互应该是不同且一致的. 假设向左或向右滑动一个类别页面图像轮询器 触发动画产品照片的出现:同样的交互组合应该用于产品页面图像轮播(以匹配用户的心理模型)，但不用于“增加物品数量”按钮.

从设计的角度来看, 动画化的微互动为创造性决策增加了一层复杂性. 动作赋予UI组件不同的角色特征以传达意义, 在整个电子商务网站中设计和实现一个有凝聚力的动画风格是很困难的. 幸运的是, 你不需要在每个电子商务组件中添加动态:我们已经创建了一个信息图，在电子商务销售漏斗的每个步骤中可视化高影响的微交互.

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

动画微交互是电子商务设计的一个重要方面，可以增加用户粘性, 使 UI设计特点 更直观和信息，并帮助将临时购物者变成回头客. 通过牢记最佳实践和专家的见解, 您可以避免多余的运动效果，并设计可转换的动画微交互.