網站是每一(yī)項業務的中(zhōng)堅力量，這已不是什麽秘密。如果你想讓你的生(shēng)意在這個新冠肺炎時代取得成功，你必須有一(yī)個精心設計的網站。由于社交距離(lí)的關系，越來越多的潛在客戶正在通過公司的網站搜索信息。

一(yī)個精心設計的網站可以幫助你發展你的業務，因爲一(yī)個完美的設計會給你的潛在客戶留下(xià)很好的印象，引導他們采取想要的行動。然而，常見的網頁設計錯誤可能很快就會使你的最佳努力脫軌。當你聽(tīng)到很多關于在設計你的網站時該做些什麽的時候。但你知(zhī)道不該做什麽嗎(ma)？

嗯，給你一(yī)個優勢，我(wǒ)(wǒ)們已經概述了12個常見的網站設計錯誤，損害了許多企業。在設計你的網站時要避免他們，你應該在轉換訪問者方面取得更大(dà)的成功。

什麽是網頁設計？爲什麽它是重要的？

在我(wǒ)(wǒ)們詳細讨論這些常見的網頁設計錯誤之前，了解網頁設計的意義是至關重要的。Web設計是在美觀的布局中(zhōng)叠代地對信息和整個業務功能進行策略化、概念化和傳遞的過程。

網頁設計的視覺組件包括文本内容、圖像、視頻(pín)、顔色、字體(tǐ)、不同的元素和形狀，如按鈕、窗體(tǐ)、圖标、這些元素之間的間距以及整體(tǐ)布局本身。

設計功能包括網站速度、導航、動畫、用戶體(tǐ)驗、用戶交互、網站整體(tǐ)技術架構、SEO、跨浏覽器、跨平台、跨設備設計一(yī)緻性和響應性。

既然我(wǒ)(wǒ)們已經讨論了Web設計以及爲什麽它如此重要，現在是時候了解設計人員(yuán)和開(kāi)發人員(yuán)在2021年必須避免的常見的網頁設計錯誤了。

12種常見的Web設計錯誤

我(wǒ)(wǒ)們都知(zhī)道犯錯是人的事，但從一(yī)開(kāi)始就避免錯誤是神聖的。考慮到這一(yī)點，下(xià)面是12個常見的網頁設計錯誤，你必須避免。

1.在實施前不選擇設計思維方式

大(dà)多數設計師最常見的網頁設計錯誤之一(yī)是他們沒有意識到設計思維和在紙(zhǐ)上繪制版面的重要性。設計師往往傾向于“假設”用戶的事情，而不是進行廣泛的“用戶研究”來理解用戶的需求。但這并不是進行網頁設計的正确方法。

理解設計思維方式是設計用戶成瘾體(tǐ)驗的關鍵。不知(zhī)道什麽是設計思維？這是一(yī)個了解和識别客戶需求和動機的過程。這是一(yī)種心态，同情客戶，詳細說明他們的問題，并建立解決他們的解決方案。

設計思想方法使設計者能夠識别目标、項目範圍、構建業務特性、理解用戶需求、技術能力、解決方案可行性和有效性。所有這一(yī)切幫助設計師收集數據點，設計正确的站點地圖和線框，然後跳到一(yī)些設計軟件。

記住：如果你不了解你的客戶，你将無法爲他們設計好的網站。所以，要善解人意，做用戶調查，了解你的客戶關心的是什麽。

2.不确定網格和欄的優先次序

我(wǒ)(wǒ)們都知(zhī)道網頁設計世界正在以驚人的速度變化，你也需要随之改變。但是有些設計師仍然局限于用舊(jiù)的方式開(kāi)發設計，即僅使用柔性盒、浮點、斷點等來組織内容，而忽略了CSS網格和指南(nán)在開(kāi)發響應性好的網站設計中(zhōng)的重要性。另一(yī)方面，許多初級開(kāi)發人員(yuán)錯誤地認爲，柔性盒和浮動已經死了。這是一(yī)種誤解。從網頁設計師的角度來看，CSS網格、柔性盒、浮點和斷點都很重要，正确地使用它們可以幫助避免所有與網格和列相關的網頁設計錯誤。

使用CSS技術，設計人員(yuán)可以提供無縫的用戶體(tǐ)驗，在這種體(tǐ)驗中(zhōng)，内容可以使用行和列自動分(fēn)割和對齊。網格模闆列，min-max，css的自動調整屬性消除了使用媒體(tǐ)查詢斷點的需要，但是使用網格模闆區域确實需要使用斷點。

