您是否知道您網(wǎng)站75%的可信度取決于其設計？如果網(wǎng)站設計錯誤很多，訪問者可能會認為您的公司不值得信賴。無論您是從頭開始網(wǎng)站建設還是網(wǎng)站改版，避免這些錯誤都會讓您的企業(yè)以正確的理由在網(wǎng)上脫穎而出。

8個常見的網(wǎng)頁設計錯誤

1、不優(yōu)先考慮可訪問性。

像事后才想到的那樣對待可訪問性是您可能犯的第一個網(wǎng)站設計錯誤。根據(jù)京上云營銷網(wǎng)絡團隊的網(wǎng)絡開發(fā)經(jīng)理蔣小明的說法，以下是有關可訪問性的四個主要錯誤：

顏色對比度不足

圖像或圖形的替代文本缺失或不當

視覺焦點指示器不足或缺失

俯瞰可訪問的名稱或標簽

讓我們更深入地研究其中的每一個。

色彩對比不足

顏色對比是一個經(jīng)常被忽視的可訪問性錯誤。這種錯誤經(jīng)常發(fā)生，因為公司制作的網(wǎng)站以其品牌調(diào)色板為特色——通常在創(chuàng)建時并沒有考慮到無障礙設計。

“當網(wǎng)站上使用的顏色組合在背景色和前景色之間缺乏足夠的色彩對比度時，文本和圖標可能難以感知，尤其是對于那些有色盲等視覺障礙的人來說，”凱利分享道?！案鶕?jù)2022 WebAIM Million年度報告，超過80%的主頁存在顏色對比度問題！”

缺少或不合適的替代文字

使用屏幕閱讀器的網(wǎng)站訪問者依靠圖像替代文本來描述圖像或圖形傳達的內(nèi)容。如果它丟失或沒有充分描述圖像，您將隔離需要它來細讀您網(wǎng)站的讀者。

“圖片是您網(wǎng)站內(nèi)容的一部分，因此以與傳統(tǒng)網(wǎng)站副本相同的方式來思考它們很重要：通過在您的頁面上包含圖片來傳達什么信息？確保您使用的替代文字傳達相同的含義，”凱利說。

視覺焦點指示器不足或缺失

如果沒有視覺焦點指示器，訪問者將無法充分發(fā)揮您網(wǎng)站的潛力?！敖裹c指示器通常顯示為鏈接和按鈕等交互式組件周圍的輪廓，”Kelly 分享道?！爸匾氖且宄刂甘卷撁嫔系哪膫€元素具有當前焦點，以便使用鍵盤導航并可以看到屏幕的用戶確切地知道他們在頁面上的位置以及與活性元素。”

俯瞰可訪問的名稱或標簽

如果您的站點以視覺方式傳達信息，請注意那些使用輔助技術的站點?！霸谠O計以視覺方式傳達信息的頁面和組件時，應該使用輔助技術的可訪問標簽來傳達相同的信息，”凱利說。

“例如，網(wǎng)頁設計的一個普遍趨勢是卡片組件在每張卡片的底部都有一個‘閱讀更多’按鈕或鏈接。每個按鈕與哪個項目相關聯(lián)的信息通過設計以視覺方式傳達，但是對于屏幕閱讀器來說，如果這些按鈕缺少具有相關詳細信息的可訪問標簽，通常很難區(qū)分這些按鈕，例如“閱讀更多關于營銷中心”。 '”

2、忘記了響應式設計的重要性。

2022年第二季度，移動設備占全球網(wǎng)站流量的58%以上——這甚至不包括平板電腦。如果您的網(wǎng)站在移動設備上不像在桌面設備上那樣易于瀏覽，您就有可能讓訪問者感到沮喪并增加跳出率。

“現(xiàn)在的用戶比以往任何時候都更多地通過多種設備訪問網(wǎng)站；手機、平板電腦、筆記本電腦，甚至電視。如果我們的內(nèi)容在其中任何一個上看起來很差，訪問者就會失去信任并點擊/點擊離開該網(wǎng)站，” 京上云副設計主管雷池勇分享道?！艾F(xiàn)在是斷點時代！”

據(jù)京上云的首席產(chǎn)品設計師高春燕說，出現(xiàn)這種情況是有原因的?！熬W(wǎng)站通常是使用桌面網(wǎng)絡瀏覽器中的工具構建的。一個常見的錯誤是假設您的客戶將以桌面格式查看您的網(wǎng)站，而忽略了移動用戶?！?

