如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

1.文字的可讀性

要讓文字提高可讀性，可以通過調整字體樣式、外邊距、內邊距、顏色和對比度等參數來提高文字的可讀性。

• 字體樣式：字體的樣式會影響可讀性。

• 行長度：每行的字符個數對于整體的可讀性起著主要作用。如果文字段落非常寬，閱讀性差。同理，每行文字太短也不行，會給讀者的眼睛帶來壓力，造成混亂。

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

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

目前文章內容流行的字體是14PX（像素），這樣不容易造成視覺疲勞?？梢越y一去設置全局的字體大小，包括行距。

除此，文字鏈接最好用顏色或是其他樣式跟正文區分開來，這樣讀者可以清楚的知道哪里可以點擊。例如：可以給a標簽寫個下劃線代碼text-decoration: underline；。

2.段落的可讀性

段落的可讀性一樣可以用過文字和圖片來提高。文字方面跟上面提到的，可以通過字體樣式、外邊距、內邊距、顏色和對比度等參數來調整之外，還可以通過段落行距來調整字段間距。

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

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

在通篇文字的文章當中也可以考慮適當的穿插一兩張圖片進去，配圖可以提高文章的可讀性。

3.區塊的可讀性

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

區塊留白這個有點類似上面的文字段落留白，在網頁當中，每個區塊與區塊之間也要適當的留白，而這個留白主要還是體現在Margin和Padding上。如果取消兩個區塊的Margin和Padding，那兩個區塊的內容會聚集在一起，這樣不利于觀者去區分區塊之間的關系，也不利于閱讀。所以一般我們在給網站做界面的時候，都會設置一定的間距，就像蟬知系統中默認的間距是7px，當然，這個間距的大小都是可以調整的，看你怎么去設計這個頁面和頁面的整體風格是否和諧而定。

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

4.圖片的可讀性

為什么說圖片也具有可讀性，要知道一張好的幻燈片設計可以起到一定的作用，大部分的網站第一眼看的就是幻燈片，所以圖片的設計也不能忽視。
圖片的設計可以通過對比來設計，比如色彩對比、字體對比等。切記勿用復雜的背景來當幻燈片，這樣標題在畫面上就不夠突出。

上面的例子，顯而易見，當圖片背景比較復雜的時候，文字的閱讀性就差一點。第一張圖的背景比較簡潔大方，加上不用設計的字體，自然而然的主題就凸顯出來了。

5.導航的可讀性

說到導航，這個其實是整個網站架構當中最重要的，所以我也把這點放到最后來講。網站一定要有清晰的導航，方便讀者瀏覽和了解整個網站的架構。所以在設計導航的時候一定要考慮到瀏覽者的習慣。

• 導航要簡單明了，避免奇怪的布局。

上面這個導航不是說做得不好看，而是找交互的設計用起來讓用戶會有點不舒服，導航下拉時，除頭部內容整個頁面整體下移，這也可能就是設計師特意做的效果，但是很明顯，效果不是特別出彩。

• 導航點擊狀態下的樣式和普通樣式需要有明顯區別。

上面的這個導航，點擊狀態下和正常顯示的樣式效果區別不大，所以識別性不夠高。

• 導航的層級關系設計簡單點，最好不要超過三級。

現在很多導航設計都將二級導航和三級導航放在一起，這樣受眾在瀏覽的時候也可以更清晰網站的架構。

優秀的網站，通常在用戶體驗上非常用心，而網站良好的客戶體驗除了優秀的界面設計、合理簡潔的框架布局，還有一點至關重要——網頁的可讀性。

藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

不要小看一個登錄界面，它內里包含很多細微的東西，除去外觀視覺，更多要注意的是交互的操作體驗，比如一些動畫、一些文案提示等細節都要注意，如果你是UI設計師，建議看看這次經驗文章，附上了大量案例，也許能助你未來更好的去設計一個用戶體驗友好的APP登錄界面。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 

