在開(kāi)始之前，我有一個(gè)問(wèn)題；在設(shè)計(jì)網(wǎng)站時(shí)，您的首要任務(wù)是什么？是不是很吸引人的外表？還是很酷的效果？

至于我，我喜歡優(yōu)先考慮網(wǎng)站功能和用戶體驗(yàn)。界面很重要，但您網(wǎng)站的功能應(yīng)該更重要。您應(yīng)該以一種清晰且合乎邏輯的方式將您的想法或產(chǎn)品傳遞給用戶。尤其是在建立品牌時(shí)，您需要使您的網(wǎng)站看起來(lái)值得信賴。

但是你如何建立一個(gè)值得信賴的網(wǎng)站？

關(guān)鍵點(diǎn)落在設(shè)計(jì)上。即使您是一家小型、自力更生的初創(chuàng)公司，也最好有一位網(wǎng)頁(yè)設(shè)計(jì)師來(lái)幫助您進(jìn)行網(wǎng)站設(shè)計(jì)。

設(shè)計(jì)一個(gè)既美觀又實(shí)用的好網(wǎng)站并不容易。經(jīng)驗(yàn)豐富的用戶體驗(yàn)顧問(wèn)可以幫助您分析目標(biāo)用戶的行為，創(chuàng)建和實(shí)施有效的用戶界面——最終目標(biāo)是讓您的產(chǎn)品用戶體驗(yàn)更上一層樓。這就是使您獲得可靠業(yè)務(wù)成果的原因。

而且，了解網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)錯(cuò)誤以及如何有效避免它們也很重要。如果您感到困惑，我將通過(guò)展示一些糟糕的網(wǎng)頁(yè)設(shè)計(jì)示例來(lái)向您展示一個(gè)好的網(wǎng)站應(yīng)該是什么樣子。

好的和壞的網(wǎng)頁(yè)設(shè)計(jì)之間的差異

網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)一直在變化，所以網(wǎng)頁(yè)上的設(shè)計(jì)原則真的很難定義，但是，仍然有經(jīng)得起時(shí)間考驗(yàn)的黃金法則。我檢查了數(shù)百個(gè)站點(diǎn)并發(fā)現(xiàn)了幾個(gè)設(shè)計(jì)原則。這些包括：

• 易于理解的導(dǎo)航
• 正確使用動(dòng)畫(huà)
• 不錯(cuò)的配色方案
• 干凈的布局
• 視覺(jué)上吸引人的界面
• 選擇適合主題或主題的設(shè)計(jì)
• 保持設(shè)計(jì)元素和內(nèi)容井井有條

以上原則只是網(wǎng)頁(yè)設(shè)計(jì)的一些規(guī)則，但它們都清楚地表明，好的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該美觀、易于理解和易于使用。也就是說(shuō)，一個(gè)好的網(wǎng)站應(yīng)該提供出色的用戶體驗(yàn)。

十大糟糕的網(wǎng)頁(yè)設(shè)計(jì)示例

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

我不想刻薄，但每次看到它真的會(huì)傷害我的眼睛。該網(wǎng)站實(shí)際上將圖形、內(nèi)容和鏈接放置在任何地方。所有元素一起使網(wǎng)站變得難以理解。

為什么 Arngren 是一個(gè)設(shè)計(jì)不佳的網(wǎng)站？

1）最大的問(wèn)題是該站點(diǎn)不使用網(wǎng)格。

2) 令人難以置信的導(dǎo)航結(jié)構(gòu)。

3）糟糕的排版使其不可讀。

4) 隨機(jī)使用顏色。

網(wǎng)格可以使您網(wǎng)站上的所有內(nèi)容都干凈整潔。它將所有元素保留在適當(dāng)?shù)奈恢?，并幫助您確定它們的大小、文本的大小和空間等。使用網(wǎng)格，您可以創(chuàng)建一個(gè)一致的、精心設(shè)計(jì)的界面。

在網(wǎng)頁(yè)設(shè)計(jì)中使用網(wǎng)格的一個(gè)很好的網(wǎng)頁(yè)設(shè)計(jì)示例 - 一切都井井有條。

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

元素之間清晰而有力的對(duì)比可以幫助用戶了解頁(yè)面的核心信息是什么。它可以幫助用戶更好地閱讀和理解信息。在這個(gè)網(wǎng)站上，背景顏色和文本顏色非常相似，對(duì)比很弱。差的對(duì)比度使文字變得模糊。此外，小字體使文本的可讀性極差。

一個(gè)好的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該確保文本和圖片具有高度可讀性。實(shí)際上，提高可讀性并不難，只要利用一切——顏色、空間和大小，使它們具有高對(duì)比度。例如，善用排版，通過(guò)不同的字體大小突出重要信息，顏色之間的對(duì)比加強(qiáng)了視覺(jué)效果。

具有適當(dāng)對(duì)比度的良好網(wǎng)頁(yè)設(shè)計(jì)應(yīng)如下所示：

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

您應(yīng)該始終使用響應(yīng)式設(shè)計(jì)框架，或采用其他更好的解決方案。您的網(wǎng)頁(yè)需要像在網(wǎng)站上一樣在移動(dòng)設(shè)備上順利運(yùn)行。在這個(gè)網(wǎng)站上，在手機(jī)上加載時(shí)，仍然顯示一整頁(yè)，明文界面如此糟糕。它沒(méi)有可查看的移動(dòng)版本，因此無(wú)法在手機(jī)上使用。我會(huì)放棄這樣的網(wǎng)站。

