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

新版Material Design 官方动效指南已经翻译到第三章了!今天这部分,从动效的运动和材料形变入手,让你的动效自然真实,贴近现实状态。再系统的干货都比不上官方的动效指南,西瓜就在这,赶紧来捡。

新版Material Design官方动效指南已经翻译到第三章了!今天这部分,从动效的运动和材料形变入手,让你的动效自然真实,贴近现实状态。再系统的干货都比不上官方的动效指南,西瓜就在这,赶紧来捡。

运动

Material design 的动效会被类似真实世界中的力的影响,类似重力。

物体在屏幕内的运动

屏幕内物体在两点之间的运动,是沿着一条自然、凹陷的弧线。屏幕上所有的运动都可以使用标准曲线。

弧线向上运动

在现实世界中,物体向上运动需要克服重力。元素在屏幕中向上运动,同样也是需要克服一个加速度,较慢的向上运动。

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

正确:当物体向上对角运动时,平缓开始上升,急剧停止在终点。

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

错误:不要违反物理定律:当物体向上运动时无视重力,这样会显得不自然。

弧线向下运动

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

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

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

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

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

非弧线运动

当物体沿着水平轴线或者垂直轴线运动时,请不要让让物体沿着弧线运动。这些运动时最简单的,物体可以以一个比较快的速度运动。

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

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

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

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

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

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

正确:物体沿着直线路径进入屏幕,可以很明确的看见进入点。

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

错误:进入和离开屏幕时不要沿着弧线,这样会让人搞不清楚进入点到底在哪里。

物体进入和退出屏幕的运动

独立运动

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

进入屏幕

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

永久离开屏幕

物体以加速曲线(具体参见持续时间与缓动篇)永久离开屏幕,在很短时间内快速离开屏幕,因为他们不会再重返屏幕,所以应该减少用户对它的关注。

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

正确:物体以减速曲线进入屏幕应该不要影响到屏幕上其他物体的位置。在移动设备上,这种运动通畅持续225ms左右。同样的物体使用加速曲线永久离开屏幕,在移动设备上,大概持续195ms。

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

错误:这两种情况都不要使用标准曲线(具体参见持续时间与缓动篇)。物体进入屏幕时,缓慢加速的过程会吸引用户不必要的注意力(用户的注意力应该放在最后停留的点上)。物体离开屏幕时,缓慢的减速同样是不必要的,因为物体运动的终点在屏幕外,是不可见的。

暂时离开屏幕

物体暂时离开屏幕应该使用急转曲线(具体参见持续时间与缓动篇),出现点和消失点距离应该很近,这样他们可以随时回到屏幕。

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

离开屏幕的物体从原路返回,离开时物体的运动应该使用急转曲线,返回时使用减速曲线。在移动设备上,这个动画通常会持续300ms左右。

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

离开屏幕的物体从其他路径返回或者永久离开屏幕时,离开时物体的运动应该使用加速曲线,如有返回,则使用减速曲线。

关联运动

和屏幕上其他元素有联动的进入或退出动画,应该使用平滑的缓动曲线,这样他们可以尽量减少干扰,避免太过抢眼,剧烈的运动。

标准曲线适用于关联的多个物体进入退出屏幕。多个物体运动的标准曲线会比独立物体的时间稍稍长一些。

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

正确:浮动按钮的运动会受到从下方进入的卡片的影响,浮动按钮和卡片都应该使用标准曲线运动,保持平滑的开始和停止动画。在移动设备上,这个动画大概持续300ms。

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

错误:浮动按钮向上和向下的运动使用加速或减速曲线,会给人感觉非常突然的向上或者向下移动。这样的动效让人难以接受,体验受到破坏。

材料的形变

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

矩形的形变

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

所有的变化都是在屏幕上可见的,例如下面的几个例子,使用了标准曲线(具体参见持续时间与缓动篇)。

宽和高的变化

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

非对称变化

是指宽度和高度以不同的速率变化。对于多个物体或位置的变化,使用非对称变化再合适不过了。

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

非对称变化

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

对称变化是指宽度和高度以同样的速率变化。适合用于单个元素沿着单一的轴线的运动。

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

对称变化

这种同时改变宽高,减少动画细节的方式非常适合简单的形状变化。这种变化的持续时间会比非对称变化稍短一些。

当一组物体的扩大不同步时,含有内容(如文字或图像)的部分改变大小,是以恒定的比率来进行的,这样可以防止不自然的拉伸。有关内容请查阅《动效的组合》部分内容。

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

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

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

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

径向形变

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

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

正确:径向变化应该用在圆形的物体上,让圆形物体变成方形,或者在触摸点创建一个新的物体出来。

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

错误:不要在两个方形物体间的变化使用径向变化。

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

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

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

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

形变的变化中心点可以在物体改变前的位置,也可以在物体改变后的位置。

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

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

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

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

合并 & 分割

合并

在材料设计中,物体可以和其他物体合并,也可以分割成很多块。两个物体相互接近时,边缘相遇然后重叠,最后合二为一。

分割

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

阴影

分割开的物体的阴影不会被其他被分割物体所影响。

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

 

原文地址:google.com

译者:@平行煎餅

原文来自优设

 

系列文章直达电梯

1)新版Material Design 官方动效指南

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

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

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29128/

