header_v0.7.31

雅虎设计模式库解构(30)——富交互之Slide Transition(滑动过渡)

4年前发布

翻译文章 / UI / 教程
申悦 翻译,如需商业用途或转载请与申悦联系,谢谢配合。

如果你想要在页面上展示新内容,且想要告诉用户新内容和页面上其他元素的关系,就可以提供一个滑动动画过渡效果。

YahooDesignPatternLibrary






雅虎设计模式库解构(30)——RICH INTERACTION(富交互)之Slide Transition(滑动过渡)

                           ——OpzoonUED出品      译者:s2dongman(申悦)

如果你想要在页面上展示新内容,且想要告诉用户新内容和页面上其他元素的关系,就可以提供一个滑动动画过渡效果。

让滑动效果快速发生(通常这意味着在0.5秒内),并在动画结束的最后几帧减慢速度,为用户留下一种印象——新对象将其自己附着到了页面区域中。

aa

  • 这解决了什么问题?

设计师想要向页面上添加新内容,且想要告诉用户新内容和页面上其他元素的关系。

  • 什么时候使用这个模式?

  1. 代替弹出窗口,避免让用户管理额外窗口时。

  2. 要展示的内容和页面上其他区域有强关联性(该内容附属于其他区域)。

  3. 对某元素进行编辑配置时。

  • 解决方案是什么?

  1. 提供切换滑动效果的方法(滑入/滑出)。

  2. 以动画方式为滑动效果提供过渡过程展示(包括滑入和滑出)。参看“动画模式”。

  3. 让滑动效果快速发生(通常这意味着在0.25-0.5秒)。

  4. 让动画在最后几个像素缓慢结束(为用户营造一种感觉——某些东西正附着于页面的另一个区域上)。

  • 为什么使用这个模式

  1. 滑动是移动的另一种形式,(这种形式)限制对象只能水平或垂直移动(但不能同时移动),且通常锚定于另一个对象(译者注:意思是跟着另一个对象而动)。这里有一个经典例子——抽屉滑出:在Mac OSX系统中,Finder的列视图就使用滑动过渡来将子文件夹的内容带入视野中。

  2. 滑动(效果)和它滑出的对象有着很强的关联关系。滑下来的菜单被认为是菜单系统的一部分;从窗口边缘滑出的配置“抽屉”被视为来自于窗口内部,且很明显它们有关联。

想看更多内容,可浏览Transition(过渡)模式阐述的基本原理。

  • 可访问性

请参阅Transition(过渡)模式关于可访问性的综合讨论。


1
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功