设计模式:Pagination(分页,标记页数)

模式库

在模式库里,我将列出所有电子商务网站需要的模式.以下将罗列出经典常用的模式案例,我也试图让这些模式看起来更有趣味性与实用性。(Yahoo模式库也有对Pattern的一种定义。)

模式归属类别

为了方便调用和维护模式库中的各种模式,首先将模式库中的模式分成三大类:用户需求,应用需求,语境下的设计.在用户需求类别中,有一种类型叫基本交互。这里我将从这个纬度把基本交互中所涉及的模式一一罗列讲解。

Pagination(分页,标记页数)

问题摘要

用户需要查看数据的一个子集,却发现所有数据是显示在一页的,这时候查看变得非常不容易。

实例

何时使用

当一个屏幕不能承载更多的数据时。
感兴趣的项目通常可以在前几页找到。
需要深入探索数据项,而非考虑内容显示在一个滚动区域。

解决办法

综述:打破完整数据,分成更小的项目,顺序显示这些数据和单独序列页。提供分页控制一页一页地浏览。提供链接让用户浏览网页的前一页和后一页的这种行动。此外,提供连结到最开始和结束的资料组 (第一个和最后一个)。如果数据集是可预知数量,就显示一个链接的最后一页。如果数据集是不可预知数量或显示有可能是不同规模的(例如,来自于搜索引擎的结果数据),请不用担心要显示链接到的最后一页。

项目分页

拆分项目列表成为一个序列的网页。
提供可访问前一页和下一页网页信息的链接。
提供可跳转到浏览第一页和最后一个页面的链接。
提供用户正在浏览的什么类型的对象信息。

提供用户正在浏览一套物体的有关信息.使用形式:”[$ObjectName]s [DisplayedItemRange] of [TotalItems]“
本环节的顺序如下:第一页,上一页,下一页,最后。
使用的图形箭头,以增加链接的目标大小。
显示翻页在不可用情况的管理显示状态。

搜索分页

使信息转化为按相关性分类排序的一系列网页。
提供分页控制来提供访问分页内容。

分页控制

显示导航控件作为一行链接。
本环节的顺序如下: ‘前一页’ ,网页链接, ‘后一页’。
在标签’前一页’后,显示左箭头。
在标签’下一页’前,显示右箭头。
使用可用鼠标点击的箭头。
网页链接应设置包含最多10个网页链接。如果有少页的结果存在,只显示网页上提供的网页链接。
当网页在1-6页中时,该网页链接应始终从’1 ‘开始。
当在6 页(7页以后)的任意网页上,该网页链接起始应在当前页面减去5 。例如,当第7页,第一页将是2 ( 7-5= 2 )和最后一页将11 (仍显示10页)。

第一页的结果不会有显示 ‘上一页’的标签或箭头。
结果的最后一页不会显示’下一页’的标签或箭头。
当前网页的页码链接不显示超链接。
最后在分页控制区上方加个结果页的标签。

基本原理

项目分页

显示箭头图形有助于区分链接,并提供更大的点击目标。
与搜索分页不同,在任何时候,分页控件都是可见的(即使禁用),当出现无法控制分页时,这可以防止用户分心。

搜索分页

显示箭头图形有助于区分联系,并提供更大的点击目标。
结合上下文背景,增加不可控状态显示箭头价值不大原因有:
(1)这些显示箭头,经常显示可打开折叠层。
(2)当第一页的结果已组合成绝大多数的综合浏览量。展示不可用“前一页”控制翻页,这些是没有什么附加价值的。
虽然“第一页”链接很有价值,但也要与呈现在随机访问的链接功能竞争。
“最后”链接是没有什么价值的,因为结果是按相关性排序的,这也是问题,因为结果总数(因此,最后的结果)可能不知道。

同类模式图片展示

时间: 2024-08-04 05:08:06

设计模式:Pagination(分页,标记页数)的相关文章

交互设计模式(二)-Pagination(分页,标记页数)

