相對(duì)來(lái)說(shuō)，使版式具有可讀性很容易，只需要遵循一些關(guān)鍵的原則。一個(gè)具有可讀性的網(wǎng)頁(yè)將長(zhǎng)久地吸引讀者的目光，給予他們深刻的用戶體驗(yàn)。網(wǎng)頁(yè)設(shè)計(jì)的目的就是要使用戶獲得盡可能愉悅的體驗(yàn)。以下10項(xiàng)設(shè)計(jì)原則將幫助你設(shè)計(jì)出具有可讀性的網(wǎng)頁(yè)版式。
1.易讀的標(biāo)題
      標(biāo)題是印刷版式、網(wǎng)頁(yè)版式等中的核心要素之一，如上文闡述的，標(biāo)題是文字層級(jí)的組成，也是瀏覽內(nèi)容的重要部分。
首先，標(biāo)題文字的尺寸與正文文字的尺寸一樣重要。標(biāo)題設(shè)置得太大，用戶閱讀的時(shí)候就會(huì)感到不協(xié)調(diào)，他們的視線會(huì)被打斷，從而失去閱讀的目標(biāo)。最終會(huì)毀掉內(nèi)容的流暢性，干擾用戶的閱讀。若標(biāo)題設(shè)置得太小，也會(huì)破壞文章的層級(jí)，分散用戶的注意力。其次，在標(biāo)題和正文間預(yù)留足夠的空間也是很重要的。
2.易于瀏覽的文本
我們已經(jīng)多次提到了“易于瀏覽”這個(gè)詞，你一定也在別的地方聽到過(guò)。易于瀏覽的文本和具有可讀性的文本之間有著密切的關(guān)聯(lián)。要使文本易于瀏覽，就必須將標(biāo)題、層級(jí)和焦點(diǎn)(用于引導(dǎo)用戶)三者合理有效地結(jié)合起來(lái)。
      那么，到底怎樣才能使文本易于瀏覽呢?其中有許多要素，大部分上面已經(jīng)提及。標(biāo)題的尺寸和位置，正文的尺寸，文字的行高，文字對(duì)比以及區(qū)分焦點(diǎn)的方式，都會(huì)對(duì)文本的瀏覽產(chǎn)生影響。
      焦點(diǎn)是版面上的必要組成元素，它已吸引或打算吸引用戶的注意力。焦點(diǎn)也許是標(biāo)題圖像，也許是按鈕，等等。
      3.留白
版面以內(nèi)容為重，而空白是為內(nèi)容的可讀性服務(wù)的。留白將大段的文字隔開，也會(huì)使用戶的視線在文字間自如地穿梭。留白還將版面上的各個(gè)元素，如圖片和文字隔開。
4.一致性
-致性是-種增強(qiáng)可用性的重要技巧，設(shè)計(jì)師也將其運(yùn)用到提升可讀性中。要想讓用戶能更加輕松地閱讀版面，保持層級(jí)的一致性是很重要的。這就意味著同級(jí)標(biāo)題的尺寸、顏色和字體應(yīng)該相同。例如，文章中所有的h1級(jí)標(biāo)題看上去應(yīng)當(dāng)相同。為什么?因?yàn)檫@將使讀者在瀏覽文章的時(shí)候，能輕松找到相似的焦點(diǎn)。同時(shí)，一致性還能幫助你組織起版面的內(nèi)容。
5.文本密度
文本密度是指你在某個(gè)區(qū)域所放置的文字?jǐn)?shù)量。標(biāo)題(H1-H6)標(biāo)簽是指在網(wǎng)頁(yè)html中對(duì)文本標(biāo)題進(jìn)行強(qiáng)調(diào)的一種標(biāo)簽，以標(biāo)簽<h1>、<h2>、<h3>到<h6>依次顯示重要性的遞減。一般來(lái)說(shuō)，<h1> 用來(lái)修飾網(wǎng)頁(yè)的主標(biāo)題，<h2> 表示一個(gè)段落的標(biāo)題，<h3> 表示段落的小節(jié)標(biāo)題。內(nèi)容的密度對(duì)其可讀性有重要影響。密度與間距選項(xiàng)如行高、字距和字體大小有關(guān)。如果以上選項(xiàng)彼此之間達(dá)到平衡，使內(nèi)容不至于太擁擠也不至于太寬松，那么這樣的密度就是極佳的，就是易于瀏覽和具有可讀性的。
6.突出重要元素
另一個(gè)重點(diǎn)就是要在主體內(nèi)容中強(qiáng)調(diào)特定元素。這包括突出鏈接，加粗重要文字以及顯示引用文字。之前提到過(guò)，焦點(diǎn)在網(wǎng)頁(yè)版式中是必不可少的。通過(guò)強(qiáng)調(diào)這些元素，你就能為用戶提供焦點(diǎn)，而它們則將大段單調(diào)枯燥的文本分隔開。使文本易于瀏覽很重要。通過(guò)提供以上焦點(diǎn)，可使得正文特別易于瀏覽。將關(guān)鍵字行加粗。就能立即吸引用戶的目光，也因此成為展示重要信息的有效手段。
7.組織信息
在文章中組織信息的方式會(huì)影響可讀性/用戶在一篇組織合理的文章中能輕松得到引導(dǎo)，進(jìn)而順利獲取信息。這雖不是文本的討論范圍，但真的很重要。
8.圖形支持
正文都需要一些視覺(jué)圖形的支持，如圖片、按鈕、圖表或插圖。在文章中防止圖形并不是一件容易的事，你必須在文字和圖形間預(yù)留足夠的空間。如果圖形元素是一張圖片，那么為了使它與文字涇渭分明，就需要一個(gè)干凈的圖片邊框。邊框能引導(dǎo)用戶的視線，也能使版面別具風(fēng)格。不過(guò)保持文字框的簡(jiǎn)潔也很重要。它的色調(diào)應(yīng)當(dāng)柔和，而邊框也不宜太大。如果圖形元素是圖表或插圖，我們只需使用空白作為隔離元素。內(nèi)容應(yīng)該干凈而不受干擾地環(huán)繞在圖形周圍。
9.使用分隔符
要將大片文字干凈而有組織地分分隔成段，使用分隔層級(jí)元素。如標(biāo)題和正文；也可以對(duì)內(nèi)容進(jìn)行劃分。分隔符最簡(jiǎn)單的形式就是一條直線。它最常用來(lái)分割層級(jí)元素，非常實(shí)用，對(duì)提高可讀性也很關(guān)鍵。
另一種分割內(nèi)容的常見方式就是使用方框。文字框可將一頁(yè)上不相干的內(nèi)容有效地分隔開。它能使用戶在復(fù)雜的版面上聚焦視線。
10.頁(yè)邊
常聽人說(shuō)不要將版面塞得太滿，應(yīng)當(dāng)保留適當(dāng)?shù)牧舭?，這是為什么呢？留白實(shí)際上可以將用戶的實(shí)現(xiàn)吸引到文字上，即迫使用戶關(guān)注文字。因?yàn)榇肆舭讓?huì)影響內(nèi)容的流暢度和可讀性。也變就是最佳的留白元素之一，它能很好地支持文字元素。四條邊將迫使用戶關(guān)注頁(yè)面中間的中心內(nèi)容。