說說幾點(diǎn)使用增強(qiáng)對比度來提高可讀性的小提示

所謂好的設(shè)計(jì)是一種可讀的設(shè)計(jì)。倘若沒有一個(gè)明確的信息傳達(dá)，以一種簡單、容易被用戶消化的方式展現(xiàn)在頁面上，那么就很容易失去任何設(shè)計(jì)工作的本質(zhì)意義。這就是為什么我們強(qiáng)調(diào)任何設(shè)計(jì)必須易于閱讀的重要性。

一個(gè)具有可讀性的網(wǎng)頁設(shè)計(jì)是在學(xué)習(xí)排版中的一個(gè)重要的課程，對比也是如此。對比是提高可讀性的關(guān)鍵，同時(shí)它可以以富含邏輯的方式幫助用戶在閱讀文本的過程中理性思路，以便用戶準(zhǔn)確地理解文本所要表達(dá)或展現(xiàn)的內(nèi)容。

1.顏色對比

你所要做的，是盡可能讓文字從畫布中脫穎而出。它需要以一種吸引眼球的方式來強(qiáng)調(diào)其存在。

有很多方法來創(chuàng)建顏色對比，但最流行的是在白色或淺色畫布上使用黑色文本（即所謂的白紙黑字）。它真的很受歡迎，原因在于它在實(shí)際的網(wǎng)頁設(shè)計(jì)中真實(shí)的起到了作用，產(chǎn)生了效果。（相反的組合也一樣是適用的。）

放置文本時(shí)，花些時(shí)間考慮字母在背景上的顯示方式至關(guān)重要。你可以這樣問自己：他們會(huì)很容易被看到嗎？當(dāng)在圖像或視頻之上使用字母時(shí)，這種考慮同樣是很重要的，尤其當(dāng)在很多不同大小的屏幕尺寸或運(yùn)動(dòng)中的內(nèi)容的情況下，背景中的顏色很難定位。

設(shè)計(jì)師克服這個(gè)問題的另一種辦法是在圖像或視頻上使用顏色疊加，從而創(chuàng)建一些可讀性的保險(xiǎn)。無論是暗透明度還是明亮的色調(diào)，疊加層都可以確保文本按預(yù)期顯示，而與背景中發(fā)生的情況無關(guān)。

另一個(gè)正在成長中的趨勢建議就是——從圖像或視頻中刪除文本，并排配對。這為兩個(gè)元素提供了空間，而不犧牲兩者的內(nèi)容。

2.采用對比性字體的樣式

字體或樣式稍微有點(diǎn)差異就立即可以將用戶的注意力吸引到文字上。視覺的興趣會(huì)隨著字體的不同而增加，例如Le Farfalle的品牌logo字體主要的標(biāo)志性特征就是腳本和襯線的細(xì)節(jié)處理。

每種字體都是有趣且各有個(gè)性的，但兩者之間的主要區(qū)別在于如何創(chuàng)造性的將他們組合在一起。

以這種方式配對字體可能有點(diǎn)棘手，因?yàn)橐恍┟黠@不同風(fēng)格的配對可能讓用戶感到震驚。選擇具有對普通用戶不那么明顯的一些相似性的字體，例如常見的x高度，字體形狀（檢查小寫字母“o”以查看樣式是否為圓角或更多橢圓）或傾斜。通過在這些區(qū)域保持類似的感覺，可以以創(chuàng)建大量對比度而不中斷網(wǎng)站設(shè)計(jì)流程的方式混合和匹配樣式。

3.大小變化

使用超大或過小字體帶來的這種比較大的視覺反差來使用戶感到驚艷。

超大的排版可以飽含樂趣的設(shè)計(jì)，這是一種引人入勝的方式，可以吸引用戶不斷訪問你的網(wǎng)站。雖然尺寸不足的字體可以同樣有效，但是使用起來要困難得多。

