新版MATERIAL DESIGN 官方动效指南(三)

Date 2025-04-06 14:47:25

运动

Material design 动态效应受到现实世界中力和重力的影响。

屏幕上物体的运动

屏幕上物体在两点之间的运动是沿着自然和凹陷的弧线运动的。标准曲线可用于屏幕上的所有运动。

弧线向上移动

在现实世界中,物体向上移动需要克服重力。元素在屏幕上向上移动也需要克服加速和缓慢向上移动。

25dx20160520

正确:当物体向上对角移动时,平缓开始上升,并在最后急剧停止。

24dx20160520

错误:不要违反物理定律:当物体向上移动时,忽略重力是不自然的。

弧线向下移动

在现实世界中,物体的下降会受到重力的加速。在屏幕上,物体应该向下移动得更快。

23dx20160520

正确:当物体向下对角移动时,下降开始急剧下降,然后平缓停止。

22dx20160520

错误:不要违反物理定律:向下运动时不要忘记向下的重力。

非弧线运动

当物体沿水平轴或垂直轴移动时,请不要让物体沿弧移动。这些运动是最简单的,物体可以以更快的速度移动。

21dx20160520

正确:保持单轴直线运动。

20dx20160520

错误:在水平或垂直方向上,不要让物体沿着不自然的弧线移动。

物体进入或退出屏幕时,也应沿单轴移动。

19dx20160520

正确:物体沿直线进入屏幕,可以清楚地看到进入点。

18dx20160520

错误:进入和离开屏幕时不要沿着弧线,这会让人们不知道进入点在哪里。

物体进出屏幕的运动

独立运动

作为一个独立的元素,物体进入和退出屏幕不会影响屏幕上其他元素的位置。

进入屏幕

物体以减速曲线(见持续时间和缓动篇)进入屏幕,以最大速度进入,然后慢慢减速。

正确:浮动按钮的运动会受到从下面进入的卡片的影响。浮动按钮和卡片应采用标准曲线运动,以保持动画的平稳开始和停止。在移动设备上,该动画持续约300ms。

12dx20160520

错误:使用加速或减速曲线向上和向下移动浮动按钮会给人一种非常突然的向上或向下移动的感觉。这种动态效果是不可接受的,经验是被破坏的。

材料的形变

材料设计下的物体可以生动地展示:叠加、分割、改变形状和大小。

矩形的形变

当物体改变形状和大小时,宽度和高度的运动曲线是不对称的。这种变化是根据物体附近的内部或外部元素来改变的。

所有的变化都可以在屏幕上看到,比如下面的例子,使用标准曲线(见持续时间和缓动篇)。

宽和高的变化

当物体扩大或缩小时,使用对称或非对成的宽度变化。

非对称变化

这意味着宽度和高度以不同的速度变化。对于多个物体或位置的变化,使用不对称的变化是完美的。

11dx20160520

非对称变化

扩大物体:先改变宽度,再改变高度。缩小物体:先改变高度,再改变宽度。

对称变化是指宽度和高度以相同的速度变化。适用于沿单轴运动的单个元素。

10dx20160520

对称变化

这种同时改变宽度和高度、减少动画细节的方法非常适合简单的形状变化。这种变化的持续时间略短于不对称变化。

当一组物体的扩展不同步时,内容(如文本或图像)的部分变化以恒定的比例进行,以防止不自然的拉伸。请参考动态效果的组合。

9dx20160520

一些特殊内容(如全屏宽度图像)的变化以恒定的比例进行,容器(如更大的卡片)的变化沿着运动曲线不同步进行。

8dx20160520

可以同步扩展含有出血内容(如超过出血线的图像)的容器。

径向形变

径向变化是用户触摸点产生的对称环形可视化效果。通常用于圆形物体,使圆形成其他形状。

7dx20160520

正确:径向变化应用于圆形物体,使圆形物体成方形,或在触摸点创建新物体。

6dx20160520

错误:径向变化不应用于两个方形物体之间的变化。

5dx20160520

错误:高宽的扩展不应不同步(中间会变成椭圆)。

4dx20160520

错误:不要径向改变复杂的形状。

变形的中心点可以是物体变化前或物体变化后的位置。

3dx20160520

在扩张过程中,浮动按钮沿着向下的弧线移动,最终变成卡片。

2dx20160520

变换的中心点保持在浮动按钮的中心点,扩展幅度不大。

合并 & 分割

合并

在材料设计中,物体可以与其他物体合并,也可以分为许多块。当两个物体相互接近时,边缘相遇并重叠,最终合二为一。

分割

物体分成多个碎片,然后碎片开始分离运动。

阴影

分割物体的阴影不会受到其他分割物体的影响。

1dx20160520
课程推荐
— Course recommendation —
【红喵设计教育】ps教程-ps零基础课程

红喵设计

【红喵设计教育】C4D基础-C4D软件制作教程

红喵设计

【红喵设计教育】包装设计-免费/PS/AI/CDR/平面设计

红喵设计

【红喵设计教育】版式设计-版式的思路PS/AI/CDR/平面设计/排版技巧

红喵设计

【红喵设计教育】ps基础-ps基础入门教程

红喵设计

【红喵设计教育】CDR基础-CDR零基础入门教程

红喵设计

【红喵设计教育】海报基础-PS合成海报设计教程

红喵设计

【野马设计教育】AI基础-AI软件零基础到精通

红喵设计

Floating Image