網(wǎng)頁(yè)設(shè)計(jì)的排版經(jīng)驗(yàn)總結(jié)

1、網(wǎng)頁(yè)設(shè)計(jì)的排版經(jīng)驗(yàn)總結(jié)網(wǎng)頁(yè)的核心是內(nèi)容，用戶(hù)訪問(wèn)網(wǎng)站最重要的目的就是要看網(wǎng)頁(yè)的正文，所以，網(wǎng)頁(yè)的文本排版非常重要。排版是為了信息分享而重新將字體進(jìn)行排列的一門(mén)藝術(shù)和技巧。也就是說(shuō)，排版是為傳遞信息而進(jìn)行的簡(jiǎn)單排列組合，然而，好的排版非常注重視覺(jué)精度和細(xì)節(jié)，甚至是很小的細(xì)節(jié)都不容忽視。如今，印刷品，書(shū)籍，報(bào)紙，信件，電視，網(wǎng)絡(luò)等都會(huì)涉及到排版，簡(jiǎn)直是無(wú)處不在。甚至連重要的網(wǎng)站在以前就開(kāi)始關(guān)注排版了，并且在當(dāng)時(shí)嘗試用現(xiàn)成的資源盡可能提高排版水平。    網(wǎng)頁(yè)排版是近年興起的一個(gè)普通排版的分支概念。雖然，圖片也可以傳遞信息，但網(wǎng)站上的內(nèi)容大部分是由文字組成。這就是網(wǎng)絡(luò)排

2、版如此受重視的原因。排版的重要性絲毫不亞于視覺(jué)層次，合適顏色的選取，網(wǎng)站功能以及其它特性。我們從來(lái)沒(méi)低估過(guò)網(wǎng)絡(luò)排版的重要性，也深知它在良好的用戶(hù)體驗(yàn)中所發(fā)揮的重要作用。    任何追求漂亮版面的人都知道，印刷排版跟網(wǎng)絡(luò)排版完全是兩碼事。盡管有些規(guī)則可能相同，但網(wǎng)頁(yè)設(shè)計(jì)所處環(huán)境完全不同，兩者都有自己一套必須遵守的規(guī)則和準(zhǔn)則。兩者的原理不同，不能同時(shí)存在，跨越這個(gè)界線可能會(huì)導(dǎo)致排版混亂。    盡管，你可能已經(jīng)熟悉了網(wǎng)頁(yè)設(shè)計(jì)的層次結(jié)構(gòu)，你可能也明白排版中也少不了它。層級(jí)結(jié)構(gòu)會(huì)給你一個(gè)閱讀顯示文本的起點(diǎn)。這點(diǎn)非常重要，因?yàn)檫@會(huì)幫助你準(zhǔn)確傳遞

3、信息，同時(shí)保證讀者準(zhǔn)確理解。很多網(wǎng)站在這個(gè)問(wèn)題上都做得很好，但是你還是應(yīng)該牢記在心，這樣你的網(wǎng)站就不會(huì)顯得太過(guò)時(shí)。為了增加可讀性，給標(biāo)題、介紹段落和常規(guī)文本創(chuàng)建標(biāo)簽層級(jí)是很重要的，這樣你的用戶(hù)可以看清你的文章結(jié)構(gòu)并能很快的找到他們感興趣的部分。    瀏覽器用在鏈接的默認(rèn)樣式一直是藍(lán)色文本加下劃線。雖然這個(gè)藍(lán)色經(jīng)常被改成另外的顏色，但下劃線一直被當(dāng)做是鏈接的常規(guī)樣式。這就是為什么除了鏈接你不要給其他的東西加上下劃線的原因。否則，這可能對(duì)你的用戶(hù)造成很大的困惑。    很少遇到網(wǎng)站排版中出現(xiàn)層級(jí)結(jié)構(gòu)的問(wèn)題，但相當(dāng)多的網(wǎng)站排版卻存在間距排

4、列的問(wèn)題。網(wǎng)站所有元素的間距都必須按照一定的條理進(jìn)行排列，因此你在處理間距必須遵循這些條理。你可能需要去了解以下的專(zhuān)用術(shù)語(yǔ)：行距大?。↙eading Size）、字偶間距（Kerning）和字間距（Tracking）。    行距大小是一種增加或減少文本行之間產(chǎn)生的空格的方法。字偶間距是調(diào)節(jié)字符間空格，使其達(dá)到更愉悅的視覺(jué)效果的過(guò)程。使用字間距同樣能達(dá)到字偶距調(diào)整的效果，兩者之間的唯一差別在于空格的產(chǎn)生，字間距是在每個(gè)字符間產(chǎn)生等量的空格，而字偶間距是調(diào)整的基于字符對(duì)所產(chǎn)生的空格。最常見(jiàn)的網(wǎng)頁(yè)布局錯(cuò)誤之一是定義了不正確的行高。行高是定義一行文本的高度，所以我們必須

