美文网首页
交互动效- day②

交互动效- day②

作者: 许呀小黑 | 来源:发表于2016-06-28 11:33 被阅读36次

还是按照“动效所在的页面和位置——这是一个怎样的动效——这个页面的使用场景是怎样的——为什么要这样设计——是否达到设计目标”的思路,分析第二个案例。


② 贴吧首页推荐下拉

1.动效所在的位置是首页顶部的tab栏;

2.动效由4部分组成,同时进行:a.推荐面板向下延伸;b.下拉控件转化为上拉控件;c.背景部分渐渐变暗;d.原来的栏目文字消失,同时以新的样式浮现并下移至所在位置,tab左边浮现“切换栏目”。

3.在我的理解看来,百度贴吧的“首页”相当于“发现”页面,用户来到这个页面是为了探索新的内容,而贴吧将这些内容做了不同的分类,方便用户有目的性的筛选。

4.我们来看这个动效有什么具体的作用:a、d 引导用户将注意力转移到新展开的面板,过渡自然,用户顺利完成当前的任务;c 使页面的重要内容得以凸显,完成关键内容的呈现,使用户完成任务不受干扰;b 是控件的转化,告诉用户这里变成了“上拉”控件,点击可向上收回面板。

总的来说,这个动效是tab超过显示区域的一种扩展方式的方案——平面内左右滑动+立体空间内展开。这两个方案都是为了展示超出显示区域的内容,但展开收起的动效更适合数量更多的栏目管理。

5.当小明切换到首页,看到tab栏未显示完的文字以及向下的控件,他尝试将tab栏向左滑动,发现能显示更多内容,他又点击向下控件,发现内容会以展开的形式出现。这样小明就明白如何查看不同分类的内容了。

相关文章

  • 交互动效- day①

    在分析一个动效时,我会以这样的思路来思考:动效所在的页面和位置——这是一个怎样的动效——这个页面的使用场景是怎样的...

  • 交互动效- day②

    还是按照“动效所在的页面和位置——这是一个怎样的动效——这个页面的使用场景是怎样的——为什么要这样设计——是否达到...

  • 交互动效- day ③

    “动效所在的页面和位置——这是一个怎样的动效——这个页面的使用场景是怎样的——为什么要这样设计——是否达到设计目标...

  • 交互动效- day ④

    “动效所在的页面和位置——这是一个怎样的动效——这个页面的使用场景是怎样的——为什么要这样设计——是否达到设计目标...

  • 交互动效- day ⑤

    “动效所在的页面和位置——这是一个怎样的动效——这个页面的使用场景是怎样的——为什么要这样设计——是否达到设计目标...

  • 交互动效- day ⑥

    “动效所在的页面和位置——这是一个怎样的动效——这个页面的使用场景是怎样的——为什么要这样设计——是否达到设计目标...

  • 手机动效设计分析

    使用动效的目的: 常见的交互动效: 交互动效设计基本原则 创新交互动效设计 优秀手机动效应用 我们的产品可以借鉴地...

  • #交互动效#

    使用PPT做动效 1.牢记设计目标 不为动效而动效,思考需求和场景,确定目标; 2.快速展示呈现 只为快速准确地表...

  • 交互动效的设计与落地(上)

    什么是交互动效? 交互动效是指展现界面间的转换或界面内元素变化的交互反馈,分为动:动作,即用户操作;效:效果,即界...

  • 乂学智适应教育——人机对战

    以下是部分交互动效演示

网友评论

      本文标题:交互动效- day②

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