960 时代的终结

标签: 时代 | 发表时间:2011-01-10 13:00 | 作者:明城 guo
出处:http://www.gracecode.com/

按照惯例,年底的淘宝的确是到了“需要改版的时候”。这次新版的淘宝首页上线,乍看并没有多少夺人眼球的地方,但仔细揣摩其中的细节,还是发现了不少的改变。

http://files.gracecode.com/2011_01_10/1294635311.png

其中有一点就是感觉页面留白过多,仔细看了下发现是页宽从原来的 960px拉伸至 1000px。

http://files.gracecode.com/2011_01_10/1294635263.png

不要小看这个增加了的 40px 页宽,这对于设计师们而言可能是做了个“异常艰难的决定”。

混沌时期

还记得用 Win98 拨号上网的时代吗?那时候分辨率也小得可怜,800x600 的标配分辨率甚至都不及当前的某个高端智能手机。

不知道什么时候开始,网页的页宽有了个经典宽度 600px -- 当然,那时候谁都不会在意它。

960 时代

后来,这个故事变得简单而且老套:随着硬件的发展,分辨率也不断的提升。从 1024x768 到 1280x800 再到 1440x900 甚至更高(这里有个统计)。

http://files.gracecode.com/2011_01_10/1294635802.png

网页的页宽数字也在不断的增加,比较经典的几个数字为从 600px、740px 直到 960px 。然而这时候标准线出现了,那就是 960 页宽。

以淘宝为例,我印象中 960px 页宽从 2006 年沿用至今(2011)已经整整五年。这相比二十一世纪的前五年的页宽改变趋势而言,这实在是让人感到有些变化不大过于拘泥。

当然,设计师们采用 960 这个数字当作页宽的布局方案也有其道理:

  1. 其能兼容大部分的屏幕分辨率。800x600 已死,剩下分辨率最小的也有 1024x768。那么,为了更可能多的展现内容,页面的宽度自然会在 800-1024 像素之间,960 设置数值差不多是个中间值,不多不少刚刚好。
  2. 960px 方便栅格化布局 -- 其实从数学的角度上说,这个观点有点站不住脚。不过 960 页宽的栅格是最早出现的,同时也是最广泛使用的(附,淘宝的栅格系统 )。

打破僵局

既然 960 页宽已经足够好,沿用传统的页宽也并不会犯错,那么回过头来我们再看这次淘宝首页为何要改变成规。

根据我的个人观点,可以总结部分:

  1. 960 页宽已经显得“过时”,1024x768 像素会像当年的 800x600 一样,迟早会被更大数字的分辨率所淹没。
  2. 需求的驱动,需要在页面中加入更多的内容。想想页宽增加 40px 乘以页长,整个页面将会多出多少设计和内容填充空间。
  3. 1000px 这个整数更容易计算和安排栅格 -- 不过从数学上这个说法也很难站住脚。不过整数 1000 的整除数比 960 多多了,也更容易安排。

单单 40 像素的改变,对于“粗心大意”的用户而言似乎无关痛痒(当然,也可以理解为淘宝其实不想让用户过多得在意他们的改变)。

个人觉得 1140 页宽也是可以考虑的数字。那么,还有会不会有更大的页宽数字出现?我想应该会控制在 1200px 以内,否则将会给用户阅读带来困扰

未来

我们来预测下未来的经典页宽将会是什么数字?说实话我也不知道,这一答案完全在设计师脑子里。有点可以预料到的是,移动上网设备的兴起会有促进两个大的趋势:

  1. 向下兼容针对小屏幕的弹性页宽(详见)。
  2. 页面布局将会针对不同的设备而定制,因此 800px 以下的页宽将会“复活”。

-- Split --

这次广泛采用 HTML5 标签、加大页宽等等的改变,看得出淘宝一直在做着细节方面的尝试和调整。然而从不谐调的留白、布局的不协调看得出来,淘宝对于新的页宽经验稍显不足。

但愿 1000px 这个页宽将又会是个经典的数字。毕竟,不客气的说,“山寨”淘宝首页的站点实在是太多太多了。

PS,淘宝还给我们留了个小彩蛋,新版在首页搜索框中输入“about:staff”会有惊喜(相应代码在 1970 行开始) :^D

-- EOF --

相关 [时代] 推荐:

时代精英

- huihui - 牛博国际
何昆阳导演的新作品《时代精英》. 何导演的作品一贯保持他的风格和水准,这部也不列外. 也许由于片中的对话讨论和我平时的所思所想有很多的不谋而合,我觉得这部由其精彩,不知是不是导演本意,在我看来有很多的喜剧效果. 观看《时代精英》:http://www.tudou.com/programs/view/_y0whd2_x3A/ .