5、按照文本字體大小來(lái)設(shè)定行高。一般來(lái)說(shuō)，在設(shè)置文本行高的時(shí)候，我經(jīng)常在字體大小的基礎(chǔ)上加上7個(gè)像素（對(duì)12-17像素的字體而言）。   另外一個(gè)常見(jiàn)的錯(cuò)誤是標(biāo)題周?chē)徽_的margin值。標(biāo)題其實(shí)是與它下面的段落是相關(guān)聯(lián)的，而不僅僅是兩個(gè)段落的分 割符。這就是為什么標(biāo)題的margin-top比margin-bottom要寬。    排版中的顏色并不專(zhuān)指單一的文本顏色，通常是指網(wǎng)站用到的所有顏色。網(wǎng)站用到的圖片和顏色相當(dāng)于文本的“背景”，因此使用顏色時(shí)要謹(jǐn)慎。網(wǎng)站的元素要和排版顏色協(xié)調(diào)，不要讓文本顯得模糊不清。你也可嘗試較大尺寸的排版（又稱(chēng)為宏觀排

6、版）來(lái)達(dá)到更好的效果。簡(jiǎn)單來(lái)說(shuō)，宏觀排版就是使用更大的文本來(lái)吸引用戶(hù)。它的長(zhǎng)度通常不能超過(guò)1到4個(gè)單詞，因此，保持文字的簡(jiǎn)潔性和正確性就顯得格外很重要。在關(guān)鍵信息下，但是這并不是那么重要，因?yàn)檫@并不是你的網(wǎng)站的焦點(diǎn)，但大尺寸文字卻是。    即使你的網(wǎng)站有很好的排版了，另一個(gè)需要注意的是對(duì)比。如果你的頁(yè)面背景是中灰色（#999999），那么不要使用深灰色（#333333）的文本，否則你的內(nèi)容很難看清，尤其是對(duì)一些年紀(jì)比較大的或視力差的人?？傊?，除非你的網(wǎng)站是關(guān)于黑客、黑帽seo或哥特?fù)u滾的，不然你應(yīng)該使用淺色背景和深色字體來(lái)保證清晰的對(duì)比度增加你網(wǎng)站的可讀性。&#

7、160;   最重要的排版技巧之一是“大膽留白”。留白是指空白區(qū)或沒(méi)有使用的空間，它會(huì)使你的設(shè)計(jì)整齊而專(zhuān)業(yè)。許多人 喜歡蘋(píng)果網(wǎng)站的原因是：它盡管簡(jiǎn)單但很精致，而且有很多留白。    字體配對(duì)是將兩種或更多字體通過(guò)排列組合達(dá)到最佳效果的過(guò)程。這聽(tīng)起來(lái)有意思，但對(duì)于初學(xué)者卻并非易事。選擇一種或多種的漂亮字體就夠了，但是，你只是想完美配對(duì)兩種字體，從理論上講，難度更大。字體配對(duì)可降低使用單一字體時(shí)可能所產(chǎn)生的單調(diào)感。你可以就此進(jìn)行實(shí)踐，為網(wǎng)站中所有的大標(biāo)題使用一種字體，在一些簡(jiǎn)單段落里使用另一種字體，看看最終效果是否很單調(diào)。  &

8、#160; 為了確?？勺x性和專(zhuān)業(yè)性，你的網(wǎng)頁(yè)上不應(yīng)該使用超過(guò)3種字體。使用過(guò)多的字體會(huì)干擾你的用戶(hù)而且讓你的網(wǎng)站看起 來(lái)很亂。相反，較少的字體讓你的網(wǎng)站顯得干凈易讀。你可以標(biāo)題使用一種字體，正文使用一種字體，最后 logo或副標(biāo)題使用另外的字體。    如果你把字體弄得難以辨認(rèn)，這是犯了大忌。你也知道字體配對(duì)對(duì)于精美排版的重要性，而不是用一些統(tǒng)一的文本。即使你找到了很棒的字體搭配，還是不要忘記為字體設(shè)置合適的大小和粗細(xì)。字體粗細(xì)和大小設(shè)置不當(dāng)基本上就毀掉了之前的搭配，因?yàn)檫@會(huì)讓你已經(jīng)使用的不同字體難以辨認(rèn)。還應(yīng)注意一點(diǎn)，背景圖片跟字體顏色相近或不匹配，會(huì)導(dǎo)致字體淹沒(méi)在背景圖片當(dāng)中。    在過(guò)去，設(shè)計(jì)師必須使用用戶(hù)電腦，甚至帶文本圖片上有的字體，這樣字體才會(huì)正確顯示。隨著技術(shù)不斷發(fā)展，HTML5很快克服了這些問(wèn)題。另外還有許多很棒的字體替換工