網(wǎng)站的設(shè)計(jì)，始終都是要站在用戶的角度。盡量使用簡(jiǎn)單、一目了然的功能設(shè)計(jì)來(lái)讓用戶可以不用思考就能完成操作，可以提高用戶體驗(yàn)，增加用戶留存率。

關(guān)于網(wǎng)站的可用性，也許你可以找到很多不同的定義，但是經(jīng)常可以分解成以下幾個(gè)方面：

• 有用：能否幫助人們完成一些必須的事務(wù)？
• 可學(xué)習(xí)：人們能否明白如何使用它？
• 可記憶：人們每次使用它的時(shí)候，是否需要重新學(xué)習(xí)？
• 有效：他們能完成任務(wù)嗎？
• 高效：他們是否只需要花費(fèi)適當(dāng)?shù)臅r(shí)間和努力就能完成任務(wù)？
• 合乎期望：是人們想要的么？

有著20幾年從業(yè)經(jīng)驗(yàn)的可用性專(zhuān)家史蒂夫克魯格認(rèn)為：關(guān)于可用性，最重要的方面其實(shí)很簡(jiǎn)單，就是別讓用戶思考——它意味著，設(shè)計(jì)者應(yīng)該盡量做到：當(dāng)我看一個(gè)頁(yè)面時(shí)，它應(yīng)該是不言而喻、一目了然、不用解釋我就能明白它是什么意思，怎么用它，而不需要進(jìn)行額外的思考。

網(wǎng)頁(yè)上每項(xiàng)內(nèi)容，都有可能迫使我們停下來(lái)進(jìn)行不必要的思考，例如：

• 我在什么位置？
• 我該從哪里開(kāi)始？
• 他們把XX放在什么地方了？
• 這個(gè)頁(yè)面最重要的是什么？
• 為什么他們把它叫做這個(gè)？
• 這是廣告還是網(wǎng)站的內(nèi)容？

為了使一個(gè)頁(yè)面不言而喻、自我解釋?zhuān)銘?yīng)該先明白：用戶是如何使用web的。

一、 用戶如何使用web

大部分時(shí)間里，用戶實(shí)際上是在每個(gè)頁(yè)面瞥一眼，掃過(guò)一些文字，點(diǎn)擊第一個(gè)令他們感興趣或者大概符合他們尋找目標(biāo)的鏈接。通常頁(yè)面上的很多部分，他們看都不看。

如果想設(shè)計(jì)有效的網(wǎng)頁(yè)，你必須了解用戶使用web的三個(gè)事實(shí)。

第一個(gè)事實(shí)：用戶不是閱讀，而是掃描

人們只會(huì)花極少的時(shí)間來(lái)閱讀大部分頁(yè)面，尋找能引起我們注意力的文字或詞語(yǔ)，當(dāng)然也有例外，比如：新聞故事、報(bào)告、或產(chǎn)品描述頁(yè)面，人們會(huì)回去閱讀。

但是，就算是那些頁(yè)面，人們也經(jīng)常會(huì)在閱讀和掃描之間來(lái)回切換。原因在于：大部分情況下，我們使用web總是想完成某項(xiàng)任務(wù)，而且通常想盡快完成，我們沒(méi)有時(shí)間來(lái)閱讀那些不必要的內(nèi)容。掃描是一項(xiàng)基本技能，通過(guò)掃描，我們能快速尋找到我們感興趣的，或者跟手頭任務(wù)有關(guān)系的內(nèi)容，剩下的內(nèi)容，我們根本不關(guān)心。

第二個(gè)事實(shí)：用戶不做最佳選擇，而是滿意即可

在掃描頁(yè)面的絕大部分時(shí)間里，我們不會(huì)選擇最好的，而是選擇第一個(gè)過(guò)得去的選項(xiàng)。一旦我們發(fā)現(xiàn)一個(gè)鏈接，看起來(lái)似乎會(huì)跳轉(zhuǎn)到我們想去的地方，那就是一個(gè)我們將會(huì)點(diǎn)擊它的大好機(jī)會(huì)。

為什么用戶不進(jìn)行最佳選擇？

原因在于：尋找最佳策略很難，需要的時(shí)間很長(zhǎng)，滿意策略效率更高。在網(wǎng)站上做一次錯(cuò)誤的選擇，其后果通常只是點(diǎn)擊幾次返回按鈕，花費(fèi)精力去做最佳選擇并沒(méi)有用，還不如查看猜到的第一個(gè)頁(yè)面，不行再回退回來(lái)。

