網(wǎng)站設(shè)計

Website development

如何善用對比度來提升網(wǎng)頁內(nèi)容的可讀性

發(fā)布時間：2017-03-12 11:17:34

如何用對比度來增加網(wǎng)頁內(nèi)容的可讀性.jpg

當(dāng)我們聊設(shè)計的時候，可讀性是我們常提及的話題。良好的設(shè)計應(yīng)該都是可讀的設(shè)計，如果信息都無法正常而清晰的傳達，那么設(shè)計就失去了意義。

設(shè)計的可讀性和排版設(shè)計息息相關(guān)，與此同時，對比度的控制也是其中的核心。想要提升內(nèi)容的可讀性，讓內(nèi)容以更加順暢、更符合邏輯的形式呈現(xiàn)在用戶面前，你需要借助對比度來表達，讓用戶真正順暢的理解。

色彩對比

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

創(chuàng)建色彩對比的方法有很多，流行的做法是在白色或者淺色的背景上使用黑色或者深色的文字。這種設(shè)計由來已久，經(jīng)久不衰的理由是它確實非常有用。當(dāng)然，將兩種顏色倒置過來，也一樣有用。

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

為了降低背景多變的色彩對于文字的視覺影響，一個比較靠譜的方案是在圖片和視頻上覆蓋上一個半透明的有色圖層，來“統(tǒng)一”色調(diào)，讓文本的可讀性更好。設(shè)計師可以通過調(diào)整這個有色圖層的透明度、明度和色調(diào)來控制和文字的對比度，這樣一來，背景圖片和視頻中的內(nèi)容對于文字的影響可以降到低。

另外一個方案，是將文字和圖片、視頻分開排布，這樣就不會犧牲兩者的信息表現(xiàn)力，唯一的問題是需要提供雙倍的展示空間，并且需要選取合理的排版布局。

文本樣式的對比

不同風(fēng)格樣式的文字能夠借助差異，吸引用戶的注意力。有趣而讓人著迷的字體越來越多，比如手寫襯線字體 Le Farfalle 就是如此。

單個字體本身的優(yōu)秀設(shè)計是很不錯，但是兩種不同字體的對比帶來的反差，更能吸引用戶。

不過，不同字體的搭配是非常講究的，因為風(fēng)格不搭的不恰當(dāng)誰家常常會讓用戶感到震驚?？梢赃x擇一些具有相同特征的不同字體，用戶不會為之感到突兀，這些字體好擁有相同的x高度（小寫字母x的高度），在弧度和傾斜角度上非常接近。這些“和而不同”的字體能讓文本內(nèi)容看起來一致而有差異，有趣而不枯燥。

大小尺寸對比

超大的字體和超小的字體所構(gòu)成的視覺差常常能夠讓用戶驚嘆。

當(dāng)字體大到一定程度的時候，就能帶來足夠的視覺沖擊，如果搭配上很小的字體構(gòu)成對比，那么這種視覺沖擊會顯得更加引人矚目。雖然超小的字體單獨使用也能形成類似的效果，但是相比超大字體要困難的多。

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

對齊模式

談到可讀性的時候，對齊其實也個無法回避的話題。而在排版中，不同的對齊模式也是能構(gòu)成對比的。

通常，在對齊的設(shè)計上有兩種常規(guī)思路：

·正文和標題采用不同的對齊模式，構(gòu)成對比

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

從某種意義上來說，兩種思路都是對的。選取那種思路，主要取決于文本、標題和其他設(shè)計元素之間的關(guān)系。如果采用相同的對齊方式，能否保證標題和正文之間有明顯對比、能否從背景和其他元素中脫穎而出？文本的行間距、字體大小、和其他元素之間的距離能否構(gòu)成良好的視覺差？

在談到UI中的對齊問題的時候，直觀的模型是一段文本和按鈕之間的關(guān)系。排版中，文本元素和按鈕之間的對齊模式應(yīng)該是怎樣的？這個問題很有意思，許多設(shè)計師傾向于讓文本和按鈕縱向排列，居中對齊，但是網(wǎng)站的其他元素搭配進來的時候，又往往不會居中對齊。所以，對齊方式，是由元素本身的屬性來決定，根據(jù)整個設(shè)計，合理搭配。

長文本內(nèi)容

對于包含大量文本內(nèi)容的網(wǎng)站而言，正文部分的內(nèi)容排版就顯得相當(dāng)重要了。如果文本內(nèi)容都是無縫的呈現(xiàn)出來的話，用戶很可能因為沒有層次而無法抓住重要信息。

所以，網(wǎng)頁中大量的文本信息，應(yīng)該考慮下列因素：

·文本塊的區(qū)域和大小

·每行文字的長度和高度

·項目編號和列表

·字符的粗體和斜體

·色彩

所有的這些屬性都能將文本中特定的關(guān)鍵詞、信息甚至語氣同其他的內(nèi)容區(qū)分開來，它們會成為文本中重要的錨點，將和總要的信息通過這種差異和對比，推送到用戶面前。

在較長的文本區(qū)塊中（尤其是博客和長文中）使用不同的樣式來區(qū)分不同類型的內(nèi)容，這樣做可以明顯降低用戶閱讀的疲勞度。將長內(nèi)容分解為更易于閱讀的部分，用戶才更容易買單。

保持一致

一致性幾乎是所有設(shè)計領(lǐng)域都遵循的原則，無論你在首頁或者標題、正文中是如何運用對比的，好將它延伸到整個設(shè)計規(guī)范當(dāng)中去。

盡量使用相同的色彩，一樣的樣式，統(tǒng)一的字體，如果設(shè)計無法保證一致性，會讓用戶在界面中感到迷惑。確保用戶到哪個地方都會覺得他們在你的網(wǎng)站或者APP當(dāng)中。

Ntgrate 這個網(wǎng)站就很好的貫徹了一致性的設(shè)計。背景統(tǒng)一使用了菱形的柵格，而文本則統(tǒng)一使用白底黑字的卡片來承載，同時網(wǎng)站中的大圖則是置于背景和文本而卡片之間。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7171,0.html

上一篇：2017技術(shù)SEO審計：一個營銷的基本指南

下一篇：大大提高你的內(nèi)容質(zhì)量的8個簡單的策略

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計
程序設(shè)
計研發(fā)
資料錄
入優(yōu)化
確認交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標簽

Website development

客戶評價

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個項目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細致地完成我們的每一個需求，再次感謝以至誠之心做事的云智互聯(lián)團隊。

潘濤
我是東方龍馬集團，在云智家做了2個企業(yè)官網(wǎng)，服務(wù)態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運行方便，后臺操作的簡單。技術(shù)還會耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯的。

陳曦
不錯，價格比較合適，重點是響應(yīng)速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因為他們都是針對每個項目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時。

張經(jīng)理