2021年要避免的12種常見Web設(shè)計(jì)錯誤

時間：2023-06-06 09:48:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-06-06 09:48:01 來源：網(wǎng)站運(yùn)營

2021年要避免的12種常見Web設(shè)計(jì)錯誤：網(wǎng)站是每一項(xiàng)業(yè)務(wù)的中堅(jiān)力量，這已不是什么秘密。如果你想讓你的生意在這個新冠肺炎時代取得成功，你必須有一個精心設(shè)計(jì)的網(wǎng)站。由于社交距離的關(guān)系，越來越多的潛在客戶正在通過公司的網(wǎng)站搜索信息。

一個精心設(shè)計(jì)的網(wǎng)站可以幫助你發(fā)展你的業(yè)務(wù)，因?yàn)橐粋€完美的設(shè)計(jì)會給你的潛在客戶留下很好的印象，引導(dǎo)他們采取想要的行動。然而，常見的網(wǎng)頁設(shè)計(jì)錯誤可能很快就會使你的最佳努力脫軌。當(dāng)你聽到很多關(guān)于在設(shè)計(jì)你的網(wǎng)站時該做些什么的時候。但你知道不該做什么嗎？

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

什么是網(wǎng)頁設(shè)計(jì)？為什么它是重要的？

在我們詳細(xì)討論這些常見的網(wǎng)頁設(shè)計(jì)錯誤之前，了解網(wǎng)頁設(shè)計(jì)的意義是至關(guān)重要的。Web設(shè)計(jì)是在美觀的布局中迭代地對信息和整個業(yè)務(wù)功能進(jìn)行策略化、概念化和傳遞的過程。

網(wǎng)頁設(shè)計(jì)的視覺組件包括文本內(nèi)容、圖像、視頻、顏色、字體、不同的元素和形狀，如按鈕、窗體、圖標(biāo)、這些元素之間的間距以及整體布局本身。

設(shè)計(jì)功能包括網(wǎng)站速度、導(dǎo)航、動畫、用戶體驗(yàn)、用戶交互、網(wǎng)站整體技術(shù)架構(gòu)、SEO、跨瀏覽器、跨平臺、跨設(shè)備設(shè)計(jì)一致性和響應(yīng)性。

既然我們已經(jīng)討論了Web設(shè)計(jì)以及為什么它如此重要，現(xiàn)在是時候了解設(shè)計(jì)人員和開發(fā)人員在2021年必須避免的常見的網(wǎng)頁設(shè)計(jì)錯誤了。

12種常見的Web設(shè)計(jì)錯誤

我們都知道犯錯是人的事，但從一開始就避免錯誤是神圣的?？紤]到這一點(diǎn)，下面是12個常見的網(wǎng)頁設(shè)計(jì)錯誤，你必須避免。

1.在實(shí)施前不選擇設(shè)計(jì)思維方式

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

理解設(shè)計(jì)思維方式是設(shè)計(jì)用戶成癮體驗(yàn)的關(guān)鍵。不知道什么是設(shè)計(jì)思維？這是一個了解和識別客戶需求和動機(jī)的過程。這是一種心態(tài)，同情客戶，詳細(xì)說明他們的問題，并建立解決他們的解決方案。

設(shè)計(jì)思想方法使設(shè)計(jì)者能夠識別目標(biāo)、項(xiàng)目范圍、構(gòu)建業(yè)務(wù)特性、理解用戶需求、技術(shù)能力、解決方案可行性和有效性。所有這一切幫助設(shè)計(jì)師收集數(shù)據(jù)點(diǎn)，設(shè)計(jì)正確的站點(diǎn)地圖和線框，然后跳到一些設(shè)計(jì)軟件。

記?。喝绻悴涣私饽愕目蛻?，你將無法為他們設(shè)計(jì)好的網(wǎng)站。所以，要善解人意，做用戶調(diào)查，了解你的客戶關(guān)心的是什么。

2.不確定網(wǎng)格和欄的優(yōu)先次序

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

使用CSS技術(shù)，設(shè)計(jì)人員可以提供無縫的用戶體驗(yàn)，在這種體驗(yàn)中，內(nèi)容可以使用行和列自動分割和對齊。網(wǎng)格模板列，min-max，css的自動調(diào)整屬性消除了使用媒體查詢斷點(diǎn)的需要，但是使用網(wǎng)格模板區(qū)域確實(shí)需要使用斷點(diǎn)。

