好的網(wǎng)頁設(shè)計(jì)是一件很難實(shí)現(xiàn)的事情。一個(gè)好的網(wǎng)頁設(shè)計(jì)不僅要引人注目，而且要實(shí)用、直觀、層次簡單但又足夠復(fù)雜以保持用戶的興趣。字體、顏色、空白和內(nèi)容的完美平衡可以打造出美觀的設(shè)計(jì)，讓您的用戶再次光顧。糟糕的網(wǎng)頁設(shè)計(jì)會(huì)讓您的用戶離開您的網(wǎng)站。在設(shè)計(jì)網(wǎng)頁時(shí)，有很多地方會(huì)讓很多設(shè)計(jì)師誤入歧途。

1、沒有足夠的空白

留白可以說是設(shè)計(jì)的重要組成部分。它有助于防止用戶在瀏覽網(wǎng)站時(shí)感到疲倦，它在內(nèi)容中創(chuàng)造了距離，而且它本身看起來也不錯(cuò)。留白不一定非得是白色，它只是為其他設(shè)計(jì)元素提供間距和緩沖空間。

2、太多的字體

一般來說，一個(gè)簡單的網(wǎng)頁設(shè)計(jì)，字體一般不會(huì)超過3種。更多的混亂

3、太多的色彩

一種顏色用于背景，一種顏色用于內(nèi)容文本，一種顏色用于鏈接，一種顏色用于頁眉和燈箱，一種顏色用于圖案和頁腳。這很好，因?yàn)樗兄趨^(qū)分有用的內(nèi)容。然而，多重漸變、多種鮮艷的顏色以及大量對(duì)比鮮明的色調(diào)和飽和度會(huì)破壞您網(wǎng)站中的圖層和空白空間的概念。嘗試將自己限制在一種明亮的色調(diào)（如藍(lán)色）上，并將其與反色單色（白色、灰色、黑色）搭配，以獲得完美的混合效果。這里著重強(qiáng)調(diào)一下豆瓣的配色。這也是我最喜歡的顏色組合。

4、沒有內(nèi)容層次

用戶眼中喜歡一個(gè)有序的設(shè)計(jì)，比如header包含navigation和LOGO，具體內(nèi)容使用一個(gè)lightbox，三欄，還有一個(gè)footer。它有助于在內(nèi)部組織重要信息，并將用戶的注意力引導(dǎo)到您希望他注意的地方。在傳統(tǒng)藝術(shù)中，新手被教導(dǎo)顏色、價(jià)值和線性透視的三個(gè)原則，以及其他藝術(shù)準(zhǔn)則。在網(wǎng)頁設(shè)計(jì)中，沒有規(guī)則可循，但以直觀的方式組織內(nèi)容是一個(gè)很好的經(jīng)驗(yàn)法則。也是多年來養(yǎng)成的用戶習(xí)慣。最終習(xí)慣是最終用戶。當(dāng)然，不變性不是我們所提倡的。

5、不考慮用戶的分辨率

您的屏幕分辨率為2560 像素，非常好。但是很多人在屏幕上仍然使用1024像素分辨率，也有一些人仍然使用640*480或者800*600。雖然這種分辨率的顯示器正在減少，但分辨率更小的移動(dòng)設(shè)備也隨之而來。當(dāng)前的網(wǎng)頁設(shè)計(jì)寬度標(biāo)準(zhǔn)是960 像素。雖然它并不能照顧到每一個(gè)分辨率，但在主流分辨率上都能很好地渲染。如果要面對(duì)大量的手機(jī)用戶，最好考慮手機(jī)版設(shè)計(jì)。

6、對(duì)比的問題

您是否考慮過閱讀黑底白字和白底黑字的區(qū)別？你試過在白色背景上閱讀灰色文本嗎？某些方法優(yōu)于其他方法的原因僅僅是眼睛感知對(duì)比度的方式。如果您無法舒適地閱讀文本，請(qǐng)考慮更改字體大小或樣式。成為網(wǎng)頁設(shè)計(jì)師大師的秘訣：對(duì)比、對(duì)比、對(duì)比。

7、同一件事情做的不夠多，或做的太多

多個(gè)導(dǎo)航很棒，比如一個(gè)在頁眉中，一個(gè)在頁腳中。在頁腳中有一個(gè)“返回頂部”按鈕也很好。然而，太多通往同一目標(biāo)的路徑會(huì)降低可用性。讓您的祖母使用您的網(wǎng)站，如果她無法理解，請(qǐng)考慮是什么阻止了首次使用該網(wǎng)站的用戶。

8、不一致

一致性是網(wǎng)頁設(shè)計(jì)的關(guān)鍵。這是將網(wǎng)頁設(shè)計(jì)組織在一起的方式，可以創(chuàng)造一種凝聚力。在網(wǎng)站頁面相互鏈接的情況下，它可以幫助用戶將所有頁面聯(lián)系在一起。如果您不斷更改整個(gè)站點(diǎn)的字體、大小和顏色，用戶很快就會(huì)不知所措。

9、沒有足夠的文字間距

和空白相關(guān)的，文字間距有兩部分，一是kerning（這個(gè)不能直接用CSS調(diào)整，可以通過一些高級(jí)技巧解決），這是和字母間距相關(guān)的。一種是行間距，可以直接用CSS調(diào)整，這與兩行文字之間的距離有關(guān)。這些有助于區(qū)分行和段落，使用戶更容易閱讀文本。

10、貧乏的尺寸大小

標(biāo)準(zhǔn)做法是h1的文字大于h2的文字，標(biāo)題文字大于段落文字。嘗試保持一致的大小，因?yàn)樗兄谝恢滦?#8) 和內(nèi)容層次結(jié)構(gòu)(#4)。保持文本可讀，但不要太大，并讓字體大小傳達(dá)信息的重要性。此外，對(duì)于經(jīng)常閱讀的人來說，10 像素以下的尺寸太小了。

本文來源推來客：高端網(wǎng)站建設(shè)

我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對(duì)接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！