食虫时代(《时代周刊》图集)

- Rehtron - 译言-每日精品译文推荐
(马克·彼特森摄影/《时代周刊》).   大卫·乔治·戈登,来自西雅图生物学家与作家,撰写了一本名为《食虫大菜谱》的书,里头收罗了五花八门的昆虫菜谱,蚱蜢、蚂蚁、水甲虫、蜘蛛,应有尽有,不可胜数. 最近,这位戈登先生和另一位昆虫美食大厨大卫·格雷斯一起,就在弗吉尼亚的里士满专门举办了一场昆虫美食现场厨艺秀.

如今的时代

- satan - 乐淘吧
【如今的时代】城管干了警察的活,公车干了公交的活; 二奶干了卧底的活,网友干了侦探的活; 微博干了媒体的活,干爹干了男友的活. 现在的时代,脸蛋漂亮重要,身材更重要. 看图说话17,高科技时代,猫的价值不仅仅是卖萌. 当下的时代,平静的心灵才是真正的奢侈品.  » 非特殊声明本站所有文章,图片,视频全部来自网络,如有侵权>,请通知本站.

生于电子时代

- iFunbox - 爱范儿 · Beats of Bits
by Kevin Kelly from kk.org | 积木 译,转载请注明 ifanr.com 译文链接. 这里有一些朋友和读者讲给我的趣事. 我的朋友有一个 5 岁的小女儿. 他们的家里没有电视,却有好几个电脑. 他带着自己的女儿去拜访别人,那户人家有一个电视. 他的小女儿走到电视那里,找了半天,又看看了电视后面,她问:“鼠标在哪儿.

960 时代的终结

- guo - Gracecode.com
按照惯例,年底的淘宝的确是到了“需要改版的时候”. 这次新版的淘宝首页上线,乍看并没有多少夺人眼球的地方,但仔细揣摩其中的细节,还是发现了不少的改变. 其中有一点就是感觉页面留白过多,仔细看了下发现是页宽从原来的 960px拉伸至 1000px. 不要小看这个增加了的 40px 页宽,这对于设计师们而言可能是做了个“异常艰难的决定”.

高铁时代的恐慌

- 一入侯门深似海 - 极视智库专家——郎咸平
  温州动车追尾是如此的让人痛心. 近期高铁意外频发,是天灾,还是人祸. 之前我们说过了经济为何恐慌,通胀我们慌,房价我们......>>点击查看新浪博客原文.

当AV进入3D时代

- 旺旺 - 黃品源
影片阿凡达将3D电影带入了一个新的时代,同时也引发了一阵新的3D电影热潮,一时间什么电影上面都大大的打个3D来吸引人. 作为新技术应用的最前沿,成人影视当然不会落后,今天发布几个红蓝3D的家庭爱情动作片供大家欣赏. 注意,影片需要搭配红蓝/红绿3D眼镜观看,请自行去淘宝购买. Lenka seduces friend Thomas 高清1080P.

PC 时代即将落幕

- 橙子 - 爱范儿 · Beats of Bits
世界上最大的 PC 制造商惠普将剥离 PC 生产业务,这消息引起很大的震撼. 其实在去年,乔布斯称已经进入后 PC 时代,而今年3月 PC 创始人马克·迪恩(Mark Dean)发表了 PC 时代即将结束言论. 而惠普现在用行动告诉我们 PC 时代真的要终结了. PC 曾经统领数字世界多年,但现在各种数据表明 PC 行业正面临衰退:PC 业务的利润逐年下降,现在降到不到5%.

生于数字时代

- Albert - 师北宸的网络日志
对于生于数字时代的人来说,生活在数字世界意味着什么. 凯文·凯利(Kevin Kelly)在他blog上分享了几则这样的故事,我翻译了几条出来,很有意思:. 我一位朋友有一个不到五岁的女儿. 像很多家庭一样,他们家里有很多电脑设备,但没有电视. 有一天,他带着他女儿去朋友家玩,朋友家有一台电视机. 小丫头走到电视面前,找了一圈,最后绕到电视后面,好奇地问大人们:“鼠标在哪儿.

交叉关联的时代

- 书皮 - 互联网的那点事...
记得有天晚上尝试了ifttt (ifttt.com)这个网站之后,兴奋地久久不能入睡. 这是一个开放的空间,本身没有任何内容,它所做的就是通过调用其他开放型产品的API(例如Facebook、Gmail、Feed等),构建起产品之前的潜在关联. 你通过创建if(触发条件)和then(触发反馈)来实现一些新鲜有趣的服务推送.