網頁設計(jì)很糟糕的10個原因

良好的網頁設計(jì)是件(jiàn)很難實現的事(shì)情。一個好的網頁設計(jì)，不僅吸引眼球，也是實用的、直觀的、層級簡單卻足夠複雜到保持用戶的興趣。字體(tǐ)、色彩、空白(bái)與内容間的完美平衡可(kě)以構成一個非常好看(kàn)的設計(jì)，你(nǐ)的用戶也會再次回來(lái)。而一個壞的網頁設計(jì)，會把你(nǐ)的用戶從(cóng)你(nǐ)的網站(zhàn)上趕跑。 在設計(jì)一個網頁時，有許多地方會讓許多設計(jì)師(shī)誤入歧途。在本文中，我們會討(tǎo)論讓你(nǐ)的網頁設計(jì)很糟糕的10個原因以及如(rú)何解決它。
1、沒有足夠的空白(bái)

空白(bái)可(kě)以說(shuō)是設計(jì)中最重要的一部分(fēn)。它有助于防止用戶在浏覽網站(zhàn)時變得(de)疲憊，它可(kě)以在内容中劃出距離(lí)，而且它本身(shēn)也看(kàn)上去(qù)不錯。空白(bái)不是必須用白(bái)色的，而是，它僅僅是爲其他(tā)設計(jì)元素提供間隔和緩沖的空間。

2、太多的字體(tǐ)

一般一個簡單的網頁設計(jì)，一般字體(tǐ)不超過3種。多則亂

3、太多的色彩

背景一種顔色，内容文本一種顔色，鏈接一種顔色，頁頭和lightbox一種顔色，圖案和頁腳各一種顔色。這很好，因爲它幫助區分(fēn)了有用的内容。但(dàn)是，多重漸變、幾種鮮豔的色彩和大(dà)量有鮮明對比的色調及飽和度，會破壞你(nǐ)網站(zhàn)的層次和空白(bái)概念。嘗試限制自(zì)己隻用一種鮮豔的色調（如(rú)藍色），再搭配反相(xiàng)的單色（白(bái)、灰、黑(hēi)）以獲得(de)一個漂亮的搭配。這裡(lǐ)強調下豆瓣的配色。也是我喜歡的顔色搭配。

4、沒有内容層次

用戶的眼睛喜歡有秩序的設計(jì)，如(rú)頭部包含導航和LOGO，特定内容使用lightbox，三列分(fēn)欄，頁腳。它有助于在内心組織重要的信息，并引導用戶注意在你(nǐ)想讓他(tā)注意的地方。在傳統藝術(shù)中，新手們被教導色彩、價值和線性透視三原則和其他(tā)藝術(shù)指導。在網頁設計(jì)中，沒有特别奉行的準則，但(dàn)以直觀的方式組織你(nǐ)的内容是一條很好的經驗規則。也是多年(nián)培養的用戶習慣。最終習慣就(jiù)是最終用戶。當然一成不變不是我們所鼓勵的。

5、不考慮用戶的分(fēn)辨率

你(nǐ)的屏幕分(fēn)辨率有2560像素，這非常好。但(dàn)很多人(rén)還(hái)在屏幕上用1024像素的分(fēn)率，有些還(hái)在用640*480或800*600。雖然這種分(fēn)辨率的顯示器正在減少，但(dàn)采用更小的分(fēn)辨率的手機(jī)設備也來(lái)了。現在的網頁設計(jì)寬度标準是960像素，雖然沒有照(zhào)顧到每一種分(fēn)辨率，但(dàn)在主流分(fēn)辨率上可(kě)以呈現的最好。假如(rú)你(nǐ)希望面對大(dà)量的手機(jī)用戶，最好考慮一個手機(jī)版設計(jì)。

6、對比的問(wèn)題

你(nǐ)考慮過閱讀(dú)黑(hēi)底白(bái)字和白(bái)底黑(hēi)字的不同嗎(ma)？你(nǐ)有沒有試過閱讀(dú)一下白(bái)底灰字？有些方式之所以比其他(tā)的更好，其原因就(jiù)是這是一種眼睛感知到對比的方式。如(rú)果你(nǐ)很難舒服的閱讀(dú)文字，考慮一下改變字體(tǐ)大(dà)小或方式。成爲一個大(dà)師(shī)級網頁設計(jì)師(shī)的秘訣：對比，對比，對比。

7、同一件(jiàn)事(shì)情做的不夠多，或做的太多（過猶不及）

多重導航非常好，如(rú)一個在頁頭一個在頁腳。在頁腳加一個”返回頂部”的按鈕也很好。但(dàn)是，太多指向同一目标的途徑會降低可(kě)用性。讓你(nǐ)的奶奶用下你(nǐ)的網站(zhàn)，如(rú)果她搞不定，想想哪些東西讓初次訪問(wèn)的用戶拒絕使用這個網站(zhàn)。

8、不一緻

一緻性是網頁設計(jì)的關鍵。它是把網頁設計(jì)組織在一起的方式，可(kě)以創造一種緊密結合的感覺。在網站(zhàn)頁面互相(xiàng)鏈接的情況下，它可(kě)以幫助用戶把所有頁面都(dōu)聯系在一起。如(rú)果你(nǐ)在整個網站(zhàn)持續改變字體(tǐ)、大(dà)小和色彩，用戶很快(kuài)會覺得(de)不知所措。

9、沒有足夠的文字間距

與空白(bái)有關，文字間距有兩個部分(fēn)，一個是字距（這個不能用CSS直接調整，可(kě)以通過一些高級技術(shù)解決），關系到字母之間的空白(bái)。一個是行距，可(kě)以用CSS直接調整，關系到兩行文字之間的距離(lí)。這些有助于區分(fēn)行與段落，使用戶更容易閱讀(dú)文字。

10、貧乏的尺寸大(dà)小

标準做法是h1的文字大(dà)于h2的文字，頭部文字大(dà)于段落文字。盡量保持一緻的尺寸，因爲它有助于一緻性（第8條）和内容層次（第4條）。保持文字的可(kě)讀(dú)性，但(dàn)不要太大(dà)，讓字體(tǐ)的大(dà)小表現信息的重要性。還(hái)有，10像素以下的尺寸對大(dà)量閱讀(dú)的人(rén)來(lái)說(shuō)太小了。