header_v0.7.31

雅虎设计模式库解构(26)—富交互之Expand Transition(展开过渡)

4年前发布

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

Expand Transition(展开过渡)是第6种过渡(Transition)模式。该模式一般用于地图/图片缩放,来通知用户某个区域有效。

YahooDesignPatternLibrary






雅虎设计模式库解构(26)——RICH INTERACTION(富交互)之Expand Transition(展开过渡)

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

Expand Transition(展开过渡)是第6种过渡(Transition)模式。该模式一般用于地图/图片缩放,来通知用户某个区域有效。

当某个之前折叠起来的对象现在被激活或处于有效状态,将其展开回初始大小,用来通知用户(该对象)再一次处于有效状态或改变了状态。

将展开过渡——从折叠状态到全展开状态用快速补间动画方法展现。

transition-expand

  • 这解决了什么问题?

设计师想要(给用户)展示某对象上下文的细节部分,或者展示之前折叠起来的对象。

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

  1. 管理许多内容或模块时。

  2. 为管理屏幕空间增加一种“收缩”方法。

  3. 作为图像翻转系统(带有收缩效果)的一部分,用来强调当前鼠标悬停对象时(例如:相册中的照片)。

  4. 需要查看更多详情时(Y!本地地图)。

  5. 想要和之前以缩略图方式存在的对象进行互动时。

  6. 当想要查看列表中某条目细节时(例如:电影列表中某部电影的详情)。

  7. 让内容可编辑时。如果被展开的内容之一有很多条目,并且显示内容详情时和上下文中的其他条目一起显示比较好时。

  • 解决方案是什么?

  1. 在补间动画中增加对象的尺寸。其想表达的意思类似于高亮过渡。

  2. 扩展动作应该进行的很快。这里有一条好的经验法则:在0.5秒内完成扩展动作。

  • 为什么使用这个模式

  1. 扩展比高亮更能在视觉上抓住眼球,尤其是当扩展和移动过渡结合时。

  2. 注意不要滥用扩展。例如,在图片应用中,如果你用翻转的方式将照片从缩略图展开放大,这种做法就会让用户感到厌烦,因为他想要马上看到结果。所以要不取消全部过渡效果,要不让它非常快(地执行)。

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

  • 可访问性

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


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

    提示文案

    提示文案

    提示失败
    提示成功