网站分页导航样式改良计划
昨天面试了一个做“用户交互设计”的人，颇有感触。趁着比较闲，写一篇优化网站的分页导航的文章吧，路过的请轻拍..
所谓网站分页导航，就是如图所示的这种了：
分页导航样式
这张图片截取自我收集的一个分页导航制作网页。网站分页导航的作用，就是在单网页内容较多，需要分页显示的时候，提供给用户进行前后翻页，以便于浏览更多内容。
在设计分页导航的时候，可参考这些要点：
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啊网易啊什么的美工还是做的很好的，我们可以到处看看，“采众家之所长”，及时学习新技术。比如下面这个，是淘宝商城的分页导航
