網(wǎng)頁設(shè)計(jì)敗筆？

時(shí)間：2024-02-14 01:15:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2024-02-14 01:15:01 來源：網(wǎng)站運(yùn)營

網(wǎng)頁設(shè)計(jì)敗筆？：反面教材，這9個(gè)糟糕的網(wǎng)頁設(shè)計(jì)實(shí)例引以為戒

在開始之前，我有一個(gè)問題，在設(shè)計(jì)一個(gè)網(wǎng)站時(shí)，你最關(guān)注的是什么？

是美輪美奐的界面？還是酷炫的效果？其實(shí)，網(wǎng)站功能和用戶體驗(yàn)才是網(wǎng)站設(shè)計(jì)最該解決的問題。優(yōu)質(zhì)的用戶體驗(yàn)可以讓你的網(wǎng)站給訪客留下深刻的印象，這有助于你打造品牌，增加網(wǎng)站訪問量。

那么，如何建立一個(gè)讓用戶信賴的網(wǎng)站？

關(guān)鍵點(diǎn)還是在于網(wǎng)頁設(shè)計(jì)。甚至對(duì)于那些很小的初創(chuàng)公司，也最好找一個(gè)網(wǎng)頁設(shè)計(jì)師來幫助設(shè)計(jì)。那么問題又來了，什么樣的網(wǎng)頁設(shè)計(jì)才是好的網(wǎng)頁設(shè)計(jì)？網(wǎng)頁設(shè)計(jì)中常見的錯(cuò)誤有哪些？如何有效地避免它們？

如果你還在為這些問題苦惱，不妨看看此文，我會(huì)通過講解9個(gè)糟糕的網(wǎng)頁設(shè)計(jì)實(shí)例從反面來說明好的網(wǎng)頁設(shè)計(jì)到底應(yīng)該是什么樣子。希望你會(huì)喜歡。

首先，我們還是來看看網(wǎng)頁設(shè)計(jì)的一些基本規(guī)則。

盡管網(wǎng)頁設(shè)計(jì)趨勢一直在變化，網(wǎng)頁設(shè)計(jì)原則很難界定。但是，仍然存在著黃金法則。在進(jìn)行網(wǎng)頁設(shè)計(jì)的時(shí)候，以下幾個(gè)基本原則還需謹(jǐn)記：

• 易于理解的導(dǎo)航
• 合理使用的配色
• 正確的動(dòng)畫
• 易于理解的布局
• 視覺友好
• 設(shè)計(jì)元素不妨礙內(nèi)容展示

現(xiàn)在，我們一起看看9個(gè)上榜的糟糕網(wǎng)頁設(shè)計(jì)案例。這些案例可能違反了一個(gè)或多個(gè)網(wǎng)頁設(shè)計(jì)原則，這是你在設(shè)計(jì)中要學(xué)會(huì)規(guī)避的問題。此外，這些案例僅供分析，首先聲明沒有惡意。

1.Arngren設(shè)計(jì)混亂和網(wǎng)格失蹤

不得不說每次打開這個(gè)網(wǎng)站我的眼睛都感覺會(huì)閃瞎。該網(wǎng)站的頁面上，字體，圖形，內(nèi)容，鏈接，所有元素都混亂放置，一起構(gòu)成了一個(gè)雜亂無比的網(wǎng)頁界面。這個(gè)網(wǎng)頁設(shè)計(jì)可以說是違法了網(wǎng)頁設(shè)計(jì)的一切原則，無法找到任何符合網(wǎng)頁設(shè)計(jì)原則的線索。它最大的問題是網(wǎng)格的缺失，因此所有布局和內(nèi)容都隨意放置，雜亂不堪。其次，導(dǎo)航結(jié)構(gòu)也混亂，字體排版又過于小而亂，訪客根本無從閱讀，配色也是很隨意，沒有任何規(guī)劃

一個(gè)使用網(wǎng)格使內(nèi)容和元素的布局組織有序的網(wǎng)頁設(shè)計(jì)應(yīng)該是這個(gè)樣子。

