網(wǎng)站設(shè)計(jì)規(guī)范——應(yīng)該做什么,不該做什么
網(wǎng)頁設(shè)計(jì)是一件很繁瑣的事情,因?yàn)樵谠O(shè)計(jì)時(shí)要考慮很多事情。為了簡化網(wǎng)頁設(shè)計(jì)這件事,本文列舉了每個(gè)網(wǎng)站設(shè)計(jì)者都應(yīng)該考慮的行為準(zhǔn)則,包括能做什么,不能做什么。放心,這些準(zhǔn)則都是一些很簡單的原則。
設(shè)計(jì)網(wǎng)站時(shí),應(yīng)該做什么
1、在不同設(shè)備上采用相似的設(shè)計(jì)
用戶可以通過不同類型的設(shè)備訪問你的網(wǎng)站,這些設(shè)備包括:電腦、平板、手機(jī)、音樂播放器、甚至是智能手表等。無論用戶使用什么設(shè)備訪問你的網(wǎng)頁,確保他們具有類似的體驗(yàn),這是用戶體驗(yàn)設(shè)計(jì)中的一條重要標(biāo)準(zhǔn)。
2、導(dǎo)航的設(shè)計(jì)要簡單易用、清晰明了
導(dǎo)航設(shè)計(jì)是網(wǎng)頁可用性的基石。記住,如果用戶在你的網(wǎng)站里找不到導(dǎo)航,那么無論你的網(wǎng)站有多少都沒用用。這也是導(dǎo)航設(shè)計(jì)要遵循以下原則的原因:
- 簡單。每個(gè)網(wǎng)站都應(yīng)該有盡可能簡單的結(jié)構(gòu)。
- 清晰。導(dǎo)航的每項(xiàng)對用戶而言,都應(yīng)該是清楚的。
- 一致。系統(tǒng)的導(dǎo)航頁在每一頁中都應(yīng)該是相同的。
用戶以最少的點(diǎn)擊次數(shù),最快地到達(dá)他們想要瀏覽的網(wǎng)頁。這才是導(dǎo)航設(shè)計(jì)的目的。
3、 改變訪問過的鏈接的顏色
鏈接是導(dǎo)航的一個(gè)關(guān)鍵因素。假如用戶點(diǎn)擊過的鏈接沒有改變顏色,很可能導(dǎo)致用戶多次點(diǎn)擊同一個(gè)鏈接。
如果用戶知道自己過去訪問的鏈接和現(xiàn)在還未訪問過的鏈接,那么用戶會更容易決定自己下一次要點(diǎn)擊什么。
4、讓頁面瀏覽變得更容易
用戶瀏覽我們的網(wǎng)頁時(shí),并不是通讀所有的內(nèi)容,而是快速地掃描整個(gè)網(wǎng)頁。因此,如果用戶來到這個(gè)網(wǎng)站,是為了尋找特定的內(nèi)容或者是完成某個(gè)任務(wù),那么他們會先瀏覽整個(gè)網(wǎng)頁,直到用戶找到了自己想要去的地方。因此,作為網(wǎng)頁設(shè)計(jì)者的我們,應(yīng)該通過設(shè)計(jì)網(wǎng)站可視化的層級架構(gòu)幫助這些用戶盡快達(dá)成自己的目的??梢暬膶蛹壖軜?gòu)意味著網(wǎng)頁上每個(gè)元素的擺放或呈現(xiàn)都具有權(quán)重(比如說,我們的設(shè)計(jì)決定了用戶先看到哪個(gè),再看到哪個(gè),最后看到哪個(gè))。
我們在設(shè)計(jì)網(wǎng)站時(shí),要確保網(wǎng)頁標(biāo)題、登錄注冊按鈕、導(dǎo)航欄或其它同等重要的元素放在用戶很容易看到的地方,以減少用戶尋找的時(shí)間。
用戶的視線是Z字形的。
5、仔細(xì)檢查所有的鏈接
當(dāng)用戶點(diǎn)擊網(wǎng)站上的一個(gè)鏈接,界面上卻出現(xiàn)404的錯(cuò)誤頁面時(shí),用戶很容易變得沮喪。當(dāng)用戶在網(wǎng)站上尋找內(nèi)容時(shí),他們希望自己點(diǎn)擊過的每個(gè)鏈接都是自己正在尋找的那個(gè),而不是出現(xiàn)404的錯(cuò)誤頁面、或者點(diǎn)進(jìn)去后,卻發(fā)現(xiàn)不是自己尋找的那個(gè)頁面。
6、確保能點(diǎn)擊的元素讓用戶看起來就能點(diǎn)擊
一個(gè)物體的樣子會告訴用戶如何使用它??雌饋硐癜粹o或鏈接的視覺元素卻不能點(diǎn)擊,很容易困擾用戶,這些視覺元素包括:文字下劃線并不代表鏈接、擁有動畫效果的元素也不是超鏈接。用戶想要知道界面上哪些區(qū)域是純靜態(tài)內(nèi)容,哪些區(qū)域是可以點(diǎn)擊的。
讓可以點(diǎn)擊的元素明顯一點(diǎn)。
如上圖,你認(rèn)為那個(gè)橙色的框是個(gè)按鈕嗎?相信很多人都覺得它看起來像個(gè)按鈕,但其實(shí)它并不是。
設(shè)計(jì)網(wǎng)站時(shí),不該做什么
1、不要讓用戶等
網(wǎng)站用戶的耐心和注意力是非常小的。根據(jù)NNGroup的研究,10秒是用戶集中注意力完成一個(gè)任務(wù)的極限。
當(dāng)用戶在等待內(nèi)容加載時(shí),他們很可能會變的沮喪。如果加載速度很慢,用戶很可能會離開這個(gè)網(wǎng)站,即使是足夠漂亮的加載動畫設(shè)計(jì)也無法改變這個(gè)結(jié)果。
圖片來自網(wǎng)絡(luò)
2、在新標(biāo)簽頁打開鏈接
在新標(biāo)簽頁打開鏈接的設(shè)計(jì)讓用戶無法使用“返回”按鈕返回之前的頁面。這是非常不好的設(shè)計(jì)。
3、整個(gè)網(wǎng)站充斥著廣告
促銷和廣告會掩蓋網(wǎng)站里的內(nèi)容,也會讓用戶很難集中注意力去完成任務(wù),更不用說那些看起來像廣告的事情常常會被用戶忽略(這種現(xiàn)象被稱為:旗幟盲點(diǎn))。
4、滾動劫持(Hijack scrolling)
滾動劫持是指:網(wǎng)站的設(shè)計(jì)者或開發(fā)者控制滾動條,從而使得用戶在滾動鼠標(biāo)時(shí),會在網(wǎng)站上看到不同的效果,包括動畫效果、固定的滾動點(diǎn)、甚至是重新設(shè)計(jì)過的滾動條。滾動劫持是用戶最不喜歡的設(shè)計(jì)之一,因此,它奪取了用戶控制滾動條的權(quán)利。當(dāng)你設(shè)計(jì)網(wǎng)站時(shí)或設(shè)計(jì)用戶界面時(shí),你應(yīng)該讓用戶自己決定自己瀏覽的網(wǎng)頁或APP的位置。
如上圖,這個(gè)頁面就采用了這個(gè)設(shè)計(jì)效果。它使用單頁面平行布局的方式,用右邊的點(diǎn)來代替每個(gè)頁面。
5、自動播放視頻(有聲音)
在后臺自動播放視頻、音樂或聲音文件,都是用戶難以接受的設(shè)計(jì)方式。用戶很少使用這些元素,除非是在適當(dāng)?shù)臅r(shí)候。
Facebook會在網(wǎng)頁上自動播放視頻,但是在靜音狀態(tài)。但是當(dāng)用戶意識到自己在看視頻時(shí),用戶可以自己點(diǎn)擊屏幕決定聲音的有無以及大小。
6、為了網(wǎng)站的美觀犧牲網(wǎng)站的可用性
一個(gè)網(wǎng)站或用戶界面的設(shè)計(jì)不應(yīng)該因?yàn)閮?nèi)容影響用戶的消費(fèi)能力。最好不要在文字后使用繁重的背景、也不要使用讓用戶很難閱讀或顏色對比不明顯的配色方案。
如上圖,低對比的配色方案很難看清楚界面上的字。
7、使用閃爍的文字或廣告
閃爍的內(nèi)容或閃爍會導(dǎo)致易感人群的癲癇病。這樣的設(shè)計(jì)不僅能引發(fā)癲癇,而且還會因吸引用戶的注意力而惹惱用戶。
不要使用閃爍的文字
如果你有更多的建議,請?jiān)谠u論區(qū)留言。
原文:Do’s and Don’ts of Web Design(要翻墻哦~)
作者:Nick Babich
本文由 @Q_misky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖由譯者提供
為什么我覺得新標(biāo)簽頁打開鏈接這個(gè)很好呢,好像我們好多網(wǎng)站都是這樣,習(xí)慣看完一個(gè)頁面把它關(guān)掉,而返回的話如果你點(diǎn)開的層級太多的話,要返回多少次啊,可能每個(gè)人的習(xí)慣不同吧,花瓣網(wǎng)就是返回式的,這點(diǎn)我很受不了,我都不知道不小心關(guān)過多少次整個(gè)網(wǎng)站了
在新標(biāo)簽頁打開鏈接的設(shè)計(jì)讓用戶無法使用“返回”按鈕返回之前的頁面。這是非常不好的設(shè)計(jì)。
以我的了解,我覺得用戶看完一個(gè)網(wǎng)頁更傾向于關(guān)閉它而不是返回。當(dāng)用戶選擇性瀏覽時(shí),新標(biāo)簽做法是更好的做法
正解,網(wǎng)頁更傾向于關(guān)閉
簡單清晰,Z型,不要使用閃爍的顏色,等待時(shí)間,10秒是極限,鏈接要變色,打開新頁面要有返回,按鈕要清楚,導(dǎo)航要簡單
新標(biāo)簽頁打開鏈接是使用習(xí)慣的問題吧,就我個(gè)人的上網(wǎng)經(jīng)歷和體驗(yàn)來講,國內(nèi)的網(wǎng)站大多是采用的新標(biāo)簽頁的打開方式,我也比較習(xí)慣在看完這個(gè)網(wǎng)頁后,使用鼠標(biāo)手勢關(guān)閉頁面。有時(shí)候不小心碰到不是新標(biāo)簽頁打開網(wǎng)頁的網(wǎng)站,就把整個(gè)網(wǎng)站關(guān)了,還得再重新打開,使用上一步操作。。。嗯,說了這么多,主要是講了自己鼠標(biāo)手勢的使用習(xí)慣問題??