【第1122期】运动模式对应的心理预期

前言

动效已经越来越渗透到产品中了，上周看到一个活动页面的动效，设计大大都直接把整个活动的动效用gif表现出来，还有交互大大也通过其他工具较完整的把它表现出来，所以在实现动效这块对前端来说也是一个很大的挑战，但又很有意思。今日早读文章由@Guoen Sun分享动效对心理体验的影响。

正文从这开始～

这篇文章里把运动模式分作3大块来罗列。

• 单体移动，是基本类型。

• 单体定位，是指元素大体位置不变，只是自身在小范围变化，吸引注意力。

• 相对运动，组合效应。

一、单体移动

①点对点

基础运动，包括点对点的曲线轨迹运动，无特殊意义。

②过冲

提示性比点对点要强。特殊意义：过冲暗示前方已不可通行（同一类操作下）。可逆向返回，不可顺向前进。逆向返回可无阻力，顺向需要阻力。包括使用在缩放、旋转上，道理一样。

③弹簧

提示性更强。可点击，可多方向拖拽。方向对应的功能可一致，也可不一致。由于「弹力」的心理预期，最好加上操作阻力，或3D偏角（例如某陌生人社交App）。

④蓄力

确认行为，一股脑向前，暗示不可撤销。但一般用在需要拖延时间掩盖系统延迟的地方。或非常需要突出打击感的地方。

⑤碰撞

触底，下方不可延伸。下落行为有不受控的倾向，一般用在被动触发的行为。主动触发的行为不易使用，否则会存在不可撤销、短时间内不可再次操作的印象。

由于「重力」的先入为主，操作会有受力的心理预期。如果能被拖拽，则需要模拟物质的重量，突出抓握受力点。否则认知误差会造成违和感，让人感觉软件不高级。

⑥翻转

对立、解开谜底。必须可逆操作。

⑦绳摆

单方向，向下拽。市面上很少见，有勾引的意味，比较挑衅和神棍。娱乐项目可以用。

二、单体定位

①透明度出现/消失

最弱的变化，无特殊意义。

②放大出现

强调可点击，带过冲、弹簧会更加跳脱。

③位置晃动

可拖动，或可点击。水平晃动比较成人向，垂直跳动比较儿童向。注意控制速率，摇快了就变成震动。

④震动

不稳定，错误。

⑤透明度闪烁

信息提示，一般不可操作。

• 慢速规律闪烁：状态提醒。

• 快速规律闪烁：错误提醒。

• 不规律或高频闪烁：混乱，失控，严重警告。附加缩放变化，表试危险。

⑥旋转、勾边

不可点击，一般会被认为是在 loading

三、相对运动

①错帧、随动、联动、延迟

炫技项目，一般表示「这里没有什么设计问题需要解决，没有可发挥的余地了」。

②交叉

偏展示，一般不可操作。娱乐画面感。

③聚拢、缩小

退出，返回上一级。同时获得聚拢中心的视觉焦点，确认所处层级，确认从哪里退出到这里。

④散开、放大

（例图同上）

查看细节，打开。

曾见过有用「放大消失」来表示「退出」的，这是反直觉的用法，会让用户在系统中迷路。放大一定是往深处走，得到更多细节，而不是穿墙而出。除非你的艺术作品故意想让观众迷路：

看起来像进入了更深一层，而不是退出

⑤平移覆盖、露出

• 水平：子母级切换，比较常见了。

• 垂直：新层级插入，高层级打断。

3D界面会大量使用景深效果，层级的切换会偏向放大散开、缩小聚拢的模式，或者树状 + 轴旋转的模式。因为画幅扩宽以后，水平覆盖的运动幅度会变得巨大。但垂直向代表「插入打断」的行为不会改变。

运动模式是用来暗示潜在交互行为，或执行后果的。

正确的心理预期，提供预见性及定位。

总之，要灵活运用行为背后的含义，做出正确的选择，解决问题。即使不能解决问题，也不要造成新的问题。

以上是对运动模式的基本分析。先把基础的东西说清楚，确保我们都在同一个频道上。世界上存在的模式远不止这些。这里只是提出来这个概念，作为一个讨论的前提和预热。

这篇文章主要针对的是用户体验领域。罗列的大部分都是简单的、中性的模式，还没有涉及特别积极的、消极的、情感化的模式。

另外，大家平时实现前端动效，是如何做的呢？

最后，为你推荐

【第236期】玩转HTML5移动页面（动效篇）

关于本文

作者：@Guoen Sun

原文：https://zhuanlan.zhihu.com/p/31350812

一件四周年纪念卫衣的情怀

【第1118期】2018校招面试经验分享