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

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

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

閱讀資訊：

文章出處：Medium - UX Planet

閱讀時間：8 分鐘

流量預估：2。4 MB

作者資訊：

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

姓名：Nick Babich

介紹：I’m a software developer， tech enthusiast and UI/UX lover。

聯絡方式：Twitter | Facebook

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

1、在不同裝置上提供相似的體驗：

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

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

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

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

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

簡單：每個網站都應該有最簡單的結構

清晰：導航選項對訪客而言必須不言而喻

一致：主頁和每個頁面上的導航系統都應該一致

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

3、更改訪問過的連結的顏色：

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

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

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

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

4、輕鬆快速掃描頁面：

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

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

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

Basecamp 採用的 Z 字視覺層級。

5、仔細檢查所有連結：

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

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

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

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

讓可點選的元素顯而易見

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

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

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

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

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

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

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

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

載入動效 by Ramotion

2、別在新標籤中開啟連結：

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

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

3、別讓亂花迷人眼：

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

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

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

4、不要綁架滾軸：

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

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

5、不要帶著聲音自動播放影片：

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

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

Facebook 的影片設定為自動播放，但不會出現聲音，除非使用者以某種方式表明他們正在觀看影片（例如透過與影片進行互動）。

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

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

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

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

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

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

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

避免閃爍的內容！

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

其他文章

外掛：CRAFT | Sketch Material | WeSketch | Runner | Paddy | Diya

技法：Library | Colored Text | Symbol | Shared Text | Resizing | 流程圖 | 文件 | 表格

工具：InVison Studio | Nucleo | Feedly

案例：Swarm | YouTube | Uber | Oscar | Atlassian | Adobe | Adobe

感謝閱讀，祝大家七夕快樂