好的網(wǎng)頁(yè)設(shè)計(jì)——響應(yīng)式設(shè)計(jì)。

4. Pacific Northwest X-Ray Inc - 令人不快的配色方案

這個(gè)網(wǎng)頁(yè)設(shè)計(jì)就像一個(gè)混合調(diào)色板，其中包含大量沖突的顏色和文本顏色，并且還混合了背景顏色。所有這些都使用戶難以閱讀。此外，導(dǎo)航相當(dāng)復(fù)雜。

一個(gè)好的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該正確地使用顏色來(lái)創(chuàng)造一個(gè)漂亮簡(jiǎn)潔的界面和氛圍。 它應(yīng)該可以緩解用戶的眼睛，讓用戶操作起來(lái)毫不費(fèi)力，就像這樣：

5. Gatesnfences - 導(dǎo)航和操作不佳

網(wǎng)站導(dǎo)航的最大特點(diǎn)是不言而喻的。當(dāng)用戶登錄您的網(wǎng)站時(shí)，他/她應(yīng)該了解他們接下來(lái)可以做什么以及要采取什么行動(dòng)才能到達(dá)目的地。導(dǎo)航必須引人注目，并且通常應(yīng)位于頁(yè)面頂部。不要嘗試像這個(gè)網(wǎng)站那樣設(shè)計(jì)導(dǎo)航。它只會(huì)讓用戶更加困惑。

此外，導(dǎo)航內(nèi)容和交互也需要清晰，所以不要使用水平滾動(dòng)條或其他不尋常的動(dòng)畫(huà)設(shè)計(jì)。如果你這樣做了，你至少應(yīng)該給用戶一些提示，讓他們知道你的網(wǎng)站是如何工作的。

網(wǎng)頁(yè)設(shè)計(jì)好的導(dǎo)航應(yīng)該是這樣的：

6. Uat - Bad Link 和錯(cuò)誤的 CTA 設(shè)置

亂七八糟的鏈接和死鏈接都是網(wǎng)站的主要錯(cuò)誤。您應(yīng)該手動(dòng)檢查您的鏈接或經(jīng)常使用網(wǎng)站鏈接檢查器等工具。

此外，您需要確保鏈接的功能。尤其是文本中的鏈接，您應(yīng)該使它們足夠明顯且易于點(diǎn)擊。例如，不要在文本中添加大量文本鏈接。在移動(dòng)小屏幕上瀏覽文本時(shí)，用戶很難點(diǎn)擊正確的鏈接。

在這個(gè)網(wǎng)站上，每一張動(dòng)人的小圖其實(shí)都是一個(gè)鏈接。別說(shuō)它一直在移動(dòng)，文字本身很模糊，所以用戶不知道顯示的是什么信息。

CTA 設(shè)置也必須清晰。不要在同一級(jí)別給用戶太多的 CTA 選擇，因?yàn)檫@將花費(fèi)用戶更多的時(shí)間來(lái)確定他們更喜歡選擇哪一個(gè)。看看這個(gè)例子：

同一級(jí)別的 CTA 過(guò)多會(huì)使用戶更加困惑。此外，您應(yīng)該只保留一個(gè) CTA 來(lái)突出關(guān)鍵點(diǎn)。以下是精心設(shè)計(jì)的 CTA。

7. Nmg-group - 界面圖片背景不清晰

您在網(wǎng)頁(yè)上使用的圖片可以是您網(wǎng)站的前門(mén)。一張好看的圖片讓你的網(wǎng)站更加美觀和舒適。一些設(shè)計(jì)師甚至將整張圖片用作背景圖片。

在這個(gè)網(wǎng)站上，設(shè)計(jì)其實(shí)很不錯(cuò)，但是仔細(xì)看你會(huì)發(fā)現(xiàn)文字和背景圖片太不堪重負(fù)了。網(wǎng)站的背景圖片被其他元素覆蓋，所以整個(gè)界面實(shí)際上是壞的。

在這里使用透明按鈕將是一個(gè)更好的選擇。也就是說(shuō)，在網(wǎng)頁(yè)上設(shè)計(jì)按鈕時(shí)，應(yīng)該摒棄復(fù)雜的顏色、樣式和紋理。相反，只需勾勒線框并使用僅指示功能的文本。這是一個(gè)更好的。

總結(jié)一下

網(wǎng)站的設(shè)計(jì)需要服務(wù)于網(wǎng)站本身的功能。它還需要考慮美觀和其他要求。我希望以上糟糕的網(wǎng)頁(yè)設(shè)計(jì)示例對(duì)您有用，并幫助您了解什么是糟糕的網(wǎng)頁(yè)設(shè)計(jì)，以及將來(lái)如何避免它們。

如果您有一個(gè)新的網(wǎng)站需要建設(shè)，設(shè)計(jì)樂(lè)于為您服務(wù)，讓客戶清楚所有流程，網(wǎng)站建設(shè)考慮每一個(gè)細(xì)節(jié)是設(shè)計(jì)的職責(zé)，也成為了我們的習(xí)慣，設(shè)計(jì)已經(jīng)與各個(gè)行業(yè)合作過(guò)，并且有一個(gè)經(jīng)過(guò)驗(yàn)證的產(chǎn)生結(jié)果的過(guò)程。

與設(shè)計(jì)合作最重要的是，在您簽署或支付任何費(fèi)用之前，我們會(huì)為您的新網(wǎng)站提供免費(fèi)的設(shè)計(jì)模型，這是最好的部分。