大多數(shù)設(shè)計(jì)師傾向于犯的與css網(wǎng)格相關(guān)的網(wǎng)頁設(shè)計(jì)錯誤之一是與css數(shù)字混淆。在為CSS框架(如引導(dǎo))設(shè)計(jì)時，我們計(jì)算一行的列數(shù)，通常是12列，但在網(wǎng)格系統(tǒng)中，我們計(jì)算行數(shù)或堆棧數(shù)。在網(wǎng)格系統(tǒng)中，從第1行移動到第7行類似于跨越6列。

3.不策劃等級美學(xué)

大多數(shù)設(shè)計(jì)師需要避免的另一個網(wǎng)頁設(shè)計(jì)錯誤是沒有為內(nèi)容的視覺層次制定策略，包括cta。設(shè)計(jì)良好的用戶行程可以通過設(shè)計(jì)有效的視覺層次結(jié)構(gòu)來有效地實(shí)現(xiàn)。這可以通過使用吸引人的詞、顏色、圖像和小動畫來實(shí)現(xiàn)。這些元素之間的間隔以及它們的大小在驅(qū)動用戶參與方面也是非常關(guān)鍵的。弄錯意味著減少用戶交互，并可能損害您的業(yè)務(wù)盈利能力。

4.不把直觀導(dǎo)航和無障礙列為優(yōu)先事項(xiàng)

跳過頭腦風(fēng)暴、站點(diǎn)地圖和線框的基本步驟是幾個網(wǎng)頁設(shè)計(jì)錯誤的基礎(chǔ)。其中最突出的是配置不當(dāng)?shù)牟藛魏蛯?dǎo)航布局。一個不適當(dāng)?shù)膶?dǎo)航結(jié)構(gòu)可以趕走你的網(wǎng)站訪問者，因?yàn)樗且粋€痛苦的滾動隨機(jī)結(jié)構(gòu)的網(wǎng)站。假設(shè)您正在設(shè)計(jì)一個包含大量頁面的網(wǎng)站，那么將它們分組并按層次排列這些類別是有意義的，以使用戶能夠直觀地瀏覽網(wǎng)站。

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




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

從可訪問性的角度來看，文本大小、顏色對比、頁面標(biāo)題、圖像替代文本、鍵盤可訪問性、移動和閃爍內(nèi)容(如傳送帶、廣告、自動播放視頻、滾動新聞提要和滴答)是網(wǎng)站的關(guān)鍵組成部分。與遠(yuǎn)視作斗爭的人可能會想在小型設(shè)備上放大內(nèi)容。有視力障礙的人可能更喜歡講話而不是文字。有注意力缺陷的用戶可能想暫停旋轉(zhuǎn)木馬等等。一個好的網(wǎng)頁設(shè)計(jì)將所有這些都融入到圖片中，以提高網(wǎng)站的可訪問性。做錯事可能會導(dǎo)致糟糕的用戶體驗(yàn)，并損害您的業(yè)務(wù)。下面是一個直觀的網(wǎng)頁設(shè)計(jì)的例子：




以上亞馬遜網(wǎng)站的例子展示了他們是如何以人們所能想象的最好方式使用搜索功能的。一個易于使用的網(wǎng)站搜索功能，避免了標(biāo)簽菜單項(xiàng)的需要，為一組不同的用戶內(nèi)置。

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

雖然網(wǎng)站安全在很大程度上是一個技術(shù)架構(gòu)依賴方面，但在一定程度上，它也與網(wǎng)站設(shè)計(jì)和用戶行程有關(guān)。設(shè)計(jì)者描述用戶行程的方式極大地影響了開發(fā)人員實(shí)現(xiàn)設(shè)計(jì)的方式。如果從設(shè)計(jì)階段就對網(wǎng)站安全進(jìn)行排序，可以避免許多安全漏洞。例如，將關(guān)鍵業(yè)務(wù)數(shù)據(jù)放在身份驗(yàn)證和支付墻后面。

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

6.網(wǎng)頁設(shè)計(jì)內(nèi)容太多

