盡管”外觀服從(cóng)于功能(néng)“這一(yī)觀點備受争議卻被廣泛的認可。在設計網站方面，通(tōng)常是指網站功能(néng)的易用性和是否可以方便訪客完成自(zì)己的目标。

在接下(xià)來的案例中，我們将展示那些設計得漂亮但可用性差的網站。可用性差的原因包括：布局混亂不堪，載入速度過慢(màn)，導航識别性差。盡管這些網站在視覺設計上(shàng)很有特色，但很不幸他們可用性的确很差。讓我們研究下(xià)這些失敗的案例避免出現在自(zì)己的設計中出現易用性差的情況。

雜(zá)亂無序的設計

我看(kàn)到(dào)的是什麽網站？我要在那裡(lǐ)點擊？接下(xià)來我該怎麽做？設計的雜(zá)亂無序是給訪客最糟糕的印象。訪客不知道設計師(shī)所要表達的意圖(因為(wèi)都被隐藏在了雜(zá)亂無序的設計中)，從(cóng)而導緻訪客在未做任何動作之前就(jiù)要關閉該網頁。

Creative With aK

導航信息超載！不僅我們不知道要看(kàn)什麽，甚至都不知道應該點擊那裡(lǐ)。通(tōng)過鼠标掃描方式查找可點擊區域無助于提升網站的易用性。并且，整個(gè)網站的載入過程連個(gè)進度條都沒有。而且更令哥震驚的是，還(hái)要花時間搞清楚必須關閉歡迎的窗(chuāng)口才可以點擊頁面其他地方。欄目裡(lǐ)缺少滾動條的内容讓哥對藏在裡(lǐ)面的内容頓時失去了興趣。

Marc Ecko

Marc Ecko是一(yī)個(gè)擁有數不清楚生(shēng)意的成功商人，貌似他也希望許多(duō)人了解這些生(shēng)意。問題是，他展示了太多(duō)我們甚至不知道從(cóng)那裡(lǐ)開(kāi)始閱讀(dú)頁面的内容，該網站還(hái)使用了飄忽不定的橫向滾動條。坑爹啊！找到(dào)所需的内容的确需要相(xiàng)當長(cháng)的時間。

Content Of

即便是已經閱讀(dú)”關于我們”頁面并文字裡(lǐ)有許多(duō)的随機(jī)鏈接，哥還(hái)是很疑惑這個(gè)頁面到(dào)底是不是打醬油用的。最合适的猜測可能(néng)這是個(gè)人介紹頁面，而亂七八糟的鏈接和找不到(dào)導航欄，哥隻能(néng)帶著(zhe)困惑和不解離開(kāi)這個(gè)網站。

There Studio

有一(yī)半的圈圈看(kàn)上(shàng)去是可以點的，實際上(shàng)卻不能(néng)。如果拖拽一(yī)個(gè)圈圈，它會(huì)跳到(dào)其他圓圈中去。當然，這些坑爹的圈圈動畫(huà)效果充分的體現出公司比較xxx的理念，這明顯有些過度了嘛！用58秒(miǎo)等待一(yī)個(gè)動畫(huà)的确太漫長(cháng)了。并且，如果你想需要更多(duō)的圈圈，點擊或拖拉空白(bái)區域就(jiù)會(huì)出來，同時也帶給訪問者更多(duō)迷惑。

加載問題

随著(zhe)跳出率上(shàng)升，頁面停留時間變得越來越短。能(néng)立即抓住訪問者眼球就(jiù)變得尤為(wèi)重要。網站加載時間越長(cháng)，訪問者返回google或facebook尋找下(xià)一(yī)個(gè)合适網站可能(néng)性也就(jiù)越大。加載時間、跳過按鈕、無固定導航欄與其他部分都是我們需要思考的點。

Coke Light

這是另一(yī)個(gè)很糟糕的情況，flash設計師(shī)強迫用戶看(kàn)介紹動畫(huà)。沒有跳過按鈕的介紹動畫(huà)會(huì)讓訪問者在進入網站前就(jiù)放(fàng)棄訪問。點擊又(yòu)沒立即響應的按鈕或是視覺上(shàng)不像是導航欄的設計将導緻訪問者失去興緻繼續訪問即便是足夠漂亮的網站。該網站花費(fèi)許多(duō)周折浪費(fèi)訪客的時間才能(néng)回到(dào)首頁将給人感覺進行次”世界之旅”。在網站地圖裡(lǐ)需要查找隐藏在裡(lǐ)面的許多(duō)泡泡。

Desing Sul

