如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

 

當(dāng)我們打開一個(gè)網(wǎng)站，我們會(huì)看網(wǎng)站界面是否美觀，交互是否符合人性化，布局是否合理等等，這些因素對(duì)網(wǎng)站起到一定的影響作用，但最根本影響一個(gè)網(wǎng)站的是整個(gè)網(wǎng)站的可讀性。
良好的設(shè)計(jì)應(yīng)該都是可讀的設(shè)計(jì)，如果信息都無(wú)法正常而清晰的傳達(dá)，那么設(shè)計(jì)就失去了意義。設(shè)計(jì)的可讀性和排版設(shè)計(jì)息息相關(guān)，與此同時(shí)，對(duì)比度的控制也是其中的核心。想要提升內(nèi)容的可讀性，讓內(nèi)容以更加順暢、更符合邏輯的形式呈現(xiàn)在用戶面前，可以通過(guò)以下幾種方式來(lái)提高網(wǎng)頁(yè)的可讀性。

1.文字的可讀性

要讓文字提高可讀性，可以通過(guò)調(diào)整字體樣式、外邊距、內(nèi)邊距、顏色和對(duì)比度等參數(shù)來(lái)提高文字的可讀性。

• 字體樣式：字體的樣式會(huì)影響可讀性。

• 行長(zhǎng)度：每行的字符個(gè)數(shù)對(duì)于整體的可讀性起著主要作用。如果文字段落非常寬，閱讀性差。同理，每行文字太短也不行，會(huì)給讀者的眼睛帶來(lái)壓力，造成混亂。

• 外邊距和內(nèi)邊距：和行距一樣，元素周邊和之間的空隙也影響著用戶閱讀文字本身。

• 顏色與對(duì)比度：文字顏色與相應(yīng)背景也至關(guān)重要。如果在綠色背景上寫綠色文字，就難以閱讀了。設(shè)計(jì)師選擇淺色字深色背景，或是深色字淺色背景，都是有原因的。對(duì)比使得字符容易閱讀。

目前文章內(nèi)容流行的字體是14PX（像素），這樣不容易造成視覺疲勞。可以統(tǒng)一去設(shè)置全局的字體大小，包括行距。

除此，文字鏈接最好用顏色或是其他樣式跟正文區(qū)分開來(lái)，這樣讀者可以清楚的知道哪里可以點(diǎn)擊。例如：可以給a標(biāo)簽寫個(gè)下劃線代碼text-decoration: underline；。

2.段落的可讀性

段落的可讀性一樣可以用過(guò)文字和圖片來(lái)提高。文字方面跟上面提到的，可以通過(guò)字體樣式、外邊距、內(nèi)邊距、顏色和對(duì)比度等參數(shù)來(lái)調(diào)整之外，還可以通過(guò)段落行距來(lái)調(diào)整字段間距。

• 行距：每行文字間的間距也同樣重要?？纯催@篇文章，如果每行文字都與上下兩行粘在一起，你就無(wú)法理解這些句子。

可以從上圖看出，文字段落之間不留白可讀性不高。右邊的標(biāo)題和段落之間、行與行之間和段落與段落之間都留了一定的距離，所以整體會(huì)顯得更為整潔和可讀性高，這些在網(wǎng)站當(dāng)中用Margin、Padding和Line-height可以來(lái)調(diào)整留白的大小。切記，行距大小不是越大越好，一定要適當(dāng)。

在通篇文字的文章當(dāng)中也可以考慮適當(dāng)?shù)拇┎逡粌蓮垐D片進(jìn)去，配圖可以提高文章的可讀性。

3.區(qū)塊的可讀性

區(qū)塊間也要有一定的間距才能提高區(qū)塊的可讀性。