大(dà)多數設計師傾向于犯的與css網格相關的網頁設計錯誤之一(yī)是與css數字混淆。在爲CSS框架(如引導)設計時，我(wǒ)(wǒ)們計算一(yī)行的列數，通常是12列，但在網格系統中(zhōng)，我(wǒ)(wǒ)們計算行數或堆棧數。在網格系統中(zhōng)，從第1行移動到第7行類似于跨越6列。

3.不策劃等級美學

大(dà)多數設計師需要避免的另一(yī)個網頁設計錯誤是沒有爲内容的視覺層次制定策略，包括cta。設計良好的用戶行程可以通過設計有效的視覺層次結構來有效地實現。這可以通過使用吸引人的詞、顔色、圖像和小(xiǎo)動畫來實現。這些元素之間的間隔以及它們的大(dà)小(xiǎo)在驅動用戶參與方面也是非常關鍵的。弄錯意味着減少用戶交互，并可能損害您的業務盈利能力。

4.不把直觀導航和無障礙列爲優先事項

跳過頭腦風暴、站點地圖和線框的基本步驟是幾個網頁設計錯誤的基礎。其中(zhōng)最突出的是配置不當的菜單和導航布局。一(yī)個不适當的導航結構可以趕走你的網站訪問者，因爲它是一(yī)個痛苦的滾動随機結構的網站。假設您正在設計一(yī)個包含大(dà)量頁面的網站，那麽将它們分(fēn)組并按層次排列這些類别是有意義的，以使用戶能夠直觀地浏覽網站。

此外(wài)，導航并不是每個設備都一(yī)樣的。盡管導航有不同的工(gōng)作方式，但您需要選擇正确的策略。例如，在使用手機時，您可以選擇漢堡包菜單策略，因爲它在較小(xiǎo)屏幕上的導航效果很好。如果您希望比較您的網站在移動和平闆電(diàn)腦上的導航，可以使用ITBrowser-一(yī)個響應式設計檢查工(gōng)具爲此：

除了導航，還有一(yī)些其他方面可以提高網站的可訪問性。研究表明，有3億多人患有色盲。但是大(dà)多數設計師在設計網站和用戶旅行時忽略了這個方面。有數以百萬計的人有視覺和聽(tīng)覺障礙。不讓這些用戶進入你的設計思維方式可能是一(yī)個主要的，但常見的網站設計錯誤之一(yī)。

從可訪問性的角度來看，文本大(dà)小(xiǎo)、顔色對比、頁面标題、圖像替代文本、鍵盤可訪問性、移動和閃爍内容(如傳送帶、廣告、自動播放(fàng)視頻(pín)、滾動新聞提要和滴答)是網站的關鍵組成部分(fēn)。與遠視作鬥争的人可能會想在小(xiǎo)型設備上放(fàng)大(dà)内容。有視力障礙的人可能更喜歡講話(huà)而不是文字。有注意力缺陷的用戶可能想暫停旋轉木馬等等。一(yī)個好的網頁設計将所有這些都融入到圖片中(zhōng)，以提高網站的可訪問性。做錯事可能會導緻糟糕的用戶體(tǐ)驗，并損害您的業務。下(xià)面是一(yī)個直觀的網頁設計的例子：

以上亞馬遜網站的例子展示了他們是如何以人們所能想象的最好方式使用搜索功能的。一(yī)個易于使用的網站搜索功能，避免了标簽菜單項的需要，爲一(yī)組不同的用戶内置。

5.不遵守安全-第一(yī)，響應性設計方法

雖然網站安全在很大(dà)程度上是一(yī)個技術架構依賴方面，但在一(yī)定程度上，它也與網站設計和用戶行程有關。設計者描述用戶行程的方式極大(dà)地影響了開(kāi)發人員(yuán)實現設計的方式。如果從設計階段就對網站安全進行排序，可以避免許多安全漏洞。例如，将關鍵業務數據放(fàng)在身份驗證和支付牆後面。

除了安全性之外(wài)，該設計必須在浏覽器和設備之間具有響應性和一(yī)緻性，才能提供全方位的體(tǐ)驗。網站開(kāi)發中(zhōng)最大(dà)的網站設計錯誤之一(yī)是爲不同的平台和設備設計不同的用戶行程和路線圖。優先事項應該是盡可能保持設備間的一(yī)緻性。更好的做法是，你可以檢查的反應之前，使它的生(shēng)活。像LambdaTest中(zhōng)的LTBrowser這樣的工(gōng)具允許您設計響應性網站，而不需要任何麻煩。

6.網頁設計内容太多

