網(wǎng)站設(shè)計(jì)是一個(gè)棘手的話題。當(dāng)你創(chuàng)立網(wǎng)站時(shí)你需要思考許多事宜。為了簡(jiǎn)化這個(gè)任務(wù)，我這里籌備了一個(gè)列表，每個(gè)網(wǎng)站設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁(yè)時(shí)都應(yīng)當(dāng)思考這些留意事宜。好消息是，這都是有些簡(jiǎn)易的設(shè)計(jì)原則。
應(yīng)當(dāng)做什么：
1.不管設(shè)備怎樣，都應(yīng)當(dāng)提供相同的客戶體驗(yàn)
客戶會(huì)操作不同的設(shè)備來(lái)訪問(wèn)你的網(wǎng)站：他們可通過(guò)臺(tái)式電腦或筆記本電腦，平板電腦，手機(jī)，音樂(lè)播放器甚至手表上訪問(wèn)您的網(wǎng)站。UX設(shè)計(jì)很關(guān)鍵的一部分是要確保客戶應(yīng)當(dāng)具備類似的客戶體驗(yàn)，不論他們是通過(guò)什么來(lái)訪問(wèn)你的網(wǎng)站，不論他們是操作怎樣的設(shè)備。
如果客戶是通過(guò)手機(jī)訪問(wèn)你的網(wǎng)站，他們應(yīng)當(dāng)能毫不費(fèi)勁的找到他們需要的所有東西，就像他們?cè)诩依锿ㄟ^(guò)桌面端查看你的網(wǎng)站一樣。
2.設(shè)計(jì)一個(gè)簡(jiǎn)潔，易用的導(dǎo)航
導(dǎo)航是可用性的基石。請(qǐng)記住，這不關(guān)乎于一個(gè)網(wǎng)頁(yè)設(shè)計(jì)的有多好，但必須確?？蛻艨赏ㄟ^(guò)自己的方式實(shí)行瀏覽。這就是為何你的網(wǎng)站上的導(dǎo)航應(yīng)當(dāng)設(shè)計(jì)成這樣。
?簡(jiǎn)易(每個(gè)站點(diǎn)都應(yīng)當(dāng)有最簡(jiǎn)易的構(gòu)架)
?簡(jiǎn)潔(導(dǎo)航選項(xiàng)對(duì)訪客而言必須清楚易懂)
?統(tǒng)一(首頁(yè)的導(dǎo)航系統(tǒng)應(yīng)當(dāng)在每個(gè)頁(yè)面上都一樣)
設(shè)計(jì)導(dǎo)航方式，盡可能減輕點(diǎn)擊次數(shù)而幫助客戶到達(dá)他們想去的網(wǎng)頁(yè)。同時(shí)，應(yīng)易于瀏覽并能輕松找到他們想去的地方。
3.更改已訪問(wèn)鏈接的顏色
鏈接是導(dǎo)航進(jìn)程中的關(guān)鍵原因。當(dāng)已訪問(wèn)的鏈接沒(méi)有改變顏色時(shí)，客戶可能會(huì)無(wú)意中重復(fù)訪問(wèn)相同的頁(yè)面。
理解客戶已訪問(wèn)過(guò)哪些頁(yè)面能夠防止讓他無(wú)意中重復(fù)訪問(wèn)相同的頁(yè)面。
4.輕易瀏覽你的頁(yè)面
當(dāng)客戶訪問(wèn)你的網(wǎng)站時(shí)，他們更有可能火速掃描屏幕，而不是閱讀頁(yè)面的所有內(nèi)容。因此，如果訪問(wèn)者想要查找內(nèi)容或完成某項(xiàng)任務(wù)，他們將總是瀏覽直到找到他們需要的內(nèi)容。而作為設(shè)計(jì)師，你能夠通過(guò)設(shè)計(jì)好的視覺(jué)層次構(gòu)架來(lái)幫助他們。視覺(jué)層次構(gòu)架是指以暗示必要性的方式安排或體現(xiàn)元素(例如，他們的眼睛應(yīng)當(dāng)集中在哪了?第一、第二等)
將屏幕標(biāo)題，登錄表單，導(dǎo)航項(xiàng)目或其他緊要內(nèi)容等緊要內(nèi)容標(biāo)記難點(diǎn)，以便訪問(wèn)者可立即查看。
5.仔細(xì)檢查所有鏈接
當(dāng)客戶點(diǎn)擊站點(diǎn)上的鏈接并收到提醒 404謬誤頁(yè)面時(shí)，客戶可能很容易變?yōu)榫趩?。?dāng)訪問(wèn)者正在搜索內(nèi)容時(shí)，他們希望每個(gè)鏈接都能夠?qū)⑺鼈儙蛩傅牡胤?，而不是出現(xiàn) 404謬誤的提醒或者其他有些他們不想去的地方。
6.確?？牲c(diǎn)擊的元素對(duì)客戶顯而易見
一個(gè)物體的外觀可告知客戶怎樣操作它。視覺(jué)元素看起來(lái)像是鏈接或按鈕，但不可點(diǎn)擊(即，有下劃線的單詞沒(méi)有鏈接，具備文字動(dòng)作的元素，但不是超鏈接)這樣很有可能會(huì)操作戶混淆?？蛻粜枰獣皂?yè)面的哪些區(qū)域是純靜態(tài)內(nèi)容，哪些區(qū)域是可點(diǎn)擊的。

