超详细智能产品深度解析：交互动效篇

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

智能产品的设计过程中，常常用到动效设计，那么动效设计用在哪些地方及对提升智能设备体验带来什么帮助，是这篇文章要讲的。

上期回顾：

7000+超详细智能产品深度解析：智能面板篇

智能家居越来越普及，智能化的生活是由一个个智能设备组成，这次通过近距离体验智能面板，来研究一下它们是如何提升产品体验的。

流畅的操控感

通过大小、位置和透明度的变化，使得界面与界面之间、界面上元素的出现和消失都有关联，让用户和产品的交互过程更流畅，给用户更好的体验。请看以下案例：

1. Nest 温控器控制界面

Nest 温控器从时钟转变到温控调节界面的过程中，时钟的指针向圆心收缩，周围的时间刻度生长并一起向中心收缩，指针收缩动效对应温控调节界面温度值的显现，时间刻度的生长收缩动效对应温度刻度的显现，由于元素之间进行有关联的变化，操控过程中会有丝滑流畅感。

2. Gira 窗帘设备

当用户调节行程时，中间的控制点跟随手指实时运动，而进度条会有延时拖拽效果。为什么会是这样呢？原因是：用户在控制面板上的操作是需要由面板向窗帘设备发送指令的，也就是说面板上控制窗帘到窗帘设备运行中间会有一小段时间间隔，用户会有延迟感，所以 Gira 在控制窗帘行程的过程中，进度条为了与窗帘设备运行同步，加入延时效果，让用户感觉操控响应快的错觉。

3. Nest 新款温控器

用户在滑动切换功能时，功能 icon 会按照先后顺序由大到小变化，由于连续性运动，每个元素运动都有衔接，会有流畅操控感受。

4. Nest 智能锁

用户输入密码后至锁打开这段时间，数字依次向下消失，锁 icon 逐渐出现并且打开，体现出柔缓的感觉；实际上动效有时候可以弥补设备执行缓慢的不足，当设备需要长时间才能执行时，这段时间加入动效，动效运行时间和设备实际执行时间一致，用户就会觉得很顺畅；也可以让动效运行时间小于设备执行时间，这时用户会觉得操控反应更快。

直观明确，降低用户学习成本

通过动效能够帮助用户使用功能，对功能的方向、位置、唤出操作、路径等进行暗示和指导，方便用户在最短的时间内来学会操作产品的一些功能。请看以下案例：

1. Amazon Echo

用户第一次设置好监控后，通过放射动效提示用户双击屏幕，通过上下扩张的箭头动效提示用户可以通过手指来进行监控画面的放大缩小。

2. Lenovo Smart Clock

当设备第一次配好网重新开启后，通过遮罩、圆点大小位置运动搭配文字告诉用户长按屏幕可以控制什么功能。

顶部弧形的上下变化，告知用户下拉可以控制什么功能。通过简单的元素既能起到提升用户的作用，还不打扰用户。

强调内容

通过动效给用户展示需要的内容及产品侧想让用户了解的内容，让用户更乐意更易于理解，强化功能感知。请看以下案例：

1. B&O 触控音箱

双击音乐标题，进度条从左向右生长出现、操控点放大出现，既强调了进度条这个隐藏功能，还暗示用户可以拖动操控点从左向右拖动操作。

2. Google Nest Hub 调光灯界面

用户从列表进入调光灯界面时，调光条灰底从左向右弧度生长，随后当前亮度条生长出现、亮度值出现，先暗示了用户可以从左向右弧度操作，后强调了当前设备状态。

3. Google Nest Hub 睡眠质量检测界面

用户查看睡眠质量数据时，睡眠质量标题信息渐隐渐现，睡眠数据条、数字生长，让数据展示有主次之分，强调了用户想要看的内容据，更人性。

提升用户掌控感，让用户心中有数

在产品设计里面有一个非常重要的原则：让用户有操纵感。这种操纵感不仅仅表现在对用户的操作有了反应、有了显示，还有一种方式是让用户知道当前产品运行的状态，是正在等待还是正在加载，还是正在下载或变化，那这种状态的告知也是增强用户操纵感的方式之一。请看以下案例：

1. LG 智能洗衣机

当用户往洗衣机里加入衣物后，出现量杯倒入洗衣液的动画，告知用户当前洗衣机正在进行哪一个环节，我们分析一下这里加入动效的用意，首先，一般的洗衣机没有屏幕，有的话也就显示当前的功能选项，LG 的这款洗衣机是液晶屏，那么它的定位就是高端人群，通过融入动效，打造差异化，提升使用体验，加深用户对 LG 品牌的印象。

2. Lenovo Smart Clock 起床闹钟功能