如果要深究近期網頁設計趨勢的變化，這些變化更多是關于用戶模式，色彩和排版設計的。但是不論是其中哪種，都牽涉到一些微妙的設計技巧和復雜的影響因素，將它們納入6月的設計趨勢，似乎略有不足。在過去一個月所出現的新網頁設計作品當中，最顯著的設計趨勢還是體現在一些設計元素上，風格獨特的底部導航，自由隨性的Box元素，裝飾性極強的豎線元素。

近期如果你在糾結怎么設計網頁的話，這些設計趨勢可以用來看看~

在網頁設計當中有各種形式和法則可以運用，前面也介紹了網頁設計中常用的一些運用法則，界面上的美觀有了，那交互上的呢？今天我們就界面上來分享變化在網頁設計當中的運用。

現如今，柵格已經幾乎是所有網頁設計的基礎。這些隱形的線條創造出空間的節奏感和視覺的流暢感，他們是讓網頁變得更加和諧的基礎。

但是，柵格存在的目的是幫你創造好的設計，當你開始逐漸適應柵格的存在，千萬不要被它束縛住。你并沒有必要100%地受限于柵格，偶爾打破柵格的設計可能會讓你的設計更加抓人眼球。不過，想要打破柵格又保持網頁的協調，是有技巧的，并非任何“破格”的設計都是好的。今天，我們來聊聊這個。

了解柵格系統

雖然絕大多數的設計都遵循設計規則和用戶的使用習慣，但是標新立異的設計仍然非常有市場。獨特的設計更容易讓人難忘，這一點是毋庸置疑的。在網頁的導航欄設計上，也是如此。隨著越來越多的網頁開始采用加粗的非襯線字體置于網頁頂部作為導航，許多有想法的設計師開始有意識的打破這一規律，別出機杼，采用不一樣的導航模式。

當然，如果你的網站用戶量大，并且需要盡量降低用戶的使用門檻，遵循常規的設計更合適。如果你的網站是更加偏向實驗性的小網站，有趣而好玩的導航模式，反而更適宜于用戶探索。不同的導航模式對于網站的影響不盡相同，針對不同的內容、不同的用戶，你需要仔細挑選導航模式。

實驗性的導航并不具備泛用性，但是如果你在追求別具一格的設計，那么下面這些獨特的導航設計應該能激發你的靈感。

側邊欄導航

網站能承載多種多樣的內容，但無論是哪種內容，通常都會遵循一定的信息架構。在這其中，故事是很特別的一種類型。講故事，往往能以更敘事、更情感化的方式，將內容傳遞給用戶。

一個好的故事，往往始于筆端，但是最終呈現，還是要依靠精巧的設計。那么設計是如何講好故事的呢？今天的文章，為你分享一下創造故事的7個維度。

形式美法則是人類在創造美的形式和過程中對美的形式規律的總結概括，世間萬物的美都可以用形式美法則來概括。在平面構成中也有形式美法則：統一和變化，對稱和平衡，節奏和韻律，對比和調和。前面跟大家有分享了對比、留白在網頁當中的運用，今天我們繼續來分享網頁當中那么多元素是如何做到統一一致的。

留白，也可以稱為負空間。留白并非只是簡單的指白色空間部分，它也可能是同個網頁下的各個元素的空白空間。

這樣的留白可以體現在多個地方，比如：幻燈片、區塊邊距、布局、行距、圖表等。處理留白比較考驗設計師的設計能力，留白可以打造簡約的風格特點，而在哪里留白就顯得比較重要，它不僅是調節界面的視覺審美效果，更是要凸顯主體，達到留白的最終目的。

留白處理不當很容易變成單調乏味。所以留白需要設計師拿捏好尺度。

網頁當中說到布局設計，不得不提柵格，柵格是網頁設計當中的基礎，它可以幫你確定網頁的各個元素要怎么放置，讓整個網頁具有規范感和正式感，還具有一種結構分明的設計感。