查看: 18596|回复: 13

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

[复制链接]

513

主题

6310

回帖

7万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
75210
QQ
发表于 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应用“微拍”。

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

IMG_0922.jpg


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


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

0

主题

9

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
QQ
发表于 2012-4-8 12:48:39 | 显示全部楼层
第二个案例方法酷,合理多了。谢谢分享。

0

主题

3

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2012-5-3 14:45:22 | 显示全部楼层
有没有说怎么做啊。。大神

0

主题

27

回帖

19

积分

会员

Rank: 5Rank: 5

积分
19
QQ
发表于 2012-5-3 15:32:44 | 显示全部楼层
向上翻动,并不一点有想切换导航的需求啊。
引导用户做自己想做的事

0

主题

1

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2012-5-12 15:02:28 | 显示全部楼层
微拍这个设计好

0

主题

1

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2012-11-29 18:21:35 | 显示全部楼层
关键是这个东西怎么做?各位大神,有知道的不?

0

主题

81

回帖

169

积分

Axure教程

Rank: 5Rank: 5

积分
169
QQ
发表于 2013-4-1 22:54:06 | 显示全部楼层
老师很专业。

0

主题

33

回帖

124

积分

会员

Rank: 5Rank: 5

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

0

主题

1

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2013-4-14 12:21:04 | 显示全部楼层
8# hnzyq24
你说的这个是一直固定在指定的位置. 我想当滚动到制定的位置时才置顶, 如何实现

0

主题

4

回帖

12

积分

会员

Rank: 5Rank: 5

积分
12
发表于 2013-4-15 12:05:45 | 显示全部楼层
设置两个一样内容的导航栏,并对齐,其中一个设置为隐藏的动态面板,并且固定位置,下方某区域设置热区,进入热区后再显示那个隐藏的动态面板

0

主题

6

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2013-4-18 17:22:17 | 显示全部楼层
这个用axure6.5的实现是将要固定的区域使用动态面板,然后在动态面板上鼠标点击右键,选择编辑内容,选择固定到浏览器,设置固定的区域就ok啦
hnzyq24 发表于 2013-4-2 16:42

是这样的,很实用!

0

主题

4

回帖

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2013-12-26 18:03:44 | 显示全部楼层
微拍的那个交互方式,现在有些APP也有再用,比如美柚,我觉得很方便,在手机有限的空间下,这种交互模式值得推广,赞一个

0

主题

1

回帖

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2013-12-30 18:27:01 | 显示全部楼层
10# 创意人生

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


这一步如何实现呢?

0

主题

1

回帖

10

积分

会员

学人街教父

Rank: 5Rank: 5

积分
10
发表于 2014-1-8 14:12:28 | 显示全部楼层
其实可以介绍一下如何实现
没有什么事情是不可能
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区 |网站地图

GMT+8, 2024-3-29 04:32

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表