高效網(wǎng)站設(shè)計得10項(xiàng)原則
日期 : 2021-10-27 21:53:27
網(wǎng)站的成敗取決于它的可用性和實(shí)用性,而不是視覺效果設(shè)計。因?yàn)辄c(diǎn)擊鼠標(biāo)的是頁面訪客,他們決定了一切,“以用戶為中心”因此成為成功進(jìn)行網(wǎng)站設(shè)計、獲取利潤的設(shè)計標(biāo)準(zhǔn)。畢竟,如果用戶無法使用某個功能,那它不如不存在。
我們不打算討論具體操作細(xì)節(jié)(比如,搜索框應(yīng)該放在哪里),因?yàn)楹芏辔恼露家呀?jīng)對此有過描述;相反,我們會聚焦在網(wǎng)站設(shè)計的核心原則、啟發(fā)式方法和入門上——如果這些方法運(yùn)用得當(dāng),就能啟發(fā)出更高級、更成熟的設(shè)計方案,簡化網(wǎng)頁信息的獲取過程。
高效網(wǎng)站設(shè)計得原則
為了正確使用這些原則,我們首先需要明白用戶是如何與網(wǎng)站互動的,他們?nèi)绾嗡伎?,以及用戶行為的基本模式是怎樣的?br />
用戶是如何思考的?
基本上,用戶的上網(wǎng)習(xí)慣與商店里的消費(fèi)者行為并無二致。訪客瀏覽每個新頁面,大致看一看文字,點(diǎn)擊進(jìn)入首先符合他們個人趣味或者與他們所需要的東西大致” “大致相符的鏈接。事實(shí)上,頁面上很多內(nèi)容他們看都不看一眼。
多數(shù)用戶會選擇搜索有趣(或有用)而且可以點(diǎn)擊的信息,只要發(fā)現(xiàn)那些差不多的信息,他們就會點(diǎn)擊。如果新網(wǎng)頁無法滿足用戶預(yù)期,他們會點(diǎn)擊返回鍵,然后繼續(xù)重新搜索。
• 用戶看重質(zhì)量和信譽(yù): 如果網(wǎng)頁能夠給用戶提供高質(zhì)量的內(nèi)容,那么他們會愿意與網(wǎng)頁上的廣告和網(wǎng)站界面的設(shè)計和睦共處。這也是為什么這么多年來,一些設(shè)計雖然不那么出色,但是內(nèi)容很有含金量的網(wǎng)站能夠有很高訪問量的原因。相比用來做陪襯的視覺設(shè)計,內(nèi)容顯然是重點(diǎn)。
• 用戶并不會細(xì)讀,而是在掃視: 審視網(wǎng)頁的時候,用戶們會查找一下固定點(diǎn)或者錨點(diǎn),而后通過它們了解整個頁面內(nèi)容。
用戶不會細(xì)讀,而是掃視。注意下面這些“熱區(qū)”如何在句子中突顯出來,這是典型的掃視瀏覽方式。
• 用戶沒有耐心,他們期待即時滿足: 這個原則非常簡單,即如果一個網(wǎng)站無法滿足用戶的預(yù)期,那么網(wǎng)站設(shè)計師的任務(wù)可能就失敗了,這個公司則會遭受損失。
• 用戶不會做出最優(yōu)選擇: 用戶不會去尋求一個最優(yōu)方法來查找他們所需要的信息,也不會線性掃視網(wǎng)頁,按順序從一個版塊瀏覽到另一個版塊。相反,用戶很容易滿足,他們會選擇遇到的第一個合理選項(xiàng)。只要一找到能實(shí)現(xiàn)預(yù)期目標(biāo)的鏈接,他們很可能就會立即點(diǎn)擊進(jìn)去。選擇最優(yōu)選項(xiàng)很難,而且很耗費(fèi)時間,而找到差不多合心意的則高效得多。• 用戶跟隨直覺而動: 多數(shù)情況下,用戶的瀏覽習(xí)慣比較隨意,并不會照著設(shè)計師的意思走。根據(jù)Steve Krug(其作品有《妙手回春——網(wǎng)站可用性測試及優(yōu)化指南》)的觀點(diǎn),這里面最根本的原因在于,用戶對設(shè)計者的出發(fā)點(diǎn)并不在意。“我們一旦找到能解決問題的東西,就會使用它。至于那些東西是如何工作的,這一點(diǎn)我們無所謂,只要可以使用就好。如果你的受眾喜歡廣告牌那種設(shè)計,那你就得去設(shè)計優(yōu)秀的廣告牌。”
• 用戶希望掌握控制權(quán): 用戶希望能夠在依賴網(wǎng)頁獲取信息的同時控制自己的瀏覽器。比如,他們不歡迎意外彈出來的新窗口,而且他們希望能夠一點(diǎn)擊“返回”按鈕就回到剛剛所在的頁面。因此,千萬別讓鏈接在新的窗口打開!
1.別讓訪客思考
根據(jù)Steve Krug可用性定律,網(wǎng)頁應(yīng)該簡潔直觀。創(chuàng)建網(wǎng)站時,你必須得避開那些會令人疑惑的地方,也就是需要訪客深思熟慮、權(quán)衡利弊之后才能做的決定。
如果導(dǎo)航欄和網(wǎng)站結(jié)構(gòu)都不是很直觀,人們的疑問就會增多,這更增加了訪客對系統(tǒng)如何操作以及怎樣從A點(diǎn)移至B點(diǎn)的理解難度。一個清晰的網(wǎng)頁結(jié)構(gòu)、中規(guī)中距的視覺呈現(xiàn)和容易辨認(rèn)的鏈接,這些能幫助訪客掌握實(shí)現(xiàn)目標(biāo)的方法。
舉個例子,Beyondis.co.uk聲稱自己“超越平凡渠道、超越平凡產(chǎn)品、超越平凡配送。”這是什么意思呢?考慮到用戶們傾向于按照“F”模式瀏覽網(wǎng)站,那么他們進(jìn)入這個網(wǎng)站時,必然會看到這三個口號。盡管這個設(shè)計本身很簡潔直觀,但要弄明白這個網(wǎng)站是做什么的,用戶就需要進(jìn)行一番摸索了——這其實(shí)是個不必要的疑惑。設(shè)計師的責(zé)任就是將疑惑出現(xiàn)的概率降低到“0”。頁面右側(cè)則是它的圖片解釋,只要改變一下圖片與文字的左右位置,網(wǎng)頁的可用性就能得到大大提高。ExpressionEngine和Beyondis采用了同樣的結(jié)構(gòu),但它避開了不必要的疑惑。此外,頁面上的標(biāo)語顯得很有幫助,訪客可以選擇嘗試服務(wù)、下載免費(fèi)版本。通過降低訪客的大腦運(yùn)動負(fù)荷,能讓訪客更輕松地了解系統(tǒng)運(yùn)行規(guī)律。一旦達(dá)到這個目標(biāo),你就能解釋為什么這個系統(tǒng)是有效的,而且訪客如何從中受益。人們?nèi)绻涣私饽愕木W(wǎng)站布局,他們是不會使用它的。
2.別考驗(yàn)訪客的耐心
無論是什么項(xiàng)目,當(dāng)你向訪客提供一些服務(wù)或工具時,你需要盡量把對他們的要求最小化。嘗試服務(wù)時,需要訪客付出得越少,就越可能吸引隨機(jī)訪客真正去嘗試它。初次到訪的訪客愿意嘗試這個服務(wù),而不會為了一個以后完全不可能用到的賬號去填寫冗長的表格進(jìn)行注冊。讓訪客自行探索這個網(wǎng)站,發(fā)現(xiàn)你提供的服務(wù),而不是逼著他們留下個人信息。為了測試網(wǎng)站性能而強(qiáng)迫訪客輸入他們的電子郵箱地址是不合理的。
正如37Signals團(tuán)隊(duì)的開發(fā)者Ryan Singer所說,訪客們也許會在體驗(yàn)到試用效果之后愿意提供出自己的郵箱(如果要求提供郵箱的話)——這樣,他們便大概知道可能會收到哪些信息。
3.抓住用戶的眼球
因?yàn)榫W(wǎng)站會提供靜態(tài)和動態(tài)的內(nèi)容,有些用戶界面就會比其他的更吸引人。顯然,圖片比文字要更能抓住人的眼球——就好比加粗的句子要比正常的文字要更加引人注意。
人類的眼睛是個高度非線性設(shè)備,網(wǎng)站訪客可以立即識別邊緣、模式和運(yùn)動,這就是為什么視頻廣告尤其惱人、極度分散注意力。但從市場角度而言,它們的確很好地抓住了用戶的眼球。
4.盡量使特征明顯
現(xiàn)代網(wǎng)站設(shè)計常常因?yàn)槠渑渖洗蟀粹o的、搶眼的用戶指引方式——“第一步——第二步——第三步——完成”——而遭受口水。但從設(shè)計角度來看,這些元素其實(shí)并沒有拖后腿。相反,這些指令非常有效,它們以一種相當(dāng)簡單便捷的方式引導(dǎo)用戶將網(wǎng)站內(nèi)容盡收眼底。
5.有效書寫
由于網(wǎng)站和紙質(zhì)內(nèi)容的差異,根據(jù)用戶個人偏好以及瀏覽器習(xí)慣來調(diào)整書寫風(fēng)格就顯得很有必要。用戶會忽略宣傳性的文字,跳過沒有圖片或者粗體字、斜體字標(biāo)記出關(guān)鍵詞的冗長的文字塊,嘩眾取寵的文字也會被忽視。言歸正傳??蓯塾懬傻拿帧⑹袌鰧?dǎo)向的名字、公司名以及一些生僻的術(shù)語要堅決避開。例如,如果你要描述一項(xiàng)服務(wù),希望用戶注冊一個賬戶,用“注冊(sign up)”要好過“現(xiàn)在開始?。⊿tart now)”,當(dāng)然比“探索我們的服務(wù)”好更多
6.力求簡介明了
“簡潔”應(yīng)該是網(wǎng)站設(shè)計的首要原則,用戶們不是沖著設(shè)計本身而來的,何況在多數(shù)情況下,他們是來尋找信息而不是網(wǎng)站的設(shè)計。力求設(shè)計簡單明了,避免復(fù)雜。
7.別怕留白
其實(shí),留白的重要性不是三言兩語就能概括的。它不僅能幫助減少訪客的認(rèn)知負(fù)荷,同時也讓訪客在屏幕上獲取信息更為容易。新訪客瀏覽網(wǎng)頁時,第一件事情通常是瀏覽整個頁面,在心里將內(nèi)容區(qū)域劃分成可消化的組塊。
復(fù)雜的結(jié)構(gòu)讓閱讀、掃視、分析和使用變得困難。如果你可以在用明顯的線條和空白這兩者之間選擇從而將兩塊內(nèi)容分開,通常情況下,留白會是個更好的選擇。分層減少了復(fù)雜程度(西蒙法則),用戶感受到的視覺層次感越好,網(wǎng)頁上的內(nèi)容就越容易被獲取。
8.用“可視化語言”進(jìn)行有效交流
Aaron Marcus在關(guān)于有效視覺交流的研究文章中提出了三個基本原則,其中包括所謂的“可視化語言”,也就是用戶在屏幕上所看到的內(nèi)容。
• 組織: 為用戶提供清晰連貫的概念體系。連貫性、頁面布局、組塊關(guān)系和頁面導(dǎo)航都是組織里的重要概念。同樣的常規(guī)和原則都應(yīng)該應(yīng)用到所有元素中。
• 經(jīng)濟(jì)化: 用盡量少的刺激信號和視覺元素達(dá)到最好的效果。這里要考慮到四個關(guān)鍵點(diǎn)——簡潔、清晰、獨(dú)特和重點(diǎn)突出。“簡潔”是說,只將對表達(dá)最不可或缺的元素納入其中;“清晰”指的是所有的部件都應(yīng)該精心設(shè)計,避免含義模糊。“獨(dú)特”是指必要元素的重要屬性應(yīng)該是獨(dú)一無二的。“重點(diǎn)突出”則是指最重要的元素應(yīng)該很容易被辨認(rèn)。
• 表達(dá): 使頁面呈現(xiàn)符合用戶的接受范圍,用戶界面必須在易讀性、可讀性、布局、象征性、多層觀點(diǎn)和顏色或紋理效果之間保持平衡,從而使信息得到順利傳遞。一個頁面最多只能用三種字體,最大只能用三號字——每一行文字最多只能有18個單詞或者50~80個字符。
我們不打算討論具體操作細(xì)節(jié)(比如,搜索框應(yīng)該放在哪里),因?yàn)楹芏辔恼露家呀?jīng)對此有過描述;相反,我們會聚焦在網(wǎng)站設(shè)計的核心原則、啟發(fā)式方法和入門上——如果這些方法運(yùn)用得當(dāng),就能啟發(fā)出更高級、更成熟的設(shè)計方案,簡化網(wǎng)頁信息的獲取過程。
高效網(wǎng)站設(shè)計得原則
為了正確使用這些原則,我們首先需要明白用戶是如何與網(wǎng)站互動的,他們?nèi)绾嗡伎?,以及用戶行為的基本模式是怎樣的?br />
用戶是如何思考的?
基本上,用戶的上網(wǎng)習(xí)慣與商店里的消費(fèi)者行為并無二致。訪客瀏覽每個新頁面,大致看一看文字,點(diǎn)擊進(jìn)入首先符合他們個人趣味或者與他們所需要的東西大致” “大致相符的鏈接。事實(shí)上,頁面上很多內(nèi)容他們看都不看一眼。
多數(shù)用戶會選擇搜索有趣(或有用)而且可以點(diǎn)擊的信息,只要發(fā)現(xiàn)那些差不多的信息,他們就會點(diǎn)擊。如果新網(wǎng)頁無法滿足用戶預(yù)期,他們會點(diǎn)擊返回鍵,然后繼續(xù)重新搜索。
• 用戶看重質(zhì)量和信譽(yù): 如果網(wǎng)頁能夠給用戶提供高質(zhì)量的內(nèi)容,那么他們會愿意與網(wǎng)頁上的廣告和網(wǎng)站界面的設(shè)計和睦共處。這也是為什么這么多年來,一些設(shè)計雖然不那么出色,但是內(nèi)容很有含金量的網(wǎng)站能夠有很高訪問量的原因。相比用來做陪襯的視覺設(shè)計,內(nèi)容顯然是重點(diǎn)。
• 用戶并不會細(xì)讀,而是在掃視: 審視網(wǎng)頁的時候,用戶們會查找一下固定點(diǎn)或者錨點(diǎn),而后通過它們了解整個頁面內(nèi)容。
用戶不會細(xì)讀,而是掃視。注意下面這些“熱區(qū)”如何在句子中突顯出來,這是典型的掃視瀏覽方式。
• 用戶沒有耐心,他們期待即時滿足: 這個原則非常簡單,即如果一個網(wǎng)站無法滿足用戶的預(yù)期,那么網(wǎng)站設(shè)計師的任務(wù)可能就失敗了,這個公司則會遭受損失。
• 用戶不會做出最優(yōu)選擇: 用戶不會去尋求一個最優(yōu)方法來查找他們所需要的信息,也不會線性掃視網(wǎng)頁,按順序從一個版塊瀏覽到另一個版塊。相反,用戶很容易滿足,他們會選擇遇到的第一個合理選項(xiàng)。只要一找到能實(shí)現(xiàn)預(yù)期目標(biāo)的鏈接,他們很可能就會立即點(diǎn)擊進(jìn)去。選擇最優(yōu)選項(xiàng)很難,而且很耗費(fèi)時間,而找到差不多合心意的則高效得多。• 用戶跟隨直覺而動: 多數(shù)情況下,用戶的瀏覽習(xí)慣比較隨意,并不會照著設(shè)計師的意思走。根據(jù)Steve Krug(其作品有《妙手回春——網(wǎng)站可用性測試及優(yōu)化指南》)的觀點(diǎn),這里面最根本的原因在于,用戶對設(shè)計者的出發(fā)點(diǎn)并不在意。“我們一旦找到能解決問題的東西,就會使用它。至于那些東西是如何工作的,這一點(diǎn)我們無所謂,只要可以使用就好。如果你的受眾喜歡廣告牌那種設(shè)計,那你就得去設(shè)計優(yōu)秀的廣告牌。”
• 用戶希望掌握控制權(quán): 用戶希望能夠在依賴網(wǎng)頁獲取信息的同時控制自己的瀏覽器。比如,他們不歡迎意外彈出來的新窗口,而且他們希望能夠一點(diǎn)擊“返回”按鈕就回到剛剛所在的頁面。因此,千萬別讓鏈接在新的窗口打開!
1.別讓訪客思考
根據(jù)Steve Krug可用性定律,網(wǎng)頁應(yīng)該簡潔直觀。創(chuàng)建網(wǎng)站時,你必須得避開那些會令人疑惑的地方,也就是需要訪客深思熟慮、權(quán)衡利弊之后才能做的決定。
如果導(dǎo)航欄和網(wǎng)站結(jié)構(gòu)都不是很直觀,人們的疑問就會增多,這更增加了訪客對系統(tǒng)如何操作以及怎樣從A點(diǎn)移至B點(diǎn)的理解難度。一個清晰的網(wǎng)頁結(jié)構(gòu)、中規(guī)中距的視覺呈現(xiàn)和容易辨認(rèn)的鏈接,這些能幫助訪客掌握實(shí)現(xiàn)目標(biāo)的方法。
舉個例子,Beyondis.co.uk聲稱自己“超越平凡渠道、超越平凡產(chǎn)品、超越平凡配送。”這是什么意思呢?考慮到用戶們傾向于按照“F”模式瀏覽網(wǎng)站,那么他們進(jìn)入這個網(wǎng)站時,必然會看到這三個口號。盡管這個設(shè)計本身很簡潔直觀,但要弄明白這個網(wǎng)站是做什么的,用戶就需要進(jìn)行一番摸索了——這其實(shí)是個不必要的疑惑。設(shè)計師的責(zé)任就是將疑惑出現(xiàn)的概率降低到“0”。頁面右側(cè)則是它的圖片解釋,只要改變一下圖片與文字的左右位置,網(wǎng)頁的可用性就能得到大大提高。ExpressionEngine和Beyondis采用了同樣的結(jié)構(gòu),但它避開了不必要的疑惑。此外,頁面上的標(biāo)語顯得很有幫助,訪客可以選擇嘗試服務(wù)、下載免費(fèi)版本。通過降低訪客的大腦運(yùn)動負(fù)荷,能讓訪客更輕松地了解系統(tǒng)運(yùn)行規(guī)律。一旦達(dá)到這個目標(biāo),你就能解釋為什么這個系統(tǒng)是有效的,而且訪客如何從中受益。人們?nèi)绻涣私饽愕木W(wǎng)站布局,他們是不會使用它的。
2.別考驗(yàn)訪客的耐心
無論是什么項(xiàng)目,當(dāng)你向訪客提供一些服務(wù)或工具時,你需要盡量把對他們的要求最小化。嘗試服務(wù)時,需要訪客付出得越少,就越可能吸引隨機(jī)訪客真正去嘗試它。初次到訪的訪客愿意嘗試這個服務(wù),而不會為了一個以后完全不可能用到的賬號去填寫冗長的表格進(jìn)行注冊。讓訪客自行探索這個網(wǎng)站,發(fā)現(xiàn)你提供的服務(wù),而不是逼著他們留下個人信息。為了測試網(wǎng)站性能而強(qiáng)迫訪客輸入他們的電子郵箱地址是不合理的。
正如37Signals團(tuán)隊(duì)的開發(fā)者Ryan Singer所說,訪客們也許會在體驗(yàn)到試用效果之后愿意提供出自己的郵箱(如果要求提供郵箱的話)——這樣,他們便大概知道可能會收到哪些信息。
3.抓住用戶的眼球
因?yàn)榫W(wǎng)站會提供靜態(tài)和動態(tài)的內(nèi)容,有些用戶界面就會比其他的更吸引人。顯然,圖片比文字要更能抓住人的眼球——就好比加粗的句子要比正常的文字要更加引人注意。
人類的眼睛是個高度非線性設(shè)備,網(wǎng)站訪客可以立即識別邊緣、模式和運(yùn)動,這就是為什么視頻廣告尤其惱人、極度分散注意力。但從市場角度而言,它們的確很好地抓住了用戶的眼球。
4.盡量使特征明顯
現(xiàn)代網(wǎng)站設(shè)計常常因?yàn)槠渑渖洗蟀粹o的、搶眼的用戶指引方式——“第一步——第二步——第三步——完成”——而遭受口水。但從設(shè)計角度來看,這些元素其實(shí)并沒有拖后腿。相反,這些指令非常有效,它們以一種相當(dāng)簡單便捷的方式引導(dǎo)用戶將網(wǎng)站內(nèi)容盡收眼底。
5.有效書寫
由于網(wǎng)站和紙質(zhì)內(nèi)容的差異,根據(jù)用戶個人偏好以及瀏覽器習(xí)慣來調(diào)整書寫風(fēng)格就顯得很有必要。用戶會忽略宣傳性的文字,跳過沒有圖片或者粗體字、斜體字標(biāo)記出關(guān)鍵詞的冗長的文字塊,嘩眾取寵的文字也會被忽視。言歸正傳??蓯塾懬傻拿帧⑹袌鰧?dǎo)向的名字、公司名以及一些生僻的術(shù)語要堅決避開。例如,如果你要描述一項(xiàng)服務(wù),希望用戶注冊一個賬戶,用“注冊(sign up)”要好過“現(xiàn)在開始?。⊿tart now)”,當(dāng)然比“探索我們的服務(wù)”好更多
6.力求簡介明了
“簡潔”應(yīng)該是網(wǎng)站設(shè)計的首要原則,用戶們不是沖著設(shè)計本身而來的,何況在多數(shù)情況下,他們是來尋找信息而不是網(wǎng)站的設(shè)計。力求設(shè)計簡單明了,避免復(fù)雜。
7.別怕留白
其實(shí),留白的重要性不是三言兩語就能概括的。它不僅能幫助減少訪客的認(rèn)知負(fù)荷,同時也讓訪客在屏幕上獲取信息更為容易。新訪客瀏覽網(wǎng)頁時,第一件事情通常是瀏覽整個頁面,在心里將內(nèi)容區(qū)域劃分成可消化的組塊。
復(fù)雜的結(jié)構(gòu)讓閱讀、掃視、分析和使用變得困難。如果你可以在用明顯的線條和空白這兩者之間選擇從而將兩塊內(nèi)容分開,通常情況下,留白會是個更好的選擇。分層減少了復(fù)雜程度(西蒙法則),用戶感受到的視覺層次感越好,網(wǎng)頁上的內(nèi)容就越容易被獲取。
8.用“可視化語言”進(jìn)行有效交流
Aaron Marcus在關(guān)于有效視覺交流的研究文章中提出了三個基本原則,其中包括所謂的“可視化語言”,也就是用戶在屏幕上所看到的內(nèi)容。
• 組織: 為用戶提供清晰連貫的概念體系。連貫性、頁面布局、組塊關(guān)系和頁面導(dǎo)航都是組織里的重要概念。同樣的常規(guī)和原則都應(yīng)該應(yīng)用到所有元素中。
• 經(jīng)濟(jì)化: 用盡量少的刺激信號和視覺元素達(dá)到最好的效果。這里要考慮到四個關(guān)鍵點(diǎn)——簡潔、清晰、獨(dú)特和重點(diǎn)突出。“簡潔”是說,只將對表達(dá)最不可或缺的元素納入其中;“清晰”指的是所有的部件都應(yīng)該精心設(shè)計,避免含義模糊。“獨(dú)特”是指必要元素的重要屬性應(yīng)該是獨(dú)一無二的。“重點(diǎn)突出”則是指最重要的元素應(yīng)該很容易被辨認(rèn)。
• 表達(dá): 使頁面呈現(xiàn)符合用戶的接受范圍,用戶界面必須在易讀性、可讀性、布局、象征性、多層觀點(diǎn)和顏色或紋理效果之間保持平衡,從而使信息得到順利傳遞。一個頁面最多只能用三種字體,最大只能用三號字——每一行文字最多只能有18個單詞或者50~80個字符。