按照惯例,年底的 淘宝 的确是到了「需要改版的时候」。这次新版的淘宝首页上线,乍看并没有多少夺人眼球的地方,但仔细揣摩其中的细节,还是发现了不少的改变。
其中有一点就是感觉页面留白过多,仔细看了下发现是页宽从 原来的 960px 拉伸至 1000px。
不要小看这个增加了的 40px 页宽,这对于设计师们而言可能是做了个「异常艰难的决定」。
混沌时期
还记得用 Win98 拨号上网的时代吗?那时候分辨率也小得可怜,800x600 的标配分辨率甚至都不及当前的某个高端智能手机。
不知道什么时候开始,网页的页宽有了个经典宽度 600px -- 当然,那时候谁都不会在意它。
960 时代
后来,这个故事变得简单而且老套:随着硬件的发展,分辨率也不断的提升。从 1024x768 到 1280x800 再到 1440x900 甚至更高( 这里有个统计 )。
网页的页宽数字也在不断的增加,比较经典的几个数字为从 600px、740px 直到 960px 。然而这时候标准线出现了,那就是 960 页宽。
以淘宝为例,我印象中 960px 页宽从 2006 年沿用至今(2011)已经整整五年。这相比二十一世纪的前五年的页宽改变趋势而言,这实在是让人感到有些变化不大过于拘泥。
当然,设计师们采用 960 这个数字当作页宽的布局方案也有其道理:
- 其能兼容大部分的屏幕分辨率。800x600 已死,剩下分辨率最小的也有 1024x768。那么,为了更可能多的展现内容,页面的宽度自然会在 800-1024 像素之间,960 设置数值差不多是个中间值,不多不少刚刚好。
- 960px 方便栅格化布局 -- 其实从数学的角度上说,这个观点有点站不住脚。不过 960 页宽的栅格是最早出现的, 同时也是最广泛使用的 (附, 淘宝的栅格系统 )。
打破僵局
既然 960 页宽已经足够好,沿用传统的页宽也并不会犯错,那么回过头来我们再看这次淘宝首页为何要改变成规。
根据我的个人观点,可以总结部分:
- 960 页宽已经显得「过时」,1024x768 像素会像当年的 800x600 一样,迟早会被更大数字的分辨率所淹没。
- 需求的驱动,需要在页面中加入更多的内容。想想页宽增加 40px 乘以页长,整个页面将会多出多少设计和内容填充空间。
- 1000px 这个整数更容易计算和安排栅格 -- 不过从数学上这个说法也很难站住脚。不过整数 1000 的整除数比 960 多多了,也更容易安排。
单单 40 像素的改变,对于「粗心大意」的用户而言似乎无关痛痒(当然,也可以理解为淘宝其实不想让用户过多得在意他们的改变)。
个人觉得 1140 页宽 也是可以考虑的数字。那么,还有会不会有更大的页宽数字出现?我想应该会控制在 1200px 以内, 否则将会给用户阅读带来困扰 。
未来
我们来预测下未来的经典页宽将会是什么数字?说实话我也不知道,这一答案完全在设计师脑子里。有点可以预料到的是,移动上网设备的兴起会有促进两个大的趋势:
- 向下兼容针对小屏幕的弹性页宽( 详见 )。
- 页面布局将会针对不同的设备而定制,因此 800px 以下的页宽将会「复活」。
-- Split --
这次广泛采用 HTML5 标签、加大页宽等等的改变,看得出淘宝一直在做着细节方面的尝试和调整。然而从不谐调的留白、布局的不协调看得出来,淘宝对于新的页宽经验稍显不足。
但愿 1000px 这个页宽将又会是个经典的数字。毕竟,不客气的说,「山寨」淘宝首页的站点实在是太多太多了。
PS,淘宝还给我们留了个小彩蛋,新版在首页搜索框中输入「about:staff」会有惊喜(相应代码在 1970 行开始) :^D
-- EOF --
不过 1000 无论除以 10 还是 12 比 960 舒服多了?
除以12?
想想这句话表述有问题,改之~
我倒是觉得taobao这次改完版首页多出的那个“所有类目”的部分让人看着很奇怪...
960 页宽 落后了。。。现在显示器忒大了。。
“xxx时代的终结”这样的标题,总能让人眼前一亮 血脉膨胀。
淘宝新版蛮不错,但代码中多处用了为协议javascript:void(0);
不算完美
^_^
淘宝新版更加简洁了
不要小看这个增加了的 40px 页宽,这对于设计师们而言可能是做了个“异常艰难的决定”。
怎么就异常艰难了呢?这分明就是由统计的数据说话嘛,不然拿用研的人来干什么呢?不然做用户浏览器,分辨率的统计干嘛呢?
好文,收藏至20ju.com
发个评论不容易,重新提交十几次,才能提交成功,哎!
我以为就是淘宝为了放更多内容而妥协得到的产物,这跟设计潮流无关痛痒
淘宝改版很不错的,我很喜欢。
淘宝的用户难道IE6的比重会小于50%?不过淘宝的创新也肯定引着中国的网站大变,是个好兆头~:)
淘宝的改版,我还是比较喜欢的,看着舒服
1024分辨率都快成非主流啦
从某统计看,1024还是高居30%+啊。
好东西,转载到www.yixieshi.com
960。。。
我量了下,淘宝的页面好像是一1000PX啊
不管怎样,我的网站还是960的
www.365dress.cn
喜欢里面的htnl5和css3
960确实该退出历史舞台了
改版之后,感觉比以前看着舒服多了!~
不明真相的群众围观小明子~
爷,我来你这里测试一下我的gravatar头象~ 嘿嘿
不明真相的群众围观。。。。
未来有无限可能,要我们来创造。
以后都是宽屏时代了!
新年快乐,兔子年快乐!
“不过整数 1000 的整除数比 960 多多了,也更容易安排。”
改了更诡异:
$ factor 1000
1000: 2 2 2 5 5 5
$ factor 960
960: 2 2 2 2 2 2 3 5
2^6 和 2^8 的区别,明显是整除960的数多啊
我看到了水平滚动条
一直喜欢看你写的分析,原创新鲜!不过呢,就是更新速度嘛!慢了点哦,看到后一定要天天更新!哈哈
很是喜欢你的地方,希望能继续更新。