當前位置:才華齋>設計>平面設計>

平面設計教程:如何提升網頁內容的可讀性

平面設計 閱讀(1.01W)

設計的可讀性和排版設計息息相關,與此同時,對比度的控制也是其中的核心。想要提升內容的可讀性,讓內容以更加順暢、更符合邏輯的形式呈現在使用者面前,你需要藉助對比度來表達,讓使用者真正順暢的理解。那麼如何提升網頁內容的可讀性呢?

平面設計教程:如何提升網頁內容的可讀性

色彩對比

前景的文字需要和背景有著明顯的對比,它需要能夠吸引使用者的眼球。

建立色彩對比的方法有很多,最流行的做法是在白色或者淺色的背景上使用黑色或者深色的文字。這種設計由來已久,經久不衰的理由是它確實非常有用。當然,將兩種顏色倒置過來,也一樣有用。

但是,在實際的設計過程中,情形複雜多變。文字和背景的配色往往受到多種因素的影響,這個時候需要多加嘗試,反思文字在背景的映襯下是否能夠被使用者清晰的看到,尤其是在視訊和圖片之上追加文字排版的時候。

為了降低背景多變的色彩對於文字的視覺影響,一個比較靠譜的方案是在圖片和視訊上覆蓋上一個半透明的有色圖層,來“統一”色調,讓文字的可讀性更好。設計師可以通過調整這個有色圖層的透明度、明度和色調來控制和文字的對比度,這樣一來,背景圖片和視訊中的內容對於文字的影響可以降到最低。

另外一個方案,是將文字和圖片、視訊分開排布,這樣就不會犧牲兩者的資訊表現力,唯一的問題是需要提供雙倍的展示空間,並且需要選取合理的排版佈局。

文字樣式的對比

不同風格樣式的文字能夠藉助差異,吸引使用者的注意力。有趣而讓人著迷的字型越來越多,比如手寫襯線字型 Le Farfalle 就是如此。

單個字型本身的優秀設計是很不錯,但是兩種不同字型的對比帶來的反差,更能吸引使用者。

不過,不同字型的搭配是非常講究的,因為風格不搭的不恰當誰家常常會讓使用者感到震驚。可以選擇一些具有相同特徵的不同字型,使用者不會為之感到突兀,這些字型最好擁有相同的x高度(小寫字母x的高度),在弧度和傾斜角度上非常接近。這些“和而不同”的字型能讓文字內容看起來一致而有差異,有趣而不枯燥。

 大小尺寸對比

超大的字型和超小的字型所構成的視覺差常常能夠讓使用者驚歎。

當字型大到一定程度的時候,就能帶來足夠的視覺衝擊,如果搭配上很小的字型構成對比,那麼這種視覺衝擊會顯得更加引人矚目。雖然超小的字型單獨使用也能形成類似的效果,但是相比超大字型要困難的多。

字型的大小差異,很容易被使用者注意到,超大的字型能夠在你的整個設計當中形成視覺焦點。在文章排版中,正文字型使用正常大小,標題和副標題使用超大字型(副標題會相對小一些),這樣的設計會讓文章排版的輕重緩急清晰地呈現出來。

 對齊模式

談到可讀性的時候,對齊其實也個無法迴避的話題。而在排版中,不同的對齊模式也是能構成對比的。

通常,在對齊的設計上有兩種常規思路:

·正文和標題採用不同的對齊模式,構成對比

·在全部排版中沿用相同的對齊模式

從某種意義上來說,兩種思路都是對的。選取那種思路,主要取決於文字、標題和其他設計元素之間的關係。如果採用相同的對齊方式,能否保證標題和正文之間有明顯對比、能否從背景和其他元素中脫穎而出?文字的行間距、字型大小、和其他元素之間的距離能否構成良好的視覺差?

在談到UI中的'對齊問題的時候,最直觀的模型是一段文字和按鈕之間的關係。排版中,文字元素和按鈕之間的對齊模式應該是怎樣的?這個問題很有意思,許多設計師傾向於讓文字和按鈕縱向排列,居中對齊,但是網站的其他元素搭配進來的時候,又往往不會居中對齊。所以,對齊方式,是由元素本身的屬性來決定,根據整個設計,合理搭配。

長文字內容

對於包含大量文字內容的網站而言,正文部分的內容排版就顯得相當重要了。如果文字內容都是無縫的呈現出來的話,使用者很可能因為沒有層次而無法抓住重要資訊。

所以,網頁中大量的文字資訊,應該考慮下列因素:

1、文字塊的區域和大小

2、每行文字的長度和高度

3、專案編號和列表

4、字元的粗體和斜體

5、色彩

所有的這些屬性都能將文字中特定的關鍵詞、資訊甚至語氣同其他的內容區分開來,它們會成為文字中重要的錨點,將和總要的資訊通過這種差異和對比,推送到使用者面前。

在較長的文字區塊中(尤其是部落格和長文中)使用不同的樣式來區分不同型別的內容,這樣做可以明顯降低使用者閱讀的疲勞度。將長內容分解為更易於閱讀的部分,使用者才更容易買單。

 保持一致

一致性幾乎是所有設計領域都遵循的原則,無論你在首頁或者標題、正文中是如何運用對比的,最好將它延伸到整個設計規範當中去。

儘量使用相同的色彩,一樣的樣式,統一的字型,如果設計無法保證一致性,會讓使用者在介面中感到迷惑。確保使用者到哪個地方都會覺得他們在你的網站或者APP當中。

Ntgrate 這個網站就很好的貫徹了一致性的設計。背景統一使用了菱形的柵格,而文字則統一使用白底黑字的卡片來承載,同時網站中的大圖則是置於背景和文字而卡片之間。

結語

對比度是讓設計專案在視覺上更具吸引力的重要工具,它讓排版佈局更加富有層次結構,高對比度的設計讓內容的可讀性有明顯的提升,而這也是設計可用性達標的最基本條件。