提升網(wǎng)站文章可讀性的排版技巧大全

時(shí)間：2022-05-24 05:00:01 | 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

時(shí)間：2022-05-24 05:00:01 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

最近有朋友說(shuō)自己做的網(wǎng)站老是跳出率特別高，文章頁(yè)的相關(guān)推薦也增加了好多，可是訪客的停留時(shí)間依然很短。我打開(kāi)他的網(wǎng)站仔細(xì)看了下，感覺(jué)文章內(nèi)容寫(xiě)的還可以，相關(guān)鏈接也都做了，但是文章的行與行直接特別緊，文章也沒(méi)有插圖搭配，可能是因?yàn)橐?jié)省空間的原因。

如今，有很多網(wǎng)站文章的排版給人的感覺(jué)就是整個(gè)頁(yè)面都是密密麻麻的字，讓人一看就有種煩躁的感覺(jué)。其實(shí)這個(gè)問(wèn)題也就說(shuō)明了文章排版在客戶體驗(yàn)這一環(huán)節(jié)的重要性了，排版在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常被忽略，其實(shí)這是錯(cuò)誤的，因?yàn)樽⒅鼐W(wǎng)頁(yè)排版確實(shí)可以提高你的網(wǎng)頁(yè)設(shè)計(jì)水平和可讀性。

說(shuō)起排版，這是個(gè)大學(xué)問(wèn)，頁(yè)面上的每一個(gè)元素都能影響瀏覽，排版設(shè)計(jì)的好壞絕對(duì)很考驗(yàn)一個(gè)人的基本功底。接下來(lái)，我便在億企邦上列出了10個(gè)非常有用的排版技巧，讓你的網(wǎng)站頁(yè)面排版看起來(lái)更好。

1、糾正行高

最常見(jiàn)的網(wǎng)頁(yè)布局錯(cuò)誤之一是定義了不正確的行高。行高是定義一行文本的高度，所以我們必須按照文本字體大小來(lái)設(shè)定行高。

一般來(lái)說(shuō)，在設(shè)置文本行高的時(shí)候，我經(jīng)常在字體大小的基礎(chǔ)上加上7個(gè)像素（對(duì)12-17像素的字體而言）

body{

font-size:14px;

line-height:21px; /* 14px + 7px */

}

2、糾正標(biāo)題margin值

另外一個(gè)常見(jiàn)的錯(cuò)誤是標(biāo)題周圍不正確的margin值。標(biāo)題其實(shí)是與它下面的段落是相關(guān)聯(lián)的，而不僅僅是兩個(gè)段落的分割符。這就是為什么標(biāo)題的margin-top比margin-bottom要寬。

3、不要使用過(guò)多的字體

為了確?？勺x性和專業(yè)性，你的網(wǎng)頁(yè)上不應(yīng)該使用超過(guò)3種字體。使用過(guò)多的字體會(huì)干擾你的用戶而且讓你的網(wǎng)站看起來(lái)很亂。

相反，較少的字體讓你的網(wǎng)站顯得干凈易讀。你可以標(biāo)題使用一種字體，正文使用一種字體，最后logo或副標(biāo)題使用另外的字體。

4、代碼部分使用等寬字體

如果你是一位開(kāi)發(fā)者(就像大部分讀這篇博客的人)你可能想貼一些代碼在你的博客里。如果是這樣，請(qǐng)使用等寬字體。 那么，什么是等寬字體？它就是字母和字符占相同水平寬度的字體。

那么在網(wǎng)站的代碼段你應(yīng)該使用哪種字體呢？到目前為止 Courier字體是最流行的，那么嘗試一下最新的一些字體像 Consolas或 Monaco怎么樣呢？

5、關(guān)注對(duì)比

即使你的網(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)站的可讀性。

6、只給鏈接的文本加下劃線

在我上網(wǎng)的這么多年中，瀏覽器用在鏈接的默認(rèn)樣式一直是藍(lán)色文本加下劃線。雖然這個(gè)藍(lán)色經(jīng)常被改成另外的顏色，但下劃線一直被當(dāng)做是鏈接的常規(guī)樣式。這就是為什么除了鏈接你不要給其他的東西加上下劃線的原因。否則，這可能對(duì)你的用戶造成很大的困惑。