第三個(gè)事實(shí)：用戶不是追根究底，而是勉強(qiáng)應(yīng)付

很大程度上，人們?cè)谑褂靡恍〇|西，但并不理解它們的運(yùn)作原理，甚至對(duì)他們的工作原理有完全錯(cuò)誤的理解。很多人經(jīng)常上網(wǎng)，但他們并不知道自己在使用瀏覽器，他們只知道在一個(gè)輸入框里輸入一點(diǎn)東西，然后內(nèi)容就出來(lái)了。

對(duì)于我們中的大對(duì)數(shù)人來(lái)說(shuō)：只要我們能正常使用，是否明白事物背后的運(yùn)行機(jī)制并不重要，這并不是智力低下的標(biāo)簽，而是我們并不關(guān)心——它對(duì)我們來(lái)說(shuō)，沒(méi)那么重要。人們發(fā)現(xiàn)某個(gè)東西能用，會(huì)一直使用它，不太會(huì)去找一種更好的方法。

了解用戶使用web的三個(gè)事實(shí)后，我們要針對(duì)用戶的行為掃描網(wǎng)站做設(shè)計(jì)，而非閱讀。

二、為掃描設(shè)計(jì)網(wǎng)站而不是閱讀

如果用戶都是疾馳而過(guò)，那么，下面這幾個(gè)重要的方面你要注意，保證他們盡可能地看到并理解你的網(wǎng)站：

1. 盡量利用習(xí)慣用法

任何東西，要讓人能瞬間理解，一種最好的方法就是：遵循習(xí)慣和慣例。

那些已經(jīng)廣為采納或者已經(jīng)標(biāo)準(zhǔn)化的設(shè)計(jì)模式，例如：用戶通常會(huì)期望標(biāo)志性的站點(diǎn)圖標(biāo)（Logo）出現(xiàn)在頁(yè)面的左上角；網(wǎng)站的主導(dǎo)航橫跨在頁(yè)面頂部或者縱向放置在頁(yè)面左邊；幾乎所有購(gòu)物網(wǎng)站都會(huì)提供購(gòu)物車(chē)。

除此之外，很多視覺(jué)元素也會(huì)有標(biāo)準(zhǔn)的外觀，例如：標(biāo)示視頻連接的圖標(biāo)、搜索圖標(biāo)、社交網(wǎng)站的分享方式。

不同網(wǎng)站也演化出了各種不同的習(xí)慣用法——電子商務(wù)、大學(xué)、博客、餐館、電影，以及其他很多網(wǎng)站，因?yàn)檫@些相同類(lèi)別的網(wǎng)站都要解決相同的問(wèn)題。

這些習(xí)慣用法都不是憑空出現(xiàn)的：它們都是從某個(gè)人靈光一現(xiàn)的想法開(kāi)始，如果這個(gè)想法不錯(cuò)，其他站點(diǎn)就會(huì)模仿。最終，有足夠多的人在足夠多的地方看到它，讓他變得不言而喻。

你不妨打開(kāi)淘寶、京東、當(dāng)當(dāng)網(wǎng)站比較看看，這類(lèi)電商網(wǎng)站是不是都長(zhǎng)得差不多。

如果應(yīng)用良好，web習(xí)慣用法會(huì)給用戶帶來(lái)很大方便，因?yàn)樗麄冊(cè)L問(wèn)不同的網(wǎng)站時(shí)，不需要付出額外的努力來(lái)得出背后運(yùn)行原理。

2. 建立有效的視覺(jué)層次

讓頁(yè)面一瞬間明白易懂的一個(gè)好辦法就是：確保頁(yè)面上所有內(nèi)容的外觀（所有的視覺(jué)線索）能準(zhǔn)確地表達(dá)內(nèi)容之間的聯(lián)系

• 哪些是最重要的？
• 哪些是類(lèi)似的？
• 哪些是另一些的組成部分？

換句話說(shuō)，每個(gè)頁(yè)面都應(yīng)該有清楚的視覺(jué)層次。

一個(gè)視覺(jué)層次清楚的頁(yè)面有三個(gè)特點(diǎn)：

1. 越重要的部分越突出；
2. 邏輯上相關(guān)的部分也在視覺(jué)上相關(guān)；
3. 邏輯上包含的部分在視覺(jué)上進(jìn)行嵌套。