信息太少，您就有可能無法交付用戶正在尋找的解決方案。信息太多，最終可能會構建一(yī)個難以理解、使用或訪問的解決方案。在完全絕望的情況下(xià)，設計師可以用資(zī)源壓倒訪問者，最終提供一(yī)個非常混亂的網站。雖然它很成功，因爲它從早期就很受歡迎。也許爲了保持用戶的一(yī)緻性，他們仍然沒有改變網站的設計。但不應犯同樣的錯誤。

要避免的常見Web設計錯誤之一(yī)是從一(yī)開(kāi)始就沒有構建可伸縮的設計。這是許多企業改變網站設計的核心原因。非結構化的、非模闆化的網站設計是一(yī)個增長瓶頸，因爲在幾百頁之後，維護、開(kāi)發和擴展這些網站變得非常困難。爲了避免這些設計可伸縮性問題，設計方法應該采用“分(fēn)而治之”的策略。

将整個網站界面劃分(fēn)爲不同的網頁，如産品列表、産品信息、用戶配置文件、用戶交互等。然後，将每個網頁界面組件劃分(fēn)爲可重用的塊和組件。這些組件中(zhōng)的每一(yī)個都應該集中(zhōng)于交付一(yī)個功能。例如，旋轉木馬，短用戶簡介，産品描述，評論等。接下(xià)來，使用這些組件來構建整個網站。這種方法确保了網頁的快速開(kāi)發和可伸縮性。下(xià)面是一(yī)個混亂和糟糕的網站設計的例子：

7.沒有明确的CTA

沒有明确的CTA是另一(yī)個常見的網頁設計錯誤。網站就像營銷和銷售漏鬥或管道。你的網站訪問者穿過這個漏鬥，從潛在客戶的階段到轉變的客戶的階段。如果沒有在适當的地方發出明确的“行動呼籲”，可能不會改變許多熱門的前景。過度使用CTA也可能導緻令人惱火(huǒ)的前景。

8.設計不當或不相關的圖像

我(wǒ)(wǒ)們都知(zhī)道圖像和圖形是網頁設計的關鍵部分(fēn)。如果做得好，圖像可以清楚地向訪問者傳達信息。如果做錯了，他們就會把讀者搞糊塗。許多企業仍然沒有注意到他們的形象，而是使用低質量和不相關的圖像。不要犯這個錯誤，因爲低質量的圖片會破壞你的網站，關閉你的訪問者，這會損害你的轉換。同樣，不相關的圖片隻會混淆你的訪客，誘使他們不采取想要的行動。盡管如此，你也不應該用太多的圖片來擾亂你的網站，因爲它們會帶走CTA的眼睛，導緻轉換中(zhōng)的損失。

9.不注意404頁面設計會損害SEO

Web設計不僅限于開(kāi)發布局和用戶行程。維基百科定義擴展了網頁設計，将内容和搜索引擎優化(SEO)結合起來。從SEO的角度來看，多個常見的網站設計錯誤是容易避免的。

第一(yī)個SEO-關鍵的網頁設計錯誤是沒有一(yī)個專門的自定義404頁模闆.您可以爲您的域提供一(yī)個自定義404頁，以便向用戶提供相關内容，或者您可以使用302或301重定向鏈接到Web上的其他頁面。網站上的鏈接中(zhōng)斷會損害商(shāng)業聲譽。用戶覺得該網站是一(yī)個騙局，産品/服務将是不符合标準的。使用302或301重定向，這些中(zhōng)斷的鏈接可以很容易地處理。對于鏈接中(zhōng)斷的外(wài)部網站，您必須不斷地測試、識别和替換這些鏈接。

其次，SEO-特定和常見的網站設計錯誤包括沒有使用标題和标題标簽.使用描述性頁面文本不會像在标題中(zhōng)描述它那樣有影響。同樣，使用更大(dà)的字體(tǐ)不會像使用H1，H2标簽那樣對SEO産生(shēng)影響。

10.與多媒體(tǐ)有關的網頁設計錯誤

我(wǒ)(wǒ)們已經強調了自動播放(fàng)視頻(pín)是多麽令人惱火(huǒ)，尤其是聲音。此外(wài)，它使網站的加載速度相當慢(màn)。通常情況下(xià)，最好不要自動播放(fàng)視頻(pín)，而是等待某種用戶活動來觸發這些視頻(pín)的播放(fàng)。例如，用戶滾動到包含視頻(pín)的頁面中(zhōng)的某個部分(fēn)。

我(wǒ)(wǒ)們還強調了旋轉木馬的速度可能也是一(yī)個轉機。除此之外(wài)，還有一(yī)些應該避免的與多媒體(tǐ)相關的網頁設計錯誤。

