【譯】Web 設計準則

• 原文地址：Do’s and Don’ts of Web Design
• 原文做者：Nick Babich
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：吃土小2叉
• 校對者：michaelia、Hyde Song

Web 設計準則

做者： Nick Babich

Web 設計是一個棘手的主題。在建立一個網站的過程當中須要考慮許多事項。爲了簡化這個任務，我準備了一份每一個設計師都須要考慮的 Web 設計準則清單。好消息是這些準則都很簡單。

讓咱們開始吧！

應該考慮的事項

1. 爲不一樣設備提供相似的用戶體驗

用戶會經過不一樣類型的設備訪問您的網站：例如臺式機、筆記本、平板、手機、音樂播放器，甚至是手錶。用戶體驗設計很重要的一部分是確保不管用戶經過何種設備瀏覽您的網站，網站都應該提供相似的體驗。

若是用戶在手機上瀏覽您的網站，要確保他們夠輕鬆找到全部須要的東西，就好像他們在家裏的臺式機上瀏覽您的網站同樣。

2. 設計簡明易用的導航

導航是網站可用性的基礎。請記住，若是用戶在你的網站裏迷路了，那麼不管網站多麼酷炫都只是徒勞。所以，你的網站導航應該是這樣的：

• 簡單（網站結構應該儘量簡單）
• 明確（導航項對用戶來講都應該是不言而喻的）
• 一致（首頁的導航應該與網站每一個頁面上的導航保持一致）

在設計導航時，應該考慮讓用戶以最少的點擊次數來抵達目標頁面。與此同時，要讓用戶可以輕鬆地找到接下來要訪問的頁面。

3. 改變已訪問連接的顏色

連接是導航的關鍵要素。若是已訪問的連接顏色沒有變化，那麼用戶可能會無心中重複訪問相同的頁面。

瞭解過去和如今的位置讓決定下一步去哪裏變得更容易。

瞭解訪問過了哪些頁面能夠避免無心中重複訪問相同的頁面。

4. 讓網頁易於瀏覽

在訪問網站時，比起仔細閱讀全部內容，用戶更喜歡快速瀏覽屏幕。若是用戶想要找到某些內容或完成某項任務，用戶會瀏覽網頁直到找到他們所須要的。而你，做爲一枚設計師，能夠經過設計良好的視覺層次來方便用戶。視覺層次是指按照元素的重要性來排列元素或呈現元素。（舉個例子：用戶應該首先聚焦元素 A，其次聚焦元素 B，以此類推……）

將頁面標題、登陸表單、導航項目或者其餘重要的元素設爲焦點，使其一目瞭然。

Basecamp 使用的 Z 字引導模式

5. 仔細檢查全部超連接

當用戶點擊站點上的連接而後進入 404 錯誤頁時，這很容易讓用戶感到沮喪。當用戶正在搜索內容時，他們但願每一個連接都指向正確的地方，而不是 404 錯誤頁或其餘地方。

6. 確保可點擊元素看起來能點擊

外觀決定用途。視覺元素看起來像連接或按鈕可是不能點擊，這樣很容易讓用戶迷惑（舉個例子：帶下劃線的文字卻不是超連接，具備號召性用語的元素卻不是超連接）。用戶須要知道網頁上哪些部分是純靜態內容，哪些部分能夠點擊（或者觸摸）。

讓可點擊元素更醒目

Menagerie Climb：這個橘黃色的盒子是一個按鈕嗎？答案是否認的。它的形狀和標籤讓它看起來像是一個按鈕，然而實際並不是如此。

不該該作的

1. 讓你的用戶等待過久

根據 NNGroup 的調查。Web 用戶很是沒有耐心，只能維持很短暫的注意力。

用戶的注意力最多維持 10 秒

當用戶必須等待網站加載時，他們會變得沮喪，並且只要網站加載速度不夠快，用戶可能會離開您的網站。即便有最精美的加載指示器，若是加載時間過長，也避免不了用戶離開網站。

圖片來源：Ramotion

2. 在新標籤頁打開新頁面

這種不恰當的行爲會使返回鍵不起做用，而用戶一般都會使用返回鍵來回到上一個頁面。

3. 廣告滿天飛

促銷廣告會遮蓋它們旁邊的內容，使得用戶更難完成任務。更不用說任何看起來像廣告的東西一般都會被用戶忽略（這種現象被稱爲橫幅盲點）。

一般，用戶會忽略任何看起來像廣告的東西（這種現象被稱爲橫幅盲點）

4. 滾動劫持

滾動劫持指的是設計師或者開發者在網站上控制並自定義了滾動條的行爲。包括：動畫效果、固定滾動點、甚至從新設計滾動條自己的樣式。滾動劫持是許多用戶最討厭的事情之一，由於用戶失去了對滾動條的控制。設計網站或者用戶界面時，要讓用戶在瀏覽網站或者應用時可以自主瀏覽和移動。

Mac Pro 頁面使用了一些可惡的滾動效果。它使用單頁視差佈局，其中每個小圓點表明頁面的一部分。

5. 自動播放有聲音的視頻

在後臺自動播放的視頻、音頻會惹惱用戶。這些務必謹慎使用，而且只在合適的狀況下，用戶指望如此時才使用。

Facebook 的視頻雖然會自動播放，可是默認是靜音播放的，除非用戶以某種方式暗示他們正在觀看視頻纔會有聲音（例如經過與視頻進行交互）。

6. 爲了美觀而犧牲可用性

網站設計或者用戶界面設計毫不應該妨礙用戶交互。重要的是，要避免給內容配上雜亂的背景，避免使用妨礙閱讀、色彩對比不足等糟糕的配色方案（例以下面的示例）。

避免文字顏色和背景色的對比度太低。

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

閃爍的內容不但可能引發敏感人羣的癲癇發做，並且可能使普通用戶心煩意亂。

別用閃爍的文字！

---

歡迎留言分享您的建議！

歡迎關注 UX Planet: Twitter | Facebook

原文地址： babich.biz

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。