用户设置好起床时间后，系统会根据时间段自动进行背景颜色的过度，来模拟天色的变化，直观的告知用户当前的时间是白天还是晚上或是黄昏。

3. Orvibo 除湿界面

设备进行除湿的过程中，面板上圆形元素进行旋转，伴随粒子扩散效果，模拟水分子消失的过程，直观形象的告诉用户现在正在做什么。

4. Lenovo Smart Clock 猫眼通话界面

用户接通猫眼后，通话 icon 进行电播扩散动效，模拟声波扩散效果，准确的向用户告知当前通话中的状态。

5. Google Nest Hub 语音唤起

当用户说话唤起语音控制时，原先的全屏画面收缩，响应用户的指令，四周留白，为通话内容提供展示空间，然后彩色点元素起伏变化，通话内容出现，告知用户已接收到指令；随后彩色点元素旋转加载，体现正在执行中。在语音控制的每一个环节都加入动效反馈，会让用户觉得他不是在和一个冰冷的机器讲话，富有人情味。

6. Orvibo 窗帘控制界面

运用轻拟物效果和与实物一致的运动方式，用户可以直观的看到窗帘的行程位置与开合状况，大大的提升了产品易用性。

明确层级关系，提升用户理解效率

面对一款新的智能产品时，用户可能不知道怎么操作它，通过动效向用户交待页面内容之间的关系，让用户清楚的知道从哪里来，到哪里去，更易于理解从而可以快速上手使用。请看以下案例：

1. Nest 温控器设置界面

温控器的设置模块通过左右滚动以便在有限的屏幕中展现，那么模块的下一级页面跳转做成像 App 那样左滑切入是无法明确层级内容的，此时需要一个与左右滑动不一样的动效来区分模块的切换，Nest 运用翻转效果，强化了层级感，清楚交待了页面翻转后面的内容与页面前的关系。

2. Google Nest Hub 设备控制界面

用户从顶部导航中进入设备列表过程中，设备列表页面从右向左进入，暗示用户“当你想返回上一级，可以左滑离开哦”，用户上下滑动设备列表时，屏幕左边滑动条出现，更加明确了“左滑返回上一页”的功能；

当用户通过列表进入操控界面以及切换功能页时使用淡入淡出的效果，弱化它们之间的跳出感，来强调它们是一个层级的内容，从细微处可见 Google 的设计师在动效的使用、选择上非常克制，值得我们学习。

3. Google Nest Hub 日程提醒界面

用户发出查看日程安排的命令时，日历界面从左到右进入，告诉用户这是一个新的页面，接着日期数字 21 进行大小位移变化，月份不做变化，为了强调这是 21 号的日程，2 条日程信息按照时间先后从下向上运动，交代了日程处理的优先级。Google 设计师将信息展现的每一步都让用户看的清楚明白。

品牌调性透传

在可用性良好的前提下，通过一致性、趣味性的动效设计和创新的交互方式为产品增加亮点，带来更惊喜的体验，传达产品的气质与态度。请看以下案例：

1. Google 多端运行动效

在品牌塑造上，Google 已被证明做得极为成功，而且在视觉表现层面，Google 系产品具备着“一致性”和“连贯性”，这让 Google 获得了品牌识别上的利益。在不同设备的动效设计中，Google 都统一使用代表品牌的红、黄、蓝、绿颜色和几何图形，遵循化繁为简的设计准则，通过简洁贴近真实的运动方式，让产品更有人情味，让用户更加专注于内容。

2. 智能圆镜

用户在靠近圆镜设备时，镜面中心人脸识别 icon 缩放，周围点元素波动扩散，吸引用户的同时，传达出科技感。

3. Apple HomePod 命令反馈界面

当 HomePod 在执行一项指令时，顶部的屏幕会出现彩球融合翻转动画，多变朦胧的色彩可以唤起用户情绪，球体间的融合过程让产品生动有趣，让用户感受到品牌的人情味。

4. Apple Watch 洗手提示界面

Apple Watch 洗手功能开启后，会有一个 20 秒的倒计时，倒计时以肥皂泡沫消失扩散的形式展现，很贴合当前洗手的情景，让原本一个普通的倒计时变得生动且有趣味性，用户更加乐意使用，强化了用户对品牌的感知。

5. 智能温控器

这款温控器已经有一定年代了，当时那个年代，能用到温控器，那就很有科技感了，智能温控器还将流动的线条动效运用至透明背景上，向用户传达了超前的科技感，只要见了就会记住这款产品。

下面为大家整理了一份动效在产品中的应用场景以及设计思路：

总结

实际上智能产品中的动效设计，并不是要向用户炫技，也不是做的越炫酷越好。动效是以解决问题为目的的一种手段。我们要去观察现有好产品的动效设计落地点及分析他们的小心思，从而运用至自己产品中，提升产品使用体验。