哥從(cóng)未見(jiàn)到(dào)過加載問題如此之杯具的網站。多(duō)重加載元素，即使你看(kàn)到(dào)了網頁内容實際上(shàng)還(hái)有東西(xī)要再次加載。也沒有迹象可以表示加載結束了，這樣做也讓哥非常的困惑不解并且該網站還(hái)不易使用。事(shì)實上(shàng)，找到(dào)閱讀(dú)的内容也需要花些功夫，而網站在牛奶卡通(tōng)包裝盒所做的效果與内容根本沒有毛關系嘛。

Nicola Waibeck

進入網站要花很長(cháng)時間痛苦的等待，如果接下(xià)來打開(kāi)的網站足夠漂亮，易用性再好些也算(suàn)是能(néng)接受的。可惜，打開(kāi)頁面後哥徹底傻眼了，裡(lǐ)面每張圖片還(hái)要繼續下(xià)載，我去！并且還(hái)要強迫看(kàn)模糊圖片。更好的改進是，加載圖片時有加載進度條示意正在加載中。如果訪客的帶寬足夠也許問題還(hái)不算(suàn)嚴重。但如果不是，那麽訪客很快就(jiù)會(huì)變得抓狂起來。還(hái)有那個(gè)返回按鈕不夠明顯，這也讓哥覺得這個(gè)網站很杯具。

導航欄

對于那些信息量大或是欄目結構複雜(zá)的網站來說，良好的導航顯得尤為(wèi)重要。你可以想象沒有地圖的情況下(xià)開(kāi)車或在沒有标簽的雜(zá)貨鋪裡(lǐ)購物(wù)有多(duō)麽困難。導航欄會(huì)告訴我們應該去那裡(lǐ)，而在下(xià)面的案例中的網站導航幾乎沒有提供任何有用的信息。你甚至可以考慮帶個(gè)指南(nán)針了，因為(wèi)這些案例實在是太容易讓人迷失方向了。

EContent

經過漫長(cháng)的加載後，網站需要訪客點擊”進入”按鈕。好吧(ba)，我們點它下(xià)。盡管網站上(shàng)有坨快捷菜單，但很不幸的是這坨菜單并沒有引起訪客的注意。并且，訪客需要将鼠标挪到(dào)圖片上(shàng)才能(néng)查看(kàn)子類目。而這些導航按鈕需要訪客非常仔細的查找才行。

Prism Girl

易用性差的網站通(tōng)常都有同樣的通(tōng)病。當哥在這麽漂亮的網站上(shàng)看(kàn)不到(dào)導航時，就(jiù)不得不用鼠标亂戳的方式查找鏈接。這個(gè)網站很漂亮但也非常複雜(zá)，複雜(zá)到(dào)我們需要花費(fèi)一(yī)個(gè)小(xiǎo)時來找鏈接，但你可能(néng)都猜不到(dào)點擊跟随鼠标的圖标方式進入網站。并且，這個(gè)網站除了令人印象深刻的設計之外就(jiù)沒提供個(gè)毛内容出來！

On Toyota’s Mind

緩慢(màn)的加載導緻訪客不明白(bái)接下(xià)來要做點啥：導航欄的視覺不清晰與難以發現的返回按鈕問題一(yī)樣嚴重。哥很疑惑：當訪問該豐田網站時到(dào)底要傳遞給訪客什麽樣的概念呢(ne)？

Theologos

無跳過介紹的按鈕。無視覺清晰的導航欄。加載很慢(màn)。而牛x的是頁面與播放(fàng)的背景音(yīn)樂竟然是分開(kāi)的。當網速快的訪客訪問網站時，網站的動畫(huà)都可能(néng)引起訪客的反感。

構架與目錄問題

你的網站加載情況良好，你知道訪客來你網站想做什麽，你的網站有固定的導航。但訪客一(yī)旦進入你的網站卻無法知道你的目錄結構。就(jiù)好比，要吃(chī)肉就(jiù)應該去肉食店，而不是牛奶店。很不幸的是，有些網站就(jiù)是這麽幹的。

Self Titled

隐藏的菜單與類目不清楚導緻網站導航難以使用。當訪客想找到(dào)他想了解的類目将會(huì)是非常困難的。

Vanalen

該網站的類目由豎條折疊而成。當哥點擊時卻提供了非常少的信息。如果是第一(yī)次訪問該網站，可能(néng)需要花點時間才能(néng)找出你需要的東西(xī)。

GripLimited

該網站的确告訴我們要”點擊與拖拽”，但這個(gè)區域看(kàn)上(shàng)去更像是份海報(bào)，我很懷疑到(dào)底會(huì)有多(duō)少人知道那裡(lǐ)是可以點擊的。該網站也的确的意識到(dào)了上(shàng)面說的這一(yī)點，于是在頁面頂部創建了菜單。但有多(duō)大的幾率會(huì)被人看(kàn)到(dào)呢(ne)？

Kyle Tezak

