十二条动效体验原则

因为折叠过程将多个元素挤压到消失，所以被隐藏的元素依旧可以说是“存在的”，尽管空间上不可见。这就有效地将用户体验渲染成连续的空间事件，期间不论是交互操作，还是交互元素的即时动作，都能够引导用户感受得到。

浮动翻转让界面元素的产生和离场具有空间感，使交互模式更加直观且具有高度的描述性。

上面的例子中，翻转动过通过3D卡片表现出来。这样的架构为视觉设计加强了表现力，其中通过滑动卡片来查看其余内容或者实现互动操作。翻转能够为新元素的出现提供流畅的过渡。

对象翻转能够给元素带来具有真实的深度和形状。

这种方式将2D平面在3D控件里组合拼装成具有真实体感的对象，其展示过程可以是即时的，也可以是非即时的。对象翻转的作用在于能够让用户快速通过看不见的空间方位产生对元素功能的感知。

用连续的空间描述来引导界面元素和空间。

滑动变焦是关于镜头下元素移动的电影概念，即影像中图片由远及近（或者由近及远）。

有时候，你无法判断是元素在变大，还是元素在3D空间向前移动，或是在3D空间中摄像头在向前移动（如下面的例子）。

下面三张图分别表现了上例的三种可能性。

滑动是一个描述摄像头靠近或远离物体的电影术语（虽然有时也指横向追踪移动，但是不适用于这里）。

变焦指的是在角度或元素不进行空间移动的情况下，元素本身的放大缩小（或者说因为视角的缩小，导致图片看起来更大）。这让观看者感觉眼前的界面元素处于更多元素或更大的场景之内的。

这种方式可以通过无缝的过渡（无论即时或非即时）来提升可用性。用无缝的方式表现滑动变焦原则，能够创造出很棒的空间感。

——

如果你看到了这里，那么说声祝贺！这篇宣言有点野，希望这么多GIF没有崩坏你的浏览器。我也希望你从中有所收获，能在交互项目中运用一些新的工具和支撑。

鼓励你学习更多关于使用动效提升体验的知识。

译者：这篇又长又难的东西终于翻完了。如果你看起来觉得有些不解，可以看上篇《动效的基本常识》，都是译自原文《Creating Usability with Motion: The UX in Motion Manifesto》

译者：Z Yuhan

译文地址：https://zhuanlan.zhihu.com/p/27791356?group_id=867741656047308801

文章作者系 @Z Yuhan 授权发布于人人都是产品经理，未经作者许可，禁止转载。

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!