網(wǎng)頁(yè)設(shè)計(jì)師的使命是創(chuàng)建引人入勝的用戶體驗(yàn)，幫助網(wǎng)站訪問(wèn)者完成任務(wù)并增加轉(zhuǎn)化次數(shù)。在這個(gè)過(guò)程中，他們往往只關(guān)注美學(xué)，走捷徑，最終依賴各種常見(jiàn)的設(shè)計(jì)模式和趨勢(shì)。這樣做的危險(xiǎn)在于，它們可能會(huì)受到流行趨勢(shì)的影響，因此，由于趨勢(shì)被不適當(dāng)?shù)夭渴穑虼藭?huì)出現(xiàn)常見(jiàn)的用戶體驗(yàn)錯(cuò)誤。

當(dāng)涉及到網(wǎng)絡(luò)，人們不想學(xué)的東西，他們想要做的事情。網(wǎng)絡(luò)上有很多例子，設(shè)計(jì)師選擇只關(guān)注視覺(jué)吸引力，這樣做會(huì)犧牲可用性。他們認(rèn)為推動(dòng)設(shè)計(jì)的“哇哇時(shí)刻”本身就足以吸引用戶。但令人遺憾的是，用戶很難理解用戶界面，使用該網(wǎng)站時(shí)遇到了真正的困難，并且該網(wǎng)站的跳出率飆升。

常見(jiàn)的用戶體驗(yàn)錯(cuò)誤驅(qū)使人們離開(kāi)。

設(shè)計(jì)師應(yīng)盡其所能避免常見(jiàn)的用戶體驗(yàn)錯(cuò)誤，并將障礙放入用戶的路徑。

讓我們來(lái)看看一些常見(jiàn)的UX錯(cuò)誤。

網(wǎng)頁(yè)設(shè)計(jì)常見(jiàn)的UX錯(cuò)誤1：大型固定標(biāo)題

在網(wǎng)站上可以看到越來(lái)越多的高粘性標(biāo)題。“品牌塊”和導(dǎo)航菜單具有固定的位置并占用大量空間。它們保持粘在瀏覽器窗口的頂部（“粘性標(biāo)題”），并且經(jīng)常在內(nèi)容滾動(dòng)時(shí)阻止內(nèi)容。

大品牌網(wǎng)站上的一些標(biāo)題高度超過(guò)150像素。他們的價(jià)值在哪里？固定元素（例如粘性標(biāo)題）可以帶來(lái)真正的好處，但是網(wǎng)頁(yè)設(shè)計(jì)者應(yīng)該小心使用它們 - 需要考慮幾個(gè)重要的UX問(wèn)題。

大胖頭棒是一個(gè)主要的UX錯(cuò)誤。

這個(gè)網(wǎng)站上的粘性標(biāo)題超過(guò)160像素高，占據(jù)了很多可視區(qū)域。

粘性導(dǎo)航頭可能太舒服了

如果已經(jīng)決定使用粘性導(dǎo)航標(biāo)題，則最好與用戶一起測(cè)試。過(guò)度使用帶有內(nèi)容的粘性導(dǎo)航標(biāo)題是一個(gè)常見(jiàn)的UX錯(cuò)誤。使用固定的標(biāo)題，訪問(wèn)者仍然可以輕松瀏覽。未能找到合適的平衡可能會(huì)為主要內(nèi)容留下少量空間，并為訪客留下令人窒息，幽閉恐怖的網(wǎng)站體驗(yàn)。

有時(shí)候CSS有一個(gè)簡(jiǎn)單的解決方法：通過(guò)使粘性標(biāo)題略微透明，人們?nèi)匀豢梢栽跐L動(dòng)時(shí)通過(guò)它看到內(nèi)容，這使得內(nèi)容區(qū)域感覺(jué)更加豐富。

網(wǎng)站上的大型粘性導(dǎo)航是最常見(jiàn)的UX錯(cuò)誤之一。

這個(gè)網(wǎng)站的粘性標(biāo)題高度超過(guò)180像素！在某些筆記本電腦上，這超過(guò)了整個(gè)頁(yè)面高度的30％：用戶體驗(yàn)不佳，這是可以避免的。

不考慮移動(dòng)設(shè)備上粘滯的Nav Header問(wèn)題

