960 时代的终结
作者:明城 来源:gracecode.co 发布时间:2011-01-11 19:24:00
按照惯例,年底的淘宝的确是到了“需要改版的时候”。这次新版的淘宝首页上线,乍看并没有多少夺人眼球的地方,但仔细揣摩其中的细节,还是发现了不少的改变。
其中有一点就是感觉页面留白过多,仔细看了下发现是页宽从原来的 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 --


猜你喜欢
- 0.目录1.前言2.安装python3.使用pip下载、安装包3.1 安装Scrapy3.2 安装PyQt3.3 同时安装多个包3.4 pi
- 一 下载安装驱动官方文档https://pkg.go.dev/go.mongodb.org/mongo-driver/mongo下载地址ht
- 我们都知道 vue 中可以使用 modal 来实现 input 内容数据的双向绑定。小程序好像没有提供相应的方法支持,就需要我们自己写了。原
- 问题你正在试着使用正则表达式去匹配一大块的文本,而你需要跨越多行去匹配。解决方案这个问题很典型的出现在当你用点(.)去匹配任意字符的时候,忘
- 本文实例讲述了JavaScript实现五子棋游戏的方法。分享给大家供大家参考,具体如下:最近半个月一直在看深入的学习JavaScript,里
- 使用教程(注意细看总结部分,写了几点,希望有所帮助):1、安装插件:npm install vue-quill-editor2、安装插件依赖
- 思路:使用socket传输文件过程中,如果单次传输每次只能发送一部分数据,如果针对大文件,一次传输肯定是不行的,所以需要我们在传输的时候提前
- 首先要说明的是,这个标题有点标题党的意思,这个 bug 也存在于 IE8 下,在 IE6 和 IE7 下正常。之前写过两篇关于 I
- 在 Golang 中处理浮点数存在着精度问题,而精度问题会带来诸多的麻烦。因此,我们需要使用高精度数来解决这个问题。shopspring/d
- 一、前言作为一个数据库爱好者,自己动手写过简单的SQL解析器以及存储引擎,但感觉还是不够过瘾。<<事务处理-概念与技术>&
- 最近自己准备学习Python,之前也看了点基础知识。做图形这块需要用到OpenCV所以就需要配置环境,之前准备用的是Python3,后来发现
- 最近 W3C 一口气推出 7 个 HTML 工作草案,涵盖了 HTML5,HTML RDF,HTML Microdata,HTM
- 给一个例子 :# -*- coding: utf-8 -*-import matplotlib.pyplot as plt im
- 今天主要给大家介绍如何用pyecharts画各种漂亮的数学图形一、基本极坐标图说简单点,基本极坐标图就是圆形的散点图(柱状图或折线图),代码
- 本节笔者主将要介绍Active Server Page的另一对象Response,Response对象的作用是在向浏览器发送数据。将Resp
- 手动备份1)cmd控制台:mysqldump -uroot -proot 数据库名 [表名1,表名2...] > 文件路径比如:把 d
- 一、创建数据表1、基本语法create table 表名 ( 字段名 字段类型 [字段属性], &n
- 本文为大家分享了Python2.7与Python3.6环境切换的具体方法,供大家参考,具体内容如下系统支持为:Ubuntu18.04系统默认
- 首先简单介绍一下什么叫MySQL;数据库简而言之就是存储数据的仓库,为了方便数据的存储和管理,它将数据按照特定的规律存储在磁盘上。是为了实现
- 目录简述:1. 事务的四大特性2.多事务并发带来的问题3.事务的隔离级别4.演示不同隔离级别出现的问题读未提交读已提交可重复读串行化5.锁机