«
»
三
31
2009

垂直栅格与渐进式行距(上)

准备工作

去年的时候,青云发表过关于栅格系统的文章 . 我们知道网页的栅格系统是运用固定的格子设计版面布局,使其风格工整简洁. 视觉上来说,栅格系统能够将大块区域分割成小区域,清楚地展示页面的布局,并能够引导视觉线在各个板块之间扫描、阅读. 从信息上来说,栅格系统让信息的呈现方式更加直观,从而有效提高易读性.
但是大部分栅格系统是在水平方向上的布局,其实,我们的垂直方向也是有栅格系统的——也就是我们的“垂直韵律”.

垂直韵律的就像好比我们手上拿着的线格本子，有着一行行的网格线，安排着垂直方向上的文字排版。“排版中的空间就像是音乐里的节拍. ”音乐的节拍虽然有许多变化,但是几乎每首歌都会有一个固定的节拍来掌握整个歌曲的节奏. 这就是为什么栅格系统一般用固定宽度的网格阵列来指导和规范网页中的版面布局以及信息分布.
其实，那么,在网页里,垂直韵律应由三个因素控制：

认真考量这三个因素的值,才能实现垂直韵律.

开工

基础行距

在垂直韵律中,基本的单位是行距. 在整个页面上设定一个合适的行距是垂直韵律之所以能够成为韵律的必要条件. 这个行距,我们将应用于整个页面的所有文字上,包括正文、标题、侧边栏等. 例如,我们现在设定我们的字体大小(css font-size)为12px,行距(css line-height)为18px. (对于中文宋体来说,12px是能够清晰显示的最小字号. 为了保证可读性,12px的1.5倍行距就是18px. 同时12px/18px也是中文互联网上最常用的字号和行距. )我们在空白页面的垂直方向上以18px为单位做垂直网格,就像我们线格本子上的线条,每条网格线也就是基线的对齐线. 接着，我们放上三个段落(12px/18px)作为例子讲解.

段落间距

段落间加上段间距不但美观,而且容易在视觉上区别各段落. 但是要注意的是,垂直韵律最容易被打破的地方就是两个元素在垂直方向上的空白了. 所以,为了让下一段的文字内容落在网格内,我们要将段落间距设置为基础的倍数. 例如：我们可以设置段前距为9px,段后距为9px,9px+9px=18px；或者设置段前距(css margin-top)为0,段后距(css margin-bottom)为18px；或者段前距和段后距都是18px. 这里,我们选取第二种方案,即,设置段前距为0,段后距为18px. 图中可以看到,每段段落的文字都落在了格子内. 关闭网格可以发现,段落清晰明了,比之前容易阅读多了.

添加标题

使用浏览器默认的样式,你会发现,大多数情况下,垂直韵律都被打破了. 所以,添加标题,我们需要选择正确的行距和间距才可以.

有了添加段间距的经验,相信添加标题也不是一件难事了. 标题的文字要比正文的文字要大的多. 例如,我们现在选择h1的字体大小为24px.
那么,根据附录结论有：
  • 行距和全部垂直间距之和为基础行距的倍数。
那么，我们假设行距为36px,则可以设置段前距为9px，段后距为9px (验证有：36 + 9 + 9 = 54 = 3 * 18).
同样，我们也可以设置h2:字体大小18px，行高24px，段前距3px，段后距9px(验证有：24 + 3 + 9 = 36 = 2 * 18)。

添加边注

网站我们常常有侧边栏，我们这里就用右边的边注来代表。在这里的例子中，我们和正文一样设定边注的排版：字体12px，行距18px。正是由于我们前面的努力，我们可以看到，边注的基线和正文的基线是对齐的。关闭网格可以看到，由于基线的对齐，整个排版有条不紊，十分美观。

(demo-4.html)

添加边框

添加边框道理相同，无非要的就是最后要求基线与网格对齐。这里的例子中，我们来给边注加个边框吧。给他加上1px边框(css border)后，还要再加上8px的补白(css padding).细心的同学们一定发现了，为什么补白是8px呢？其实很简单，这就是保证垂直方向上的补白和边框之和，是我们的基础行高18px的倍数：垂直方向上两个补白两个边框，那么1 + 8 + 8 + 1 = 18.

加上去后，我们发现，恩？怎么没有右边文字没有对齐到网格上呢？原来加上了补白和边框后，边注下移了9px，所以网格就没有对齐啦。那么，我们就要把边注上移9px。现在，我们可以看到右边的文字已经对齐到网格。是不是感觉不错？

不同字体大小的正文

