Skip to main content

Home/ 互联网之'我的阅读'/ Group items tagged 页码

Rss Feed Group items tagged

ocean wu

带页码的翻页体验与设计比较 - JunChen - 0 views

  • Amazon 商品列表页的翻页 是五个网站中唯一一个区分访问过、没访问过的链接的颜色; 不需要“上一页”、“下一页”的时候就不显示; 第一页的链接永远存在; 告知用户列表总数量和当前显示的数量(Amazon有些页面将数量显示在列表顶部); 不提供所有的页,上图中 400 页是极限,400 页之后的内容可以通过分类选择来缩小范围(同时给出提示)
  • Google 搜索结果的翻页 富有创意的设计; 不需要“上一页”、“下一页”的时候就不显示; “上一页”“下一页”的链接区域很大,容易点; 不提供所有的页,上图中 100 页是极限,100 页之后的内容或许可以更换关键词重新搜索,但是没有提示。
  • Flickr 照片列表的翻页 “上一页”“下一页”永远显示,但不同情况显示不同样式; 按了“上一页”或“下一页”之后则边框加粗(成为重点),引导你继续往下点; 告知用户列表的总数量; 数量少得情况下,提供了“最后一页”的链接(图上没有); 可以访问到所有的页,可惜如上图所示超过一定的页码,显示上有问题(IE 和 FF 都这样)。
  • ...3 more annotations...
  • 新浪文章留言部分的翻页 新浪评论部分的翻页,Ajax 可以拖动翻页(显摆用的); 永远提供“第一页”“最后一页”“上一页”“下一页”的链接,但是样式基本一致没有差别; 告知用户列表的总数量; 提供批量翻页(“上 10 页”)。 但是在新浪博客(新浪比较有代表性的新产品)中,我们也可以看到以下相对比较粗糙的翻页:
  • 新浪博客的翻页 给出了“最后一页”的链接,直接显示为“第 n 页”,如上图中的“第 7 页”; 在单个博客页面上的翻页,以“>>”作为下一页,而不是常见的“>”; 提供了批量翻页(“上 5 页”)。
  • 淘宝商品列表的翻页 永远显示“上一页”“下一页”,并且状态和形状有区分;上一页使用率较低,所以设计的较小; 永远提供“第一页”“最后一页”的链接; 提供页面的跳转,但是默认值为当前页; 在列表的顶部右侧提供了一个简化的翻页,并且与底部的翻页设计一致。
1 - 1 of 1
Showing 20 items per page