页码条在网页设计上是必不可少的,因为你不可能老是提供一个按钮“下一页”,这样浏览者会变得很烦躁的。然而,页码的设计也是很讲究的,要好看、简洁还是花哨呢?有些网站的页码设计得非常漂亮,而有些却让人摸不着头脑。这篇文章翻译自Smashing Magizine,列出出将近60个网站的页码设计,当中哪个失败,哪个漂亮,哪个让人摸不着头脑,哪个你最喜欢呢?还是由你来判断吧!点击图片可进入相应的网站。

首先看两个失败的范例下面这个页码设计得色彩过于清淡。

各式各样的分页导航条_网页设计

 

而这个页码设计得虽然漂亮,但到底现在是第一页还是第二页呢?如果是第一页,为什么第二页会是白色的呢?

各式各样的分页导航条_网页设计_02

下面这两个是否略显寒酸呢

各式各样的分页导航条_网页设计_03
各式各样的分页导航条_网页设计_04

比较有创意的页码条:

各式各样的分页导航条_网页设计_05
各式各样的分页导航条_网页设计_06

 

简洁而好看实用的页码条

各式各样的分页导航条_网页设计_07

各式各样的分页导航条_网页设计_08

各式各样的分页导航条_网页设计_09

各式各样的分页导航条_网页设计_10

各式各样的分页导航条_网页设计_11

各式各样的分页导航条_网页设计_12

各式各样的分页导航条_网页设计_13

各式各样的分页导航条_网页设计_14

各式各样的分页导航条_网页设计_15

漂亮实用页码条:

各式各样的分页导航条_网页设计_16

各式各样的分页导航条_网页设计_17

各式各样的分页导航条_网页设计_18

各式各样的分页导航条_网页设计_19

各式各样的分页导航条_网页设计_20

各式各样的分页导航条_网页设计_21

各式各样的分页导航条_网页设计_22

各式各样的分页导航条_网页设计_23

各式各样的分页导航条_网页设计_24

各式各样的分页导航条_网页设计_25

各式各样的分页导航条_网页设计_26

各式各样的分页导航条_网页设计_27

各式各样的分页导航条_网页设计_28

各式各样的分页导航条_网页设计_29

各式各样的分页导航条_网页设计_30

各式各样的分页导航条_网页设计_31

各式各样的分页导航条_网页设计_32

各式各样的分页导航条_网页设计_33

各式各样的分页导航条_网页设计_34

各式各样的分页导航条_网页设计_35

各式各样的分页导航条_网页设计_36

各式各样的分页导航条_网页设计_37

各式各样的分页导航条_网页设计_38

各式各样的分页导航条_网页设计_39

各式各样的分页导航条_网页设计_40

各式各样的分页导航条_网页设计_41

各式各样的分页导航条_网页设计_42

各式各样的分页导航条_网页设计_43

各式各样的分页导航条_网页设计_44

各式各样的分页导航条_网页设计_45

各式各样的分页导航条_网页设计_46

各式各样的分页导航条_网页设计_47

各式各样的分页导航条_网页设计_48

各式各样的分页导航条_网页设计_49

各式各样的分页导航条_网页设计_50

各式各样的分页导航条_网页设计_51

各式各样的分页导航条_网页设计_52

各式各样的分页导航条_网页设计_53

各式各样的分页导航条_网页设计_54

各式各样的分页导航条_网页设计_55

提供选项的页码条

各式各样的分页导航条_网页设计_56

各式各样的分页导航条_网页设计_57

各式各样的分页导航条_网页设计_58

一些特别的:

各式各样的分页导航条_网页设计_59

各式各样的分页导航条_网页设计_60

其实页码不需要漂亮实用就够了。