這是另一(yī)個(gè)視覺效果很好但由于糟糕的用戶體驗會(huì)引起訪客不爽的案例。網站上(shàng)沒有固定的導航欄，而隻是浮動的頭部。如果要找到(dào)聯系方式，需要到(dào)左下(xià)角點擊”Information”（信息）。使用更傳統的方式将有助于提升訪客體驗：例如，放(fàng)一(yī)個(gè)電(diàn)子郵箱或是将文案改為(wèi)”contact information”（聯系信息），亦或是在頁面底部添加聯系方式。這是典型的通(tōng)過細節提升用戶體驗的方式。

可視化與滾動條

即便是網站布局并不混亂，導航也十分清晰。但如果關閉了鼠标交互效果或頁面不能(néng)滾動了，那也就(jiù)意味著(zhe)無人可以看(kàn)到(dào)這些内容了。原本可見(jiàn)的元素因為(wèi)變為(wèi)不可見(jiàn)會(huì)導緻訪客直接離開(kāi)你的網站。

Real Casual

除非你用鼠标點擊不同的區域，否則可點擊元素是根本看(kàn)不見(jiàn)的。點擊某個(gè)區域後又(yòu)是長(cháng)時間的等待，點擊後額外增加的效果也在考驗訪客跳出網站的幾率。

Lego Click

網頁的滾動通(tōng)常是從(cóng)左至右，從(cóng)上(shàng)到(dào)下(xià)。而這個(gè)坑爹的網站卻是從(cóng)網頁底部開(kāi)始。加上(shàng)不能(néng)關閉的關閉按鈕和其他些小(xiǎo)問題，你會(huì)覺得樂高(gāo)這個(gè)網站很莫名其妙（雖然設計很漂亮）。

Journey to Zero

該網站非常巨大，但事(shì)實上(shàng)你打開(kāi)後根本就(jiù)不可能(néng)知道這個(gè)情況。拖動滾動條後也沒有提示信息，就(jiù)離開(kāi)内容區域。如果你拖拉滾動條太快甚至都可以跑出網站設計部分。而且，回到(dào)内容部分也很麻煩。該網站的設計好但也太難用了吧(ba)。

Faub（現已離線）

這是另一(yī)個(gè)設計漂亮，但卻導航無鼠标交互效果或提示信息。

Uniqlo

優衣庫網站看(kàn)上(shàng)去很美觀也很易用。但直到(dào)訪客添加10件(jiàn)商品到(dào)購物(wù)車才發覺無法結賬。而事(shì)實上(shàng)這根本就(jiù)不是購物(wù)車而是願望清單。該體驗完完全全的把每個(gè)使用過的用戶都給坑了。

Bio Bak

這是另一(yī)個(gè)拖動方式進行導航的網站，很顯然它對于這種導航方式自(zì)我感覺非常良好。從(cóng)視覺/樂趣角度來說是個(gè)好網站，但設計公司設計了用戶體驗很糟糕的導航方式：必須要使用鼠标滾輪才能(néng)看(kàn)到(dào)比首屏更多(duō)的内容。

小(xiǎo)結

設計要服務于網站功能(néng)以及訪客溝通(tōng)。如果你的網站同時也能(néng)夠達到(dào)美觀，那就(jiù)一(yī)舉兩得了。設計得美觀漂亮僅當網站首要任務是視覺美觀才适用。

注意那些無序的排版，尤其是在導航欄與訪客首次訪問的頁面。設計的排版過于雜(zá)亂無序會(huì)導緻訪客不知道如何使用你的網站。最糟糕的可能(néng)是訪客在首個(gè)頁面沒有打開(kāi)就(jiù)走掉了。網站訪客不喜歡等待。确保網站的加載速度快，并且能(néng)讓訪客知道可以加載完畢所花費(fèi)的時間。減少訪客流失的最小(xiǎo)風險是一(yī)打開(kāi)網頁就(jiù)能(néng)夠吸引他們的注意。

一(yī)旦訪客訪問，你希望他們訪問你網站上(shàng)的某個(gè)頁面。确保訪客可以輕松找到(dào)你的導航欄，以及每個(gè)導航元素的動作。不要讓訪客猜測或胡亂點擊尋找鏈接。在有許多(duō)内容的的大網站，信息構架與組織尤為(wèi)重要。要确保訪客可以浏覽你的内容。确保菜單易識别，節省訪客的時間，讓訪客知道導航可用。

内容的可見(jiàn)性很重要，但許多(duō)人都無視它。确保訪客可以在最小(xiǎo)的分辨率下(xià)也可以看(kàn)到(dào)所有你希望他們看(kàn)的内容。如果你正在為(wèi)銷售産品做設計，确保你的設計是為(wèi)銷售服務的。必須明确你的設計是為(wèi)推銷産品服務的。你的網站越是沒為(wèi)銷售産品服務，你賺得錢(qián)就(jiù)越少。