|
原文：
http://ued.taobao.com/blog/2009/03/31/vertical-rhythm-and-the-incremental-leading/
準(zhǔn)備工作
去年的時(shí)候,青云發(fā)表過(guò) 關(guān)于柵格系統(tǒng)的文章 . 我們知道網(wǎng)頁(yè)的柵格系統(tǒng)是運(yùn)用固定的格子設(shè)計(jì)版面布局,使其風(fēng)格工整簡(jiǎn)潔. 視覺(jué)上來(lái)說(shuō),柵格系統(tǒng)能夠?qū)⒋髩K區(qū)域分割成小區(qū)域,清楚地展示頁(yè)面的布局,并能夠引導(dǎo)視覺(jué)線在各個(gè)板塊之間掃描、閱讀. 從信息上來(lái)說(shuō),柵格系統(tǒng)讓信息的呈現(xiàn)方式更加直觀,從而有效提高易讀性.
但是大部分柵格系統(tǒng)是在水平方向上的布局,其實(shí),我們的垂直方向也是有柵格系統(tǒng)的——也就是我們的“垂直韻律”.
垂直韻律的就像好比我們手上拿著的線格本子，有著一行行的網(wǎng)格線，安排著垂直方向上的文字排版。“排版中的空間就像是音樂(lè)里的節(jié)拍. ”音樂(lè)的節(jié)拍雖然有許多變化,但是幾乎每首歌都會(huì)有一個(gè)固定的節(jié)拍來(lái)掌握整個(gè)歌曲的節(jié)奏. 這就是為什么柵格系統(tǒng)一般用固定寬度的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布.
其實(shí)，那么,在網(wǎng)頁(yè)里,垂直韻律應(yīng)由三個(gè)因素控制：
- 字體大小(font-size)
- 行距(line-height)
具體定義可以參照我的《字體、排版簡(jiǎn)明入門》 中行距這一節(jié)
- 間距(margin,padding)
認(rèn)真考量這三個(gè)因素的值,才能實(shí)現(xiàn)垂直韻律.
開(kāi)工
基礎(chǔ)行距
在垂直韻律中,基本的單位是行距. 在整個(gè)頁(yè)面上設(shè)定一個(gè)合適的行距是垂直韻律之所以能夠成為韻律的必要條件. 這個(gè)行距,我們將應(yīng)用于整個(gè)頁(yè)面的所有文字上,包括正文、標(biāo)題、側(cè)邊欄等. 例如,我們現(xiàn)在設(shè)定我們的字體大小(css font-size)為12px,行距(css line-height)為18px. (對(duì)于中文宋體來(lái)說(shuō),12px是能夠清晰顯示的最小字號(hào). 為了保證可讀性,12px的1.5倍行距就是18px. 同時(shí)12px/18px也是中文互聯(lián)網(wǎng)上最常用的字號(hào)和行距. )我們?cè)诳瞻醉?yè)面的垂直方向上以18px為單位做垂直網(wǎng)格,就像我們線格本子上的線條,每條網(wǎng)格線也就是基線的對(duì)齊線. 接著，我們放上三個(gè)段落(12px/18px)作為例子講解.
(demo-1.html)
段落間距
段落間加上段間距不但美觀,而且容易在視覺(jué)上區(qū)別各段落. 但是要注意的是,垂直韻律最容易被打破的地方就是兩個(gè)元素在垂直方向上的空白了. 所以,為了讓下一段的文字內(nèi)容落在網(wǎng)格內(nèi),我們要將段落間距設(shè)置為基礎(chǔ)的倍數(shù). 例如：我們可以設(shè)置段前距為9px,段后距為9px,9px+9px=18px；或者設(shè)置段前距(css margin-top)為0,段后距(css margin-bottom)為18px；或者段前距和段后距都是18px. 這里,我們選取第二種方案,即,設(shè)置段前距為0,段后距為18px. 圖中可以看到,每段段落的文字都落在了格子內(nèi). 關(guān)閉網(wǎng)格可以發(fā)現(xiàn),段落清晰明了,比之前容易閱讀多了.
(demo-2.html)
出處：Taobao.com UED Team
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 垂直柵格與漸進(jìn)式行距(上) [2]
|
第 1 頁(yè) 垂直柵格與漸進(jìn)式行距(上) [1]
第 2 頁(yè) 