7、創(chuàng)建樣式庫(kù)

讓你的網(wǎng)站產(chǎn)生視覺(jué)震撼的一個(gè)簡(jiǎn)單高效的方法是給特殊的頁(yè)面創(chuàng)建特殊的樣式。例如，創(chuàng)建一個(gè)warning的CSS類來(lái)向 你的用戶顯示“警告”。

8、按級(jí)別來(lái)排列標(biāo)題和文本

為了增加可讀性，給標(biāo)題、介紹段落和常規(guī)文本創(chuàng)建標(biāo)簽層級(jí)是很重要的，這樣你的用戶可以看清你的文章結(jié)構(gòu)并能很快的找到他們感興趣的部分。

標(biāo)題承載著內(nèi)容的主旨，使用簡(jiǎn)短的文字讓讀者在短時(shí)間內(nèi)了解信息內(nèi)容，在版面中具有重要地位。文字是平面設(shè)計(jì)的重要組成部分，相對(duì)于圖片的暗示性，文字傳遞出的是明確并且具體的信息。

9、大膽留白

我認(rèn)為最重要的排版技巧之一是“大膽留白”。留白是指空白區(qū)或沒(méi)有使用的空間，它會(huì)使你的設(shè)計(jì)整齊而專業(yè)。許多人喜歡蘋(píng)果網(wǎng)站的原因是：它盡管簡(jiǎn)單但很精致，而且有很多留白。

10、正確使用標(biāo)點(diǎn)符號(hào)

如果你想提升你的排版水平不容忽視的一點(diǎn)是正確使用標(biāo)點(diǎn)符號(hào)。例如，引號(hào)經(jīng)常用雙撇符號(hào)代替（譯者注：我想作者要表達(dá)的意思應(yīng)該是全角符號(hào)和半角符號(hào)的區(qū)別，就像中文的引號(hào)和英文的引號(hào)不同一樣）。

注意區(qū)分雙撇符號(hào)：He said "Hello".
同樣的文本，使用引號(hào)：He said “Hello”.

這樣更好，不是嗎？如果你是WordPress用戶，你可能很樂(lè)意知道你最喜歡的博客平臺(tái)自動(dòng)將雙撇號(hào)轉(zhuǎn)換為智能的引號(hào) 。否則，你得使用HTML字符編碼。如下所示：

He said &s;ldquo;Hello”.

盡管，你可能已經(jīng)熟悉了網(wǎng)頁(yè)設(shè)計(jì)的層次結(jié)構(gòu)，你可能也明白排版中也少不了它。但是我還是要再?gòu)?qiáng)調(diào)一下，層級(jí)結(jié)構(gòu)會(huì)給你一個(gè)閱讀顯示文本的起點(diǎn)。這點(diǎn)非常重要，因?yàn)檫@會(huì)幫助你準(zhǔn)確傳遞信息，同時(shí)保證讀者準(zhǔn)確理解，很多網(wǎng)站在這個(gè)問(wèn)題上都做得很好，但是你還是應(yīng)該牢記在心，這樣你的網(wǎng)站就不會(huì)顯得太過(guò)時(shí)。

為了增加可讀性，給標(biāo)題、介紹段落和常規(guī)文本創(chuàng)建標(biāo)簽層級(jí)是很重要的，這樣你的用戶可以看清你的文章結(jié)構(gòu)并能很快的找到他們感興趣的部分。

億企邦點(diǎn)評(píng)：

文字在畫(huà)面中的安排要考慮到全局的因素，不能有視覺(jué)上的沖突。否則在畫(huà)面上主次不分，很容易引起視覺(jué)順序的混亂，有時(shí)候甚至1個(gè)像素的差距也會(huì)改變你整個(gè)作品的味道。文字不僅要在字體上和畫(huà)面配合好，甚至顏色和部分筆畫(huà)都要加工，這樣才能達(dá)到更完整的效果，而這些細(xì)節(jié)的地方需要的是耐心和功力。