「譯」網頁設計中的「Do」&「Don』t」

一直以來，網頁設計都是件棘手的事。當你在設計時要考慮的東西太多了。為了簡化這個任務，我準備了個網頁設計師進行設計時需要考慮的「Do」和「Don『t」原則列表。不要怕，都是些簡單的原則。

下面我們開始！（譯者：哎呀，翻譯完已經七夕啦！）

閱讀信息：

• 文章出處：Medium - UX Planet
• 閱讀時間：8 分鐘
• 流量預估：2.4 MB

作者信息：

• 姓名：Nick Babich
• 介紹：I』m a software developer, tech enthusiast and UI/UX lover.
• 聯繫方式：Twitter | Facebook

1、在不同設備上提供相似的體驗：

用戶會使用許多不同類型的設備訪問你的網站：他們會在台式機或筆記本電腦，平板，手機，音樂播放器甚至手錶上訪問。體驗設計的很大一部分是確保用戶無論通過什麼方式訪問你的網站，都能得到相似的體驗，而不會因設備而異。

如果用戶在手機上訪問你的網站，他們應該能夠毫不費力地找到需要的東西，就像他們在家裡的台式機上訪問你的網站一樣。

2、設計清晰易用的導航：

好的導航是可用性的基石。請記住，**無論你的網站有多好，用戶迷路的話就一文不值。**你網站上的導航應該是：

• 簡單：每個網站都應該有最簡單的結構
• 清晰：導航選項對訪客而言必須不言而喻
• 一致：主頁和每個頁面上的導航系統都應該一致

設計你的導航系統，讓用戶在儘可能少的點擊下達到他們想去的頁面，同時仍易於找到他們需要去的頁面。

3、更改訪問過的鏈接的顏色：

鏈接是導航過程中的關鍵因素。當訪問過的鏈接不改變顏色時，用戶可能在無意中重複訪問相同的頁面。

知曉自己之前和現在的位置使得用戶更易於決定下面去哪。

知道自己去過哪些頁面，可以讓用戶免於在無意中一遍又一遍地訪問相同界面之苦。

4、輕鬆快速掃描頁面：

當用戶訪問你的網頁呢時，他們更有可能快速掃描屏幕，而不是閱讀所有內容。因此，如果用戶想要查找什麼內容或完成一個任務，他們會在發現目標前持續掃描。而你作為設計師，可以通過設計好的視覺層次結構來幫助他們。視覺層次是指以信息權重高低（例如，他們的眼睛應該先看何處，再看何處）來排列或呈現網頁上的元素。

將網站 logo，登錄框，導航系統或其他重要的內容作為視覺焦點，以便用戶一眼看見。

Basecamp 採用的 Z 字視覺層級。

5、仔細檢查所有鏈接：

當用戶點擊站點上的鏈接並看見「404錯誤」頁面時，他會很容易變得失落。當用戶正在搜索內容時，他希望每個鏈接都可以帶他去鏈接所指的地方，而不是「404錯誤」或者不想去地方。

6、確保可點擊的元素識別度高：

網頁上元素的外觀暗示了用戶如何和它交互。看起來像是鏈接或按鈕的視覺元素，但不可點擊（即不是鏈接的含下劃線的文字）可能會使用戶迷惑。用戶需要知道頁面的哪些區域是靜態內容，而哪些區域是可點擊的（或是可用手指敲擊的）。

讓可點擊的元素顯而易見

Menagerie Climb：橙色的框是一個按鈕嗎？答案是：不。形狀和標籤使這歌元素看起來像按鈕，但它並不是。

1、別讓你的用戶在內容載入時乾等：

網頁用戶非常缺失注意力和耐心。根據NNGroup研究：

10秒是用戶將注意力集中在一個任務上的極限時間

當用戶必須等待網站載入時，如果載入速度不夠快，他們將變得沮喪，並可能離開。即使是最精美的載入動效，如果時間過長，也可能迫使用戶離開。

載入動效 by Ramotion

2、別在新標籤中打開鏈接：

這種粗魯的行為會使返回鍵無效，而返回鍵是用戶返回到上一個頁面的習慣方式。

3、別讓亂花迷人眼：

促銷和廣告可以讓他們旁邊的內容失色，並阻礙用戶達成自己的目的。不要說任何看起來像廣告的東西都會被被用戶習慣性忽略（這種現象被稱為廣告失明）。

通常，任何看起來像廣告的東西都被用戶習慣性忽略（這種現象被稱為廣告失明）

4、不要綁架滾軸：

綁架滾軸是設計師或開發者控制滾動條滾動幅度，使在其網站上看上去不同。可以包括動畫效果，固定滾動點，甚至重新設計的滾動條本身。綁架滾軸是許多最煩人的事情之一，因為它從用戶手中搶奪了操控權。當你設計網站或用戶界面時，想讓用戶通過網站或應用程序控制自己的瀏覽節奏。

5、不要帶著聲音自動播放視頻：

自動播放視頻，音樂或聲音會嚇到用戶。這些元素應謹慎使用，只有在適合併符合預期的情況下才能使用。

Facebook 的視頻設置為自動播放，但不會出現聲音，除非用戶以某種方式表明他們正在觀看視頻（例如通過與視頻進行互動）。

6、為了美視覺效果犧牲可用性：

網頁或用戶界面的設計不應干擾用戶在屏幕上獲取內容。避免在背景上製造視覺噪音，妨礙網站的可讀性的糟糕配色，或對比度不足的顏色（例如下面的例子）。

低對比度的配色根本看不清文字

7、使用閃爍的文字和廣告：

閃爍的內容可能會觸發某些過敏用戶的癲癇發作。它不僅會引起癲癇，而且對於一般用戶來說也令人討厭並導致分心。

避免閃爍的內容！

我是 Teambition 的交互設計師徐小馬（微信：heiheilaugh），歡迎交流，請註明知乎 ID。

擴展閱讀：

• Sketch 插件：CRAFT | Sketch Material | WeSketch
• Sketch 技巧：24種樣式的「開關」symbol | 可改顏色和內容的文字 symbol
• Graffle 教程：繪製流程圖 | 搭建文檔
• Medium 翻譯：Foursquare Swarm 5.0改版

最後，祝大家七夕快樂

推薦閱讀：