容器过渡类动效，除了上一篇文章中提到的从元素过渡到全屏的模式，还有一种也是常见的-浮层；与容器转换动效的不同的是，容器中的内容也不会跟随容器的缩放转换内容。

它的整体设计思路与容器转换动效基本一致，动效持续时间300ms，容器以峰值速度快速从屏幕中间进入，随后做减速运动直至停止。

开始设计

界面的层次感

首先聊下什么是层次；

层次不等同于层面，“次”是一种有序的排列，强调的是与参照点的距离不同而产生的差异。层次是由多个层面构成的，从系统论的角度来讲，一个相对独立的系统是由不同层级的结构构成的，这些不同的层级构成了系统的层次。

简单来说，以屏幕为参照点，层次强调的是垂直于显示平面，并延伸向用户视角的相对深度或距离，这一概念早在ios7的人机交互规范中就已指出，用以帮助用户理清任务前后的层次关系，并用动效来向用户传递感知，让用户更容易理解。

作为产品设计师，我们非常熟悉我们设计的产品中所有界面元素（显性的与隐藏的），但作为用户，只能通过使用实践去理解，那些不可见的部分在视觉和认知上都是隐藏的，结合动效，Z轴的方向给了我们更多的可能性，让用户更清晰的理解产品架构，增强用户对信息的把控。

浮层的动效设计就是通过动效创造基于屏幕的纵深空间关系的连续性，传递主视图层与浮窗在架构上的层次关系，对用户更好的理解产品、使用产品提供帮助。

动效设计

从浮层的定义入手，它是用于提示用户做一些决定，或者提供完成某项任务时需要的一些额外信息，任务过程中应避免引发打断用户操作的心理感受；基于用户的心理预期，浮层的动效应该简洁干练，两个设计要点可以实现这一设计目标：

1、简化容器缩放的变化过程：缩放不从0%开始，而是80%-95%开始，减少容器的大小变化引起的注意力过度关注。

2、简化退出动效：退出时，用户的期望是更快的进入下一个步骤以更快的完成任务，所以退出动效设计更为简洁，容器和内容只是淡出而不缩放，以帮助用户集中注意力于新内容。

Powered by Froala Editor