看一些UI动画从好到好的例子。通过这里和那里的一些调整,可以使用动画提升自己的UI模式。
这些例子遵循了Material Motion,IBM的动画原理和UX in Motion Manifesto中的指导原则。
1、标签按钮的内容切换

左边切换方式,按钮触动从一个状态转换成另一个状态。
右边切换方式,通过按钮与内容双向控制切换方式显示出这种转换显示的连续性。
2、 选项卡之内容详情

左边,向上推动,触发后向上出现一个新的页面来展示内容。
右边,通过触发后,把内容放大建立两个内容共享的链接来展现。
3、内容中使用级联效果

左边,通过改变材质位置与透明度来展示触发后的内容。
右边,触发后,以瀑布流形式展现新的页面内容,错开每个组或元素出现时间(谷歌建议20毫秒内)。
4、菜单显示

左边,内容从按钮方向出现显示。
右边,从触发点开始增大与缩小来展示内容。
5、按钮点击效果

左边,通过颜色变化来展现触发效果。
右边,改变展现效果,通过微调器或者动画效果加强转换的过程,来达到触发的状态显示。
网友评论