美文网首页设计移动开发
动画·Material Design

动画·Material Design

作者: 森与渊 | 来源:发表于2016-02-20 19:31 被阅读125次

    【真实的动作】

    动作不可以是线性的,要有平滑的加速度

    动作不可以是非对称的

    进入场景的动画,以最高速出现,然后减速

    退出场景的动画,加速后,以最高速消失

    大的/重的材料,加速度小,时间长

    小的/轻的材料,加速度大,时间短

    【响应式交互】

    表层响应:

    触控涟漪

    语音时,话筒周围的扩散视觉元素

    材料响应:

    点击浮动·激活状态

    新材料基于触控点的展开

    径向响应:

    基于交互的中心点,向外扩散的,像涟漪一样的关联起来的径向动效

    【有意义的转场动画】

    不仅优美,更服务于功能的引导

    视觉连贯性:

    新入元素(Incoming elements): 完全新的元素需要有新手引导,从已有场景中转变而来的元素需要重新被识别

    淡出元素(Outgoing elements):与当前场景不相关的元素应当以恰当的方式被移除

    通用元素(Shared elements):指那些从转场开始到结束都没有发生变化的元素。可以是细微至单个图标,也可以是显著到占据屏幕的图片展示

    禁止瞬间切屏

    纸片叠加方式,滑入屏幕,字体除外,字体要用淡入

    有层次的时序:

    有层次感

    引导用户的注意力

    递次的动画

    连贯的编排·协调的运动:

    有意义、有秩序,不能杂乱无章,而分散用户注意力

    尽量避免线性路径

    元素们运动方向一致、协调,避免路径重叠、冲突

    避免混乱、不连贯、随机

    确保引导用户的注意力

    注意空间关系

    【打动用户的细节】

    图标的转换

    相关文章

      网友评论

        本文标题:动画·Material Design

        本文链接:https://www.haomeiwen.com/subject/dzpvkttx.html