category: 交互设计

Tags: ,

创新式翻页

看到这么一个关于翻页的设计:

1.没有常见的页码样式。

2.也页面的第一屏的最下端有一个“more results”的button.

3.点击“more results”后,在下方展开更多搜索结果,展开的高度为向下扩展一屏。同时,“more results”的button也扩展到第二屏的最下方。如图:
image

4.依次点击可以看到更多的页面

大家可以点击这里体验具体的效果。

这是一个非常新颖的交互方式。我印象中在微软live search的曾经一个测试版本用过类似翻页。他的好处在于将使页面加载的过程在当前页面内完成。相比翻页要重新载入新的页面,这种方式还可以满足加载过程中查看以前页面的内容。这样一个优点就极大的节省了用户的等待时间。

统计数据显示用户在搜索结果页面寻找内容时,翻页一般不会超过10页,所以这种翻页方式是满足常态下的翻页需求的。

引申一下,这种more的概念跟古代的简书类似。古代的简书是由很多片非常窄的竹片串接而成,在每片竹片上写字而成书,为便于存储,人们便将简书卷成书卷存储。阅读时,先展开一部分书卷,阅读完毕后再慢慢展开更多,直至读完。

2008412153627140

当然,这种翻页方式并不是很完美,有些需求它还暂时无法满足,比如:跳页;页码定位等等。但是这种翻页的思路值得我们去思考和优化。

ps:在北京的朋友上班时是不是经常遇到订餐的烦恼?我推荐一个在线订餐的网站:豆丁。你可以在他们网站上选择你要的菜,提交后他们的客服帮你联系饭店送餐,就是这么简单。点击这里注册豆丁,他们还提供积分奖励的哇。

Tags: ,

15 Responses to “创新式翻页”

  1. riaz Says:

    Google reader翻页就是类这种形式的啊,不过机子配置不高翻出来的内容多了就很卡了.

    [回复此评论]

  2. weilaixu Says:

    如果能够在点击“more results”后,页面自动将新打开内容滚动到浏览器上方,应该更好一点!

    [回复此评论]

  3. yellow Says:

    这种就类似google reader的翻页,不过google reader的不用再点按钮,直接下拉到最低的时候就会载入下一页或更多的内容

    缺点是,如果要看很后面的东西,需要不停的向下翻和等待载入…

    [回复此评论]

    Banlon Reply:

    这个缺点造成用户在使用时感到对产品的不可控。所以感觉不太好。不过另外一点,使用滚轮滚动的时候就不会出现这个不可控的感觉。

    [回复此评论]

  4. 麦田 Says:

    晕,我在示例网站上,楞没找到在哪里翻页。

    [回复此评论]

    Banlon Reply:

    没有页码。而是more results

    [回复此评论]

  5. alvin Says:

    不错的翻页,
    可以在添加新页后,添加该页码进一个当前页列表,固定在页面某一位置,
    方便用户点击跳转到该页上,
    再增加最大显示页数的限制,比如:10页。

    [回复此评论]

  6. 找乐子 Says:

    效果是挺好的,不知道如果数据很多的话,页面太长,浏览器会不会很卡

    [回复此评论]

  7. Yuancheng Says:

    GreaseMonkey下有一个script: Pagerization
    可以让用户在访问baidu、gooogle、digg、flickr等网站时,看到第一屏结束部分,自动载入下一屏。

    [回复此评论]

  8. Alan.Yan Says:

    在示例网站上,该交互方式示例的右侧的另一个示例,就是采用响应页面滚动条到最底端的时候载入更多内容,无需做点击操作。
    我觉得两种方式各有利弊,按钮点击方式符合大多数人的阅读习惯,通过点击类似于“more”的按钮来查看更多;滚动条方式可以节省用户点击,但是会给不熟悉的用户造成疑惑“为什么我一直往下滚动总是有内容出现,是不是页面没有载入完毕?”。

    [回复此评论]

  9. iqst Says:

    google reader 里是自动的,不用再点击,用起来很舒服

    前提是配置要高,否则卡,

    [回复此评论]

  10. 私房猫 Says:

    恩,viewzi,以前用过,除了它的翻页方式,还有它的播放读取时的交互设计,也感觉非常的自然,很喜欢viewzi的操作方式,简单,明了…^^

    [回复此评论]

  11. 醉中仙 Says:

    有启发

    [回复此评论]

  12. Jimmy Says:

    我反而更关注播放读取时的交互设计,就如私房猫说的那样~

    [回复此评论]

  13. cxystone Says:

    不错

    [回复此评论]

Leave a Reply