有些人可能正在使用大型高分辨率計(jì)算機(jī)顯示器，其中粘性導(dǎo)航頭可以加速交互，但移動(dòng)設(shè)備呢？毫無(wú)疑問(wèn)，大量網(wǎng)站訪問(wèn)者將通過(guò)移動(dòng)設(shè)備訪問(wèn)該網(wǎng)站，因此固定標(biāo)頭可能不是最好的主意。幸運(yùn)的是，響應(yīng)式設(shè)計(jì)技術(shù)可以為不同的平臺(tái)設(shè)計(jì)不同的解決方案，并堅(jiān)持使用針對(duì)桌面瀏覽器的粘性導(dǎo)航標(biāo)題。

Web設(shè)計(jì)人員常見(jiàn)的UX錯(cuò)誤。

在這種情況下，標(biāo)題導(dǎo)航可以說(shuō)是高分辨率屏幕的正確解決方案，因?yàn)樗梢詫?shí)現(xiàn)更高效的導(dǎo)航。在較小分辨率的屏幕上，標(biāo)題也是固定的，但占用了相當(dāng)大的空間。移動(dòng)設(shè)備上粘性導(dǎo)航標(biāo)題的絕佳替代品是永遠(yuǎn)存在的漢堡菜單。雖然這種模式不是一個(gè)普遍的問(wèn)題解決者，但它確實(shí)釋放了大量的空間。

網(wǎng)頁(yè)設(shè)計(jì)常見(jiàn)的UX錯(cuò)誤2：薄，輕字體

如今，輕薄的字體在眾多移動(dòng)應(yīng)用和網(wǎng)站上無(wú)處不在。隨著屏幕技術(shù)的進(jìn)步和渲染的改進(jìn)，很多設(shè)計(jì)師都在使用它們，因?yàn)樗鼈儍?yōu)雅，干凈，時(shí)尚。但是，薄字體會(huì)導(dǎo)致可用性問(wèn)題，從而妨礙用戶體驗(yàn)。

網(wǎng)站上所有文本的目標(biāo)都是清晰易讀的，薄型會(huì)嚴(yán)重影響可讀性。并非所有訪問(wèn)者都會(huì)在顯示器上查看呈現(xiàn)薄型的網(wǎng)站。 

最重要的是，文字必須清晰易讀。如果用戶無(wú)法閱讀您應(yīng)用中的文字，那么排版的美妙程度并不重要。

Apple人機(jī)界面指南

Apple指的是移動(dòng)應(yīng)用程序，但同樣的原則適用于網(wǎng)站。易讀性是強(qiáng)制性的，不是可選的良好可用性。如果內(nèi)容不可讀，那么將內(nèi)容放在網(wǎng)站上是沒(méi)有意義的。

精簡(jiǎn)字體也是移動(dòng)設(shè)計(jì)中常見(jiàn)的UX錯(cuò)誤。

移動(dòng)網(wǎng)站上的輕薄字體示例會(huì)對(duì)可讀性產(chǎn)生負(fù)面影響。

以下是在使用thin類(lèi)型之前需要考慮的一些常見(jiàn)UX錯(cuò)誤：

使用輕薄字體，因?yàn)樗菚r(shí)尚的

字體不僅應(yīng)該看起來(lái)不錯(cuò)，而且應(yīng)該清晰易讀。為了獲得適當(dāng)?shù)膶?duì)比度和易讀性，設(shè)計(jì)師應(yīng)力求在設(shè)計(jì)中實(shí)現(xiàn)最佳組合：尺寸，重量和顏色。

最好在各種設(shè)備和屏幕尺寸上測(cè)試網(wǎng)站，以確保所有網(wǎng)站文字都清晰可辨。

這導(dǎo)致我們下一個(gè)常見(jiàn)的UX錯(cuò)誤：

不測(cè)試所有主要設(shè)備上的文本易讀性

對(duì)于許多設(shè)計(jì)師昂貴，精細(xì)調(diào)整的顯示器而言，輕薄型可能看起來(lái)很好，但是經(jīng)常在更便宜，不合標(biāo)準(zhǔn)的顯示器上看到我們?cè)O(shè)計(jì)的普通用戶也必須考慮。最佳做法是檢查字體在所有主要設(shè)備上的外觀：臺(tái)式電腦，筆記本電腦，平板電腦和智能手機(jī)。

例如，在測(cè)試移動(dòng)設(shè)計(jì)時(shí)，讓參與者在白天使用移動(dòng)設(shè)備上的網(wǎng)站 - 現(xiàn)實(shí)世界的用戶并不總是擁有完美的瀏覽和照明條件。如果在網(wǎng)站上使用瘦字體，則可以采用一種簡(jiǎn)單的方法來(lái)適應(yīng)移動(dòng)用戶：在移動(dòng)設(shè)備上指定較粗的字體以提高可讀性。

