在開始之前，我有一個問題，在設計一個網站時，你最關注的是什麼？
是美輪美奐的介面？還是酷炫的效果？其實，網站功能和使用者體驗才是網站設計最該解決的問題。優質的使用者體驗可以讓你的網站給訪客留下深刻的印象，這有助於你打造品牌，增加網站訪問量。
那麼，如何建立一個讓使用者信賴的網站？
關鍵點還是在於網頁設計。甚至對於那些很小的初創公司，也最好找一個網頁設計師來幫助設計。那麼問題又來了，什麼樣的網頁設計才是好的網頁設計？網頁設計中常見的錯誤有哪些？如何有效地避免它們？
如果你還在為這些問題苦惱，不妨看看此文，我會通過講解9個糟糕的網頁設計例項從反面來說明好的網頁設計到底應該是什麼樣子。希望你會喜歡。
首先，我們還是來看看網頁設計的一些基本規則。
儘管網頁設計趨勢一直在變化，網頁設計原則很難界定。但是，仍然存在著黃金法則。在進行網頁設計的時候，以下幾個基本原則還需謹記：
- 易於理解的導航
- 合理使用的配色
- 正確的動畫
- 易於理解的佈局
- 視覺友好
- 設計元素不妨礙內容展示
現在，我們一起看看9個上榜的糟糕網頁設計案例。這些案例可能違反了一個或多個網頁設計原則，這是你在設計中要學會規避的問題。此外，這些案例僅供分析，首先宣告沒有惡意。
1.Arngren - 設計混亂和網格失蹤
不得不說每次開啟這個網站我的眼睛都感覺會閃瞎。該網站的頁面上，字型，圖形，內容，連結，所有元素都混亂放置，一起構成了一個雜亂無比的網頁介面。這個網頁設計可以說是違法了網頁設計的一切原則，無法找到任何符合網頁設計原則的線索。它最大的問題是網格的缺失，因此所有佈局和內容都隨意放置，雜亂不堪。其次，導航結構也混亂，字型排版又過於小而亂，訪客根本無從閱讀，配色也是很隨意，沒有任何規劃。
一個使用網格使內容和元素的佈局組織有序的網頁設計應該是這個樣子。
2. Typesetdesign - 設計中缺乏對比
瀏覽網站時，我們希望看到頁面元素間有清晰和鮮明的對比，保障資訊高度可讀。而該網站的設計，背景色的相關資訊的色系相近，對比度很弱，而一旦圖片背景與文字之間的對比很差，文字就會模糊不清。使用者不僅可能會錯過了一些文字提示，而且更會錯過了你想要傳達的重要內容。如果沒有對比，網站的色彩組合和整體展示都會讓我們不知所措。
網頁設計的對比可以是方方面面的，比如，字型間的對比突出重要資訊和次要資訊，色彩間的對比強化視覺效果，留白空間和介面原色的對比使整個介面看起來舒適美觀，等等。總之，對比可以幫助我們更好地閱讀和理解的資訊，你要合理的利用顏色，空間和大小，從而讓使用者知道如何進行操作。
一個好的具有對比度的網頁設計，應該是這樣的。
3. Theweddinglens - 不採用響應式設計
一定要使用響應式設計框架，你的網頁或許需要在手機上執行，必須要保證手機上執行和在網站上的執行一樣流暢。但是該網站，在手機上載入出來後還是一整個頁面，沒有自適應。由於該網站沒有手機版的檢視，因此造成了使用者在移動端根本無法使用。我想，或許很多使用者和我一樣，直接放棄這個網站了。沒有自適應的網站，勢必會流失很多核心使用者及潛在客戶。
使用響應式設計的網頁設計示範：
4.Pacific Northwest X-Ray Inc - 錯誤的配色
這個網站設計可以說是一盤錯誤的調色盤，它由相互衝突的顏色或文字顏色組成，這些顏色與背景顏色又混合太多，使用者根本難以閱讀。配色方案令人不快，導航也相當複雜，整體看起來彷彿是1997年設計的網站，如今看起來早已過時，該網站也沒有進行更新。雖然這個網站設法解釋它的服務基本上是直接的，不會給使用者造成困惱，但是其實困擾早已產生。
而一個好的配色的網頁設計，應該是美觀簡潔或個性品味的，是可以讓使用者操作簡單舒適，從而進一步體現網站的定位和特點的。比如:
關於UI配色的資訊，之前有專門寫，可以檢視這裡。
5. Gatesnfences - 糟糕的導航和操作流程
導航對於網站的重要性不言而喻，使用者在登陸了你網站時，應該是第一眼就該我明白接下來他可以進行怎樣的操作，哪些操作會把他帶到何處。因此，導航一定要醒目，建議導航和選單欄往往處於頁面的頂部，不要另闢蹊徑，因為導航資訊是在太重要了。
此外，導航的標籤內容和執行效果必須清晰直觀，不要使用水平方向的滾動條或者其他一些不太尋常的動效設計的時候，就算要用，也一定要給使用者一些暗示讓他們知道你的網頁如何工作。不過講真的，過於複雜的設計會讓使用者感到無所適從並直接關閉你的網站。
一個優秀的導航應該是這樣的。
6. Uat - 連結丟失和錯誤的CTA設定
連結缺失或者連結丟失可以說是網站的重大錯誤之一。稽核你的網頁上鍊接是否暢通是必要的任務之一，你可以手動檢查或是使用Website Link Checker等工具。
考慮到連結的可用性，特別是那些文字中的連結一定要足夠明顯並且易於點選，從而避免造成誤操作。因此建議不要在你的文字中新增很多文字連結，特別是在小的移動裝置螢幕上，使用者很難點選到正確的連結。
該網站的每個滾動的小圖片都是一個連線點，上面的圖片和文字非常模糊，使用者根本不知道展示的是什麼資訊。
而C他的設定，要記住清晰明瞭，不要給使用者太多的相同層級的CTA選擇，會造成使用者困擾。看一下示例：
相同層級的CTA過多則會造成使用者困擾，而保留一個則可以突出重點，提升使用者體驗。下圖，就是一個設計不錯的CTA。
7. nmg-group - 介面原色和圖片背景不清
圖片可以說是你整個網頁的門面，一張精美的圖片可以給網頁設計帶來美觀舒適的效果，更別提那些用整張美圖作為背景圖的網頁設計了。如果你網站的背景圖本身很不錯，但卻被其他資訊覆蓋或者破壞美感，這真的是一種浪費。該網站的設計本身很不錯，但仔細看，文字和背景圖片容易造成混亂。
這裡建議使用透明按鈕，即在設計網頁中的按鈕之時，不再設計複雜色彩、樣式和紋理，而是外僅以線框示意輪廓，內只用文字示意功能，背景透出，與整個頁面背景合而為一。
8.Wateronwheels - 不一致的風格
如果保持頁面的流暢簡潔，建議不要嘗試混搭。該網站的文字部分，使用了不同的色彩和字型大小進行對比突出，一定的層級關係，但最後的文字部分用了高亮藍色，其實打破了統一性。
這裡可以看看詳情，統一性對於網頁介面的整體美觀和流暢性至關重要：
9.Greatdreams - 沒有使用留白空間
該網站看上去色彩豐富，對比突出，也很符合小孩子果汁用便飲料的主題，但很多過於明快的色彩交集在一起，沒有任何留白的空間，讓色彩的使用變得極端，使得網站看起來像一幅色彩豐富的油漆畫。文字也沒有任何實質內容，加之誇張的配色，是可讀性變得很差，並且，這網站沒有導航，必須達到底部才能找到一些相關資訊。
一個有留白的網頁設計，是簡單幹淨的：
更多的網頁設計錯誤：
1. 自動播放音樂（在使用者不知情的情況下）
2. 超長的頁面下載時間。如果頁面下載時間超過30秒，很難有使用者會喜歡你的網站。
3. 網站頁面過長。你認為有多少瀏覽都有興趣看你網頁中最下面的內容？ 不要試圖考驗使用者的耐心。
4. 過期的資訊。很久不更新的資訊，很容易讓瀏覽者感到反感，而且在心中也會對你這個網站的品牌形象大打折扣。
5. 孤立的頁面。使用者不知用什麼方法返回首頁。這種情況往往是出現在資訊提示頁或內容調查的結果頁上。使用者體驗不佳。
6. 缺少互動的內容。缺少互動的內容，缺少使用者的參與。不能讓網友表達情感和思想，那麼你的網站也許會變成死網站。
原型設計 - 網頁設計的第一步
如果以上列舉的問題，你中招了一個或者多個，也不要灰心。有句話叫做，practice makes perfect，你需要更多的實踐。那麼從哪裡做起？我的建議是從原型設計開始。
你可以使用國內最好的原型工具Mockplus開始你的網頁設計之路。Mockplus支援網頁專案，我們看看怎麼在Mockplus中進行網頁設計。
第1步：開啟Mockplus並建立一個Web專案
在啟動頁面，你可以選擇個人專案或者團隊專案，選擇後，在彈出視窗裡選擇網頁專案，在這裡，你還可以自由設定網站頁面大小。
接下來就是自由設計了，Mockplus有200多個高度封裝的元件和3000多個向量圖示，可以幫助你快速進項設計。這裡列出幾個小點，拋磚引玉。
1）文字層級：導航欄，主標題，副標題以及主體部分的文字大小有所不同，這裡只需使用Mockplus的單行文字元件和多行文字元件，並設定文字大小就可以突出文字的層級資訊。
2）快速設計：使用格式刷、資料自動填充等工具進行快速重複設計。格式刷可以快速使具有相同層次的文字資訊呈現出同一格式，資料自動填充則可以填充文字資料和圖片。
3）屬性設定：元件屬性功能，可以設定色彩，透明度，邊框顯示和隱藏，可見不可見等，屬性的疊加可以創造出無限的設計空間。
4）圖片匯入：專門的圖片元件，可以匯入你想要的圖片作為網頁配圖和背景圖，還可以自由設計，一鍵匯入，十分便利。
更多設計，等你自己探索。
總結
網頁設計要服務於網站功能以及訪客溝通，還要兼顧美觀，種種要求加起來，使網頁設計變得如此不易。但多學多練習是你唯一成長的途徑，希望以上的內容對你的設計有所幫助，能讓你明白什麼是不好的網頁設計，並在以後的設計中有效規避，也懂得什麼樣的設計才是好的，這樣，你的設計一定會越來越好。