首先，一(yī)個巨大(dà)的網頁設計錯誤不是優化你的網站圖像。大(dà)尺寸的圖片使得網站的加載速度變慢(màn)。如果您的網站加載緩慢(màn)，它可能會嚴重損害您的轉換。你知(zhī)道嗎(ma)4名訪客中(zhōng)有1名會放(fàng)棄一(yī)個需要超過4秒才能加載的網站嗎(ma)？甚至搜索引擎也不喜歡這樣的網站。因此，作爲一(yī)名設計師，最好使用清晰和優化的圖像。作爲開(kāi)發人員(yuán)，應該嘗試延遲加載這些映像。延遲加載圖片使網站更快地加載。

第二，避免使用廉價的免費(fèi)股票圖片。每個人都用過它們，每個人都知(zhī)道你什麽時候使用它們！它制造了一(yī)種廉價的印象。因此，如果免費(fèi)股票的形象并不完全是即席的，避免使用它。

第三，使用上下(xià)文圖标(尤指偏好圖标)。我(wǒ)(wǒ)們知(zhī)道這是一(yī)件顯而易見的事情，但令人驚訝的是，很多設計師甚至在2020年也沒有這麽做。這有助于傳遞正确的信息，并促進品牌建設。

第四，不要在同一(yī)網頁上使用多種字體(tǐ)樣式。不保持字體(tǐ)的風格一(yī)緻性貫穿整個網頁是另一(yī)個常見的網頁設計錯誤。

11.未設計啓用多語種語音的網站設計

今天，可以用多種語言建立網站，甚至可以添加基于語音接口的功能。但沒有多少設計師和網站所有者正在利用這些網頁功能。如果一(yī)個企業在不同的國家有客戶，那麽爲了更好地吸引目标客戶，網站可以用母語開(kāi)發。爲了提高可訪問性，可以将基于語音的界面添加到網站中(zhōng).谷歌在手機上的大(dà)部分(fēn)搜索都是基于語音的。用戶正在使用語音技術預訂出租車(chē)、酒店(diàn)等。如果在整個網站設計計劃中(zhōng)不考慮語音和多語言方式，那将是一(yī)個錯誤。

記住來自不同國家的客戶，您可能有興趣了解您的網站如何在不同的國家和大(dà)陸以不同的方式出現和工(gōng)作，以及如何執行地理定位跨浏覽器測試。

12.不利用分(fēn)析或測試确保跨浏覽器兼容性

設計和内容一(yī)樣，是一(yī)項可以叠代改進的創造性工(gōng)作。使用複雜(zá)的分(fēn)析工(gōng)具，您的網站分(fēn)析管理員(yuán)可以向您提供用戶如何導航您的網站的數據。此外(wài)，分(fēn)析，測試可以幫助你發現斷鏈接。根據分(fēn)析輸入，您可以發現在用戶旅程中(zhōng)的缺陷。您可以确定哪些是有效的，哪些是需要改進的，哪些CTA正在被點擊，哪些需要升級。

在成功地完成了開(kāi)發階段後，考慮到所有的網站設計問題和網站設計中(zhōng)要避免的錯誤，我(wǒ)(wǒ)們可以進入測試階段。測試一(yī)個網站是一(yī)個不可缺少的步驟，因爲世界上充斥着不同的設備，無論是物(wù)理上的還是内部的。跨浏覽器測試、可用性測試和A/B測試隻是幾個例子，因爲不同的目标需要不同的測試類型。

開(kāi)發人員(yuán)傾向于犯的最常見的網站設計錯誤之一(yī)是假設重新設計的網站是完美的，并且沒有嚴格地進行浏覽器兼容性測試。他們認爲，由于重新設計的網站有類似的功能，嚴格的重新檢查功能是沒有意義的。盡管如此，這并不是一(yī)個好辦法，在重新設計部分(fēn)也是一(yī)個不可原諒的錯誤。有了這種心态，很多事情都會出錯，比如跨浏覽器兼容性。因此，始終測試您的網站，以同樣的承諾，以優化和使它的錯誤，爲您的觀衆，從而避免所有相關的網站設計問題。

一(yī)個網站可能是你的企業最重要的資(zī)産，所以你需要使它完美無瑕，以創造一(yī)個偉大(dà)的第一(yī)印象。但要做到這一(yī)點，你需要避免這些網頁設計錯誤。

别擔心。這些常見的網站設計錯誤是相當容易避免以及修複。識别他們是最困難的一(yī)步。但是現在你已經知(zhī)道了這些錯誤，你可以很容易地避免或修正它們的前進。

那麽，你是否犯了這些網頁設計上的錯誤？是否有其他常見的網站設計錯誤，您想要添加到此列表？請輸入下(xià)面的評論部分(fēn)！

不管你是轉行也好，初學也罷，進階也可，如果你想學編程，進階程序員(yuán)~