bv1946伟德体育-体育betvictro伟德

bv1946伟德体育视点
bv1946伟德体育>bv1946伟德体育视点>动效策划没so难!让谷歌动效策划师带您入门
动效策划没so难!让谷歌动效策划师带您入门
发表时间:2019-03-22

动效让UI更好富有表现力更好易用,这是不争的事实。尽管动效拥有巨大的潜力,但是,在很大程度上依然算是 UI 策划区域当中的边缘学科,难以否认的是,它确实是整个策划家族中的新成员。视觉策划和交互策划可以追溯到早期的 GUI 策划,而方另的动效的策划和实现很大程度上依赖现代硬件的强大渲染能力来达成。

UI动效和上卫动画在「动」这一事上的重叠,使得方另整个策划区域,在概念和边界上都变的模糊不清。从上卫动画的角度上来说,您可能终其一生才能真正把握迪士尼所提出的12个动画运动规则,但是这是否意味着UI中的动画同样如此复杂、需要如此长周期的找子 灸兀

有很多人跟我说,UI动效很复杂,策划动效过程中参数的选取非常模棱两可。在我看来,并非如此。动效策划可以很easy,并且应该很easy。



要从哪里开始?

动效的主要功能是用来呈现 UI 中不同圆素之间的关系,来扶掖用户在界面和界面之间进行导航。动效还可以加持到图标、品牌刺绣、插画等圆素上,来赋予 UI 以赋性,但是 UI 本身的可用性的优先级是一定要高于视觉和动效的表达。在找子 咎教纸柚卣垢承院偷餍灾希崦怯Ω糜畔裙刈⑷绾谓柚Ю从呕己胶凸桑菇ㄇ看蟮亩У鬃印

转场过渡的策划模式

在揣摩策划导航的过渡成果的时候,easy性和一致性是两个关键属性。为了做好这一点,吾们一贯会基于两种环境来策划:

  1. 基于某个容器的转场动效
  2. 不存在容器环境下的转场动效

基于某个容器的转场动效



文本、图标、图像等UI圆素被置于一个容器内

在 UI 界面当中,如果一个转场动效牵涉到诸如按钮、卡片或者列表,so这种动效一贯都会基于这些容器来进行策划。很多容器控件都有着清晰的边缘,但是要记取,在动效出现之上,边缘可以是不可见的。就像没有分隔符的列表一样。一贯,这种模式下的动效会分为三个步骤:

注:为了方便您能看清,动画的展现速度被放慢了,实际环境下会快很多。

1、容器本身的动效使用 Material 中的准则缓动(这种缓动动画成果下,启动加速很快,然下速率逐渐缓和减慢)。在这个实例当中,容器发生了尺寸和形状上的改动,从一个圆形按钮改动为一个充满屏幕的矩形。


2、UI圆素在容器内缩放,过程中基于宽度自适应调整。容器内的圆素被固定在容器的顶部,会随着顶部的延伸而自然延伸,并且一切圆素都会被遮盖在容器内。这样的策划,让圆素和容器之间的竞相关系更好清晰。


3、在动画改动的上一个阶段,改动速度逐渐加快。在容器改动速率最快的时候,包含在容器内的 UI 圆素逐渐淡入显示,并且改动速率开始减缓。当整个动效足够快的时候,整个改动过程就会显得无间隙而自然了。

这种动效策划规则非常清晰,如果将它应用到整个界面的不同控件上,能够建立出一致的动效样式。而且这样的动效在开始和结束过程中,有非常清晰的逻辑关系,整体的改动依靠容器链接,为了找子 菊庵帜J降牧榛钚裕崦墙τ玫 5 种不同的控件上去:


这当中的许多容器大都只使用了 Material Design 种的准则缓动动画来呈现从屏幕外滑入的成果。它滑入的方向,取决于这一容器和竞相关联的组件之间的地位关系。 诸如,点击左上角的导航菜单按钮,so菜单展开的滑动动效是从左侧进入屏幕的。



