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

智能产品的规划进程中，常常用到动效规划，那么动效规划用在哪些地方及对提高智能设备体会带来什么协助，是这篇文章要讲的。

上期回顾：

流通的控制感

经过巨细、方位和透明度的改变，使得界面与界面之间、界面上元素的呈现和消失都有相关，让用户和产品的交互进程更流通，给用户更好的体会。请看以下事例：

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. 智能温控器

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

下面为我们整理了一份动效在产品中的使用场景以及规划思路：

总结

实际上智能产品中的动效规划，并不是要向用户炫技，也不是做的越炫酷越好。动效是以解决问题为意图的一种手法。我们要去调查现有好产品的动效规划落地址及剖析他们的小心思，然后运用至自己产品中，提高产品运用体会。