国产日本中文字幕网_久热免费视频_秋霞2016午夜限制电影在线_www色视频还会玩转热点_欧美中日韩免费专区在线_亚洲AV色噜噜男人的天堂吃奶_亚洲人成无码网址_国产成人主播在线观看_欧美韩日精品一区_久久精品国产亚洲AV高清色三区

公司新聞

將想法與觀點(diǎn),與您一起分享~

開發(fā)案例插畫 插畫-樹 插畫-樹

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

潤(rùn)雪科技 時(shí)間:2018-12-20 11:36 瀏覽量:2386

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

設(shè)計(jì)的可讀性和排版設(shè)計(jì)息息相關(guān),與此同時(shí),對(duì)比度的控制也是其中的核心。想要提升內(nèi)容的可讀性,讓內(nèi)容以更加順暢、更符合邏輯的形式呈現(xiàn)在用戶面前,你需要借助對(duì)比度來(lái)表達(dá),讓用戶真正順暢的理解?!?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)站設(shè)計(jì)

色彩對(duì)比



image.png


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

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

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

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

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

文本樣式的對(duì)比


image.png


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

單個(gè)字體本身的優(yōu)秀設(shè)計(jì)是很不錯(cuò),但是兩種不同字體的對(duì)比帶來(lái)的反差,更能吸引用戶?!?a href="http://pgwc.com.cn" target="_self">響應(yīng)式網(wǎng)站

不過,不同字體的搭配是非常講究的,因?yàn)轱L(fēng)格不搭的不恰當(dāng)誰(shuí)家常常會(huì)讓用戶感到震驚。可以選擇一些具有相同特征的不同字體,用戶不會(huì)為之感到突兀,這些字體最好擁有相同的x高度(小寫字母x的高度),在弧度和傾斜角度上非常接近。這些“和而不同”的字體能讓文本內(nèi)容看起來(lái)一致而有差異,有趣而不枯燥。

大小尺寸對(duì)比


image.png


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

當(dāng)字體大到一定程度的時(shí)候,就能帶來(lái)足夠的視覺沖擊,如果搭配上很小的字體構(gòu)成對(duì)比,那么這種視覺沖擊會(huì)顯得更加引人矚目。雖然超小的字體單獨(dú)使用也能形成類似的效果,但是相比超大字體要困難的多?!?a href="http://pgwc.com.cn" target="_self">網(wǎng)站設(shè)計(jì)

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

對(duì)齊模式


image.png


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

通常,在對(duì)齊的設(shè)計(jì)上有兩種常規(guī)思路:

·正文和標(biāo)題采用不同的對(duì)齊模式,構(gòu)成對(duì)比
·在全部排版中沿用相同的對(duì)齊模式

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

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

長(zhǎng)文本內(nèi)容


image.png


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

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

·文本塊的區(qū)域和大小
·每行文字的長(zhǎng)度和高度
·項(xiàng)目編號(hào)和列表
·字符的粗體和斜體
·色彩

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

在較長(zhǎng)的文本區(qū)塊中(尤其是博客和長(zhǎng)文中)使用不同的樣式來(lái)區(qū)分不同類型的內(nèi)容,這樣做可以明顯降低用戶閱讀的疲勞度。將長(zhǎng)內(nèi)容分解為更易于閱讀的部分,用戶才更容易買單?!?a href="http://pgwc.com.cn" target="_self">重慶定制網(wǎng)站

保持一致


image.png


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

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

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

對(duì)比度是讓設(shè)計(jì)項(xiàng)目在視覺上更具吸引力的重要工具,它讓排版布局更加富有層次結(jié)構(gòu),高對(duì)比度的設(shè)計(jì)讓內(nèi)容的可讀性有明顯的提升,而這也是設(shè)計(jì)可用性達(dá)標(biāo)的最基本條件。


來(lái)源聲明:本文【如何善用對(duì)比度來(lái)提升網(wǎng)頁(yè)內(nèi)容的可讀性】由潤(rùn)雪科技編輯原創(chuàng)或采編整理,如需轉(zhuǎn)載請(qǐng)注明來(lái)自潤(rùn)雪科技。以上內(nèi)容部分(包含圖片、文字)來(lái)源于網(wǎng)絡(luò),如有侵權(quán),請(qǐng)及時(shí)與本站聯(lián)系。

TAG標(biāo)簽:網(wǎng)站開發(fā) 網(wǎng)站設(shè)計(jì)

相關(guān)文章
如果您感覺我們的案例非常不錯(cuò),請(qǐng)與我們?nèi)〉寐?lián)系~
立即咨詢
獲取方案及報(bào)價(jià) 023-6288-5285
網(wǎng)站建設(shè)流程 需求溝通
網(wǎng)站建設(shè)流程 簽訂合同
網(wǎng)站建設(shè)流程 項(xiàng)目開發(fā)
網(wǎng)站建設(shè)流程 上線/運(yùn)營(yíng)維護(hù)

張經(jīng)理

186-9655-6121

鄒經(jīng)理

188-1980-6503

潤(rùn)雪科技二維碼
電話咨詢 在線咨詢 微信咨詢