网站分页导航样式改良计划

昨天面试了一个做“用户交互设计”的人，颇有感触。趁着比较闲，写一篇优化网站的分页导航的文章吧，路过的请轻拍..

所谓网站分页导航，就是如图所示的这种了：



分页导航样式

这张图片截取自我收集的一个分页导航制作网页。网站分页导航的作用，就是在单网页内容较多，需要分页显示的时候，提供给用户进行前后翻页，以便于浏览更多内容。

在设计分页导航的时候，可参考这些要点：

1，要有便捷的上一页下一页链接。

因为用户在翻了几页后，一般都不清楚自己到底在哪一页了，此时通过上下页翻页，比用眼睛寻找页码判断页面然后翻页要方便的多。

2，最好有页码。

便于随意跳转。如果页码太多，最好有直接跳到最后页和最前页的链接。

3，宽度不能限制死了。

比如说你的页码背景图只适合1-9页这种分页，那建议你不要用这个背景图了，万一有第10页或更多页呢。

所以说，写分页CSS的时候，就不要用width:了，还是用padding吧，容错力更强。

分页导航的样式设计的“潜规则”：

1，当前页码与非当前页码要有明显区分,不然用户真的会找不到自己在哪里。

一般非当前页码是A标签，因为他们是可点击跳转的；而当前页码就不用跳转了，可用span代替，并设置突出的不一样的css样式。

2，明确表示出可点击区

在可点击的页码上，设置背景色或者border，以标明可点击区，这对用户来说很不错。

3，视觉区与可点击区要吻合



例如有分页导航样式如上图。html代码怎么写呢？有的人直接一串A标签搞定，有的人习惯用一串包裹A标签的li来实现。怎样都行，但后者要注意“视觉区与可点击区”的吻合问题。

拿上图来说，视觉区，即每个红色的小方块，就应该是可点击区。如果你用一个li标签来包裹A标签，那要注意把padding什么的加在A标签上而不是li上。如果你加在了li上，那就会出现这种情况：用户以为红色块就是可以点击的，实际上却不是，因为红色的是li,真正的链接是那小小的数字A标签，他必须要把鼠标精确的移动到数字上面，才能点击链接。

这数字有几像素宽呢？恐怕很难点吧

网站分页导航的其他一些注意事项：

1，宽一点点吧

现在上网用户近视的很多，12像素的字体很多人都会嫌小了。所以，分页按钮你也不要弄成12像素了，起码“可点击区”设置宽一点点吧

2，是否真的需要分页导航？

有的网页实际上内容并不多，仅仅出于增加广告展示量的目的就加入分页，不厚道呀

3，多看案例

个人觉得淘宝啊QQ啊网易啊什么的美工还是做的很好的，我们可以到处看看，“采众家之所长”，及时学习新技术。比如下面这个，是淘宝商城的分页导航



原文链接: http://www.jo2.org/archives/284.htm.