3. 把頁(yè)面劃分成明確定義的區(qū)域

把頁(yè)面劃分成明確定義的區(qū)域很重要，因?yàn)檫@可以讓用戶很快決定關(guān)注頁(yè)面的哪些區(qū)域，或者放心地跳過(guò)哪些區(qū)域。

對(duì)網(wǎng)頁(yè)掃描所進(jìn)行的幾項(xiàng)初始研究表明：用戶很快就會(huì)確定頁(yè)面哪些部分含有有用信息，然后對(duì)其他部分看都不看。

4. 明顯標(biāo)示可以點(diǎn)擊的地方

因?yàn)槿藗冊(cè)诰W(wǎng)絡(luò)所做的大多數(shù)事情就是：找到下一個(gè)地方點(diǎn)擊。

那么，明確地標(biāo)識(shí)哪些地方可以點(diǎn)擊，哪些地方不能點(diǎn)擊，這很重要。

掃描頁(yè)面的時(shí)候，我們會(huì)尋找各種視覺(jué)線索，看哪些地方可以點(diǎn)擊，例如：某種形狀（按鈕、選擇卡等等），某些位置（菜單條之類(lèi)的），以及某些格式（例如文本顏色、下劃線等）。

5. 最小化干擾 ，降低視覺(jué)噪聲

讓頁(yè)面不易理解的一個(gè)最大原因是：視覺(jué)噪聲，用戶對(duì)復(fù)雜度和干擾的容忍度不一樣，一些人不在乎眼花繚亂的頁(yè)面和背景噪聲，但很多人在乎。

大體歸類(lèi)有三種視覺(jué)噪聲：

沒(méi)有重點(diǎn)：

頁(yè)面上所有的內(nèi)容都突出——大量不同的字體和搶眼的顏色。

這樣做的事實(shí)就是：沒(méi)有什么東西顯得重要。

頁(yè)面眼花繚亂往往是沒(méi)法決策什么內(nèi)容真正重要，沒(méi)法創(chuàng)建合適的視覺(jué)層次結(jié)構(gòu)，把用戶首先吸引到最重要的地方。

組織不當(dāng)：設(shè)計(jì)師沒(méi)有對(duì)網(wǎng)頁(yè)排版進(jìn)行合理的設(shè)計(jì)與組織，排布亂七八糟，給予訪問(wèn)用戶不適感。

太過(guò)密集：頁(yè)面內(nèi)容太多，沒(méi)有去掉對(duì)頁(yè)面沒(méi)有幫助的內(nèi)容，讓用戶無(wú)法再短時(shí)間內(nèi)尋找到自己想要的東西。

6. 為內(nèi)容創(chuàng)建清楚的格式，以便掃描

絕大部分時(shí)間，用戶都在你的網(wǎng)頁(yè)上掃描文本，想要找到一些東西，而你的文本格式可以幫助他們，讓他們掃描起來(lái)更容易。

下面是一些最重要的方法，可以讓你的頁(yè)面方便掃描：

充分使用標(biāo)題：

標(biāo)題可以告訴用戶每個(gè)部分的大意，這樣可以幫助用戶決定哪些地方需要閱讀、掃描，或者直接跳過(guò)去。

給標(biāo)題設(shè)置正確格式非常重要，但常常忽視的兩點(diǎn)：

1. 如果你使用多級(jí)標(biāo)題，那么，請(qǐng)確認(rèn)：在不同級(jí)別的標(biāo)題之間，是否有著非常明顯、不可混淆的視覺(jué)區(qū)分?？梢酝ㄟ^(guò)讓每個(gè)更高級(jí)別的標(biāo)題字體更大，或者給他周?chē)舾嗟目瞻讈?lái)做到這一點(diǎn)。
2. 不要讓你的標(biāo)題“浮在空中”。讓它更靠近有它們引導(dǎo)的內(nèi)容，而不是之前的內(nèi)容，這兩種方式在位置上可能只差了一點(diǎn)點(diǎn)，效果卻大不一樣。

保持段落簡(jiǎn)短：

如果段落篇幅很長(zhǎng)，那么它們會(huì)像一堵墻一樣擋在讀者面前，讓讀者們失去繼續(xù)掃描或者閱讀下去的勇氣。遇到長(zhǎng)段落，讀者很難記住它們已經(jīng)讀到的位置，而且，比起一系列短小精悍的段落來(lái)說(shuō)，它們更難掃描。

突出關(guān)鍵詞語(yǔ)：

