滚动后出现顶部固定栏的适用情况

尹广磊 · 发表于 2012-4-8 11:02:50

我印象中好像是Gmail较早的出现了这样的交互效果，
随着鼠标的向下滚动那行操作栏会固定在页面顶部，方便对邮件进行快速操作。
（该交互效果存在在Gmail的旧版中，新版已经换了另外的方式）

相关示例：用Axure7.0制作窗口滚动中固定在顶部的导航栏
http://www.hiaxure.com/thread-9258-1-1.html

屏幕快照 2012-04-08 上午10.30.56.jpg

后来，很多网站学会了这一交互效果。下面找了一个页面比较干净的例子。
网址：http://news.xineurope.com/list-10-1.html

社会 - 欧洲新闻.jpg

----------------------------------------------------------------------------

现在想说一下这一交互效果的适用情况：

1. 像Gmail示例那样，对于可能频繁操作的任务，
跟随着放在固定位置做为一个快捷功能是比较合适的。

2. 像第二个示例这样，阅读是首要任务，
在各个频道间来回切换并不是十分频繁或特别有必要，
相反，像笔记本用户分辨率较低的时候，
增加了一行固定栏反而让有效阅读区域减少，所以并不是太适用。

3. 对于这一交互效果，其实首选是放在左右固定位置上更好，
仅当左右位置内容不方便时，放在上面占一个比较小的高度，
与频繁操作任务有关，才变得可以接受。
下面这个是一个固定在左侧的导航栏：
http://www.hiaxure.com/viewthread.php?tid=5621

----------------------------------------------------------------------------

最近在一个移动应用上见到一个交互效果，我觉得可以给我们一些更多的启发。
这个应用是@胡震生先生推荐给我，试用一下他们开发的iPhone应用“微拍”。

这个应用顶部有一个导航栏，像正常浏览一样，
内容被向下滚动之后，导航栏就会滚出屏幕范围而看不见。
但是，一旦你往回看，内容开始被向上滚动时，导航栏马上就会出现，
而不是像本以为的要滚动到内容的顶端，才可以看到导航栏。

我个人觉得这一点交互的处理，可以给我们上面那样的示例2的应用更多的启示。
既没有占用到有效阅读区域的高度，同时又给人带来了方便，
是个不错的交互细节处理效果，值得学习。

像“回到顶部”，你知道是向下滚动过之后再出现。
微拍的这个例子，刚好是反着，回到顶部切换导航，是开始向上滚动就马上出现。

猜拳 · 发表于 2012-4-8 12:48:39

第二个案例方法酷，合理多了。谢谢分享。

yingyingc17 · 发表于 2012-5-3 14:45:22

有没有说怎么做啊。。大神

于定甲 · 发表于 2012-5-3 15:32:44

向上翻动，并不一点有想切换导航的需求啊。

我心_李力 · 发表于 2012-5-12 15:02:28

微拍这个设计好

离开了水的鱼 · 发表于 2012-11-29 18:21:35

关键是这个东西怎么做？各位大神，有知道的不？

程长金 · 发表于 2013-4-1 22:54:06

老师很专业。

hnzyq24 · 发表于 2013-4-2 16:42:07

这个用axure6.5的实现是将要固定的区域使用动态面板，然后在动态面板上鼠标点击右键，选择编辑内容，选择固定到浏览器，设置固定的区域就ok啦

wangbbs2007 · 发表于 2013-4-14 12:21:04

8# hnzyq24
你说的这个是一直固定在指定的位置. 我想当滚动到制定的位置时才置顶, 如何实现

创意人生 · 发表于 2013-4-15 12:05:45

设置两个一样内容的导航栏，并对齐，其中一个设置为隐藏的动态面板，并且固定位置，下方某区域设置热区，进入热区后再显示那个隐藏的动态面板

bipolor · 发表于 2013-4-18 17:22:17

这个用axure6.5的实现是将要固定的区域使用动态面板，然后在动态面板上鼠标点击右键，选择编辑内容，选择固定到浏览器，设置固定的区域就ok啦
hnzyq24 发表于 2013-4-2 16:42

是这样的，很实用！

小絮 · 发表于 2013-12-26 18:03:44

微拍的那个交互方式，现在有些APP也有再用，比如美柚，我觉得很方便，在手机有限的空间下，这种交互模式值得推广，赞一个

英华沉浮录 · 发表于 2013-12-30 18:27:01

10# 创意人生

进入热区后再显示那个隐藏的动态面板

这一步如何实现呢？

曾栋春 · 发表于 2014-1-8 14:12:28

其实可以介绍一下如何实现

[交互文章] 滚动后出现顶部固定栏的适用情况