3、為了美觀而犧牲用戶體驗。

在過去幾年中流行起來的網(wǎng)站設計錯誤之一是將美學置于功能之上。隨著互聯(lián)網(wǎng)變得飽和，“隨著多年來新媒體和設計的大規(guī)模爆炸，卓越幾乎是成功的必要條件。不幸的是，這已經(jīng)以過度使用設計和圖形元素而告終，這些設計和圖形元素提升了用戶的感官，但卻缺乏或感覺與網(wǎng)站的真正目的脫節(jié)，” 京上云設計體驗經(jīng)理張文分享道。

根據(jù) 史小琴 的說法，這會以多種形式出現(xiàn)“......從淡化品牌價值主張的設計趨勢到過度使用動畫、內(nèi)容和沉重的圖形，它們增強了美感但變得毫無用處。這并不意味著應該采用極簡主義或中性主義風格。它是關于平衡以及形式如何支持功能的?！?

4、不投資定制。

走在市中心，您經(jīng)過一家服裝店，櫥窗陳列富有創(chuàng)意，極具視覺吸引力。它展示了各種打折的服裝，并通過背景和引人入勝的文案講述了一個故事。然后，你路過一家商店，櫥窗里的人體模特上只有幾件衣服——什么都沒有引起你的注意。

將您的網(wǎng)站視為企業(yè)的互聯(lián)網(wǎng)店面。它應該反映您的品牌，并且對您的公司來說是獨一無二的。最重要的網(wǎng)站設計錯誤之一是選擇千篇一律的模板而不是對其進行自定義。

例如，默認使用標準英雄橫幅可能會適得其反。京上云SAPG團隊的高級產(chǎn)品設計師 蘇曉明說：“我們都見過它們 - 導航下方的全寬圖像通常帶有白色或黑色文本，頂部有一個按鈕?！?

“圖像要么非常亮，要么非常暗，或者以巧妙的方式裁剪以使文本清晰易讀。我認為這是一個錯誤的原因有幾個。首先是它太普遍了，以至于變得公式化和乏味。曾經(jīng)引人注目的設計決定現(xiàn)在變得單調(diào)乏味?！?

5、使用不轉化的功能。

另一個常見的錯誤是使用低效的特征。無論一個元素在視覺上多么吸引人，請記住，首要任務是您網(wǎng)站的有效性?！傲硪粋€常見的錯誤是依賴旋轉木馬在同一級別展示多個內(nèi)容，”Derby 分享道。

“無數(shù)研究表明，用戶并不經(jīng)常與輪播交互，尤其是在交互成本高的移動設備上?！?

6、缺乏層次感。

您是否曾經(jīng)訪問過某個網(wǎng)站，卻發(fā)現(xiàn)自己不確定應該將注意力集中在哪里？如果是這樣，您可能會登陸一個缺乏層次結構的網(wǎng)站?！熬拖駡蠹埲绾问褂脴祟}和副標題來表示重要性一樣，您網(wǎng)站的排版也應該如此，”蘭德里說。

在您的網(wǎng)站上訂購具有美學吸引力，但它也很實用?！熬W(wǎng)站元素的組織……為您的網(wǎng)站提供一個有凝聚力的結構，促使用戶完成明確的操作，實現(xiàn)主要目標，并隨后創(chuàng)造無縫體驗，”史小琴 說。

