以下內(nèi)容由Mockplus團(tuán)隊(duì)翻譯整理，僅供學(xué)習(xí)交流，Mockplus是更快更簡(jiǎn)單的原型設(shè)計(jì)工具。

網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)棘手的話(huà)題。當(dāng)你創(chuàng)建網(wǎng)站時(shí)你需要考慮很多事情。為了簡(jiǎn)化這個(gè)任務(wù)，我這里準(zhǔn)備了一個(gè)列表，每個(gè)網(wǎng)頁(yè)設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁(yè)時(shí)都應(yīng)該考慮這些注意事項(xiàng)。好消息是，這都是一些簡(jiǎn)單的設(shè)計(jì)原則。

讓我們開(kāi)始吧!

應(yīng)該做什么：

1.不管設(shè)備如何，都應(yīng)該提供相同的用戶(hù)體驗(yàn)

用戶(hù)會(huì)使用差別的設(shè)備來(lái)拜候你的網(wǎng)站：他們可通過(guò)臺(tái)式電腦或條記本電腦，平板電腦，手機(jī)，音樂(lè)播放器甚至手表上拜候您的網(wǎng)站。UX設(shè)計(jì)很關(guān)鍵的一部分是要確保用戶(hù)應(yīng)該具有類(lèi)似的用戶(hù)體驗(yàn)，豈論他們是通過(guò)什么來(lái)拜候你的網(wǎng)站，豈論他們是使用什么樣的設(shè)備。

如果用戶(hù)是通過(guò)手機(jī)拜候你的網(wǎng)站，他們應(yīng)該能毫不費(fèi)勁的找到他們需要的所有東西，就像他們?cè)诩依锿ㄟ^(guò)桌面端查看你的網(wǎng)站一樣。

2.設(shè)計(jì)一個(gè)簡(jiǎn)潔，易用的導(dǎo)航

導(dǎo)航是可用性的基石。請(qǐng)記住，這不關(guān)乎于一個(gè)網(wǎng)站設(shè)計(jì)的有多好，但必需確保用戶(hù)可通過(guò)本身的方式進(jìn)行瀏覽。這就是為什么你的網(wǎng)站上的導(dǎo)航應(yīng)該設(shè)計(jì)成這樣。

?簡(jiǎn)單(每個(gè)站點(diǎn)都應(yīng)該有最簡(jiǎn)單的結(jié)構(gòu))

?簡(jiǎn)潔(導(dǎo)航選項(xiàng)對(duì)訪(fǎng)客而言必需清楚易懂)

?一致(主頁(yè)的導(dǎo)航系統(tǒng)應(yīng)該在每個(gè)頁(yè)面上都一樣)

設(shè)計(jì)導(dǎo)航方式，盡可能減少點(diǎn)擊次數(shù)而幫手用戶(hù)到達(dá)他們想去的網(wǎng)頁(yè)。同時(shí)，應(yīng)易于瀏覽并能輕易找到他們想去的地方。

3.更改已拜候鏈接的顏色

鏈接是導(dǎo)航過(guò)程中的關(guān)鍵因素。當(dāng)已拜候的鏈接沒(méi)有改變顏色時(shí)，用戶(hù)可能會(huì)無(wú)意中重復(fù)拜候相同的頁(yè)面。

了解用戶(hù)已拜候過(guò)哪些頁(yè)面可以制止讓他無(wú)意中重復(fù)拜候相同的頁(yè)面。

4.輕松瀏覽你的頁(yè)面

當(dāng)用戶(hù)拜候你的網(wǎng)站時(shí)，他們更有可能快速掃描屏幕，而不是閱讀頁(yè)面的所有內(nèi)容。因此，如果拜候者想要查找內(nèi)容或完成某項(xiàng)任務(wù)，他們將一直瀏覽直到找到他們需要的內(nèi)容。而作為設(shè)計(jì)師，你可以通過(guò)設(shè)計(jì)好的視覺(jué)層次結(jié)構(gòu)來(lái)幫手他們。視覺(jué)層次結(jié)構(gòu)是指以暗示重要性的方式擺設(shè)或呈現(xiàn)元素(例如，他們的眼睛應(yīng)該集中在哪了? 第一、第二等)

將屏幕標(biāo)題，登錄表單，導(dǎo)航項(xiàng)目或其他重要內(nèi)容等重要內(nèi)容標(biāo)記重點(diǎn)，以便拜候者可立即查看。

Basecamp使用的Z掃描模式

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

當(dāng)用戶(hù)點(diǎn)擊站點(diǎn)上的鏈接并收到提示 404 錯(cuò)誤頁(yè)面時(shí)，用戶(hù)可能很容易變得沮喪。當(dāng)拜候者正在搜索內(nèi)容時(shí)，他們希望每個(gè)鏈接都可以將它們帶向所指的地方，而不是出現(xiàn) 404 錯(cuò)誤的提示或者其他一些他們不想去的地方。

6.確保可點(diǎn)擊的元素對(duì)用戶(hù)顯而易見(jiàn)

一個(gè)物體的外不雅觀可告知用戶(hù)如何使用它。視覺(jué)元素看起來(lái)像是鏈接或按鈕，但不成點(diǎn)擊(即，有下劃線(xiàn)的單詞沒(méi)有鏈接，具有文字動(dòng)作的元素，但不是超鏈接)這樣很有可能會(huì)使用戶(hù)混淆。用戶(hù)需要知道頁(yè)面的哪些區(qū)域是純靜態(tài)內(nèi)容，哪些區(qū)域是可點(diǎn)擊的。

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

橙色的盒子是一個(gè)按鈕嗎?答案是：不。形狀和標(biāo)簽使其看起來(lái)像一個(gè)按鈕，但它不是。

不該該做什么：

1.讓你的訪(fǎng)客等待網(wǎng)頁(yè)加載

網(wǎng)頁(yè)用戶(hù)的注意力和耐心往往很差。按照NNGroup研究：

10 秒是將用戶(hù)的注意力集中在此任務(wù)上的最低限度

當(dāng)拜候者必需等待你的網(wǎng)站加載時(shí)，如果你的網(wǎng)站加載速度不夠快，他們會(huì)變得沮喪，并可能離開(kāi)你的網(wǎng)站。如果加載時(shí)間過(guò)長(zhǎng)，即使你有設(shè)計(jì)精美的加載指示器，也可能迫使用戶(hù)離開(kāi)網(wǎng)站。

2.不要在新標(biāo)簽頁(yè)中打開(kāi)鏈接

這種粗魯?shù)男袨闀?huì)禁用Back按鈕，而這是用戶(hù)返回到以前的站點(diǎn)的常規(guī)方式。

3.讓促銷(xiāo)掩蓋內(nèi)容

促銷(xiāo)和廣告可以掩蓋他們旁邊的內(nèi)容，并使用戶(hù)更難完成任務(wù)。不要說(shuō)任何看起來(lái)像廣告的東西通常會(huì)被用戶(hù)忽略(這種現(xiàn)象被稱(chēng)為旗幟盲點(diǎn))

4.劫持滾動(dòng)

標(biāo)簽：林芝 烏魯木齊 鹽城 九江 東營(yíng)