- 相關(guān)推薦
平面設計教程：如何提升網(wǎng)頁(yè)內容的可讀性
設計的可讀性和排版設計息息相關(guān)，與此同時(shí)，對比度的控制也是其中的核心。想要提升內容的可讀性，讓內容以更加順暢、更符合邏輯的形式呈現在用戶(hù)面前，你需要借助對比度來(lái)表達，讓用戶(hù)真正順暢的理解。那么如何提升網(wǎng)頁(yè)內容的可讀性呢?
色彩對比
前景的文字需要和背景有著(zhù)明顯的對比，它需要能夠吸引用戶(hù)的眼球。
創(chuàng )建色彩對比的方法有很多，最流行的做法是在白色或者淺色的背景上使用黑色或者深色的文字。這種設計由來(lái)已久，經(jīng)久不衰的理由是它確實(shí)非常有用。當然，將兩種顏色倒置過(guò)來(lái)，也一樣有用。
但是，在實(shí)際的設計過(guò)程中，情形復雜多變。文字和背景的配色往往受到多種因素的影響，這個(gè)時(shí)候需要多加嘗試，反思文字在背景的映襯下是否能夠被用戶(hù)清晰的看到，尤其是在視頻和圖片之上追加文字排版的時(shí)候。
為了降低背景多變的色彩對于文字的視覺(jué)影響，一個(gè)比較靠譜的方案是在圖片和視頻上覆蓋上一個(gè)半透明的有色圖層，來(lái)“統一”色調，讓文本的可讀性更好。設計師可以通過(guò)調整這個(gè)有色圖層的透明度、明度和色調來(lái)控制和文字的對比度，這樣一來(lái)，背景圖片和視頻中的內容對于文字的影響可以降到最低。
另外一個(gè)方案，是將文字和圖片、視頻分開(kāi)排布，這樣就不會(huì )犧牲兩者的信息表現力，唯一的問(wèn)題是需要提供雙倍的展示空間，并且需要選取合理的排版布局。
文本樣式的對比
不同風(fēng)格樣式的文字能夠借助差異，吸引用戶(hù)的注意力。有趣而讓人著(zhù)迷的字體越來(lái)越多，比如手寫(xiě)襯線(xiàn)字體 Le Farfalle 就是如此。
單個(gè)字體本身的優(yōu)秀設計是很不錯，但是兩種不同字體的對比帶來(lái)的反差，更能吸引用戶(hù)。
不過(guò)，不同字體的搭配是非常講究的，因為風(fēng)格不搭的不恰當誰(shuí)家常常會(huì )讓用戶(hù)感到震驚�？梢赃x擇一些具有相同特征的不同字體，用戶(hù)不會(huì )為之感到突兀，這些字體最好擁有相同的x高度(小寫(xiě)字母x的高度)，在弧度和傾斜角度上非常接近。這些“和而不同”的字體能讓文本內容看起來(lái)一致而有差異，有趣而不枯燥。
大小尺寸對比
超大的字體和超小的字體所構成的視覺(jué)差常常能夠讓用戶(hù)驚嘆。
當字體大到一定程度的時(shí)候，就能帶來(lái)足夠的視覺(jué)沖擊，如果搭配上很小的字體構成對比，那么這種視覺(jué)沖擊會(huì )顯得更加引人矚目。雖然超小的字體單獨使用也能形成類(lèi)似的效果，但是相比超大字體要困難的多。
字體的大小差異，很容易被用戶(hù)注意到，超大的字體能夠在你的整個(gè)設計當中形成視覺(jué)焦點(diǎn)。在文章排版中，正文字體使用正常大小，標題和副標題使用超大字體(副標題會(huì )相對小一些)，這樣的設計會(huì )讓文章排版的輕重緩急清晰地呈現出來(lái)。
對齊模式
談到可讀性的時(shí)候，對齊其實(shí)也個(gè)無(wú)法回避的話(huà)題。而在排版中，不同的對齊模式也是能構成對比的。
通常，在對齊的設計上有兩種常規思路：
·正文和標題采用不同的對齊模式，構成對比
·在全部排版中沿用相同的對齊模式
從某種意義上來(lái)說(shuō)，兩種思路都是對的。選取那種思路，主要取決于文本、標題和其他設計元素之間的關(guān)系。如果采用相同的對齊方式，能否保證標題和正文之間有明顯對比、能否從背景和其他元素中脫穎而出?文本的行間距、字體大小、和其他元素之間的距離能否構成良好的視覺(jué)差?
在談到UI中的對齊問(wèn)題的時(shí)候，最直觀(guān)的模型是一段文本和按鈕之間的關(guān)系。排版中，文本元素和按鈕之間的對齊模式應該是怎樣的?這個(gè)問(wèn)題很有意思，許多設計師傾向于讓文本和按鈕縱向排列，居中對齊，但是網(wǎng)站的其他元素搭配進(jìn)來(lái)的時(shí)候，又往往不會(huì )居中對齊。所以，對齊方式，是由元素本身的屬性來(lái)決定，根據整個(gè)設計，合理搭配。
長(cháng)文本內容
對于包含大量文本內容的網(wǎng)站而言，正文部分的內容排版就顯得相當重要了。如果文本內容都是無(wú)縫的呈現出來(lái)的話(huà)，用戶(hù)很可能因為沒(méi)有層次而無(wú)法抓住重要信息。
所以，網(wǎng)頁(yè)中大量的文本信息，應該考慮下列因素：
1、文本塊的區域和大小
2、每行文字的長(cháng)度和高度
3、項目編號和列表
4、字符的粗體和斜體
5、色彩
所有的這些屬性都能將文本中特定的關(guān)鍵詞、信息甚至語(yǔ)氣同其他的內容區分開(kāi)來(lái)，它們會(huì )成為文本中重要的錨點(diǎn)，將和總要的信息通過(guò)這種差異和對比，推送到用戶(hù)面前。
在較長(cháng)的文本區塊中(尤其是博客和長(cháng)文中)使用不同的樣式來(lái)區分不同類(lèi)型的內容，這樣做可以明顯降低用戶(hù)閱讀的疲勞度。將長(cháng)內容分解為更易于閱讀的部分，用戶(hù)才更容易買(mǎi)單。
保持一致
一致性幾乎是所有設計領(lǐng)域都遵循的原則，無(wú)論你在首頁(yè)或者標題、正文中是如何運用對比的，最好將它延伸到整個(gè)設計規范當中去。
盡量使用相同的色彩，一樣的樣式，統一的字體，如果設計無(wú)法保證一致性，會(huì )讓用戶(hù)在界面中感到迷惑。確保用戶(hù)到哪個(gè)地方都會(huì )覺(jué)得他們在你的網(wǎng)站或者APP當中。
Ntgrate 這個(gè)網(wǎng)站就很好的貫徹了一致性的設計。背景統一使用了菱形的柵格，而文本則統一使用白底黑字的卡片來(lái)承載，同時(shí)網(wǎng)站中的大圖則是置于背景和文本而卡片之間。
結語(yǔ)
對比度是讓設計項目在視覺(jué)上更具吸引力的重要工具，它讓排版布局更加富有層次結構，高對比度的設計讓內容的可讀性有明顯的提升，而這也是設計可用性達標的最基本條件。
【平面設計教程：如何提升網(wǎng)頁(yè)內容的可讀性】相關(guān)文章：
如何寫(xiě)出微淘?xún)?yōu)質(zhì)內容的教程10-21
word鎖定內容以及如何破解詳細教程08-31
HTML語(yǔ)言的網(wǎng)頁(yè)教程06-14
網(wǎng)頁(yè)Meta標簽優(yōu)化教程05-24
關(guān)于網(wǎng)頁(yè)圖片屬性的CSS教程09-15
如何畫(huà)眼線(xiàn)教程08-10
如何化妝步驟教程09-08