網(wǎng)站設(shè)計是一件很繁瑣的事情，因為在設(shè)計時要思考很多事情。為了簡化網(wǎng)站設(shè)計這件事，本文列舉了每個網(wǎng)頁設(shè)計者都應(yīng)當(dāng)思考的行為準(zhǔn)則，包含能做什么，不能做什么。放心，這些準(zhǔn)則都是一些很簡單的原則。

設(shè)計網(wǎng)站時，應(yīng)當(dāng)做什么

1. 在不同設(shè)備上采用相似的設(shè)計

客戶能夠通過不同種類的設(shè)備訪問你的網(wǎng)站，這些設(shè)備包含：電腦、平板、手機(jī)、音樂播放器、甚至是智能手表等。

無論客戶啟用什么設(shè)備訪問你的網(wǎng)頁，確保他們具備類似的體驗，這是客戶體驗設(shè)計中的一條緊要標(biāo)準(zhǔn)。

2. 導(dǎo)航的設(shè)計要簡單易用、清晰明了

導(dǎo)航設(shè)計是網(wǎng)頁可用性的基石。

記?。喝绻蛻粼谀愕木W(wǎng)站里找不到導(dǎo)航，那么無論你的網(wǎng)站有多流弊都沒用。這也是導(dǎo)航設(shè)計要遵循以下原則的因素：

簡單。每個網(wǎng)站都應(yīng)當(dāng)有盡可能簡單的結(jié)構(gòu)。

清晰。導(dǎo)航的每項對客戶而言，都應(yīng)當(dāng)是清楚的。

統(tǒng)一。系統(tǒng)的導(dǎo)航頁在每一頁中都應(yīng)當(dāng)是相同的。

客戶以最少的點擊次數(shù)，最快地到達(dá)他們想要瀏覽的網(wǎng)頁。這才是導(dǎo)航設(shè)計的目的。

3. 改變訪問過的鏈接的顏色

鏈接是導(dǎo)航的一個關(guān)鍵原因。假如客戶點擊過的鏈接沒有改變顏色，很可能誘發(fā)客戶多次點擊同一個鏈接。

如果客戶知道自己過去訪問的鏈接和現(xiàn)在還未訪問過的鏈接，那么客戶會更容易決定自己下一次要領(lǐng)擊什么。

4. 讓頁面瀏覽變?yōu)楦菀?/p>

客戶瀏覽我們的網(wǎng)頁時，并不是通讀所有的內(nèi)容，而是快速地掃描整個網(wǎng)頁。

因此，如果客戶來到這個網(wǎng)站，是為了尋找特定的內(nèi)容或者是完成某個任務(wù)，那么他們會先瀏覽整個網(wǎng)頁，直到客戶找到了自己想要去的地方。

因此，作為網(wǎng)站設(shè)計者的我們，應(yīng)當(dāng)通過設(shè)計網(wǎng)站可視化的層級架構(gòu)幫助這些客戶盡快達(dá)成我的目的。

可視化的層級架構(gòu)意味著網(wǎng)頁上每個元素的擺放或體現(xiàn)都具備權(quán)重（比如說，我們的設(shè)計決定了客戶先看到哪個，再看到哪個，最后看到哪個）。

我們在設(shè)計網(wǎng)站時，要確保網(wǎng)頁標(biāo)題、登錄注冊按鈕、導(dǎo)航欄或其它同等緊要的元素放在客戶很容易看到的地方，以減少客戶尋找的時間。

客戶的視線是Z字形的。

5. 仔細(xì)檢查所有的鏈接

當(dāng)客戶點擊網(wǎng)站上的一個鏈接，界面上卻出現(xiàn)404的錯誤頁面時，客戶很容易變?yōu)榫趩省?/p>

