产品设计之翻页设计
翻页是网站中最常用的功能,虽然占地不多,但它在交互设计,程序算法上也是一个表现比较突出的功能。
观察了一些网站,把个人认为翻页功能的几个体现点介绍一下:
1.体现当前页数和总页数
立意:给用户一个预期值,让用户知道当前所在位置和翻多少页就到页尾了。
表现形式:第(5/20)页 或 (5/20)
2.上下翻页
立意:让用户可以方便的回退到上一页或翻到下一页继续浏览
表现形式:上一页 下一页 或 < >
3.首页末页
立意:让用户很快的回到第一页或到达最后一页
表现形式: 首页 末页 或<< >>
4.显示页数
立意:让用户可以跨页浏览信息
表现形式:1 2 3 4 5 6....21 22
5.快速跳转
立意:让用户有目的性的跳转到目标页
表现形式:到第 页 确定
6.显示数据总量
立意:让用户对此翻页能看到多少内容很明白
表现形式:共XX条(个等单位)
其他介绍:
A.上一页和下一页根据使用的频率设计,例如下一页使用比较多,就做得突出些,上一页使用比较少,做的可以不太明显。
B.最后一页根据数据量的多少,可以不做,但第一页必须要做。
C.根据规则,不必显示所有数据的,可以翻一定页数后,就不能再翻页了。
D.显示页数可以根据需要断续显示。比如1 2 3 ....5 6 ....21 22或1 2 3 4 5 6 在翻到第3页的时候显示1 ....3 4 5 6 也可以在翻到第6页的时候再显示1....6 7 8 9
E.当前页显示页数和其他页表现形式不同,例如可以用框或不同颜色或当前页不可点击等方式来表现
F.可以使用不同的颜色来突出,例如当前页,访问过的链接颜色等
G.好的翻页设计对SEO也是有用处的,做法是显示可以点击的页数多些和页数的链接使用静态或为静态的URL。
翻页是网站中最常用的功能,虽然占地不多,但它在交互设计,程序算法上也是一个表现比较突出的功能。
观察了一些网站,把个人认为翻页功能的几个体现点介绍一下:
1.体现当前页数和总页数
立意:给用户一个预期值,让用户知道当前所在位置和翻多少页就到页尾了。
表现形式:第(5/20)页 或 (5/20)
2.上下翻页
立意:让用户可以方便的回退到上一页或翻到下一页继续浏览
表现形式:上一页 下一页 或 < >
3.首页末页
立意:让用户很快的回到第一页或到达最后一页
表现形式: 首页 末页 或<< >>
4.显示页数
立意:让用户可以跨页浏览信息
表现形式:1 2 3 4 5 6....21 22
5.快速跳转
立意:让用户有目的性的跳转到目标页
表现形式:到第 页 确定
6.显示数据总量
立意:让用户对此翻页能看到多少内容很明白
表现形式:共XX条(个等单位)
其他介绍:
A.上一页和下一页根据使用的频率设计,例如下一页使用比较多,就做得突出些,上一页使用比较少,做的可以不太明显。
B.最后一页根据数据量的多少,可以不做,但第一页必须要做。
C.根据规则,不必显示所有数据的,可以翻一定页数后,就不能再翻页了。
D.显示页数可以根据需要断续显示。比如1 2 3 ....5 6 ....21 22或1 2 3 4 5 6 在翻到第3页的时候显示1 ....3 4 5 6 也可以在翻到第6页的时候再显示1....6 7 8 9
E.当前页显示页数和其他页表现形式不同,例如可以用框或不同颜色或当前页不可点击等方式来表现
F.可以使用不同的颜色来突出,例如当前页,访问过的链接颜色等
G.好的翻页设计对SEO也是有用处的,做法是显示可以点击的页数多些和页数的链接使用静态或为静态的URL。
我比较中意的翻页方式:
共300条 第(5/22)页 上一页 1 2 3 4 5 6 7 8 ...22 下一页 到第 页 确定
一直显示第一页和末页 翻到第8页的时候,显示下一组页数显示
当前页不可点击,并用不同颜色表现出来