上期回顾:交互设计模式(一)-前言 [版权声明]:版权归作者Alite所有,转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.alitedesign.com 模式库 在模式库里,我将列出所有电子商务网站需要的模式.以下将罗列出经典常用的模式案例,我也试图让这些模式看起来更有趣味性与实用性.(Yahoo模式库也有对Pattern的一种定义.) 模式归属类别 为了方便调用和维护模式库中的各种模式,首先将模式库中的模式分成三大类:用户需求,应用需求,语境下的设计.在用户需求

EasyUI Pagination 分页的两种做法小结_jquery

EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,一种是datagrid默认机制,另一种是利用 Ajax 获取数据并填充 Datagrid,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: public JsonResult GetQuestionUnit() { // easyui datagrid 自身会通过 post 的形式传递 rows and page int pageSize = Con

swftools-java 中使用FlexPaper分页加载获得总页数

问题描述 java 中使用FlexPaper分页加载获得总页数 java项目中用FlexPaper + swfTools 加载pdf格式的文档 分页时执行: C:SWFToolspdf2swf.exe Paper.pdf -o Paper%.swf -f -T 9 -t -s storeallcharacters FlexPaper控件配置加载SwfFile的地方,采用: {filename[*,padding],total pages} 但怎样获得总页数(total pages)? 解决方案

ligerui-LigerUI 表格分页查询显示页数不对,源码bug 如何修改

问题描述 LigerUI 表格分页查询显示页数不对,源码bug 如何修改 将usePager置为true,增加查询功能,点击最后一页的箭头按钮,然后再点击查询,在页码栏会显示错误求大牛帮忙解决.此部分是在源码中的 解决方案 http://my.oschina.net/lishixi/blog/87091

javaweb-请问条件查询怎么让分页页数不会跳回第一页,留在本页面,很奇葩的需求,请做过的指教下,谢谢

问题描述 请问条件查询怎么让分页页数不会跳回第一页,留在本页面,很奇葩的需求,请做过的指教下,谢谢 请问条件查询怎么让分页页数不会跳回第一页,留在本页面,很奇葩的需求,请做过的指教下,谢谢 解决方案 查询的时候就不能一次都查出来,要设置pagesize,然后做一个分页控件传入你要转到的页数值,再到数据库 查询绑定 ,一般你要在数据库做一个存储过程来实现 解决方案二: 记住当前页码就行啊.我们也是这么做的. 检索的生活把当前的检索条件和页码记住.

extjs-Extjs5怎么获取grid分页中当前的页数

问题描述 Extjs5怎么获取grid分页中当前的页数 获取grid分页中当前的页数,将值传到后台图片中的当前页 解决方案 ext会自动发送但前页到服务器,键名称为page

mssql 存储过程分页(同时返回总页数)

mssql 存储过程分页(同时返回总页数) 没有MySql般方便的limit分页,在MSSQL中需要分页查询数据的话,就只好写存储过程了... not in方式的分页性能差,创建变量表的方式相对来说,应该要好些.(MSSQL2000) 之前都是获取分页数据.获取数据总数分开写,也就是做两次查询. 某天突然想了想,干脆把这两步操作都写到分页查询里,返回分页数据的同时,把数据总数也返回. 这么做有什么好处呢? 1.减少一次数据库教程请求. 2.查询条件很多时,就只需拼一次SQL了. 3.方便维护 4

hibernate 分页后可以得到 总共的记录数 和总页数 页面上表格 合并单元格后,数字不正确

问题描述 我的记录的显示是通过table 来显示的 但是由于记录中显示要合并一些行,而导致页数和记录数都不正确,不知道如何处理好一些. 解决方案 合并行的工作不能写在sql中吗?例如group by ...

.net-如何把数据库里的东西绑定到页面,然后选择页数打开。

问题描述 如何把数据库里的东西绑定到页面,然后选择页数打开. 求助,用dropdownlist设置页数,页面需要加什么控件吗,如何实现?? 解决方案 分页最好使用存储过程进行分页,速度快.有现成的分页存储过程可以使用.http://www.cnblogs.com/vagerent/archive/2007/10/17/927825.html 显示的时候,存储过程返回总页数的,给dropdownlist绑定一下就可以. 解决方案二: http://blog.sina.com.cn/s/blog_4