解決這個問題并不簡單，尤其是當您的公司擁有具有不同目標的廣泛受眾時。但是，根據(jù)史小琴的說法，您最好這樣做，因為這個問題會極大地影響用戶對您網(wǎng)站的體驗?！叭狈Φ燃壷贫葧`導用戶并阻止他們實現(xiàn)目標，”他分享道。

7、導航不清晰。

清晰的導航可以減少訪問者登陸您網(wǎng)站時的摩擦體驗，這就是為什么不清晰的導航如此困境的原因。“隨著越來越多的企業(yè)進入數(shù)字世界，網(wǎng)站上的內(nèi)容變得更加擁擠和復雜，在您的多個接觸點和用戶旅程中擁有清晰的導航和一致性將確保從第一位訪問者到倡導者的平穩(wěn)過渡，”Devia Pinzon 分享道.

8、沒有有效地傳達您的商業(yè)目的。

當訪問者登陸您的網(wǎng)站時，他們應該能夠清楚地了解您公司的業(yè)務。如果那張照片甚至有點模糊？您猜對了——訪問者可能會放棄您的網(wǎng)站。

“網(wǎng)站訪問者在加載您的網(wǎng)站時所做的第一件事就是確定他們是否到達了正確的目的地，”蘭德里說?！澳木W(wǎng)站是否在首屏上清楚地說明了它提供的產(chǎn)品或服務？”

您的網(wǎng)站應該提高您企業(yè)的信譽。如果它不能傳達您的業(yè)務目的并確認訪問者他們在正確的位置，則可能需要重新設計網(wǎng)站。

如何修復常見的網(wǎng)站設計錯誤

現(xiàn)在我們已經(jīng)了解了最常見的網(wǎng)站設計錯誤，讓我們討論如何解決這些錯誤。別擔心：意識是成功的一半?，F(xiàn)在您知道要避免什么，您可以開始創(chuàng)建一個以網(wǎng)站設計最佳實踐為特色的網(wǎng)站。

1、將可訪問性放在首位。

“Web 可訪問性意味著讓每個人都可以訪問網(wǎng)站及其上的信息，因此在設計網(wǎng)站時做到正確至關重要，”Kelly說?！爱斘覀冊诰W(wǎng)站設計中犯下這些常見的可訪問性錯誤時，我們就為數(shù)百萬患有某種形式殘疾的人制造了可用性障礙。即使您的網(wǎng)站看起來很棒，但如果部分訪問者無法訪問某些內(nèi)容或操作，它就無法充分發(fā)揮其潛力來滿足您的目標和業(yè)務需求。”

以下是解決設計可訪問性問題的一些可行方法。

創(chuàng)建用戶角色以滿足各種用戶需求

確保您的角色具有包容性，并將可訪問性納入您網(wǎng)站設計的結構中?！氨M早并經(jīng)常考慮可訪問性。在設計網(wǎng)站時，第一步通常是創(chuàng)建用戶“角色”，以幫助確保網(wǎng)站滿足各種用戶需求，”凱利說。“確保你的角色包含各種能力是保證你在項目的所有階段都考慮到可訪問性的一種方法?！?

自學無障礙最佳實踐

詳細了解可訪問性最佳實踐，以便在處理項目時將它們放在首位。“關于如何設計、構建和測試網(wǎng)站的可訪問性，有大量資源、清單和指南，”Kelly分享道。您可以通過查看我們創(chuàng)建無障礙網(wǎng)站的清單來開始。

2、確保您的網(wǎng)站具有響應式設計。

通過響應式網(wǎng)頁設計，您可以放心，無論訪問者如何訪問您的網(wǎng)站，他們都將獲得無縫體驗。幸運的是，制作響應式網(wǎng)站并不像看起來那么困難 — 如果您使用的是CMS等內(nèi)容管理系統(tǒng)，您甚至可以使用已經(jīng)適合移動設備的模板。

“想想您希望訪問者從頁面上帶走的最重要的信息是什么，然后再考慮它在最大和最小屏幕上的顯示效果，”Devia Pinzon 說?！澳愕哪繕耸谴_保無論使用何種設備，訪問者都會對你的內(nèi)容有相同的理解?！?

創(chuàng)建網(wǎng)站的移動版本后，您的工作還沒有完成。“一定要始終在手機上測試您的網(wǎng)站，”蘭德里提醒道。測試站點可能會發(fā)現(xiàn)您之前沒有注意到的故障。

3、平衡審美情趣與無縫用戶體驗。

我們知道當網(wǎng)站將美學放在首位而功能放在第二位時會發(fā)生什么。在一個成功的網(wǎng)站上，可以在視覺吸引力與無縫用戶體驗之間取得平衡，使訪問者可以瀏覽頁面并找到他們正在尋找的內(nèi)容。

根據(jù)史小琴的說法，實現(xiàn)這一目標主要歸結為有效的團隊溝通和協(xié)調(diào)。“設計團隊應該忠于策略，確保設計支持用戶的主要目標，并與開發(fā)、內(nèi)容和SEO團隊保持良好的一致性，”史小琴 分享道。

4、用心設計網(wǎng)站，不要害怕發(fā)揮創(chuàng)意。

僅僅因為您看到許多具有特定設計或布局的網(wǎng)站并不意味著您的網(wǎng)站也需要如此。“真正有意識地考慮應該在這個非常有價值的地方放置什么，”Derby談到導航下方的區(qū)域時說。

問自己有關您對空間的意圖的問題是了解最適合它的另一種有效方法?！皥D像是有意義的還是只是裝飾性的？布局的設計是否鼓勵用戶閱讀或采取行動？有沒有什么有趣的東西可以吸引他們的注意力幾秒鐘？

類似于廣告的橫幅失明效應，用戶開始直接跳過這些大型英雄部分，轉而嘗試深入了解下面真正有意義的內(nèi)容。對于經(jīng)常將最有價值的CTA放在英雄橫幅中的網(wǎng)頁設計師和營銷人員來說，這是一個錯失的機會?！?

或者，您可以決定完全改變您網(wǎng)站的布局，這樣它就不會在導航下方顯示圖像。超過 70% 的企業(yè)投資于設計，以幫助他們的公司從競爭對手中脫穎而出，所以不要害怕做一些在你的行業(yè)中沒有其他人做的事情。

5、不要隱藏無法轉化的特征信息。

如果您知道某項功能不會轉化或訪問者對其不屑一顧，請確保您沒有在其上隱藏關鍵信息。（或者更好的是，完全放棄它。）如果您公司的網(wǎng)站具有輪播功能，請務必考慮最佳做法。

“關于輪播體驗的一些可以改進的地方是使用高度可見的控件、限制幻燈片的數(shù)量以及將最重要的信息放在首位，”Derby說?！俺说谝粡埢脽羝?，不應隱藏任何重要內(nèi)容，因此如果用戶不與組件交互，他們一定會獲得完整的體驗。”

6、確保您的站點具有層次結構。

如果沒有層次結構，您的網(wǎng)站就會讓人不知所措、混亂且難以理解。然而，有了層次結構，訪問者就清楚地知道在哪里看和讀什么。幸運的是，您可以通過一些快速修復來在您的網(wǎng)站上實施層次結構。要獲得一些想法，您應該研究一些專門從事現(xiàn)代網(wǎng)頁設計中的層次結構的網(wǎng)站設計服務。

“一定要使用HTML標題標簽和每個標簽的大小來向用戶傳達每行文本的相對重要性，”Landry說。

史小琴 補充道，“為了避免這些錯誤，關注這三個主要屬性至關重要：比例（使用大小差異）、平衡（分配視覺元素）和構圖（組織元素）。應用格式塔原則，尤其是接近度，來生成一個有凝聚力的結構。”

7、確保您網(wǎng)站的導航直觀。

如果您的網(wǎng)站導航有問題，您可能會在網(wǎng)站的跳出率中看到這一點。將高效導航視為無縫用戶體驗的必備條件。

“直觀的導航可確保流暢的用戶體驗并支持用戶的旅程，提供輕松的信息發(fā)現(xiàn)或返回特定點的方式，”史小琴 說。“為了保證這一點，團隊應該定義導航級別（最好不超過三個）以及不同級別的頁面如何鏈接回其父級別。此外，驗證正確的標簽，讓任何用戶都能輕松理解并確認導航在不同的屏幕尺寸上工作，因為它們的行為可能不同?！?

8、確保通過設計和文案傳達您的商業(yè)目的。

您將使用引人注目的文案和視覺元素來實現(xiàn)這一目標。在開始之前，問問自己您網(wǎng)站的目的是什么。您是否正在創(chuàng)建一個電子商務網(wǎng)站，訪問者可以從您的公司購買商品？或者您網(wǎng)站的主要目標是告知您的團隊提供哪些服務？弄清楚您網(wǎng)站的使命是什么。您添加到站點的每個功能和副本都應該有助于實現(xiàn)該目的。您可能需要為您的企業(yè)使用IT服務，以最大限度地提高您的受眾參與度。

避免常見的網(wǎng)站設計錯誤以提高網(wǎng)站可信度

通過避免常見的網(wǎng)站設計錯誤，您將提高網(wǎng)站的可信度，并為訪問者提供他們想要再次訪問的體驗。

“網(wǎng)站建設是一項團隊運動，需要一種循環(huán)方法，以確保團隊、利益相關者和用戶知識之間的良好一致性，”史小琴 說。“沒有比測試和迭代更好的方法了，包括用戶研究和可用性測試，以確保您的網(wǎng)站朝著正確的方向發(fā)展?！?