當我們聊設計的時候瑟曲，可讀性是我們最常提及的話題。本文將會從6個方面來闡述如何通過合理的對比度設計來提升網(wǎng)頁內(nèi)容的可讀性豪治。良好的設計應該都是可讀的設計洞拨，如果信息都無法正常而清晰的傳達，那么設計就失去了意義负拟。
設計的可讀性和排版設計息息相關(guān)烦衣，與此同時，對比度的控制也是其中的核心掩浙。想要提升內(nèi)容的可讀性花吟，讓內(nèi)容以更加順暢、更符合邏輯的形式呈現(xiàn)在用戶面前厨姚，你需要借助對比度來表達衅澈，讓用戶真正順暢的理解。
色彩對比
前景的文字需要和背景有著明顯的對比谬墙，它需要能夠吸引用戶的眼球今布。
創(chuàng)建色彩對比的方法有很多，最流行的做法是在白色或者淺色的背景上使用黑色或者深色的文字拭抬。這種設計由來已久部默，經(jīng)久不衰的理由是它確實非常有用。當然造虎，將兩種顏色倒置過來傅蹂，也一樣有用。
但是算凿，在實際的設計過程中份蝴，情形復雜多變。文字和背景的配色往往受到多種因素的影響氓轰，這個時候需要多加嘗試搞乏，反思文字在背景的映襯下是否能夠被用戶清晰的看到，尤其是在視頻和圖片之上追加文字排版的時候戒努。
為了降低背景多變的色彩對于文字的視覺影響请敦，一個比較靠譜的方案是在圖片和視頻上覆蓋上一個半透明的有色圖層镐躲，來“統(tǒng)一”色調(diào)，讓文本的可讀性更好侍筛。設計師可以通過調(diào)整這個有色圖層的透明度萤皂、明度和色調(diào)來控制和文字的對比度，這樣一來匣椰，背景圖片和視頻中的內(nèi)容對于文字的影響可以降到最低裆熙。
另外一個方案，是將文字和圖片禽笑、視頻分開排布入录，這樣就不會犧牲兩者的信息表現(xiàn)力，唯一的問題是需要提供雙倍的展示空間佳镜，并且需要選取合理的排版布局僚稿。
文本樣式的對比
不同風格樣式的文字能夠借助差異，吸引用戶的注意力蟀伸。有趣而讓人著迷的字體越來越多蚀同，比如手寫襯線字體 Le Farfalle 就是如此。
單個字體本身的優(yōu)秀設計是很不錯啊掏，但是兩種不同字體的對比帶來的反差蠢络，更能吸引用戶。
不過迟蜜，不同字體的搭配是非常講究的刹孔，因為風格不搭的不恰當誰家常常會讓用戶感到震驚∧染Γ可以選擇一些具有相同特征的不同字體芦疏，用戶不會為之感到突兀，這些字體最好擁有相同的x高度（小寫字母x的高度）微姊，在弧度和傾斜角度上非常接近酸茴。這些“和而不同”的字體能讓文本內(nèi)容看起來一致而有差異，有趣而不枯燥兢交。
大小尺寸對比
超大的字體和超小的字體所構(gòu)成的視覺差常常能夠讓用戶驚嘆薪捍。
當字體大到一定程度的時候，就能帶來足夠的視覺沖擊配喳，如果搭配上很小的字體構(gòu)成對比酪穿，那么這種視覺沖擊會顯得更加引人矚目。雖然超小的字體單獨使用也能形成類似的效果晴裹，但是相比超大字體要困難的多被济。
字體的大小差異，很容易被用戶注意到涧团，超大的字體能夠在你的整個設計當中形成視覺焦點只磷。在文章排版中经磅，正文字體使用正常大小，標題和副標題使用超大字體（副標題會相對小一些）钮追，這樣的設計會讓文章排版的輕重緩急清晰地呈現(xiàn)出來预厌。
對齊模式
談到可讀性的時候，對齊其實也個無法回避的話題元媚。而在排版中轧叽，不同的對齊模式也是能構(gòu)成對比的。
通常刊棕，在對齊的設計上有兩種常規(guī)思路：
● 正文和標題采用不同的對齊模式炭晒，構(gòu)成對比
● 在全部排版中沿用相同的對齊模式
從某種意義上來說，兩種思路都是對的甥角。選取那種思路网严，主要取決于文本、標題和其他設計元素之間的關(guān)系蜈膨。如果采用相同的對齊方式屿笼，能否保證標題和正文之間有明顯對比牺荠、能否從背景和其他元素中脫穎而出翁巍？文本的行間距、字體大小休雌、和其他元素之間的距離能否構(gòu)成良好的視覺差灶壶？
在談到UI中的對齊問題的時候，最直觀的模型是一段文本和按鈕之間的關(guān)系杈曲。排版中驰凛，文本元素和按鈕之間的對齊模式應該是怎樣的？這個問題很有意思担扑，許多設計師傾向于讓文本和按鈕縱向排列恰响，居中對齊，但是網(wǎng)站的其他元素搭配進來的時候涌献，又往往不會居中對齊胚宦。所以，對齊方式燕垃，是由元素本身的屬性來決定枢劝，根據(jù)整個設計，合理搭配卜壕。
長文本內(nèi)容
對于包含大量文本內(nèi)容的網(wǎng)站而言您旁，正文部分的內(nèi)容排版就顯得相當重要了。如果文本內(nèi)容都是無縫的呈現(xiàn)出來的話轴捎，用戶很可能因為沒有層次而無法抓住重要信息鹤盒。
所以蚕脏，網(wǎng)頁中大量的文本信息，應該考慮下列因素：
● 文本塊的區(qū)域和大小
● 每行文字的長度和高度
● 項目編號和列表
● 字符的粗體和斜體
● 色彩
所有的這些屬性都能將文本中特定的關(guān)鍵詞昨悼、信息甚至語氣同其他的內(nèi)容區(qū)分開來蝗锥，它們會成為文本中重要的錨點，將和總要的信息通過這種差異和對比率触，推送到用戶面前终议。
在較長的文本區(qū)塊中（尤其是博客和長文中）使用不同的樣式來區(qū)分不同類型的內(nèi)容，這樣做可以明顯降低用戶閱讀的疲勞度葱蝗。將長內(nèi)容分解為更易于閱讀的部分穴张，用戶才更容易買單。
保持一致
一致性幾乎是所有設計領(lǐng)域都遵循的原則两曼，無論你在首頁或者標題皂甘、正文中是如何運用對比的，最好將它延伸到整個設計規(guī)范當中去悼凑。
盡量使用相同的色彩偿枕，一樣的樣式，統(tǒng)一的字體户辫，如果設計無法保證一致性渐夸，會讓用戶在界面中感到迷惑。確保用戶到哪個地方都會覺得他們在你的網(wǎng)站或者APP當中渔欢。
Ntgrate這個網(wǎng)站就很好的貫徹了一致性的設計墓塌。背景統(tǒng)一使用了菱形的柵格，而文本則統(tǒng)一使用白底黑字的卡片來承載奥额，同時網(wǎng)站中的大圖則是置于背景和文本而卡片之間苫幢。
結(jié)語
對比度是讓設計項目在視覺上更具吸引力的重要工具，它讓排版布局更加富有層次結(jié)構(gòu)垫挨，高對比度的設計讓內(nèi)容的可讀性有明顯的提升韩肝，而這也是設計可用性達標的最基本條件。
原文地址：webdesignerdepot
原文作者：CARRIE COUSINS
優(yōu)設譯文：陳子木
