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

8個(gè)常見的網(wǎng)頁設(shè)計(jì)錯(cuò)誤

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

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

顏色對(duì)比度不足

圖像或圖形的替代文本缺失或不當(dāng)

視覺焦點(diǎn)指示器不足或缺失

俯瞰可訪問的名稱或標(biāo)簽

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

色彩對(duì)比不足

顏色對(duì)比是一個(gè)經(jīng)常被忽視的可訪問性錯(cuò)誤。這種錯(cuò)誤經(jīng)常發(fā)生，因?yàn)楣局谱鞯木W(wǎng)站以其品牌調(diào)色板為特色——通常在創(chuàng)建時(shí)并沒有考慮到無障礙設(shè)計(jì)。

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

缺少或不合適的替代文字

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

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

視覺焦點(diǎn)指示器不足或缺失

如果沒有視覺焦點(diǎn)指示器，訪問者將無法充分發(fā)揮您網(wǎng)站的潛力?！敖裹c(diǎn)指示器通常顯示為鏈接和按鈕等交互式組件周圍的輪廓，”Kelly 分享道。“重要的是要清楚地指示頁面上的哪個(gè)元素具有當(dāng)前焦點(diǎn)，以便使用鍵盤導(dǎo)航并可以看到屏幕的用戶確切地知道他們?cè)陧撁嫔系奈恢靡约芭c活性元素?！?

俯瞰可訪問的名稱或標(biāo)簽

如果您的站點(diǎn)以視覺方式傳達(dá)信息，請(qǐng)注意那些使用輔助技術(shù)的站點(diǎn)?！霸谠O(shè)計(jì)以視覺方式傳達(dá)信息的頁面和組件時(shí)，應(yīng)該使用輔助技術(shù)的可訪問標(biāo)簽來傳達(dá)相同的信息，”凱利說。

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

2、忘記了響應(yīng)式設(shè)計(jì)的重要性。

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

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

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

3、為了美觀而犧牲用戶體驗(yàn)。

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

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

4、不投資定制。

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

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

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

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

5、使用不轉(zhuǎn)化的功能。

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

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

6、缺乏層次感。

您是否曾經(jīng)訪問過某個(gè)網(wǎng)站，卻發(fā)現(xiàn)自己不確定應(yīng)該將注意力集中在哪里？如果是這樣，您可能會(huì)登陸一個(gè)缺乏層次結(jié)構(gòu)的網(wǎng)站?！熬拖駡?bào)紙如何使用標(biāo)題和副標(biāo)題來表示重要性一樣，您網(wǎng)站的排版也應(yīng)該如此，”蘭德里說。

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

解決這個(gè)問題并不簡(jiǎn)單，尤其是當(dāng)您的公司擁有具有不同目標(biāo)的廣泛受眾時(shí)。但是，根據(jù)史小琴的說法，您最好這樣做，因?yàn)檫@個(gè)問題會(huì)極大地影響用戶對(duì)您網(wǎng)站的體驗(yàn)?！叭狈Φ燃?jí)制度會(huì)誤導(dǎo)用戶并阻止他們實(shí)現(xiàn)目標(biāo)，”他分享道。

7、導(dǎo)航不清晰。

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

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

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

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

您的網(wǎng)站應(yīng)該提高您企業(yè)的信譽(yù)。如果它不能傳達(dá)您的業(yè)務(wù)目的并確認(rèn)訪問者他們?cè)谡_的位置，則可能需要重新設(shè)計(jì)網(wǎng)站。

如何修復(fù)常見的網(wǎng)站設(shè)計(jì)錯(cuò)誤

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

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

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

以下是解決設(shè)計(jì)可訪問性問題的一些可行方法。

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

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

自學(xué)無障礙最佳實(shí)踐

詳細(xì)了解可訪問性最佳實(shí)踐，以便在處理項(xiàng)目時(shí)將它們放在首位?！瓣P(guān)于如何設(shè)計(jì)、構(gòu)建和測(cè)試網(wǎng)站的可訪問性，有大量資源、清單和指南，”Kelly分享道。您可以通過查看我們創(chuàng)建無障礙網(wǎng)站的清單來開始。

