产品设计之翻页设计

       翻页是网站中最常用的功能,虽然占地不多,但它在交互设计,程序算法上也是一个表现比较突出的功能。

       观察了一些网站,把个人认为翻页功能的几个体现点介绍一下:

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页的时候,显示下一组页数显示

当前页不可点击,并用不同颜色表现出来

相关文章:

大公司开发新产品的原则  (2008-7-13 22:50:9)

产品设计之非法关键字过滤机制  (2008-7-4 22:49:12)

产品设计的价值  (2008-6-24 17:53:2)

产品设计之密保卡  (2008-6-14 0:1:54)

不要轻易改变用户的习惯  (2008-6-12 18:15:36)

产品设计之友情链接  (2008-6-9 0:0:48)

产品设计之登录页面  (2008-6-6 23:18:39)

设计有黏性的功能带动整个产品  (2008-6-4 9:12:47)

产品设计之用户注册  (2008-5-23 16:37:11)

互联网产品设计及研发团队的工作流程  (2008-5-20 17:48:38)

One Response to “产品设计之翻页设计”

Leave a Reply

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。