將超大尺寸的選項(xiàng)與更傳統(tǒng)尺寸的文本塊配對，以突出顯示文本大小之間的差異。 它將有助于在網(wǎng)站設(shè)計(jì)中提供一個(gè)焦點(diǎn)，使文字很難被用戶忽視和避免。繼續(xù)主題，除了顯示字體和考慮比正常稍大的子標(biāo)題，以便相同的超大，面對面的概念跟隨用戶在整個(gè)網(wǎng)頁設(shè)計(jì)。

4.考慮對齊

許多人在考慮可讀性時(shí)忘記了對齊。

對此，我們有兩種思想方式：

· 使用對比顯示和標(biāo)頭對比文本。

· 在整個(gè)網(wǎng)站設(shè)計(jì)中使用相同的對齊方式。

這兩種想法都是以自己的方式。考慮文本對齊與設(shè)計(jì)的其余部分的關(guān)系。對齊可以提供足夠的對比度使文本和背景分離開。這可以包括從畫布邊緣和文本之間的間距到與其他元素相關(guān)的放置之間的一切。

當(dāng)談到對齊，最好的思考方式是你把他想象成一個(gè)按鈕。文本如何在按鈕內(nèi)對齊？大多數(shù)設(shè)計(jì)師會(huì)選擇中心，但這并不意味著網(wǎng)站的其余部分將包括中心文本。對齊由元素本身決定?，F(xiàn)在考慮整個(gè)網(wǎng)頁設(shè)計(jì)如何進(jìn)行擴(kuò)展。

5.文本流

隨著網(wǎng)頁設(shè)計(jì)包含了更多的的文本，文本流就變得越來越重要。如果文本元素不以分層方式無縫流動(dòng)，則用戶可能通過以不合邏輯的方式閱讀而丟失或錯(cuò)過信息。

關(guān)于文本流的主要考慮因素包括：

· 文本塊的大小

· 項(xiàng)目符號(hào)和列表。

· 行的高度和長度

· 粗體或斜體

· 顏色

這些文本屬性中的每一個(gè)元素的運(yùn)用都有助于區(qū)分關(guān)鍵字、信息、短語以及其他。它們給用戶提供一個(gè)視覺進(jìn)入點(diǎn)以使他們從頭閱讀文本信息，以便最重要的信息可以直達(dá)用戶。

在長文本塊中使用不同的樣式——這對于長型內(nèi)容或博客特別重要，它可以減少讀者閱讀的疲勞感。如果用戶由于閱讀摘要就已經(jīng)感到疲勞，因?yàn)椴榭春驼鸵呀?jīng)成了麻煩，他們就更不會(huì)去消費(fèi)內(nèi)容。所以，將它分解成更容易閱讀的小部分。

6.保持一致

可讀性的最后一個(gè)關(guān)鍵是一致性。無論你是在首頁或標(biāo)題或在內(nèi)容中創(chuàng)建對比，那么你需要堅(jiān)持在整個(gè)網(wǎng)頁設(shè)計(jì)中使用它。

使用相同的顏色，或樣式或字體類型，會(huì)在一定程度上提示用戶他們并沒有在設(shè)計(jì)的信息區(qū)中迷失。不管他們在哪里導(dǎo)航進(jìn)入到網(wǎng)站中的任何一個(gè)頁面，它仍然會(huì)看起來和感覺像你的網(wǎng)站。

通過從一開始就建立一個(gè)黑色和白色的背景和文本塊組合做這個(gè)。陰陽顏色組合在標(biāo)題和后續(xù)文本框中的英雄圖像上方通過站點(diǎn)特征相同的文本和顏色模式。

總結(jié)

對比是幫助建立任何設(shè)計(jì)項(xiàng)目的視覺興趣的工具之一。但是創(chuàng)建具有層次結(jié)構(gòu)的可讀排版也是同等重要的。

高對比度是最具可讀性的選項(xiàng)。過于相似的顏色或樣式在可讀性方面幾乎總是存在問題。高度可讀的設(shè)計(jì)使用戶易于理解信息所要表達(dá)的是什么，它提供了文本和其他元素之間的大量對比。

----圖文來自：design shack