大部分頁(yè)面掃描動(dòng)作是在尋找關(guān)鍵詞和關(guān)鍵短語(yǔ)。所以，加粗關(guān)鍵詞，讓它們?nèi)菀渍业健５灰怀鲲@示太多關(guān)鍵詞，因?yàn)槟菢铀鼈儗⒈蛔约貉蜎](méi)。

三、網(wǎng)站導(dǎo)航

如果到了一個(gè)網(wǎng)站，卻找不到你要的內(nèi)容，或者不知道這個(gè)網(wǎng)站是怎么組織的，你不太可能在那里呆很長(zhǎng)時(shí)間。為從，我們有必要?jiǎng)?chuàng)建明確、簡(jiǎn)單、一致的導(dǎo)航。

1. 導(dǎo)航對(duì)用戶的作用

導(dǎo)航有兩個(gè)顯而易見(jiàn)的用途：幫助我們找到想要的任何東西；告訴我們現(xiàn)在身在何處。

除此之外它還有如下功能：

它告訴我們這里有什么：

通過(guò)讓層級(jí)結(jié)構(gòu)可視化，導(dǎo)航告訴我們網(wǎng)站上有些什么，導(dǎo)航體現(xiàn)了內(nèi)容，而且，體現(xiàn)站點(diǎn)內(nèi)容可能比引導(dǎo)我們或告訴我們位置更重要。

它告訴我們?nèi)绾问褂镁W(wǎng)站：

如果導(dǎo)航機(jī)制在于履行它的職責(zé)，他們會(huì)含蓄地告訴你該從哪里開(kāi)始，你能進(jìn)行哪些選擇，如果正確無(wú)誤，它應(yīng)該是你需要的所有指示說(shuō)明。

它給了我們對(duì)網(wǎng)站建造者的信心：

在網(wǎng)站上的每一刻，我們都會(huì)在腦海里保持一個(gè)標(biāo)桿“這些人知道他們?cè)谧鍪裁磫?？”?/p>

這是我們用來(lái)決定是否離開(kāi)，或者以后還會(huì)不會(huì)來(lái)的主要考慮因素之一。

清楚、規(guī)劃得當(dāng)?shù)膶?dǎo)航是網(wǎng)站給人留下好印象的最好機(jī)會(huì)。

那么一個(gè)優(yōu)秀的導(dǎo)航應(yīng)該具備哪些要素？

2. 全局導(dǎo)航元素

全局導(dǎo)航應(yīng)該包括4個(gè)元素，你需要一直保持這4個(gè)元素可見(jiàn)，它們分別是：站點(diǎn)ID、欄目、實(shí)用工具、搜索

蘋(píng)果中國(guó)

站點(diǎn)ID：

網(wǎng)站的站點(diǎn)ID就像建筑物的名稱，它一般位于頁(yè)面左上角，代表了整個(gè)網(wǎng)站，它在當(dāng)前的站點(diǎn)結(jié)構(gòu)上層次最高。

除了它的位置之外，為了讓他成為頁(yè)面上最顯眼的內(nèi)容，我們還應(yīng)該用一中獨(dú)特的字體，一個(gè)可以識(shí)別的圖形來(lái)構(gòu)建。

欄目：

也叫主導(dǎo)航條，是到達(dá)該站點(diǎn)主要欄目的鏈接——即站點(diǎn)層次結(jié)構(gòu)的最頂層，還可以包括二級(jí)導(dǎo)航。

實(shí)用工具：

到達(dá)網(wǎng)站中不屬于內(nèi)容層級(jí)的重要元素的鏈接，這些實(shí)用工具要么能幫助我們使用站點(diǎn)（例如：登錄/注冊(cè)、幫助、站點(diǎn)地圖、購(gòu)物車(chē)），要么提供網(wǎng)站發(fā)布者的信息（例如：關(guān)于我們、聯(lián)系我們）。

搜索框：由于搜索可以快速查詢用戶想要的內(nèi)容，因此，除非站點(diǎn)規(guī)模非常小而且組織得很好，否則每個(gè)頁(yè)面都應(yīng)該有一個(gè)搜索框或一個(gè)到搜索頁(yè)面的鏈接。

四、網(wǎng)站主頁(yè)

當(dāng)一個(gè)新用戶首次訪問(wèn)網(wǎng)站的時(shí)候，最初的那幾秒非常重要，你應(yīng)該有一個(gè)頁(yè)面來(lái)告訴用戶：