2、確保您的網(wǎng)站具有響應(yīng)式設(shè)計(jì)。

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

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

創(chuàng)建網(wǎng)站的移動(dòng)版本后，您的工作還沒有完成?！耙欢ㄒ冀K在手機(jī)上測(cè)試您的網(wǎng)站，”蘭德里提醒道。測(cè)試站點(diǎn)可能會(huì)發(fā)現(xiàn)您之前沒有注意到的故障。

3、平衡審美情趣與無縫用戶體驗(yàn)。

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

根據(jù)史小琴的說法，實(shí)現(xiàn)這一目標(biāo)主要?dú)w結(jié)為有效的團(tuán)隊(duì)溝通和協(xié)調(diào)?！霸O(shè)計(jì)團(tuán)隊(duì)?wèi)?yīng)該忠于策略，確保設(shè)計(jì)支持用戶的主要目標(biāo)，并與開發(fā)、內(nèi)容和SEO團(tuán)隊(duì)保持良好的一致性，”史小琴 分享道。

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

僅僅因?yàn)槟吹皆S多具有特定設(shè)計(jì)或布局的網(wǎng)站并不意味著您的網(wǎng)站也需要如此?！罢嬲幸庾R(shí)地考慮應(yīng)該在這個(gè)非常有價(jià)值的地方放置什么，”Derby談到導(dǎo)航下方的區(qū)域時(shí)說。

問自己有關(guān)您對(duì)空間的意圖的問題是了解最適合它的另一種有效方法。“圖像是有意義的還是只是裝飾性的？布局的設(shè)計(jì)是否鼓勵(lì)用戶閱讀或采取行動(dòng)？有沒有什么有趣的東西可以吸引他們的注意力幾秒鐘？

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

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

5、不要隱藏?zé)o法轉(zhuǎn)化的特征信息。

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

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

6、確保您的站點(diǎn)具有層次結(jié)構(gòu)。

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

“一定要使用HTML標(biāo)題標(biāo)簽和每個(gè)標(biāo)簽的大小來向用戶傳達(dá)每行文本的相對(duì)重要性，”Landry說。

史小琴 補(bǔ)充道，“為了避免這些錯(cuò)誤，關(guān)注這三個(gè)主要屬性至關(guān)重要：比例（使用大小差異）、平衡（分配視覺元素）和構(gòu)圖（組織元素）。應(yīng)用格式塔原則，尤其是接近度，來生成一個(gè)有凝聚力的結(jié)構(gòu)?！?

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

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

“直觀的導(dǎo)航可確保流暢的用戶體驗(yàn)并支持用戶的旅程，提供輕松的信息發(fā)現(xiàn)或返回特定點(diǎn)的方式，”史小琴 說。“為了保證這一點(diǎn)，團(tuán)隊(duì)?wèi)?yīng)該定義導(dǎo)航級(jí)別（最好不超過三個(gè)）以及不同級(jí)別的頁面如何鏈接回其父級(jí)別。此外，驗(yàn)證正確的標(biāo)簽，讓任何用戶都能輕松理解并確認(rèn)導(dǎo)航在不同的屏幕尺寸上工作，因?yàn)樗鼈兊男袨榭赡懿煌?。?

8、確保通過設(shè)計(jì)和文案?jìng)鬟_(dá)您的商業(yè)目的。

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

避免常見的網(wǎng)站設(shè)計(jì)錯(cuò)誤以提高網(wǎng)站可信度

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

“成都網(wǎng)站建設(shè)是一項(xiàng)團(tuán)隊(duì)運(yùn)動(dòng)，需要一種循環(huán)方法，以確保團(tuán)隊(duì)、利益相關(guān)者和用戶知識(shí)之間的良好一致性，”史小琴 說?！皼]有比測(cè)試和迭代更好的方法了，包括用戶研究和可用性測(cè)試，以確保您的網(wǎng)站朝著正確的方向發(fā)展?！?