應(yīng)讓客戶明白哪些是可點(diǎn)擊的元素

橙色的盒子是一個(gè)按鈕嗎?結(jié)論是：不。形狀和標(biāo)簽使其看起來(lái)像一個(gè)按鈕，但它不是。
不應(yīng)當(dāng)做什么：
1.讓你的訪客等待網(wǎng)頁(yè)加載
網(wǎng)頁(yè)客戶的留意力和耐心往往很差。按照NNGroup研討：
10秒是將客戶的留意力集中在此任務(wù)上的最低限度
當(dāng)訪問(wèn)者必須等待你的網(wǎng)站加載時(shí)，如果你的網(wǎng)站加載速度不夠快，他們會(huì)變?yōu)榫趩剩⒖赡茈x開你的網(wǎng)站。如果加載時(shí)間過(guò)長(zhǎng)，即使你有設(shè)計(jì)精美的加載指示器，也可能迫操作戶離開網(wǎng)站。
2.不要在新標(biāo)簽頁(yè)中打開鏈接
這種粗魯?shù)男袕綍?huì)禁用Back按鈕，而這是客戶返回到之前的站點(diǎn)的慣例方式。
3.讓促銷掩蓋內(nèi)容
促銷和廣告能夠掩蓋他們旁邊的內(nèi)容，并操作戶更難完成任務(wù)。不要說(shuō)任何看起來(lái)像廣告的東西通常會(huì)被客戶忽視(這種現(xiàn)象被稱為旗幟盲點(diǎn))
4.劫持滾動(dòng)
劫持滾動(dòng)是設(shè)計(jì)師和開發(fā)者通過(guò)操縱滾動(dòng)條來(lái)使網(wǎng)站表現(xiàn)的不同。包含動(dòng)畫效益，固定滾動(dòng)點(diǎn)，甚至滾動(dòng)條本身的重新設(shè)計(jì)。被劫持滾動(dòng)是眾多客戶最煩人的事宜之一，由于其不受客戶控制。當(dāng)你設(shè)計(jì)網(wǎng)站或客戶界面時(shí)，你希望讓客戶通過(guò)網(wǎng)站或應(yīng)用程序掌控其瀏覽速度和移動(dòng)。
MacPro頁(yè)面操作有些令人煩惱的滾動(dòng)效益。它操作單頁(yè)視差部署，其中的點(diǎn)表示頁(yè)面的每個(gè)部分。
5.用聲音自動(dòng)播放視頻
在后臺(tái)自動(dòng)播放視頻，音樂(lè)或聲音會(huì)刺激客戶。這些元素應(yīng)慎重操作，只有在適當(dāng)?shù)臅r(shí)候和可預(yù)期的情形下才能操作。
Facebook視頻設(shè)立為自動(dòng)播放，但不會(huì)出現(xiàn)任何聲音，除非客戶有意圖以某種方式觀看視頻(例如通過(guò)視頻實(shí)行交流)。
6.為了美而忽略可用性
站點(diǎn)或客戶界面的設(shè)計(jì)不應(yīng)影響客戶在屏幕上閱讀內(nèi)容的能力。緊要的是要防止內(nèi)容繁瑣，色彩不均勻，其會(huì)妨礙網(wǎng)站的可讀性或造成顏色對(duì)照度瑕疵(例如下面的示例)。
生活就是我們的老師，它會(huì)告訴我們?cè)S多的東西。
靈感源于生活，生活也帶給我們更多的革新，全美設(shè)計(jì)做懂你的設(shè)計(jì)。