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

當我們聊設(shè)計的時候,可讀性是我們最常提及的話題。良好的設(shè)計應(yīng)該都是可讀的設(shè)計,如果信息都無法正常而清晰的傳達,那么設(shè)計就失去了意義。
設(shè)計的可讀性和排版設(shè)計息息相關(guān),與此同時,對比度的控制也是其中的核心。想要提升內(nèi)容的可讀性,讓內(nèi)容以更加順暢、更符合邏輯的形式呈現(xiàn)在用戶面前,你需要借助對比度來表達,讓用戶真正順暢的理解。
色彩對比
前景的文字需要和背景有著明顯的對比,它需要能夠吸引用戶的眼球。
創(chuàng)建色彩對比的方法有很多,最流行的做法是在白色或者淺色的背景上使用黑色或者深色的文字。這種設(shè)計由來已久,經(jīng)久不衰的理由是它確實非常有用。當然,將兩種顏色倒置過來,也一樣有用。
但是,在實際的設(shè)計過程中,情形復雜多變。文字和背景的配色往往受到多種因素的影響,這個時候需要多加嘗試,反思文字在背景的映襯下是否能夠被用戶清晰的看到,尤其是在視頻和圖片之上追加文字排版的時候。
為了降低背景多變的色彩對于文字的視覺影響,一個比較靠譜的方案是在圖片和視頻上覆蓋上一個半透明的有色圖層,來“統(tǒng)一”色調(diào),讓文本的可讀性更好。設(shè)計師可以通過調(diào)整這個有色圖層的透明度、明度和色調(diào)來控制和文字的對比度,這樣一來,背景圖片和視頻中的內(nèi)容對于文字的影響可以降到最低。
另外一個方案,是將文字和圖片、視頻分開排布,這樣就不會犧牲兩者的信息表現(xiàn)力,唯一的問題是需要提供雙倍的展示空間,并且需要選取合理的排版布局。
文本樣式的對比
不同風格樣式的文字能夠借助差異,吸引用戶的注意力。有趣而讓人著迷的字體越來越多,比如手寫襯線字體 Le Farfalle 就是如此。
單個字體本身的優(yōu)秀設(shè)計是很不錯,但是兩種不同字體的對比帶來的反差,更能吸引用戶。
不過,不同字體的搭配是非常講究的,因為風格不搭的不恰當誰家常常會讓用戶感到震驚??梢赃x擇一些具有相同特征的不同字體,用戶不會為之感到突兀,這些字體最好擁有相同的x高度(小寫字母x的高度),在弧度和傾斜角度上非常接近。這些“和而不同”的字體能讓文本內(nèi)容看起來一致而有差異,有趣而不枯燥。
大小尺寸對比
超大的字體和超小的字體所構(gòu)成的視覺差常常能夠讓用戶驚嘆。
當字體大到一定程度的時候,就能帶來足夠的視覺沖擊,如果搭配上很小的字體構(gòu)成對比,那么這種視覺沖擊會顯得更加引人矚目。雖然超小的字體單獨使用也能形成類似的效果,但是相比超大字體要困難的多。
字體的大小差異,很容易被用戶注意到,超大的字體能夠在你的整個設(shè)計當中形成視覺焦點。在文章排版中,正文字體使用正常大小,標題和副標題使用超大字體(副標題會相對小一些),這樣的設(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)容排版就顯得相當重要了。如果文本內(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ī)范當中去。
盡量使用相同的色彩,一樣的樣式,統(tǒng)一的字體,如果設(shè)計無法保證一致性,會讓用戶在界面中感到迷惑。確保用戶到哪個地方都會覺得他們在你的網(wǎng)站或者APP當中。
Ntgrate 這個網(wǎng)站就很好的貫徹了一致性的設(shè)計。背景統(tǒng)一使用了菱形的柵格,而文本則統(tǒng)一使用白底黑字的卡片來承載,同時網(wǎng)站中的大圖則是置于背景和文本而卡片之間。
結(jié)語
對比度是讓設(shè)計項目在視覺上更具吸引力的重要工具,它讓排版布局更加富有層次結(jié)構(gòu),高對比度的設(shè)計讓內(nèi)容的可讀性有明顯的提升,而這也是設(shè)計可用性達標的最基本條件。
相關(guān)文章
- 簡單而片面的說,爬蟲就是由計算機自動與服務(wù)器交互獲取數(shù)據(jù)的工具,這篇文章主要想談?wù)勁老x獲取數(shù)據(jù)的這一部分。爬蟲請注意網(wǎng)站的Robot.txt文件,不要讓爬蟲違法,也不要2017-12-18
- 設(shè)計師可能無法減少App加載頁面的等待時間,但是可以讓等待時間變得有趣~,本文主要為大家淺淡App加載頁面的等待體驗設(shè)計技巧,有興趣的朋友們就來了解下吧2017-12-15
- 表單無論實在網(wǎng)頁設(shè)置中,還是在APP、應(yīng)用程序、軟件界面中都被廣泛運行,從而一個好的表單設(shè)計就非常重要了,本文主要為大家分享幾個交互好且轉(zhuǎn)化率高的表單設(shè)計技巧,有2017-11-20
適配iPhone X要點:十分鐘快速掌握iPhone X UI界面適配技巧
目前,第一批預(yù)約iPhone X手機的朋友們已經(jīng)拿到真機了,目前還沒有適配iPhone X的應(yīng)用運營商,相信都在加班加點適配呢,本文為大家?guī)砹诉m配iPhone X的要點,讓你十分鐘快2017-11-08如何讓網(wǎng)頁可讀性更強?善用F式布局設(shè)計增強網(wǎng)頁可讀性方法解答
雖然網(wǎng)頁排版方式千變?nèi)f化,但是布局方式通常都遵循著幾種常見的規(guī)則,F(xiàn)式布局式設(shè)計能夠增強網(wǎng)頁可讀性,這種說法是有跡可循的,本文就為大家介紹如何運用F式布局,有興趣2017-11-08- 在網(wǎng)頁的設(shè)計中表單都是界面中最常見,也是最重要的組件之一,對于設(shè)計師、前端和開發(fā)者而言,應(yīng)當對于表單的設(shè)計盡量多上心,讓它們更加易用,細致的設(shè)計對于用戶的體驗、2017-10-26
登錄頁面怎么設(shè)計更好?登錄頁面設(shè)計的15個心理學策略
有很多東西下意識地影響了我們的日常決策,這里面很多都是微妙的心理因素在起作用,大家都知道用戶體驗設(shè)計跟心理學相關(guān),甚至會直接影響產(chǎn)品的轉(zhuǎn)化率,那么,登錄頁面怎么2017-10-10網(wǎng)站評論模塊怎么設(shè)計 10個關(guān)鍵點告訴你如何設(shè)計產(chǎn)品評論模塊
網(wǎng)站不僅內(nèi)容很重要,評論模塊同樣也很重要,那么,網(wǎng)站評論模塊怎么設(shè)計呢?對此,本文就為大家詳細介紹10個關(guān)鍵點告訴你如何設(shè)計產(chǎn)品評論模塊,有興趣的朋友們就來了解下2017-09-25網(wǎng)站導航設(shè)計怎么才是符合搜索引擎優(yōu)化?SEO網(wǎng)站導航建設(shè)技巧分享
搭建網(wǎng)站的任何細節(jié)都需要考慮到是否利于SEO優(yōu)化,在網(wǎng)站導航設(shè)計的過程中,我們應(yīng)該怎么樣進行操作才是符合搜索引擎優(yōu)化的呢?對此,本文就為大家進行簡單解答2017-09-21- 在做網(wǎng)站設(shè)計的過程當中,很多人可能會對于頁腳這個方面產(chǎn)生忽略,但是實際上在我們平時的使用下來的整體的分析數(shù)據(jù)表明,頁腳對于一個網(wǎng)站來說還是有非常重要的作用的,那2017-09-04