Front Website

为什么要用960px?——网页内容宽度分析

液晶还没普及的年代,网页设计需要考虑800×600的分辨率。但如今800×600的分辨率使用率不到2%,已经可以忽略了。比这个分辨率高一级别的1024×768,使用率接近50%(国内),所以很多网站都是以1024的宽度为标准进行设计的,最常见的页面宽度是两种:1004960

早期的网页设计师使用1004px作为页面宽度,是基于这样的考虑:在1024*768的分辨率下打开IE,左边框宽度是2px,右边滚动条的宽度是18px,于是得出宽度就是1004px了。但这种宽度的设置并不利于栅格化布局的计算,如果选择三栏式的布局,就很难平均分配,所以现在很少有使用1004px宽度的网页了。

在比1004小的整数里,可以被较多数字整除的最大整数是960:

双栏布局:960/2=480

三栏布局:960/3=320

四栏布局:960/4=240

所以,大多数设计师选择了960px作为网页的宽度。

确定了网页的宽度之后,接下来确定内容的宽度。通常我们都是直接按照黄金比例来进行划分,也就是将内容设定为600px,余下部分用作侧边导航。但内容的宽度还需要计算间距、留白,以及考虑文字和图片的搭配比例,比较规范的做法是绘制布局框架图

一、自建布局框架图

自制布局框架图适用于不借用电脑,只在纸上画设计草图的阶段。上图是Jason Beaird在Principles of Beautifu Web Design提出的一种内容布局方式,首先将一张960px的画布划分为九等份(上图前两步),再把第一行切出三分之一,最后再把每一列都对半分,就得到一张布局框架图了。依照此布局图安排内容即可(图片来自Principles of Beautifu Web Design)

二、模板布局框架图

960 Grid system中提供了很多现成的布局框架图。分12、16、24栏三种:

上图是12栏的样式图。静态网页样式图已经上传到本地,可以点击这里访问。使用Photoshop做页面设计的话,请直接下载psd文件

点击下载文件信息:960_grid.psd 大小:2MB

有效时间:永久

将现有内容按照布局框架图来组织,界面就会显得整洁、美观了。下图是一个典型的12栏布局的网站。

4 thoughts on “为什么要用960px?——网页内容宽度分析”

Leave a Reply

Your email address will not be published. Required fields are marked *