反面教材！7個讓人抓狂的網(wǎng)頁設計

一直以來，我們都致力于分享優(yōu)秀的網(wǎng)頁設計，好的設計固然能給廣大網(wǎng)頁設計師們帶來靈感，但一些不好的反面教材，也適合大家去看一下，如何避免掉才能更進一步。

有時候，當我滿懷期待地點開某些網(wǎng)站的時候——它們的存在簡直是設計的災難!相信我，當你看見它們也會抓狂的。從莫明的鏈接丟失到糟糕的可用性，我將會分享一些會讓我瞬間暴走的錯誤設計。注意!千萬別讓你的用戶遇到和下面同樣的問題。

1.缺乏對比度

網(wǎng)頁上的文字和圖片都需要具備較高的可讀性，最簡單的方法就是讓它們具有高對比度。但是許多設計師卻經(jīng)常忽視這條規(guī)則。

圖片背景與文字對比度太差，導致文字模糊不清無法閱讀，用戶不僅錯過這段話也錯過了你要傳達的重要內(nèi)容。

你必須保證每一個元素都與它周圍的其他元素區(qū)別開來，記住這些基本方法——色彩、空間、尺寸。合理地運用它們讓你的每個元素都清晰可見吧!

上圖的兩個對比問題——白色的文字與淺色的圖片顏色過于相近以及過小的字號都讓這段文字的可讀性變得極差。

2.糟糕的導航和操作流程

當我登陸了網(wǎng)頁的第一眼，你就得讓我明白接下來我該做哪個操作。點擊按鈕以及信息需要放在顯眼的位置——這就是為什么導航和菜單欄往往處于頁面的頂部。

導航的標簽內(nèi)容和運行效果必須清晰直觀，當你嘗試使用水平方向的滾動條或者其他一些不太尋常的動效設計的時候，給用戶一些暗示讓他們知道你的網(wǎng)頁如何工作吧!過于復雜的設計會讓用戶感到無所適從并放棄你的網(wǎng)站。

3.糟糕的圖片搭配處理

沒有什么比一個優(yōu)秀的圖片被其他設計掩蓋更糟糕了。如果你花了時間為你的網(wǎng)站搭配了一張優(yōu)秀的圖片，為什么要讓它被其他的設計元素所覆蓋呢?加上簡單的一行字就可以了!這也是為什么透明按鈕成為了新的流行趨勢。透明按鈕：在設計網(wǎng)頁中的按鈕之時，不再設計復雜色彩、樣式和紋理，而是外僅以線框示意輪廓，內(nèi)只用文字示意功能，背景透出，與整個頁面/背景合而為一的設計方式 譯者按

當設計師追逐潮流的時候，經(jīng)常會落入這樣的誤區(qū)。頂欄很有趣，滾動也很棒，可是當你為它們搭配上文字，一切就容易變得不那么和諧了。頁面上的每個圖片都需要與文本搭配，讓每個文字都可讀，圖片上的每個設計元素都清晰可見。

不要用文本或者按鈕覆蓋圖片上任何重要的部分。當你覺得你的頁面設計出現(xiàn)了這樣的情況，最好更換一個更加簡潔的背景并在其他地方放上你的這張圖片吧。

當?shù)谝谎劭吹缴厦孢@張圖的時候你會被吸引是因為它的素描風格。但仔細看看，人物面部被文字遮蓋了，那段褒獎之辭也讓整體顯得雜亂無章。

4.不使用網(wǎng)格

在網(wǎng)頁設計中，有些“雜亂”也能讓人賞心悅目，不對稱是其中的一種，不使用網(wǎng)格絕對不是!

是否使用網(wǎng)格是區(qū)分設計好壞的專業(yè)指標之一。網(wǎng)格讓一切變得清晰有組織性——讓你的元素之間保持一致的適當?shù)拈g距，你知道應當把你的元素放在哪兒、怎么放。網(wǎng)格幫助你確定元素的尺寸、文本的尺寸和空間，通過比例展現(xiàn)內(nèi)容的側(cè)重點。

5.不采用響應式設計

使用響應式設計框架!使用響應式設計框架!使用響應式設計框架!重要的事情說三遍! 你的網(wǎng)頁或許需要在手機上運行，它必須要和在電腦上運行一樣流暢。

我總能遇到一些網(wǎng)站，在手機上加載出的是一整個頁面。這些網(wǎng)站并不是響應式設計，至少沒有手機版的視圖，以至于用戶無法使用。(雖然很不常見，但那些只提供手機版視圖的網(wǎng)站也相當讓人無奈。)

或許很多用戶和我一樣，如果我不能在手機上順利使用你的網(wǎng)站，那我也不會在我的電腦上打開它了。

6.鏈接丟失

崩潰的鏈接是網(wǎng)頁上最讓人惱火的事之一。養(yǎng)成每年都去審核你的網(wǎng)頁上鏈接是否暢通的習慣吧!你可以手動檢查或是使用某些工具，比如Website Link Checker.

如果你的logo并不能鏈接到你的網(wǎng)站首頁，我也會感到奇怪。Logo都是要鏈接到網(wǎng)站首頁的。(以及當處于首頁的時候，不要禁用返回按鈕。)

考慮鏈接的可用性。保證你的鏈接，特別是那些文本中的鏈接足夠明顯并且易于點擊而不造成誤操作。不要在你的文本中添加很多文字鏈接，特別是在小的移動設備屏幕上，用戶很難點擊到正確的鏈接。

7.自動播放音樂

在網(wǎng)頁上添加聲音會很生動，可千萬別在沒有用戶提示的情況下播放音樂。

你應當提供給用戶一個打開/關閉音樂的按鈕，并且默認關閉。音樂或許會讓用戶驚艷，可要是用戶正處于工作環(huán)境或是心情很差的時候這么做卻適得其反。用戶需要能完全操控你的網(wǎng)頁，而自動播放的音樂卻與之背道而馳。我需要網(wǎng)頁音樂但播放必須得到我的同意，如果我沒辦法找到按鈕關閉自動播放的音樂，那只能直接關掉網(wǎng)頁。

但應用在廣告上這倒是個不錯的招數(shù)。如果你有有聲音的內(nèi)容必須要播放，考慮放一個大的彈出式靜音按鈕。用戶往往會接受幾秒鐘的廣告時間并會去閱讀內(nèi)容。雖然這不是一個理想的方法，卻是一個比較好的解決方案。

看看上面這張頁面，它會自動播放音樂但應當是靜音的。再看看能不能一眼找到切換按鈕吧——按鈕太小了特別是對比其他元素它更難被找到了。

7大更嚴重的罪狀

沒有最糟只有更糟，下面的一些細節(jié)設計錯誤也會讓我棄之而去，別讓你自己成為這些粗心犯的錯誤的受害者了。

沒有搜索功能

語法或拼寫錯誤

沒有呼叫功能

文字中出現(xiàn)太多鏈接

連字符連接的文本

超小的按鈕

糟糕的排版和可讀性

總結(jié)

每個人都很容易造成這些設計失誤(你在整體設計很棒的網(wǎng)站上也會發(fā)現(xiàn)這些潛在問題)。

在設計和開發(fā)過程中關注這些小細節(jié)，你可以成功避開這些失誤。別惹你的用戶生氣(嚴肅臉)!