信息太少，您就有可能無法交付用戶正在尋找的解決方案。信息太多，最終可能會構(gòu)建一個難以理解、使用或訪問的解決方案。在完全絕望的情況下，設(shè)計(jì)師可以用資源壓倒訪問者，最終提供一個非?；靵y的網(wǎng)站。雖然它很成功，因?yàn)樗鼜脑缙诰秃苁軞g迎。也許為了保持用戶的一致性，他們?nèi)匀粵]有改變網(wǎng)站的設(shè)計(jì)。但不應(yīng)犯同樣的錯誤。

要避免的常見Web設(shè)計(jì)錯誤之一是從一開始就沒有構(gòu)建可伸縮的設(shè)計(jì)。這是許多企業(yè)改變網(wǎng)站設(shè)計(jì)的核心原因。非結(jié)構(gòu)化的、非模板化的網(wǎng)站設(shè)計(jì)是一個增長瓶頸，因?yàn)樵趲装夙撝?，維護(hù)、開發(fā)和擴(kuò)展這些網(wǎng)站變得非常困難。為了避免這些設(shè)計(jì)可伸縮性問題，設(shè)計(jì)方法應(yīng)該采用“分而治之”的策略。

將整個網(wǎng)站界面劃分為不同的網(wǎng)頁，如產(chǎn)品列表、產(chǎn)品信息、用戶配置文件、用戶交互等。然后，將每個網(wǎng)頁界面組件劃分為可重用的塊和組件。這些組件中的每一個都應(yīng)該集中于交付一個功能。例如，旋轉(zhuǎn)木馬，短用戶簡介，產(chǎn)品描述，評論等。接下來，使用這些組件來構(gòu)建整個網(wǎng)站。這種方法確保了網(wǎng)頁的快速開發(fā)和可伸縮性。下面是一個混亂和糟糕的網(wǎng)站設(shè)計(jì)的例子：

7.沒有明確的CTA

沒有明確的CTA是另一個常見的網(wǎng)頁設(shè)計(jì)錯誤。網(wǎng)站就像營銷和銷售漏斗或管道。你的網(wǎng)站訪問者穿過這個漏斗，從潛在客戶的階段到轉(zhuǎn)變的客戶的階段。如果沒有在適當(dāng)?shù)牡胤桨l(fā)出明確的“行動呼吁”，可能不會改變許多熱門的前景。過度使用CTA也可能導(dǎo)致令人惱火的前景。

8.設(shè)計(jì)不當(dāng)或不相關(guān)的圖像

我們都知道圖像和圖形是網(wǎng)頁設(shè)計(jì)的關(guān)鍵部分。如果做得好，圖像可以清楚地向訪問者傳達(dá)信息。如果做錯了，他們就會把讀者搞糊涂。許多企業(yè)仍然沒有注意到他們的形象，而是使用低質(zhì)量和不相關(guān)的圖像。不要犯這個錯誤，因?yàn)榈唾|(zhì)量的圖片會破壞你的網(wǎng)站，關(guān)閉你的訪問者，這會損害你的轉(zhuǎn)換。同樣，不相關(guān)的圖片只會混淆你的訪客，誘使他們不采取想要的行動。盡管如此，你也不應(yīng)該用太多的圖片來擾亂你的網(wǎng)站，因?yàn)樗鼈儠ё逤TA的眼睛，導(dǎo)致轉(zhuǎn)換中的損失。

9.不注意404頁面設(shè)計(jì)會損害SEO

Web設(shè)計(jì)不僅限于開發(fā)布局和用戶行程。維基百科定義擴(kuò)展了網(wǎng)頁設(shè)計(jì)，將內(nèi)容和搜索引擎優(yōu)化(SEO)結(jié)合起來。從SEO的角度來看，多個常見的網(wǎng)站設(shè)計(jì)錯誤是容易避免的。

第一個SEO-關(guān)鍵的網(wǎng)頁設(shè)計(jì)錯誤是沒有一個專門的自定義404頁模板.您可以為您的域提供一個自定義404頁，以便向用戶提供相關(guān)內(nèi)容，或者您可以使用302或301重定向鏈接到Web上的其他頁面。網(wǎng)站上的鏈接中斷會損害商業(yè)聲譽(yù)。用戶覺得該網(wǎng)站是一個騙局，產(chǎn)品/服務(wù)將是不符合標(biāo)準(zhǔn)的。使用302或301重定向，這些中斷的鏈接可以很容易地處理。對于鏈接中斷的外部網(wǎng)站，您必須不斷地測試、識別和替換這些鏈接。