2. Typesetdesign - 設(shè)計(jì)中缺乏對(duì)比

瀏覽網(wǎng)站時(shí)，我們希望看到頁面元素間有清晰和鮮明的對(duì)比，保障信息高度可讀。而該網(wǎng)站的設(shè)計(jì)，背景色的相關(guān)信息的色系相近，對(duì)比度很弱，而一旦圖片背景與文字之間的對(duì)比很差，文字就會(huì)模糊不清。用戶不僅可能會(huì)錯(cuò)過了一些文本提示，而且更會(huì)錯(cuò)過了你想要傳達(dá)的重要內(nèi)容。如果沒有對(duì)比，網(wǎng)站的色彩組合和整體展示都會(huì)讓我們不知所措。

網(wǎng)頁設(shè)計(jì)的對(duì)比可以是方方面面的，比如，字體間的對(duì)比突出重要信息和次要信息，色彩間的對(duì)比強(qiáng)化視覺效果，留白空間和界面原色的對(duì)比使整個(gè)界面看起來舒適美觀，等等?？傊?，對(duì)比可以幫助我們更好地閱讀和理解的信息，你要合理的利用顏色，空間和大小，從而讓用戶知道如何進(jìn)行操作。

一個(gè)好的具有對(duì)比度的網(wǎng)頁設(shè)計(jì)，應(yīng)該是這樣的。

3. Theweddinglens - 不采用響應(yīng)式設(shè)計(jì)

一定要使用響應(yīng)式設(shè)計(jì)框架，你的網(wǎng)頁或許需要在手機(jī)上運(yùn)行，必須要保證手機(jī)上運(yùn)行和在網(wǎng)站上的運(yùn)行一樣流暢。但是該網(wǎng)站，在手機(jī)上加載出來后還是一整個(gè)頁面，沒有自適應(yīng)。由于該網(wǎng)站沒有手機(jī)版的視圖，因此造成了用戶在移動(dòng)端根本無法使用。我想，或許很多用戶和我一樣，直接放棄這個(gè)網(wǎng)站了。沒有自適應(yīng)的網(wǎng)站，勢必會(huì)流失很多核心用戶及潛在客戶。

使用響應(yīng)式設(shè)計(jì)的網(wǎng)頁設(shè)計(jì)示范：

4.Pacific Northwest X-Ray Inc - 錯(cuò)誤的配色

這個(gè)網(wǎng)站設(shè)計(jì)可以說是一盤錯(cuò)誤的調(diào)色盤，它由相互沖突的顏色或文字顏色組成，這些顏色與背景顏色又混合太多，用戶根本難以閱讀。配色方案令人不快，導(dǎo)航也相當(dāng)復(fù)雜，整體看起來仿佛是1997年設(shè)計(jì)的網(wǎng)站，如今看起來早已過時(shí)，該網(wǎng)站也沒有進(jìn)行更新。雖然這個(gè)網(wǎng)站設(shè)法解釋它的服務(wù)基本上是直接的，不會(huì)給用戶造成困惱，但是其實(shí)困擾早已產(chǎn)生。

而一個(gè)好的配色的網(wǎng)頁設(shè)計(jì)，應(yīng)該是美觀簡潔或個(gè)性品味的，是可以讓用戶操作簡單舒適，從而進(jìn)一步體現(xiàn)網(wǎng)站的定位和特點(diǎn)的。比如:

關(guān)于UI配色的信息，之前有專門寫，可以查看這里。UI設(shè)計(jì)師——為你量身打造的UI 設(shè)計(jì)配色技巧。

5. Gatesnfences - 糟糕的導(dǎo)航和操作流程

導(dǎo)航對(duì)于網(wǎng)站的重要性不言而喻，用戶在登陸了你網(wǎng)站時(shí)，應(yīng)該是第一眼就該我明白接下來他可以進(jìn)行怎樣的操作，哪些操作會(huì)把他帶到何處。因此，導(dǎo)航一定要醒目，建議導(dǎo)航和菜單欄往往處于頁面的頂部，不要另辟蹊徑，因?yàn)閷?dǎo)航信息是在太重要了。

