Readers: 0 | Updated: 08-14

创新式翻页

Translate Into:

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

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

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

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

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

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

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

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

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

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

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





From The Blogs

西贝的交互设计

01-04
多页面的翻页体验
打算总结交互设计的基本交互方式,把沉淀下来的东西,从脑中再过一下;(引用junchen的观点和图片)今天就从细小的设计因素开始,找出收藏很久的页码的翻页。有的是大家曾经效仿的,也有曾经批判的。但是总结... 查看全文

胡宝介的Blog

01-10
老奸巨猾的阿里巴巴产品列表翻页设计
最近受某500强企业委托,诊断分析了几种不同类型网站的搜索引擎优化SEO情况,并提出我们的改进建议,其中包括部分B2B网站。谈及B2B,自然包括阿里巴巴在内。在分析阿里巴巴网站结构的时候,查看了它的列... 查看全文

X-BetA 世纪资讯

02-05
24款超实用漂亮的Web 2.0风格翻页代码打包下载
Css+Xhtml代码,关键字:web2.0 翻页 页码 实用代码…… 这文章好像很不错喔!我要查阅全文!相关文章:●AutoCAD2007中文版建筑效果图设计教学视频下载●PhotoShop小技巧 ... 查看全文

catch the digital flow | 北极冰仔部落格

03-04
支持 Firefox3 的自动翻页脚本
从 Firefox2 迁移到 Firefox3 后发现,不仅一些扩展无法使用,一些 Greasemonkey 脚本也无法使用了。这里面就包括我最喜欢的自动翻页脚本:Pagerization。 不过不要... 查看全文

JavaEye博客

04-23
rails 分页 翻页 pagination
网站: JavaEye 作者: weibuyu 链接:http://weibuyu.javaeye.com/blog/185562 发表时间: 2008年04月22日声明:本文系JavaEye网站发布... 查看全文

千鳥志

05-11
有时间先后的翻页
在用wordpress这个博客的时候,我很奇怪的发现,最近写的内容排在第一页,而最早写的成了最后页。这显然有悖逻辑,正常的情况应该是最早写的在第一页,就像翻书那样。 去年四月,有天加班我请同事帮我改,... 查看全文

白鸦,以用户为中心的设计

05-21
有时间先后的翻页
搜藏快照 查看全文

WappBlog

2007
视频:Google 测试中带翻页按钮的Google Adsense广告样式
看来Google Adsense又在测试新样式了,这次他们推出了一种带AJAX翻了一番页按钮的广告样式。我们都知道,一般像336×280 或 300×250 这种尺寸规则中的广告最多会出现4-5个广告... 查看全文
More Articles