如果容器是从屏幕边缘进入,它会逐渐淡入并放大。但是,动画所呈现的圆素大小并不是从0百分比开始的,而是从 95百分比开始的,这一点和macOS 种窗口较大化的神奇成果是截然不同的,这是为了避免用户过度关注动画。这个缩放动画使用了 Material Design 种的减速缓动成果,这意味着动效的速率一开始就处于峰值,然下速度逐渐减缓。在退出的时候,容器会在险些没有缩放的环境下逐渐淡出。退出的动画成果会比进入的更好微妙,这样用户会更好关注新的始末,而不是即将消失的信息。


不存在容器环境下的转场动效

有很多动画成果也是在没有容器的承载下,就开始构建的,譬喻在APP的界面中点击底部的导航按钮,将用户完全带到一个全新的界面当中。在诸多环境下,这种动效会遵循下面的两个步骤:

1、上一个组件或者圆素开始淡出消失,随下新的组件或圆素开始淡入。

2、随着上一个部分的消失,下一个组件会使用Material Design 中的减速缓动动效,巧妙地展开呈现出来。同样的,明显的缩放仅仅应该应用在新进入的部分,而不是消失的组件。



注:为了方便您能看清,动画的展现速度被放慢了,实际环境下会快很多。

如果开始和结束有着清晰的容量关系和逻辑顺序,so可以使用相似的、共享的动效来强化策划的一致性。譬喻下面的两个体育betvictro伟德,左侧在进行导航操作的时候,所产生的动效,在末了淡入的时候,都会带有一个垂直方向上的微妙运动。而右侧的体育betvictro伟德中,新用户入门流程中,一切的操作切换都会带有一个水平方向上的缓动。一切的这些都只是使用了 Material Design 中的准则缓动,就足以制造出这样的一致感。

最佳实践

保持简约

鉴于动效的使用频率非常高,它和策划的可用性密切相关,导航过渡成果的功能性更好优先,而不是性状style。易于 这般,这并不是说它不应该性状style化,只是说在确保直营整体性状style一致就可夜闼。引人瞩鹄的动效,一贯更好适合和小图标、品牌刺绣、加载器和空状态等圆素或者界面搭配。下面的范例当中,动效策划的比较easy,这样的策划在 Dribbble 上可能不会得到很多赞,但是它们是更能适配各种应用的动效策划。


决定合适的时长和节奏


诸如导航切换的动效转场,所持续的时长,应该优先揣摩到它的功能性,要利落,但是也不能过快。太快会让用户感到迷惑。可以按照用户在界面停留的时长来估算动效应该持续的时长。按照以往导航过程中,用户在导航页面中所驻留的时长来进行判断,300ms的动效时长,是一个值得参考和使用的时长。相比之下,更小的UI控件当中,动效的持续时长还要短,一贯100ms 就足够了。如果您觉得某个动效策划得太快或者太慢,请以 25ms 为单位,进行增速或者减速的调整,直到它达到您所预期的视觉和体味。


缓动本身描述了动效的加速和减速的速率特征,绝大多数的动效可以直接采取应用 Material Design 中的准则缓动就行了,这是一种不对称的缓动类型,这种缓动的特征是开始加速快,然下较为缓慢地减速,这样会让用户更匆子 侄胏are到整个改动的结果。这种缓动让圆素具备了一种更好自然的物理质感。因为现实世界中的物体一贯不会匀速运动,它也不会立刻开始和结束,而缓动则不会让过渡和运动显得僵硬机器。



本文中所描述的策划模式和最佳实践,旨在建立真正实用的、微妙的动效,它们适用于绝大多数的APP和网页,易于 这般,也有一些直营可能会需要更好强烈的表现形式。



一旦完成了基本的转场动效的策划,您就可以开始揣摩更好细化和赋性DIV的策划和挑战了。而这个时候,才是这些easy的动效不能满足的区域,更好有趣、多变的动效,在此时才应该发光发热。



——bv1946伟德体育分享,作者Jonas Naimark


XML 地图 | Sitemap 地图