2019-1-15 用心設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
當(dāng)我們打開一個網(wǎng)站，我們會看網(wǎng)站界面是否美觀，交互是否符合人性化，布局是否合理等等，這些因素對網(wǎng)站起到一定的影響作用，但最根本影響一個網(wǎng)站的是整個網(wǎng)站的可讀性。
良好的設(shè)計應(yīng)該都是可讀的設(shè)計，如果信息都無法正常而清晰的傳達(dá)，那么設(shè)計就失去了意義。設(shè)計的可讀性和排版設(shè)計息息相關(guān)，與此同時，對比度的控制也是其中的核心。想要提升內(nèi)容的可讀性，讓內(nèi)容以更加順暢、更符合邏輯的形式呈現(xiàn)在用戶面前，可以通過以下幾種方式來提高網(wǎng)頁的可讀性。
要讓文字提高可讀性，可以通過調(diào)整字體樣式、外邊距、內(nèi)邊距、顏色和對比度等參數(shù)來提高文字的可讀性。
字體樣式：字體的樣式會影響可讀性。
行長度：每行的字符個數(shù)對于整體的可讀性起著主要作用。如果文字段落非常寬，閱讀性差。同理，每行文字太短也不行，會給讀者的眼睛帶來壓力，造成混亂。
外邊距和內(nèi)邊距：和行距一樣，元素周邊和之間的空隙也影響著用戶閱讀文字本身。
顏色與對比度：文字顏色與相應(yīng)背景也至關(guān)重要。如果在綠色背景上寫綠色文字，就難以閱讀了。設(shè)計師選擇淺色字深色背景，或是深色字淺色背景，都是有原因的。對比使得字符容易閱讀。
目前文章內(nèi)容流行的字體是14PX（像素），這樣不容易造成視覺疲勞?？梢越y(tǒng)一去設(shè)置全局的字體大小，包括行距。
除此，文字鏈接最好用顏色或是其他樣式跟正文區(qū)分開來，這樣讀者可以清楚的知道哪里可以點擊。例如：可以給a標(biāo)簽寫個下劃線代碼text-decoration: underline；。
段落的可讀性一樣可以用過文字和圖片來提高。文字方面跟上面提到的，可以通過字體樣式、外邊距、內(nèi)邊距、顏色和對比度等參數(shù)來調(diào)整之外，還可以通過段落行距來調(diào)整字段間距。
行距：每行文字間的間距也同樣重要?？纯催@篇文章，如果每行文字都與上下兩行粘在一起，你就無法理解這些句子。
可以從上圖看出，文字段落之間不留白可讀性不高。右邊的標(biāo)題和段落之間、行與行之間和段落與段落之間都留了一定的距離，所以整體會顯得更為整潔和可讀性高，這些在網(wǎng)站當(dāng)中用Margin、Padding和Line-height可以來調(diào)整留白的大小。切記，行距大小不是越大越好，一定要適當(dāng)。
在通篇文字的文章當(dāng)中也可以考慮適當(dāng)?shù)拇┎逡粌蓮垐D片進(jìn)去，配圖可以提高文章的可讀性。
區(qū)塊間也要有一定的間距才能提高區(qū)塊的可讀性。
區(qū)塊留白這個有點類似上面的文字段落留白，在網(wǎng)頁當(dāng)中，每個區(qū)塊與區(qū)塊之間也要適當(dāng)?shù)牧舭?，而這個留白主要還是體現(xiàn)在Margin和Padding上。如果取消兩個區(qū)塊的Margin和Padding，那兩個區(qū)塊的內(nèi)容會聚集在一起，這樣不利于觀者去區(qū)分區(qū)塊之間的關(guān)系，也不利于閱讀。所以一般我們在給網(wǎng)站做界面的時候，都會設(shè)置一定的間距，就像蟬知系統(tǒng)中默認(rèn)的間距是7px，當(dāng)然，這個間距的大小都是可以調(diào)整的，看你怎么去設(shè)計這個頁面和頁面的整體風(fēng)格是否和諧而定。
可以看到上圖左側(cè)區(qū)塊之間的間距為0，整體區(qū)塊和區(qū)塊之間看不出間隙，給人擁堵的感覺。但是右側(cè)留有一定的間隙，所以看起來比較舒暢，可讀性也相對高很多。
為什么說圖片也具有可讀性，要知道一張好的幻燈片設(shè)計可以起到一定的作用，大部分的網(wǎng)站第一眼看的就是幻燈片，所以圖片的設(shè)計也不能忽視。
圖片的設(shè)計可以通過對比來設(shè)計，比如色彩對比、字體對比等。切記勿用復(fù)雜的背景來當(dāng)幻燈片，這樣標(biāo)題在畫面上就不夠突出。
上面的例子，顯而易見，當(dāng)圖片背景比較復(fù)雜的時候，文字的閱讀性就差一點。第一張圖的背景比較簡潔大方，加上不用設(shè)計的字體，自然而然的主題就凸顯出來了。
說到導(dǎo)航，這個其實是整個網(wǎng)站架構(gòu)當(dāng)中最重要的，所以我也把這點放到最后來講。網(wǎng)站一定要有清晰的導(dǎo)航，方便讀者瀏覽和了解整個網(wǎng)站的架構(gòu)。所以在設(shè)計導(dǎo)航的時候一定要考慮到瀏覽者的習(xí)慣。
導(dǎo)航要簡單明了，避免奇怪的布局。
上面這個導(dǎo)航不是說做得不好看，而是找交互的設(shè)計用起來讓用戶會有點不舒服，導(dǎo)航下拉時，除頭部內(nèi)容整個頁面整體下移，這也可能就是設(shè)計師特意做的效果，但是很明顯，效果不是特別出彩。
導(dǎo)航點擊狀態(tài)下的樣式和普通樣式需要有明顯區(qū)別。
上面的這個導(dǎo)航，點擊狀態(tài)下和正常顯示的樣式效果區(qū)別不大，所以識別性不夠高。
導(dǎo)航的層級關(guān)系設(shè)計簡單點，最好不要超過三級。
現(xiàn)在很多導(dǎo)航設(shè)計都將二級導(dǎo)航和三級導(dǎo)航放在一起，這樣受眾在瀏覽的時候也可以更清晰網(wǎng)站的架構(gòu)。
優(yōu)秀的網(wǎng)站，通常在用戶體驗上非常用心，而網(wǎng)站良好的客戶體驗除了優(yōu)秀的界面設(shè)計、合理簡潔的框架布局，還有一點至關(guān)重要——網(wǎng)頁的可讀性。
藍(lán)設(shè)計( m.lzhte.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
藍(lán)藍(lán)設(shè)計的小編 http://m.lzhte.cn