如果有一天，老板告诉你，正文的字体太小啦，他看得眼花。你因此不得不将左边的正文设置成14px大小的字体，右边的边注保持12px。由于正文字体变大，我们也同时加大行距。根据我们前面学到的知识，我重新设计了间距：

  • 正文：字体大小14px，行距24px，段后距24px
  • h1：字体大小24px，行距24px，段前距24px，段后距24px
  • h2：字体大小：18px，行距24px，段前距12px，段后距12px
  • 边注正文：字体大小12px，行距24px，段后距24px
  • 边注边框：边框粗1px，内补白11px——别忘了还要把它上移12px
效果见:

完工

OK，最后，我们来做个使用前使用后的对比，来张合照吧：

使用前：
使用后：

附录 基本垂直韵律对行距、间距的要求的推导

根据之前的经验,不难得出：

设行距为 dl px ,设垂直方向上的间距和为 ∑ds = dst (段前距) + dsb (段后距) (px) ①,假设基础行距为k px,则
n*k = dl + ∑ds (n为自然数) 即行距和间距之和应当是基础行距的倍数 ②
由方程①、② 得出：
  • 行距和全部垂直间距之和为基础行距的倍数。

This entry was posted on 星期二, 3月 31st, 2009 at 9:02 下午 and is filed under OM19's Tech, 用户体验. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

14 Responses to “垂直栅格与渐进式行距(上)”

  1. Ray说道：
    31 三 ’09 9:15 下午

    越来越专业了 :)

    回复
  2. arrix说道：
    1 四 ’09 10:21 上午

    Nice writing!
    以前我问过你，什么样的字体、字号、行距和颜色组合最适合阅读？这篇blog post解释了其中的1/3。
    最后的附录里，不妨把“18的倍数”这个具体量改成 “基础行距的整数倍”。

    回复
  3. hesicong说道：
    1 四 ’09 12:14 下午

    有空拜读~

    回复
  4. leikea说道：
    1 四 ’09 12:30 下午

    principles?
    期待下篇
    application?

    回复
  5. SouL.M说道：
    13 四 ’09 11:34 下午

    在朋友的朋友空间里看到一张你PP下的地址过来的，博主很厉害
    可惜我只是UESTC-CD COLLEGE
    博主是web设计+影像高手，学习了。
    我也刚开始玩的相机，工作：.NET B/S开发。有点相似 呵呵

    回复
  6. minchao说道：
    14 四 ’09 4:35 下午

    原来这儿才是原文地址

    回复
  7. admin说道：
    14 四 ’09 4:37 下午

    Ray: 越来越专业了Smile

    依旧前进中……

    回复
  8. hlbice说道：
    21 四 ’09 9:56 上午

    大学里的排版白学了。。。
    拜读本文好多次。。。

    回复
  9. bigCat说道：
    21 四 ’09 10:04 上午

    偶来自… twitter
    “不会英文就别填url的slug：http://tinyurl.com/dhyaos “

    回复
  10. 垂直栅格与渐进式行距(下) « OM19’s Time说道：
    29 六 ’09 9:11 下午

    […] 什么？连(上)都没看？快看看吧：垂直栅格与渐进式行距(上) […]

    回复
  11. 网页设计中的栅格系统（grid systems）笔记 « 日落旅馆说道：
    2 十 ’09 8:25 下午

    […] http://www.om19.cn/2009/03/31/vertical-rhythm-and-the-incremental-leading/ […]

    回复
  12. 交互设计实用指南系列 – 我们眼中的交互设计 « OM19’s Time说道：
    2 十二 ’09 1:50 下午

    […] 标准化：这是指在进行与交互设计的相关工作，我们需要满足相关的标准和规范。标准化有助于提高产品的兼容性、互操作性、可重复性、安全和质量。举个例子，例如我们在制作原型的时候，有可能需要参考UED团队的栅格标准或是垂直栅格。这样，对于视觉设计师，他们可以减轻像素对齐的负担，对于前端工程师，套用相应的代码即可完成标准栅格的摆放。当然，还有很多标准和规范，例如：有些公司拥有交互方面的Guide-line，可以保持整个产品形象的一致性，降低用户认知负担。 […]

    回复
  13. 开心凡人说道：
    6 二 ’10 6:59 下午

    文章不错，呵呵

    回复
  14. 交互设计实用指南系列(0) – 我们眼中的交互设计 - 逸维用户体验设计说道：
    7 七 ’10 3:30 下午

    […] 标准化：这是指在进行与交互设计的相关工作，我们需要满足相关的标准和规范。标准化有助于提高产品的兼容性、互操作性、可重复性、安全和质量。举个例子，例如我们在制作原型的时候，有可能需要参考UED团队的栅格标准或是垂直栅格。这样，对于视觉设计师，他们可以减轻像素对齐的负担，对于前端工程师，套用相应的代码即可完成标准栅格的摆放。当然，还有很多标准和规范，例如：有些公司拥有交互方面的Guide-line，可以保持整个产品形象的一致性，降低用户认知负担。 […]

    回复

回复