網頁設計的7個誤區

導語:有些時候,當我滿懷期待地點開某些網站的時候 —— 它們的存在簡直是設計的災難!相信我,當你看見它們也會抓狂的。下面是網頁設計的7個誤區,歡迎參考!

網頁設計的7個誤區

  1. 缺乏對比度

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

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

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

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

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

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

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

  3. 糟糕的圖片搭配處理

沒有什麼比一個優秀的圖片被其他設計掩蓋更糟糕了。如果你花了時間爲你的網站搭配了一張優秀的圖片,爲什麼要讓它被其他的設計元素所覆蓋呢?加上簡單的一行字就可以了!這也是爲什麼透明按鈕成爲了新的流行趨勢。

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

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

當第一眼看到上面這張圖的時候你會被吸引是因爲它的素描風格。但仔細看看,人物面部被文字遮蓋了,那段褒獎之辭也讓整體顯得雜亂無章。

  4. 不使用網格

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

是否使用網格是區分設計好壞的專業指標之一。網格讓一切變得清晰有組織性 —— 讓你的元素之間保持一致的適當的間距,你知道應當把你的元素放在哪兒、怎麼放。網格幫助你確定元素的尺寸、文本的尺寸和空間,通過比例展現內容的側重點。

  5. 不採用響應式設計

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

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

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

  6. 鏈接丟失

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

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

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

  7. 自動播放音樂

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

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

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

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