網(wǎng)站的用戶體驗(yàn)問(wèn)題。

舊版Apple Music網(wǎng)站上的低對(duì)比度文本。

網(wǎng)頁(yè)設(shè)計(jì)常見(jiàn)的UX錯(cuò)誤3：低對(duì)比度文本

在現(xiàn)代用戶界面設(shè)計(jì)中，使用低色彩對(duì)比元素也變得時(shí)髦。它源于極簡(jiǎn)主義的設(shè)計(jì)趨勢(shì)，因?yàn)橥ㄟ^(guò)降低某些區(qū)域的對(duì)比度，設(shè)計(jì)將顯得“極簡(jiǎn)主義”。設(shè)計(jì)師無(wú)法削減需要呈現(xiàn)的信息的復(fù)雜性，因此他們?cè)谠O(shè)計(jì)中扮演低對(duì)比度。

我們已經(jīng)介紹了很薄的字體，但是存在一個(gè)更大的缺陷：由于糟糕的可讀性而嚴(yán)重阻礙用戶體驗(yàn)的低字形輕字體的組合。設(shè)計(jì)師應(yīng)該盡一切可能避免這種可用性陷阱。

正文副本中的低文本對(duì)比度

Cool Springs Financial在其網(wǎng)站上使用了一個(gè)薄的Helvetica變體用于正文。雖然它看起來(lái)很優(yōu)雅，并且有助于美觀的用戶界面，但很難在幾個(gè)平臺(tái)上閱讀。雖然低對(duì)比度不一定是壞的，但它會(huì)使文本難以閱讀，從而對(duì)網(wǎng)站的可用性產(chǎn)生負(fù)面影響。

UX趨勢(shì)低對(duì)比度文本的示例。

網(wǎng)站上的小而薄的低對(duì)比度正文文本使其難以閱讀。

不測(cè)試文本對(duì)比度

在網(wǎng)絡(luò)上有一個(gè)名為Colorable的對(duì)比度檢查的漂亮工具，可以幫助設(shè)計(jì)師根據(jù)Web內(nèi)容可訪問(wèn)性指南設(shè)置正確的文本對(duì)比度。一旦設(shè)計(jì)師知道他們正在使用正確的文本對(duì)比，他們可以調(diào)整其網(wǎng)站上的其他顏色，并進(jìn)行快速的多個(gè)設(shè)備/用戶測(cè)試，以確保文本可讀。

網(wǎng)頁(yè)設(shè)計(jì)常見(jiàn)的UX錯(cuò)誤第4號(hào)：滾動(dòng)劫持

在網(wǎng)絡(luò)上獲得支持的另一個(gè)高風(fēng)險(xiǎn)趨勢(shì)是“滾動(dòng)劫持”。實(shí)現(xiàn)此趨勢(shì)的網(wǎng)站控制頁(yè)面滾動(dòng)（通常使用JavaScript）。當(dāng)人們遇到它時(shí)，他們不再控制頁(yè)面滾動(dòng)并且無(wú)法預(yù)測(cè)其行為，這很容易導(dǎo)致混亂和沮喪。這是一個(gè)冒險(xiǎn)的實(shí)驗(yàn)，可能會(huì)損害網(wǎng)站的可用性，最糟糕的是，會(huì)導(dǎo)致“ 計(jì)算機(jī)風(fēng)靡”。

一些網(wǎng)站可以通過(guò)滾動(dòng)劫持逃脫，但這并不意味著每個(gè)人都可以。例如，許多網(wǎng)頁(yè)設(shè)計(jì)師使用滾動(dòng)劫持，視差效果和各種產(chǎn)品的高分辨率圖像來(lái)關(guān)注Apple的網(wǎng)站。Apple擁有其目標(biāo)市場(chǎng)，獨(dú)特的概念以及其網(wǎng)站的獨(dú)家內(nèi)容。由于每個(gè)站點(diǎn)都有獨(dú)特的問(wèn)題，因此它也必須為這些問(wèn)題量身定制獨(dú)特的解決方案

不與真實(shí)用戶一起測(cè)試

借用時(shí)尚創(chuàng)意或UI模式時(shí)，最好在真實(shí)用戶身上測(cè)試網(wǎng)站原型，以避免UX問(wèn)題。簡(jiǎn)單的可用性測(cè)試將揭示滾動(dòng)劫持的實(shí)現(xiàn)是否可行。如果不進(jìn)行測(cè)試，設(shè)計(jì)人員無(wú)法知道滾動(dòng)劫持是否有效，并且做出假設(shè)通常代價(jià)高昂。