此外，導(dǎo)航的標(biāo)簽內(nèi)容和運(yùn)行效果必須清晰直觀，不要使用水平方向的滾動(dòng)條或者其他一些不太尋常的動(dòng)效設(shè)計(jì)的時(shí)候，就算要用，也一定要給用戶一些暗示讓他們知道你的網(wǎng)頁如何工作。不過講真的，過于復(fù)雜的設(shè)計(jì)會(huì)讓用戶感到無所適從并直接關(guān)閉你的網(wǎng)站。

一個(gè)優(yōu)秀的導(dǎo)航應(yīng)該是這樣的。

6. Uat - 鏈接丟失和錯(cuò)誤的CTA設(shè)置

鏈接缺失或者鏈接丟失可以說是網(wǎng)站的重大錯(cuò)誤之一。審核你的網(wǎng)頁上鏈接是否暢通是必要的任務(wù)之一，你可以手動(dòng)檢查或是使用Website Link Checker等工具。

考慮到鏈接的可用性，特別是那些文本中的鏈接一定要足夠明顯并且易于點(diǎn)擊，從而避免造成誤操作。因此建議不要在你的文本中添加很多文字鏈接，特別是在小的移動(dòng)設(shè)備屏幕上，用戶很難點(diǎn)擊到正確的鏈接。

該網(wǎng)站的每個(gè)滾動(dòng)的小圖片都是一個(gè)連接點(diǎn)，上面的圖片和文字非常模糊，用戶根本不知道展示的是什么信息。

而CTA的設(shè)置，要記住清晰明了，不要給用戶太多的相同層級(jí)的CTA選擇，會(huì)造成用戶困擾?？匆幌率纠?br>
相同層級(jí)的CTA過多則會(huì)造成用戶困擾，而保留一個(gè)則可以突出重點(diǎn)，提升用戶體驗(yàn)。下圖，就是一個(gè)設(shè)計(jì)不錯(cuò)的CTA。

7. nmg-group - 界面原色和圖片背景不清

圖片可以說是你整個(gè)網(wǎng)頁的門面，一張精美的圖片可以給網(wǎng)頁設(shè)計(jì)帶來美觀舒適的效果，更別提那些用整張美圖作為背景圖的網(wǎng)頁設(shè)計(jì)了。如果你網(wǎng)站的背景圖本身很不錯(cuò)，但卻被其他信息覆蓋或者破壞美感，這真的是一種浪費(fèi)。該網(wǎng)站的設(shè)計(jì)本身很不錯(cuò)，但仔細(xì)看，文字和背景圖片容易造成混亂。

這里建議使用透明按鈕，即在設(shè)計(jì)網(wǎng)頁中的按鈕之時(shí)，不再設(shè)計(jì)復(fù)雜色彩、樣式和紋理，而是外僅以線框示意輪廓，內(nèi)只用文字示意功能，背景透出，與整個(gè)頁面背景合而為一。

8.Wateronwheels - 不一致的風(fēng)格

如果保持頁面的流暢簡潔，建議不要嘗試混搭。該網(wǎng)站的文本部分，使用了不同的色彩和字體大小進(jìn)行對(duì)比突出，一定的層級(jí)關(guān)系，但最后的文本部分用了高亮藍(lán)色，其實(shí)打破了統(tǒng)一性。

這里可以看看詳情，統(tǒng)一性對(duì)于網(wǎng)頁界面的整體美觀和流暢性至關(guān)重要：

9.Greatdreams - 沒有使用留白空間

該網(wǎng)站看上去色彩豐富，對(duì)比突出，也很符合小孩子果汁用便飲料的主題，但很多過于明快的色彩交集在一起，沒有任何留白的空間，讓色彩的使用變得極端，使得網(wǎng)站看起來像一幅色彩豐富的油漆畫。文本也沒有任何實(shí)質(zhì)內(nèi)容，加之夸張的配色，是可讀性變得很差，并且，這網(wǎng)站沒有導(dǎo)航，必須達(dá)到底部才能找到一些相關(guān)信息。

