带页码的翻页体验与设计比较(1)

...

别看翻页就占那么点儿地方,它体现的是市场的策略、程序的算法和交互设计。我选择了 AmazonGoogleFlickr新浪淘宝这五个网站,体验他们的翻页设计。这几个站点应该还算有代表性,Amazon 是国外购物网站,Google 是搜索引擎,Flickr 是 Web 2.0 和 Yahoo 的代表,新浪是中国门户,淘宝是国内购物站点(同时还拥有优秀的设计团队)。

Amazon 商品列表页的翻页

带页码的翻页体验与设计比较

  • 是五个网站中唯一一个区分访问过、没访问过的链接的颜色;
  • 不需要“上一页”、“下一页”的时候就不显示;
  • 第一页的链接永远存在;
  • 告知用户列表总数量和当前显示的数量(Amazon有些页面将数量显示在列表顶部);
  • 不提供所有的页,上图中 400 页是极限,400 页之后的内容可以通过分类选择来缩小范围(同时给出提示)。

Google 搜索结果的翻页

带页码的翻页体验与设计比较

  • 富有创意的设计;
  • 不需要“上一页”、“下一页”的时候就不显示;
  • “上一页”“下一页”的链接区域很大,容易点;
  • 不提供所有的页,上图中 100 页是极限,100 页之后的内容或许可以更换关键词重新搜索,但是没有提示。

Flickr 照片列表的翻页

带页码的翻页体验与设计比较

  • “上一页”“下一页”永远显示,但不同情况显示不同样式;
  • 按了“上一页”或“下一页”之后则边框加粗(成为重点),引导你继续往下点;
  • 告知用户列表的总数量;
  • 数量少得情况下,提供了“最后一页”的链接(图上没有);
  • 可以访问到所有的页,可惜如上图所示超过一定的页码,显示上有问题(IE 和 FF 都这样)。

继续阅读
C#设计模式学习之一:开篇
C#设计模式学习之二:Singleton
C#设计模式学习之三:Abstract Factory
C#设计模式学习之四:Factory Method
C#设计模式学习之八:Facade
提升网页设计效果的方法和诀窍
网站设计的主要方面
学网页设计与网页制作,你该做些什么?
优秀首页设计应该达到的四个目标
发表评论

昵称:
最新评论
暂时没有评论!