接上周的内容，这周给大家讲讲移动元素余下的6条原则
原则5：数值变化
文字和数字的变化是UI元素里最常见的动画。这里提升用户体验的方式主要是把用户和数据联系起来，让他们直观感受到数据变化的结果。比如下面这两个例子，第一个数字不变，整个图像也是静态出现，给人感觉就是这个数据是固定不变的，路边的限速标志就是个很好的例子。第二个数字增涨的同时，圆圈也随着变化，给人的感觉就是这是一个动态数据，比如时间，收入变化等等。
静态数据比较难引起用户的共鸣，而动态数据更容易让用户对数据产生联想，感知数据变化对他们的影响。这种动画既有实时交互也有延时交互，滑动条就是典型的实时更新数字交互，加载进度则是典型的延时交互
原则6：遮罩
遮罩可以很好的帮助界面形状过度，从而调整整个UI的布局，而变化过程中遮罩可以控制内容的区域变化，从而让内容和布局产生关联。
下面这个案例里面，头部图片的边界变化，内容保持不变，形状最后变成一张唱片的样子，场景也随之切换到播放音乐，音乐相关内容也很容易传达给用户。
原则7：抽屉效果
抽屉效果主要是在有限的空间内更好的跟进需要排布内容。背景和前景可以形成关联，同时又保持相对的独立性。
向左滑动可以看到浮层后面的内容，跟前景的条目高度相关的操作，在不需要的时候又可以收起来让用户看到更完整的信息展示。
原则8：克隆
当新物体是从当前物体创造出来的时候，克隆动画可有效的让用户感知两者的关系。下面这个例子中，主物体衍生出子物体的时候，通过克隆的方式牵引视觉，把注意力引向子物体，给用户一个很强的信号：通过操作X可以创造某个新的场景/元素Y
原则9：空间维度变化
在某些特定场景加入一些空间维度变化可以避免纯平面界面产生的逻辑混乱。总体可以分为：折叠效果，悬浮效果和实物效果
折叠效果
这种效果最大的特点是被折叠之后，可以给用户一种暗示这个物体并没有被删除或者关闭，只是暂时被隐藏了，随时还可以呼出。所以这个效果经常用于一些延续性的操作和暂时性的状态。
悬浮效果
这是一个很典型的悬浮效果场景，很多卡片堆叠的时候，悬浮效果可以很好的暗示用户目前大概所处的位置以及剩余卡片量，当操作完成一个卡片之后，后面的卡片会被推到前面，逻辑清晰。
实体效果
其实就是某种程度上的拟物，让用户感受的真实世界的深度和形状。下图两个2D场景的切换过程通过一个3D立面展示。这种效果可以明显的展示场景切换，甚至是不同软件的呼起。
网友评论