很多页面看起来简单,自己做起来才知道没那么容易。页面要多宽,字体要多大,许多细节问题,全都自己从头想也是蛮头痛的,效果也不一定令人满意。还是参考业界常规和主流做法比较好。即使要做打破常规的设计,也得先知道常规是什么,对吧?所以本文总结了一些网页设计中常用的规格数值。欢迎补充和提出意见。

另外,这个博客使用的主题是几个月前做的,那时候认识还没这么全面,所以这个主题的许多地方并不符合本文的描述。等有时间了我会大改一下。

页面宽度

有段时期我喜欢宽度自适应的液态布局(全屏布局),觉得现在的显示器都越来越大,两边都空着太浪费。后来又看了些这方面的文章,经过一些观察和思考,现在改变看法了。虽然屏幕越来越宽,但人的视野不能无限变宽,一行文字太长的话,眼睛来回扫视会很吃力。

综合考虑各种因素,页面最主要的内容部分,即正文宽度,以不超过650px为宜

在800*600的显示器是主流时,主流页面宽度一般是770px或780px(这相差的10px来自于两边的空白边距,下同);在1024*768的分辨率成为主流后,页面宽度一般是950px或960px。之后即使显示屏再大,页面宽度也最好不要再跟着扩大了。

最外围背景最好用自适应全屏宽度。这个是我杜撰的,不知道有没有专门的说法。什么意思呢?以 twitter.com/ 为例,用大分辨率,再缩小浏览器窗口查看一下。可以看到,页面主体部分是760px的固定宽度,居中,背景花纹和图案一直延伸到窗口两边,把窗口放大缩小,背景图案也随之放大缩小,主体部分不变。小屏幕的人使用起来不会感觉到有任何不同,大屏幕的人则可以看到更多的图案。

我认为这样既不会让两边屏幕空着浪费,又不会页面太宽造成使用上的困扰,同时固定宽度便于设计师掌控,让大屏和小屏的使用者都可获得较好的体验,是目前比较完美的处理方案。

字体大小(font-size)、行高(line-height)、间距(margin)等。

为了使文字布局工整简洁,方便阅读,字体大小、行高的设置等都有一定的讲究。以下基本是总结自Taobao.com UED Team垂直栅格与渐进式行距(上)一文,可查看原文以了解详细原理。

方案1:

对于中文宋体来说,12px是能够清晰显示的最小字号。为了保证可读性,12px的1.5倍行距就是18px。同时12px/18px也是中文互联网上最常用的字号和行高。

  • 正文:字体大小12px,行高18px,段前距(margin-top)0,段后距(margin-bottom)18px;
  • h1:字体大小24px,行高36px,段前距9px,段后距9px;
  • h2:字体大小18px,行高24px,段前距3px,段后距9px;
  • 侧边栏文字:字体大小12px,行高18px,段后距18px;
  • 侧边栏边框:边框(border)1px,填充(padding)8px(边框和填充的高度加起来等9px,即基础行高18px的一半即可,如边框2px的话,填充就用7px),上移9px(margin-top:-9px; 这是为了和正文的行对齐,因为边框和填充把侧边栏文字下压了9px,所以要上移9px对齐)。
方案2:

如果嫌12px字太小,想调整得大一点,可以用14px的正文,其他数值相应调整。

  • 正文:字体大小14px,行高24px,段后距24px;
  • h1:字体大小24px,行高24px,段前距24px,段后距24px;
  • h2:字体大小18px,行高24px,段前距12px,段后距12px;
  • 侧边栏文字:字体大小12px,行高24px,段后距24px;
  • 侧边栏边框:边框(border)1px,填充(padding)11px(边框和填充的高度加起来等12px,即基础行高24px的一半即可),上移12px。