其次，SEO-特定和常見的網(wǎng)站設(shè)計(jì)錯誤包括沒有使用標(biāo)題和標(biāo)題標(biāo)簽.使用描述性頁面文本不會像在標(biāo)題中描述它那樣有影響。同樣，使用更大的字體不會像使用H1，H2標(biāo)簽?zāi)菢訉EO產(chǎn)生影響。

10.與多媒體有關(guān)的網(wǎng)頁設(shè)計(jì)錯誤

我們已經(jīng)強(qiáng)調(diào)了自動播放視頻是多么令人惱火，尤其是聲音。此外，它使網(wǎng)站的加載速度相當(dāng)慢。通常情況下，最好不要自動播放視頻，而是等待某種用戶活動來觸發(fā)這些視頻的播放。例如，用戶滾動到包含視頻的頁面中的某個部分。

我們還強(qiáng)調(diào)了旋轉(zhuǎn)木馬的速度可能也是一個轉(zhuǎn)機(jī)。除此之外，還有一些應(yīng)該避免的與多媒體相關(guān)的網(wǎng)頁設(shè)計(jì)錯誤。

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

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

第三，使用上下文圖標(biāo)(尤指偏好圖標(biāo))。我們知道這是一件顯而易見的事情，但令人驚訝的是，很多設(shè)計(jì)師甚至在2020年也沒有這么做。這有助于傳遞正確的信息，并促進(jìn)品牌建設(shè)。

第四，不要在同一網(wǎng)頁上使用多種字體樣式。不保持字體的風(fēng)格一致性貫穿整個網(wǎng)頁是另一個常見的網(wǎng)頁設(shè)計(jì)錯誤。

11.未設(shè)計(jì)啟用多語種語音的網(wǎng)站設(shè)計(jì)

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

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

12.不利用分析或測試確?？鐬g覽器兼容性

設(shè)計(jì)和內(nèi)容一樣，是一項(xiàng)可以迭代改進(jìn)的創(chuàng)造性工作。使用復(fù)雜的分析工具，您的網(wǎng)站分析管理員可以向您提供用戶如何導(dǎo)航您的網(wǎng)站的數(shù)據(jù)。此外，分析，測試可以幫助你發(fā)現(xiàn)斷鏈接。根據(jù)分析輸入，您可以發(fā)現(xiàn)在用戶旅程中的缺陷。您可以確定哪些是有效的，哪些是需要改進(jìn)的，哪些CTA正在被點(diǎn)擊，哪些需要升級。

在成功地完成了開發(fā)階段后，考慮到所有的網(wǎng)站設(shè)計(jì)問題和網(wǎng)站設(shè)計(jì)中要避免的錯誤，我們可以進(jìn)入測試階段。測試一個網(wǎng)站是一個不可缺少的步驟，因?yàn)槭澜缟铣涑庵煌脑O(shè)備，無論是物理上的還是內(nèi)部的?？鐬g覽器測試、可用性測試和A/B測試只是幾個例子，因?yàn)椴煌哪繕?biāo)需要不同的測試類型。

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

交給你

一個網(wǎng)站可能是你的企業(yè)最重要的資產(chǎn)，所以你需要使它完美無瑕，以創(chuàng)造一個偉大的第一印象。但要做到這一點(diǎn)，你需要避免這些網(wǎng)頁設(shè)計(jì)錯誤。

別擔(dān)心。這些常見的網(wǎng)站設(shè)計(jì)錯誤是相當(dāng)容易避免以及修復(fù)。識別他們是最困難的一步。但是現(xiàn)在你已經(jīng)知道了這些錯誤，你可以很容易地避免或修正它們的前進(jìn)。

那么，你是否犯了這些網(wǎng)頁設(shè)計(jì)上的錯誤？是否有其他常見的網(wǎng)站設(shè)計(jì)錯誤，您想要添加到此列表？請輸入下面的評論部分！

不管你是轉(zhuǎn)行也好，初學(xué)也罷，進(jìn)階也可，如果你想學(xué)編程，進(jìn)階程序員~

【值得關(guān)注】我的C語言創(chuàng)作者中心！

C語言入門資料：