一個(gè)有留白的網(wǎng)頁設(shè)計(jì)，是簡單干凈的：

更多的網(wǎng)頁設(shè)計(jì)錯(cuò)誤：

1. 自動(dòng)播放音樂（在用戶不知情的情況下）

2. 超長的頁面下載時(shí)間。如果頁面下載時(shí)間超過30秒，很難有用戶會(huì)喜歡你的網(wǎng)站。

3. 網(wǎng)站頁面過長。你認(rèn)為有多少瀏覽都有興趣看你網(wǎng)頁中最下面的內(nèi)容？ 不要試圖考驗(yàn)用戶的耐心。

4. 過期的信息。很久不更新的信息，很容易讓瀏覽者感到反感，而且在心中也會(huì)對(duì)你這個(gè)網(wǎng)站的品牌形象大打折扣。

5. 孤立的頁面。用戶不知用什么方法返回首頁。這種情況往往是出現(xiàn)在信息提示頁或內(nèi)容調(diào)查的結(jié)果頁上。用戶體驗(yàn)不佳。

6. 缺少互動(dòng)的內(nèi)容。缺少互動(dòng)的內(nèi)容，缺少用戶的參與。不能讓網(wǎng)友表達(dá)情感和思想，那么你的網(wǎng)站也許會(huì)變成死網(wǎng)站。

網(wǎng)頁設(shè)計(jì)的第一步

如果以上列舉的問題，你中招了一個(gè)或者多個(gè)，也不要灰心。有句話叫做，practice makes perfect，你需要更多的實(shí)踐。那么從哪里做起？我的建議是從原型設(shè)計(jì)開始。

你可以使用國內(nèi)最好的原型工具摹客RP開始你的網(wǎng)頁設(shè)計(jì)之路。

總結(jié)

網(wǎng)頁設(shè)計(jì)要服務(wù)于網(wǎng)站功能以及訪客溝通，還要兼顧美觀，種種要求加起來，使網(wǎng)頁設(shè)計(jì)變得如此不易。但多學(xué)多練習(xí)是你唯一成長的途徑，希望以上的內(nèi)容對(duì)你的設(shè)計(jì)有所幫助，能讓你明白什么是不好的網(wǎng)頁設(shè)計(jì)，并在以后的設(shè)計(jì)中有效規(guī)避，也懂得什么樣的設(shè)計(jì)才是好的，這樣，你的設(shè)計(jì)一定會(huì)越來越好。




最后，為閱讀到這里的朋友提供摹客團(tuán)隊(duì)的一些心意：

設(shè)計(jì)協(xié)作，用摹客！100人以下團(tuán)隊(duì)免費(fèi)使用

相關(guān)閱讀：

反面教材，這9個(gè)糟糕的網(wǎng)頁設(shè)計(jì)實(shí)例引以為戒

設(shè)計(jì)類網(wǎng)站的“聯(lián)系我們”頁面設(shè)計(jì)盤點(diǎn)

干貨！2018年你值得一看的網(wǎng)頁設(shè)計(jì)作品集賞析

網(wǎng)頁設(shè)計(jì)有難題？12款網(wǎng)頁設(shè)計(jì)模板給你靈感！

極簡網(wǎng)頁設(shè)計(jì)技巧，打造簡約之美

進(jìn)階學(xué)習(xí)，如何無代碼設(shè)計(jì)一款美觀且實(shí)用的網(wǎng)站？

網(wǎng)站著陸頁設(shè)計(jì)，讓用戶開心著陸的10大技巧！

網(wǎng)站設(shè)計(jì)缺乏創(chuàng)意？視差滾動(dòng)網(wǎng)站設(shè)計(jì)讓你與眾不同

收集網(wǎng)站用戶反饋的5個(gè)常用問題

這9款小眾時(shí)尚的酒店網(wǎng)站設(shè)計(jì)，讓你不再戀家

時(shí)尚的不僅僅是它們的服裝，還有它們的網(wǎng)站設(shè)計(jì)

10個(gè)最新交互式Web設(shè)計(jì)實(shí)例欣賞

---