網頁設計中的規則和禁忌

網頁設計是一個棘手的話題。當你建立網站時你需要考慮很多事情。為了簡化這個任務，我這裡準備了一個列表，每個網頁設計師在設計網頁時都應該考慮這些注意事項。好訊息是，這都是一些簡單的設計原則。

　讓我們開始吧!

　應該做什麼：

　1.不管裝置如何，都應該提供相同的使用者體驗

使用者會使用不同的裝置來訪問你的網站：他們可通過臺式電腦或膝上型電腦，平板電腦，手機，音樂播放器甚至手錶上訪問您的網站。UX設計很關鍵的一部分是要確保使用者應該具有類似的使用者體驗，不論他們是通過什麼來訪問你的網站，不論他們是使用什麼樣的裝置。

如果使用者是通過手機訪問你的網站，他們應該能毫不費勁的找到他們需要的所有東西，就像他們在家裡通過桌面端檢視你的網站一樣。

　2.設計一個簡潔，易用的導航

導航是可用性的基石。請記住，這不關乎於一個網站設計的有多好，但必須確保使用者可通過自己的方式進行瀏覽。這就是為什麼你的網站上的導航應該設計成這樣。

簡單(每個站點都應該有最簡單的結構)

簡潔(導航選項對訪客而言必須清楚易懂)

一致(主頁的導航系統應該在每個頁面上都一樣)

設計導航方式，儘可能減少點選次數而幫助使用者到達他們想去的網頁。同時，應易於瀏覽並能輕易找到他們想去的地方。

　　3.更改已訪問連結的顏色

連結是導航過程中的關鍵因素。當已訪問的連結沒有改變顏色時，使用者可能會無意中重複訪問相同的頁面。

瞭解使用者已訪問過哪些頁面可以避免讓他無意中重複訪問相同的頁面。

　4.輕鬆瀏覽你的頁面

當用戶訪問你的網站時，他們更有可能快速掃描螢幕，而不是閱讀頁面的所有內容。因此，如果訪問者想要查詢內容或完成某項任務，他們將一直瀏覽直到找到他們需要的內容。而作為設計師，你可以通過設計好的視覺層次結構來幫助他們。視覺層次結構是指以暗示重要性的方式安排或呈現元素(例如，他們的眼睛應該集中在拿了? 第一、第二等)

將螢幕標題，登入表單，導航專案或其他重要內容等重要內容標記重點，以便訪問者可立即檢視。

Basecamp使用的Z掃描模式

　5.仔細檢查所有連結

當用戶點選站點上的連結並收到提示404錯誤頁面時，使用者可能很容易變得沮喪。當訪問者正在搜尋內容時，他們希望每個連結都可以將它們帶向所指的地方，而不是出現404錯誤的提示或者其他一些他們不想去的地方。

　6.確保可點選的元素對使用者顯而易見

一個物體的外觀可告知使用者如何使用它。視覺元素看起來像是連結或按鈕，但不可點選(即，有下劃線的單詞沒有連結，具有文字動作的元素，但不是超連結)這樣很有可能會使使用者混淆。使用者需要知道頁面的哪些區域是純靜態內容，哪些區域是可點選的'。

應讓使用者明白哪些是可點選的元素

橙色的盒子是一個按鈕嗎?答案是：不。形狀和標籤使其看起來像一個按鈕，但它不是。

　不應該做什麼:

　1.讓你的訪客等待網頁載入

網頁使用者的注意力和耐心往往很差。根據NNGroup研究：

10秒是將使用者的注意力集中在此任務上的最低限度

當訪問者必須等待你的網站載入時，如果你的網站載入速度不夠快，他們會變得沮喪，並可能離開你的網站。如果載入時間過長，即使你有設計精美的載入指示器，也可能迫使使用者離開網站。

　2.不要在新標籤頁中開啟連結

這種粗魯的行為會禁用Back按鈕，而這是使用者返回到以前的站點的常規方式。

　3.讓促銷掩蓋內容

促銷和廣告可以掩蓋他們旁邊的內容，並使使用者更難完成任務。不要說任何看起來像廣告的東西通常會被使用者忽略(這種現象被稱為旗幟盲點)

4.劫持滾動

劫持滾動是設計師和開發者通過操縱滾動條來使網站表現的不同。包括動畫效果，固定滾動點，甚至滾動條本身的重新設計。被劫持滾動是許多使用者最煩人的事情之一，因為其不受使用者控制。當你設計網站或使用者介面時，你希望讓使用者通過網站或應用程式掌控其瀏覽速度和移動。

MacPro頁面使用一些令人煩惱的滾動效果。它使用單頁視差佈局，其中的點表示頁面的每個部分。

　5.用聲音自動播放視訊

在後臺自動播放視訊，音樂或聲音會刺激使用者。這些元素應謹慎使用，只有在適當的時候和可預期的情況下才能使用。

Facebook視訊設定為自動播放，但不會出現任何聲音，除非使用者有意圖以某種方式觀看視訊(例如通過視訊進行交流)。

　6.為了美而忽視可用性

站點或使用者介面的設計不應影響使用者在螢幕上閱讀內容的能力。重要的是要避免內容繁瑣，色彩不均勻，其會妨礙網站的可讀性或導致顏色對比度不足(例如下面的示例)。

字型的低對比度總是一個糟糕的做法。

　　7.使用閃爍的文字和廣告

閃爍的內容可能會觸發敏感個體的癲癇發作。它不僅可以引起癲癇發作，而且對於一般使用者來說，這可能讓人討厭或導致分心。