• 這是什么網(wǎng)站？
• 你能在這里做什么？
• 網(wǎng)站上有些什么？

這個(gè)就是主頁(yè)要傳達(dá)給用戶的網(wǎng)站形象。

除此之外，主頁(yè)還有另一個(gè)作用：它是一個(gè)固定的空間，當(dāng)你在一個(gè)網(wǎng)站上，主頁(yè)就像北極星，點(diǎn)擊回到“主頁(yè)”給了你一個(gè)重新開(kāi)始的機(jī)會(huì)，讓我自己看到自己正在尋找的東西，看到自己還沒(méi)尋找的東西，告訴我從哪兒開(kāi)始，建立可信度和信任感。

主頁(yè)除了包含導(dǎo)航欄以外，它一般還有如下內(nèi)容：

• 內(nèi)容推介：突出最新、最好、最流行的內(nèi)容片段，或網(wǎng)站內(nèi)產(chǎn)生的內(nèi)容；
• 功能推介：網(wǎng)站中一些功能的快捷入口；

更新內(nèi)容：如果網(wǎng)站的成功取決于回訪，那么主頁(yè)很可能需要一些經(jīng)常更新的內(nèi)容。而且，即使是不需要固定訪問(wèn)這的網(wǎng)站也需要一些活躍的跡象——哪怕只是一個(gè)到最近新聞的鏈接。

淘寶電商賣(mài)家全店鋪管理工具【歡樂(lè)逛】主頁(yè)

五、用戶的好感度

對(duì)web可用性而言，除了讓網(wǎng)站簡(jiǎn)潔清楚，保證用戶能理解他們尋找的內(nèi)容，還有另外一個(gè)重要的組成部分：做正確的事——為用戶考慮，增加用戶的好感度。

降低好感度的幾種方式：

• 隱藏我想要的信息：最常見(jiàn)的情況是隱藏客戶服務(wù)的電話號(hào)碼、運(yùn)費(fèi)和價(jià)格；
• 因?yàn)闆](méi)有按照你們的方式行事而懲罰我：必須嚴(yán)格按照模板格式輸入才能識(shí)別；
• 向我詢問(wèn)不必要的信息：大多數(shù)用戶都很介意個(gè)人信息，如果網(wǎng)站要求的信息超出當(dāng)前任務(wù)時(shí)會(huì)讓用戶覺(jué)得很厭煩；
• 敷衍我，欺騙我：沒(méi)有給予用戶及時(shí)的反饋，敷衍了事；
• 給我設(shè)置障礙：不得不等待一個(gè)長(zhǎng)長(zhǎng)的視頻介紹，或者瀏覽多達(dá)數(shù)個(gè)頁(yè)面的圖片才能找到我想要的東西；
• 看上去不專(zhuān)業(yè)：網(wǎng)站看上去很凌亂，組織得不好、不專(zhuān)業(yè)，在布局上似乎沒(méi)有下功夫，那么用戶也會(huì)失去好感。

提高好感度的幾種方式：

• 知道人們愛(ài)你網(wǎng)站上想做什么，并讓他們明白簡(jiǎn)易。
• 盡量減少步驟。
• 知道我可能有哪些疑問(wèn)，并且給與解答：常見(jiàn)的問(wèn)題列表非常有價(jià)值（是正真的問(wèn)題列表、保持更新、保持坦率）。
• 為我提供協(xié)助，提前預(yù)判用戶的操作，給予相應(yīng)的提示與引導(dǎo)。
• 容易從錯(cuò)誤中恢復(fù)：當(dāng)潛在的錯(cuò)誤不可避免時(shí)，要提供一種優(yōu)雅、清楚的方法讓用戶從錯(cuò)誤中恢復(fù)，不要讓用戶寫(xiě)了一大堆東西，因?yàn)殄e(cuò)誤的原因，清空，必須重新再來(lái)。

一個(gè)高可用性的網(wǎng)站必然是為用戶掃描而設(shè)計(jì)。

通常情況下，它具有全局導(dǎo)航和首頁(yè)，用戶很容易在這個(gè)網(wǎng)站上找到自己想要的東西。

“別讓用戶思考”是網(wǎng)站可用性設(shè)計(jì)的第一原則，唯有盡可能地減少用戶在你網(wǎng)站上瀏覽的障礙，才能留住用戶。

本文由@留臥龍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來(lái)自Unaplash, 基于CC0協(xié)議