區(qū)塊留白這個(gè)有點(diǎn)類似上面的文字段落留白，在網(wǎng)頁(yè)當(dāng)中，每個(gè)區(qū)塊與區(qū)塊之間也要適當(dāng)?shù)牧舭?，而這個(gè)留白主要還是體現(xiàn)在Margin和Padding上。如果取消兩個(gè)區(qū)塊的Margin和Padding，那兩個(gè)區(qū)塊的內(nèi)容會(huì)聚集在一起，這樣不利于觀者去區(qū)分區(qū)塊之間的關(guān)系，也不利于閱讀。所以一般我們?cè)诮o網(wǎng)站做界面的時(shí)候，都會(huì)設(shè)置一定的間距，就像蟬知系統(tǒng)中默認(rèn)的間距是7px，當(dāng)然，這個(gè)間距的大小都是可以調(diào)整的，看你怎么去設(shè)計(jì)這個(gè)頁(yè)面和頁(yè)面的整體風(fēng)格是否和諧而定。

可以看到上圖左側(cè)區(qū)塊之間的間距為0，整體區(qū)塊和區(qū)塊之間看不出間隙，給人擁堵的感覺。但是右側(cè)留有一定的間隙，所以看起來(lái)比較舒暢，可讀性也相對(duì)高很多。

4.圖片的可讀性

為什么說(shuō)圖片也具有可讀性，要知道一張好的幻燈片設(shè)計(jì)可以起到一定的作用，大部分的網(wǎng)站第一眼看的就是幻燈片，所以圖片的設(shè)計(jì)也不能忽視。
圖片的設(shè)計(jì)可以通過(guò)對(duì)比來(lái)設(shè)計(jì)，比如色彩對(duì)比、字體對(duì)比等。切記勿用復(fù)雜的背景來(lái)當(dāng)幻燈片，這樣標(biāo)題在畫面上就不夠突出。

上面的例子，顯而易見，當(dāng)圖片背景比較復(fù)雜的時(shí)候，文字的閱讀性就差一點(diǎn)。第一張圖的背景比較簡(jiǎn)潔大方，加上不用設(shè)計(jì)的字體，自然而然的主題就凸顯出來(lái)了。

5.導(dǎo)航的可讀性

說(shuō)到導(dǎo)航，這個(gè)其實(shí)是整個(gè)網(wǎng)站架構(gòu)當(dāng)中最重要的，所以我也把這點(diǎn)放到最后來(lái)講。網(wǎng)站一定要有清晰的導(dǎo)航，方便讀者瀏覽和了解整個(gè)網(wǎng)站的架構(gòu)。所以在設(shè)計(jì)導(dǎo)航的時(shí)候一定要考慮到瀏覽者的習(xí)慣。

• 導(dǎo)航要簡(jiǎn)單明了，避免奇怪的布局。

上面這個(gè)導(dǎo)航不是說(shuō)做得不好看，而是找交互的設(shè)計(jì)用起來(lái)讓用戶會(huì)有點(diǎn)不舒服，導(dǎo)航下拉時(shí)，除頭部?jī)?nèi)容整個(gè)頁(yè)面整體下移，這也可能就是設(shè)計(jì)師特意做的效果，但是很明顯，效果不是特別出彩。

• 導(dǎo)航點(diǎn)擊狀態(tài)下的樣式和普通樣式需要有明顯區(qū)別。

上面的這個(gè)導(dǎo)航，點(diǎn)擊狀態(tài)下和正常顯示的樣式效果區(qū)別不大，所以識(shí)別性不夠高。

• 導(dǎo)航的層級(jí)關(guān)系設(shè)計(jì)簡(jiǎn)單點(diǎn)，最好不要超過(guò)三級(jí)。

現(xiàn)在很多導(dǎo)航設(shè)計(jì)都將二級(jí)導(dǎo)航和三級(jí)導(dǎo)航放在一起，這樣受眾在瀏覽的時(shí)候也可以更清晰網(wǎng)站的架構(gòu)。

優(yōu)秀的網(wǎng)站，通常在用戶體驗(yàn)上非常用心，而網(wǎng)站良好的客戶體驗(yàn)除了優(yōu)秀的界面設(shè)計(jì)、合理簡(jiǎn)潔的框架布局，還有一點(diǎn)至關(guān)重要——網(wǎng)頁(yè)的可讀性。

藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)