優(yōu)惠活動 - 12周年慶本月新客福利
優(yōu)惠活動 - 12周年慶本月新客福利
優(yōu)惠活動 - 12周年慶本月新客福利

提高網(wǎng)頁版式可讀性的10項原則

日期 : 2022-01-05 21:35:39

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