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