还是按照“动效所在的页面和位置——这是一个怎样的动效——这个页面的使用场景是怎样的——为什么要这样设计——是否达到设计目标”的思路,分析第二个案例。
② 贴吧首页推荐下拉
1.动效所在的位置是首页顶部的tab栏;
2.动效由4部分组成,同时进行:a.推荐面板向下延伸;b.下拉控件转化为上拉控件;c.背景部分渐渐变暗;d.原来的栏目文字消失,同时以新的样式浮现并下移至所在位置,tab左边浮现“切换栏目”。
3.在我的理解看来,百度贴吧的“首页”相当于“发现”页面,用户来到这个页面是为了探索新的内容,而贴吧将这些内容做了不同的分类,方便用户有目的性的筛选。
4.我们来看这个动效有什么具体的作用:a、d 引导用户将注意力转移到新展开的面板,过渡自然,用户顺利完成当前的任务;c 使页面的重要内容得以凸显,完成关键内容的呈现,使用户完成任务不受干扰;b 是控件的转化,告诉用户这里变成了“上拉”控件,点击可向上收回面板。
总的来说,这个动效是tab超过显示区域的一种扩展方式的方案——平面内左右滑动+立体空间内展开。这两个方案都是为了展示超出显示区域的内容,但展开收起的动效更适合数量更多的栏目管理。
5.当小明切换到首页,看到tab栏未显示完的文字以及向下的控件,他尝试将tab栏向左滑动,发现能显示更多内容,他又点击向下控件,发现内容会以展开的形式出现。这样小明就明白如何查看不同分类的内容了。