it-swarm.cn

分页最佳实践

我不确定要在可能非常大(超过5,000行)的表上执行某些分页的最佳方法。

我的第一个问题是,每页显示的行数应仅由布局决定,还是也应考虑页数。例如,我应该说<1000显示20行,> = 1000显示30行吗?

下一个问题是,假设用户已尽可能多地过滤了表格并留有50页的信息,那么如何最好地在这些页面之间导航?他们是否应该获得一个输入框以跳至第45页?还是应该用skip(1)skip(5)按钮足够?目前,我不知道最终用户将如何使用这些表,因此我不确定让他们先尝试哪种选项。

最后,是否有人可以分享正确的分页实例?我一直在寻找好的参考资料!

25
Toby

分页是否正确,但这是我在Web应用程序中进行分页的方法:

|< First, << Previous, Page [5] of 12, Next >>, Last >|

外部的四个选项是链接,而Page [5] of 12是一种形式,以[5]作为输入字段。对于启用了JavaScript的用户,我将隐藏“提交”按钮,并在取消焦点事件时提交表单,或输入按键。用户可以选择要显示的行数,可以从下拉菜单中选择:10、20、50、100,全部。除了分页之外,我还提供结果的排序和过滤功能,尽管可能并非在每种情况下都有意义。

编辑

这是我们的Web应用程序模型的摘录,旨在为您提供更好的主意。在此版本中,按钮中省略了这些词,但是在稍有延迟之后,它们作为悬停工具提示出现。但是,您可能会发现,保留单词会带来更高的可用性。

Virtuosi Media's Pagination Example

需要指出的其他几点:

  • “首页”和“上一页”按钮已被禁用,因为它是第一页。
  • 蓝色表示活动的按钮(我将必须通过颜色检查器运行此特定主题,以确保色盲用户能够分辨出区别)。
  • 即使禁用按钮,它们也始终保留。这提供了接口一致性。
  • 由于比例,我选择了输入字段,而不是下拉选择框。如果您有3000页,则不想向下滚动以查找页面
  • 分页被分组为单个视觉组件以指示目的上的相似性。
27
Virtuosi Media

很抱歉获得这样的答案,但是取决于。您拥有什么类型的内容以及用户正在寻找什么?用户的目标是什么?是网站还是应用程序?

在许多情况下,您可以使用无限滚动来避免分页(例如,参见 Google图片搜索 的搜索结果)。

分页的问题是页面本身没有意义。为什么要转到第45页?为什么不38?如果对内容进行了排序,则可以尝试给页面指定有意义的名称(例如字母,日期范围或其他有意义的名称)。每页的行数应尽可能大,因为滚动通常提供比在页面之间导航更好的体验(但是这不是一般规则,并且有一些例外)。

对于示例和良好实践,这是 很棒的文章

12
Kostya

通常,每页的项目数是您根据以下条件确定的:

  • 我要显示哪种数据,给定数量的项目将使页面多长时间?
  • 页面上的X项会对应用程序的性能产生什么影响?
  • 是否要允许用户自定义每页显示的项目数?
  • 如果我关心页面间导航(例如,用户是否关心转到512号特定页面?),那么每页的项目数将如何影响分页的可导航性?
  • 我可以使用哪些分页控件?

如果您回答上述问题,他们将很好地引导您回答第二个问题。分页是您拥有的数据和要显示的项目数的乘积。我的建议是确定用户是否要指定他们要查看的页面。您可以通过进行用户测试以及考虑列出哪种信息来解决这一问题。例如,搜索结果很少具体到足以说出“我想转到第47页”,因为它们通常是按不透明的,不透明的算法排序的。但是,如果要按字母顺序列出姓名,则转到第47页可能非常直观。

同样,您要显示的数据类型也会影响导航,您可能需要考虑多面导航设计模式以简化操作。在我刚刚给出的字母名称示例中,如果您有大量数据,则可以考虑使用字母(A | B | C | D等)和每个字母中的页面进行分页。

具体来说:

  • 我不建议给用户过多的特定控制权,除非您知道事实就是他们想要的
  • 而是在当前页面周围提供填充(1 .. 7 8 [9] 10 11 .. 28)
  • 如果您要对算法进行排序,请包括第一页和最后一页,除非出于性能原因不能这样做。
  • 如果通过算法进行排序,请考虑各种排序选项(例如反转排序顺序)-取决于数据类型

分页正确的示例:

  • Flickr -清楚区分选定,非活动和链接状态;可访问的颜色;填充具有良好点击目标的链接;在当前页面周围填充良好;不太复杂。个人收藏。
  • Funda.nl -荷兰房地产网站,外观精美,简单易读,在分页中也有体现
  • Bing -无BS,极简的版式设计,意味着分页非常微妙,但同时易于使用
  • Google (很明显)-有点花哨,但尽管有很多选择,但仍然感觉简单,甚至给你的脸带来微笑
  • 克里斯·墨西拿(Chris Messina)在Flickr上的设计模式专辑中有 一些分页的好照片
6
Rahul

分页模式:

关于您的第一个问题-我是一致性的粉丝(大多数用户也是)。不要让用户感到困惑,让他们思考为什么这次他们看到更多的行...您甚至可以让他们选择“每页项”,这是非常常见且有用的做法。

3
Dan Barak

用户更喜欢滚动而不是分页。与瞄准小型导航链接相比,操作滚轮要容易得多。

有关分页与滚动的更多内容

1
Miki