查看: 1023|回复: 0
打印 上一主题 下一主题

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

[复制链接]

6

主题

7

帖子

-25

积分

限制用户

积分
-25
跳转到指定楼层
楼主
发表于 2014-8-9 01:20:58 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
[/url]

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


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

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

下载 (109.34 KB)
2012-4-8 11:05




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

下载 (103.66 KB)
2012-4-8 11:32




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

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

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

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

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


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

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

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

下载 (85.8 KB)
2012-4-8 12:17




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


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


收藏分享评分

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?马上注册

x
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

毒镜头:老镜头、摄影器材资料库、老镜头样片、摄影
爱评测 aipingce.com  
快速回复 返回顶部 返回列表