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

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

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

1.顏色對(duì)比

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

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

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

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

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

2.采用對(duì)比性字體的樣式

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

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

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

3.大小變化

使用超大或過(guò)小字體帶來(lái)的這種比較大的視覺(jué)反差來(lái)使用戶感到驚艷。

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

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

4.考慮對(duì)齊

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

對(duì)此，我們有兩種思想方式：

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

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

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

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

5.文本流

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

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

· 文本塊的大小

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

· 行的高度和長(zhǎng)度

· 粗體或斜體

· 顏色

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

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

6.保持一致

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

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

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

總結(jié)

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

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

----圖文來(lái)自：design shack