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

2.別考驗訪(fǎng)客的耐心
無(wú)論是什么項目,當你向訪(fǎng)客提供一些服務(wù)或工具時(shí),你需要盡量把對他們的要求最小化。嘗試服務(wù)時(shí),需要訪(fǎng)客付出得越少,就越可能吸引隨機訪(fǎng)客真正去嘗試它。初次到訪(fǎng)的訪(fǎng)客愿意嘗試這個(gè)服務(wù),而不會(huì )為了一個(gè)以后完全不可能用到的賬號去填寫(xiě)冗長(cháng)的表格進(jìn)行注冊。讓訪(fǎng)客自行探索這個(gè)網(wǎng)站,發(fā)現你提供的服務(wù),而不是逼著(zhù)他們留下個(gè)人信息。為了測試網(wǎng)站性能而強迫訪(fǎng)客輸入他們的電子郵箱地址是不合理的。
正如37Signals團隊的開(kāi)發(fā)者Ryan Singer所說(shuō),訪(fǎng)客們也許會(huì )在體驗到試用效果之后愿意提供出自己的郵箱(如果要求提供郵箱的話(huà))——這樣,他們便大概知道可能會(huì )收到哪些信息。
3.抓住用戶(hù)的眼球
因為網(wǎng)站會(huì )提供靜態(tài)和動(dòng)態(tài)的內容,有些用戶(hù)界面就會(huì )比其他的更吸引人。顯然,圖片比文字要更能抓住人的眼球——就好比加粗的句子要比正常的文字要更加引人注意。
人類(lèi)的眼睛是個(gè)高度非線(xiàn)性設備,網(wǎng)站訪(fǎng)客可以立即識別邊緣、模式和運動(dòng),這就是為什么視頻廣告尤其惱人、極度分散注意力。但從市場(chǎng)角度而言,它們的確很好地抓住了用戶(hù)的眼球。
4.盡量使特征明顯
現代網(wǎng)站設計常常因為其配上大按鈕的、搶眼的用戶(hù)指引方式——“第一步——第二步——第三步——完成”——而遭受口水。但從設計角度來(lái)看,這些元素其實(shí)并沒(méi)有拖后腿。相反,這些指令非常有效,它們以一種相當簡(jiǎn)單便捷的方式引導用戶(hù)將網(wǎng)站內容盡收眼底。
5.有效書(shū)寫(xiě)
由于網(wǎng)站和紙質(zhì)內容的差異,根據用戶(hù)個(gè)人偏好以及瀏覽器習慣來(lái)調整書(shū)寫(xiě)風(fēng)格就顯得很有必要。用戶(hù)會(huì )忽略宣傳性的文字,跳過(guò)沒(méi)有圖片或者粗體字、斜體字標記出關(guān)鍵詞的冗長(cháng)的文字塊,嘩眾取寵的文字也會(huì )被忽視。言歸正傳??蓯?ài)討巧的名字、市場(chǎng)導向的名字、公司名以及一些生僻的術(shù)語(yǔ)要堅決避開(kāi)。例如,如果你要描述一項服務(wù),希望用戶(hù)注冊一個(gè)賬戶(hù),用“注冊(sign up)”要好過(guò)“現在開(kāi)始?。⊿tart now)”,當然比“探索我們的服務(wù)”好更多
6.力求簡(jiǎn)介明了
“簡(jiǎn)潔”應該是網(wǎng)站設計的首要原則,用戶(hù)們不是沖著(zhù)設計本身而來(lái)的,何況在多數情況下,他們是來(lái)尋找信息而不是網(wǎng)站的設計。力求設計簡(jiǎn)單明了,避免復雜。
7.別怕留白
其實(shí),留白的重要性不是三言?xún)烧Z(yǔ)就能概括的。它不僅能幫助減少訪(fǎng)客的認知負荷,同時(shí)也讓訪(fǎng)客在屏幕上獲取信息更為容易。新訪(fǎng)客瀏覽網(wǎng)頁(yè)時(shí),第一件事情通常是瀏覽整個(gè)頁(yè)面,在心里將內容區域劃分成可消化的組塊。
復雜的結構讓閱讀、掃視、分析和使用變得困難。如果你可以在用明顯的線(xiàn)條和空白這兩者之間選擇從而將兩塊內容分開(kāi),通常情況下,留白會(huì )是個(gè)更好的選擇。分層減少了復雜程度(西蒙法則),用戶(hù)感受到的視覺(jué)層次感越好,網(wǎng)頁(yè)上的內容就越容易被獲取。
8.用“可視化語(yǔ)言”進(jìn)行有效交流
Aaron Marcus在關(guān)于有效視覺(jué)交流的研究文章中提出了三個(gè)基本原則,其中包括所謂的“可視化語(yǔ)言”,也就是用戶(hù)在屏幕上所看到的內容。
• 組織: 為用戶(hù)提供清晰連貫的概念體系。連貫性、頁(yè)面布局、組塊關(guān)系和頁(yè)面導航都是組織里的重要概念。同樣的常規和原則都應該應用到所有元素中。
• 經(jīng)濟化: 用盡量少的刺激信號和視覺(jué)元素達到最好的效果。這里要考慮到四個(gè)關(guān)鍵點(diǎn)——簡(jiǎn)潔、清晰、獨特和重點(diǎn)突出。“簡(jiǎn)潔”是說(shuō),只將對表達最不可或缺的元素納入其中;“清晰”指的是所有的部件都應該精心設計,避免含義模糊。“獨特”是指必要元素的重要屬性應該是獨一無(wú)二的。“重點(diǎn)突出”則是指最重要的元素應該很容易被辨認。
• 表達: 使頁(yè)面呈現符合用戶(hù)的接受范圍,用戶(hù)界面必須在易讀性、可讀性、布局、象征性、多層觀(guān)點(diǎn)和顏色或紋理效果之間保持平衡,從而使信息得到順利傳遞。一個(gè)頁(yè)面最多只能用三種字體,最大只能用三號字——每一行文字最多只能有18個(gè)單詞或者50~80個(gè)字符。