(0)
CatherineCatherine
上一篇 2017-05-23 05:24
下一篇 2017-05-23 07:28

相关推荐

  • 浅析设计图表色彩的简单方式

    译者按:对色彩的研究通常要么太过随意缺乏逻辑,要不太过理论化难以理解,这篇文章用非常浅显易懂的方式,讲述了一个专门研究数据可视化的团队探寻图标色彩搭配的历程,给出有力的论证,并得出很棒的结论,非常值得一读。对色盲色弱来不够友好*:原文中问题一的标题是“Low Accessibility”,通常用形容来产品对残障人士的友好度不够,这一点在欧美国家经常作为需要重视的产品硬指标(也是由于他们的色盲色弱发病率比亚洲高很多)。因为在中文里没有简短精准的说法,所以我在写的是“对色盲色弱不够友好”。
    逻辑性较强的人*:原文的写法是“left-brained folks”,直译是左脑型的人。通常左脑型的人被认为逻辑严谨,右脑型的人被认为有艺术天赋。因为这种说法在中文里不是很通用,所以我写的是“逻辑性较强的人”。

    2017-05-01
  • O2O产品的用户评价思考

    为什么产生这样的思考? 可能因为我在一家做 O2O 产品的公司,碰巧我做过 UGC 评价相关的交互设计,然而更重要的是前不久我在线下真实的场景中希望使用自家产品的评价帮助我作决策时,发现我的一些需求并没有得到很…

    2016-03-02
  • 淘宝UED:如何高效输出移动APP产品原型

    如何高效输出移动app产品原型? 清晰的产品思路,顺畅的协同合作,齐备的素材元素,真实的体验感受…保证过程的高效,更要保证有效的成果。下面我们将分三步走,来完成高效输出移动app产品原型。 一、输出以界面为单…

    2015-07-10
  • 交互设计流程(一):需求分析(转自人人都是产品经理)

    本文是系列文章的第一篇,主要从业务需求、用户需求、分解关键因素三个方面来分析。一起来文章中看看吧~进入到腾讯工作后,由于处于广点通广告部门,平时的设计呈现多与业务相关,基本是以B端设计为主,对于传统交互设计的方法论有点生疏了。所以特在此整理,同时也分享给有需要的同学。该系列交互设计文章,抽取工作中需要的核心步骤,预估计有6篇,暂拟定如下内容:交互设计流程一之需求分析交互设计流程二之架构设计交互设计流程三之流程设计交互设计流程四之页面布局...

    2018-05-08
  • 叶云燕:不懂用户体验,没有互联网思维的代理人,迟早会被淘汰!

    第1937期|编发/保险论坛互联网时代,到处都在谈如何用互联网思维做生意。有人用互联网思维卖奶茶,销售额翻倍;有人用互联网思维开理发店,已获得数千万融资;有人用互联网思维卖衣服,年利润过亿;而当我第一次提出要用互联网思维卖保险时,很多人都感到茫然,认为这不过是赶时髦,蹭热点。保险代理人的新机遇事实上,互联网时代的到来,对保险代理人来说是一个前所未有的机遇,它让代理人的品牌形象更加丰满,展业渠道更加多样化。更重要的是,互联网思维的核心是以...

    2018-04-25
  • 设计如何操纵人的想法—来自于Google的设计伦理学家

    作者:Tristan Harris 译者:@Steve-Mr 与 @WayneMaa 和 Oscar Wei   愚弄人们,要比让人们相信自己被愚弄了简单。 我十分了解科技如何劫持我们心理上的弱点,这也是过去三年,我在谷歌研究防止上亿人的心智被科技…

    交互专题 2017-08-07
  • 国外的视觉设计好在哪里?

    最近为了团队能做好产品首页设计,我研究了很多国外to B类的相关产品设计。发现国外这类设计作品在整体水准上比国内高了不止一个档次(国内to B产品起步较晚,在设计方面的研究几乎空白),而这种差距和设计技法没有太多关系,更多的是对产品个性的把握和传达。

    2017-06-01
  • 除了灵感,还有什么方法能帮你想出新的idea【UXRen译#174】

    作者: Mind Tools Editorial Team |  翻译:Chen Jing,校审:包子   “我们要 think differently!”“这个得有些新想法!”“我们要更有创意!”这些声音是否在你工作的场所越来越多? 面对复杂,开放和不断变化的挑战…

    交互专题 2017-08-07
  • 在网页设计中兼顾所有用户和场景的3个技巧

    用户可能是新手、专家或介于两者之间,要根据用户情况设计界面。△ 使用适当的新人引导(四种主要的新人引导策略)

    2017-05-23
  • 动起来才好玩——创意交互设计景观

    设计是靠亮点征服人,吸引眼球,大部分方案构思雷同,建成后风格水平都差不多,如何让场地更加吸引人而脱颖而出,这就需要在新、奇上下功夫。电子梦幻天幕世贸天阶最著名的“全北京向上看”的“超豪华LED天幕”,这座天幕将为整条商业街带来富于梦幻色彩和时尚品位的声光组合,成为一座吸引人潮的世界级奇观。建成之后,人们在这里可以欣赏缤纷悦目的日夜景观,感受现代科技带来的富于梦幻色彩和时尚品位的声光艺术。而且游客可以把想说的话发送短信到平台号码,天幕上就...

    2018-02-03