當(dāng)客戶在網(wǎng)站上尋找內(nèi)容時，他們希望自己點擊過的每個鏈接都是自己正在尋找的那個，而不是出現(xiàn)404的錯誤頁面、或者點進(jìn)去后，卻發(fā)現(xiàn)不是自己尋找的那個頁面。

6. 確保能點擊的元素讓客戶看起來就能點擊

一個物體的樣子會告訴客戶怎樣啟用它。

看起來像按鈕或鏈接的視覺元素卻不能點擊，很容易困擾客戶；這些視覺元素包含：文字下劃線并不代表鏈接、擁有動畫效益的元素也不是超鏈接。

客戶想要知道界面上哪些區(qū)域是純靜態(tài)內(nèi)容，哪些區(qū)域是能夠點擊的。

讓能夠點擊的元素明顯一點。

如上圖，你認(rèn)為那個橙色的框是個按鈕嗎？相信很多人都覺得它看起來像個按鈕，但其實它并不是。

設(shè)計網(wǎng)站時，不該做什么

1. 不要讓客戶等

網(wǎng)站客戶的耐心和留意力是非常小的。根據(jù)NNGroup的研究，10秒是客戶集中留意力完成一個任務(wù)的極限。

當(dāng)客戶在等待內(nèi)容加載時，他們很可能會變的沮喪。如果加載速度很慢，客戶很可能會離開這個網(wǎng)站，即使是足夠漂亮的加載動畫設(shè)計也無法改變這個結(jié)果。

2. 在新標(biāo)簽頁打開鏈接

在新標(biāo)簽頁打開鏈接的設(shè)計讓客戶無法啟用“返回”按鈕返回前面的頁面。這是非常不好的設(shè)計。

3. 整個網(wǎng)站充斥著廣告

促銷和廣告會掩蓋網(wǎng)站里的內(nèi)容，也會讓客戶很難集中留意力去完成任務(wù)，更不用說那些看起來像廣告的事情常常會被客戶忽視（這種現(xiàn)象被稱為：旗幟盲點）。

4. 滾動劫持（Hijack scrolling）

滾動劫持是指：網(wǎng)站的設(shè)計者或開發(fā)者控制滾動條，從而使得客戶在滾動鼠標(biāo)時，會在網(wǎng)站上看到不同的效益，包含動畫效益、固定的滾動點、甚至是重新設(shè)計過的滾動條。

滾動劫持是客戶最不喜愛的設(shè)計之一，因此，它奪取了客戶控制滾動條的權(quán)利。

當(dāng)你設(shè)計網(wǎng)站時或設(shè)計客戶界面時，你應(yīng)當(dāng)讓客戶自己決定自己瀏覽的網(wǎng)頁或APP的位置。

如上圖，這個頁面就采用了這個設(shè)計效益。它啟用單頁面平行布局的方式，用右邊的點來代替每個頁面。

5. 自動播放視頻（有聲音）

在后臺自動播放視頻、音樂或聲音文件，都是客戶難以接受的設(shè)計方式。

客戶很少啟用這些元素，除非是在適當(dāng)?shù)臅r候。

Facebook會在網(wǎng)頁上自動播放視頻，但是在靜音狀態(tài)。但是當(dāng)客戶意識到自己在看視頻時，客戶能夠自己點擊屏幕決定聲音的有無以及大小。

6. 為了網(wǎng)站的美觀犧牲網(wǎng)站的可用性

一個網(wǎng)站或客戶界面的設(shè)計不應(yīng)當(dāng)因為內(nèi)容影響客戶的消費能力。最佳不要在文字后啟用繁重的背景、也不要啟用讓客戶很難閱讀或顏色對照不明顯的配色方法。

如上圖，低對照的配色方法很難看清楚界面上的字。

7. 啟用閃爍的文字或廣告

閃爍的內(nèi)容或閃爍會誘發(fā)易感人群的癲癇病。這樣的設(shè)計不僅能引發(fā)癲癇，而且還會因吸調(diào)用戶的留意力而惹惱