- 相關(guān)推薦
網(wǎng)頁(yè)設計中的規則和禁忌
網(wǎng)頁(yè)設計是一個(gè)棘手的話(huà)題。當你創(chuàng )建網(wǎng)站時(shí)你需要考慮很多事情。為了簡(jiǎn)化這個(gè)任務(wù)，我這里準備了一個(gè)列表，每個(gè)網(wǎng)頁(yè)設計師在設計網(wǎng)頁(yè)時(shí)都應該考慮這些注意事項。好消息是，這都是一些簡(jiǎn)單的設計原則。
讓我們開(kāi)始吧!
應該做什么：
1.不管設備如何，都應該提供相同的用戶(hù)體驗
用戶(hù)會(huì )使用不同的設備來(lái)訪(fǎng)問(wèn)你的網(wǎng)站：他們可通過(guò)臺式電腦或筆記本電腦，平板電腦，手機，音樂(lè )播放器甚至手表上訪(fǎng)問(wèn)您的網(wǎng)站。UX設計很關(guān)鍵的一部分是要確保用戶(hù)應該具有類(lèi)似的用戶(hù)體驗，不論他們是通過(guò)什么來(lái)訪(fǎng)問(wèn)你的網(wǎng)站，不論他們是使用什么樣的設備。
如果用戶(hù)是通過(guò)手機訪(fǎng)問(wèn)你的網(wǎng)站，他們應該能毫不費勁的找到他們需要的所有東西，就像他們在家里通過(guò)桌面端查看你的網(wǎng)站一樣。
2.設計一個(gè)簡(jiǎn)潔，易用的導航
導航是可用性的基石。請記住，這不關(guān)乎于一個(gè)網(wǎng)站設計的有多好，但必須確保用戶(hù)可通過(guò)自己的方式進(jìn)行瀏覽。這就是為什么你的網(wǎng)站上的導航應該設計成這樣。
簡(jiǎn)單(每個(gè)站點(diǎn)都應該有最簡(jiǎn)單的結構)
簡(jiǎn)潔(導航選項對訪(fǎng)客而言必須清楚易懂)
一致(主頁(yè)的導航系統應該在每個(gè)頁(yè)面上都一樣)
設計導航方式，盡可能減少點(diǎn)擊次數而幫助用戶(hù)到達他們想去的網(wǎng)頁(yè)。同時(shí)，應易于瀏覽并能輕易找到他們想去的地方。
3.更改已訪(fǎng)問(wèn)鏈接的顏色
鏈接是導航過(guò)程中的關(guān)鍵因素。當已訪(fǎng)問(wèn)的鏈接沒(méi)有改變顏色時(shí)，用戶(hù)可能會(huì )無(wú)意中重復訪(fǎng)問(wèn)相同的頁(yè)面。
了解用戶(hù)已訪(fǎng)問(wèn)過(guò)哪些頁(yè)面可以避免讓他無(wú)意中重復訪(fǎng)問(wèn)相同的頁(yè)面。
4.輕松瀏覽你的頁(yè)面
當用戶(hù)訪(fǎng)問(wèn)你的網(wǎng)站時(shí)，他們更有可能快速掃描屏幕，而不是閱讀頁(yè)面的所有內容。因此，如果訪(fǎng)問(wèn)者想要查找內容或完成某項任務(wù)，他們將一直瀏覽直到找到他們需要的內容。而作為設計師，你可以通過(guò)設計好的視覺(jué)層次結構來(lái)幫助他們。視覺(jué)層次結構是指以暗示重要性的方式安排或呈現元素(例如，他們的眼睛應該集中在拿了? 第一、第二等)
將屏幕標題，登錄表單，導航項目或其他重要內容等重要內容標記重點(diǎn)，以便訪(fǎng)問(wèn)者可立即查看。
Basecamp使用的Z掃描模式
5.仔細檢查所有鏈接
當用戶(hù)點(diǎn)擊站點(diǎn)上的鏈接并收到提示404錯誤頁(yè)面時(shí)，用戶(hù)可能很容易變得沮喪。當訪(fǎng)問(wèn)者正在搜索內容時(shí)，他們希望每個(gè)鏈接都可以將它們帶向所指的地方，而不是出現404錯誤的提示或者其他一些他們不想去的地方。
6.確�？牲c(diǎn)擊的元素對用戶(hù)顯而易見(jiàn)
一個(gè)物體的外觀(guān)可告知用戶(hù)如何使用它。視覺(jué)元素看起來(lái)像是鏈接或按鈕，但不可點(diǎn)擊(即，有下劃線(xiàn)的單詞沒(méi)有鏈接，具有文字動(dòng)作的元素，但不是超鏈接)這樣很有可能會(huì )使用戶(hù)混淆。用戶(hù)需要知道頁(yè)面的哪些區域是純靜態(tài)內容，哪些區域是可點(diǎn)擊的。
應讓用戶(hù)明白哪些是可點(diǎn)擊的元素
橙色的盒子是一個(gè)按鈕嗎?答案是：不。形狀和標簽使其看起來(lái)像一個(gè)按鈕，但它不是。
不應該做什么:
1.讓你的訪(fǎng)客等待網(wǎng)頁(yè)加載
網(wǎng)頁(yè)用戶(hù)的注意力和耐心往往很差。根據NNGroup研究：
10秒是將用戶(hù)的注意力集中在此任務(wù)上的最低限度
當訪(fǎng)問(wèn)者必須等待你的網(wǎng)站加載時(shí)，如果你的網(wǎng)站加載速度不夠快，他們會(huì )變得沮喪，并可能離開(kāi)你的網(wǎng)站。如果加載時(shí)間過(guò)長(cháng)，即使你有設計精美的加載指示器，也可能迫使用戶(hù)離開(kāi)網(wǎng)站。
2.不要在新標簽頁(yè)中打開(kāi)鏈接
這種粗魯的行為會(huì )禁用Back按鈕，而這是用戶(hù)返回到以前的站點(diǎn)的常規方式。
3.讓促銷(xiāo)掩蓋內容
促銷(xiāo)和廣告可以掩蓋他們旁邊的內容，并使用戶(hù)更難完成任務(wù)。不要說(shuō)任何看起來(lái)像廣告的東西通常會(huì )被用戶(hù)忽略(這種現象被稱(chēng)為旗幟盲點(diǎn))
4.劫持滾動(dòng)
劫持滾動(dòng)是設計師和開(kāi)發(fā)者通過(guò)操縱滾動(dòng)條來(lái)使網(wǎng)站表現的不同。包括動(dòng)畫(huà)效果，固定滾動(dòng)點(diǎn)，甚至滾動(dòng)條本身的重新設計。被劫持滾動(dòng)是許多用戶(hù)最煩人的事情之一，因為其不受用戶(hù)控制。當你設計網(wǎng)站或用戶(hù)界面時(shí)，你希望讓用戶(hù)通過(guò)網(wǎng)站或應用程序掌控其瀏覽速度和移動(dòng)。
MacPro頁(yè)面使用一些令人煩惱的滾動(dòng)效果。它使用單頁(yè)視差布局，其中的點(diǎn)表示頁(yè)面的每個(gè)部分。
5.用聲音自動(dòng)播放視頻
在后臺自動(dòng)播放視頻，音樂(lè )或聲音會(huì )刺激用戶(hù)。這些元素應謹慎使用，只有在適當的時(shí)候和可預期的情況下才能使用。
Facebook視頻設置為自動(dòng)播放，但不會(huì )出現任何聲音，除非用戶(hù)有意圖以某種方式觀(guān)看視頻(例如通過(guò)視頻進(jìn)行交流)。
6.為了美而忽視可用性
站點(diǎn)或用戶(hù)界面的設計不應影響用戶(hù)在屏幕上閱讀內容的能力。重要的是要避免內容繁瑣，色彩不均勻，其會(huì )妨礙網(wǎng)站的可讀性或導致顏色對比度不足(例如下面的示例)。
字體的低對比度總是一個(gè)糟糕的做法。
7.使用閃爍的文字和廣告
閃爍的內容可能會(huì )觸發(fā)敏感個(gè)體的癲癇發(fā)作。它不僅可以引起癲癇發(fā)作，而且對于一般使用者來(lái)說(shuō)，這可能讓人討厭或導致分心。
【網(wǎng)頁(yè)設計中的規則和禁忌】相關(guān)文章：
「電商」天貓和京東網(wǎng)站的特效和網(wǎng)頁(yè)設計07-11
怎樣網(wǎng)頁(yè)設計03-30
網(wǎng)頁(yè)設計報告07-31
網(wǎng)頁(yè)設計總結11-09
普通網(wǎng)頁(yè)設計與淘寶網(wǎng)頁(yè)設計有什么不同？07-09