Web可用性三大定律：

1. 別讓我（訪問(wèn)者）思考
2. 點(diǎn)擊多次都沒(méi)關(guān)系，只要每次點(diǎn)擊都是無(wú)需思考、明確無(wú)誤的選擇
3. 去掉每個(gè)頁(yè)面上一半的文字，然后把剩下的文字再去掉一半

網(wǎng)站界面的設(shè)計(jì)：

1. 盡量利用習(xí)慣用法
2. 建立有效的視覺(jué)層次
3. 把頁(yè)面劃分成明確定義的區(qū)域
4. 明顯標(biāo)識(shí)可以點(diǎn)擊的地方
5. 最小干擾化
6. 為內(nèi)容創(chuàng)建清楚的格式

省略多余的文字：

1. 歡迎詞必須消滅
2. 指示文字必須消滅

去掉沒(méi)有人會(huì)看的文字有幾個(gè)好處：

1. 降低頁(yè)面的噪音
2. 讓有用的內(nèi)容更加突出
3. 讓頁(yè)面更簡(jiǎn)潔，讓用戶在每個(gè)頁(yè)面上一眼就能看見(jiàn)更多的內(nèi)容，而不必滾動(dòng)屏幕

導(dǎo)航兩個(gè)顯而易見(jiàn)的用途：

幫助我們找到想要的任何東西和告訴我們現(xiàn)在身在何處

導(dǎo)航包括持久導(dǎo)航和全局導(dǎo)航

持久導(dǎo)航應(yīng)該包括4個(gè)元素：

1. 站點(diǎn)ID（應(yīng)包含一個(gè)返回主頁(yè)的按鈕或鏈接）
2. 欄目
3. 實(shí)用工具
4. 搜索

面包屑導(dǎo)航：

1. 把它們放在最頂層
2. 使用“>”對(duì)層級(jí)進(jìn)行間隔
3. 加粗最后一個(gè)元素

一個(gè)設(shè)計(jì)良好的頁(yè)面，應(yīng)該很清晰的反映出一下幾點(diǎn)：

1. 這是什么網(wǎng)站？（站點(diǎn)ID）
2. 我在哪個(gè)頁(yè)面上？（網(wǎng)頁(yè)名稱）
3. 這個(gè)網(wǎng)站的主要欄目是什么？（欄目清單）
4. 在這個(gè)層次上我有哪些選著？（本頁(yè)導(dǎo)航）
5. 我在導(dǎo)航系統(tǒng)的什么位置?（“你在這里”的指示器）
6. 我怎么搜索？

測(cè)試：

如果想建立一個(gè)優(yōu)秀的網(wǎng)站，一定要測(cè)試

測(cè)試一位用戶比不做測(cè)試好一倍

在項(xiàng)目中，早點(diǎn)測(cè)試一位用戶好過(guò)最后測(cè)試50位用戶

每個(gè)web開(kāi)發(fā)團(tuán)隊(duì)至少應(yīng)該每個(gè)月安排一個(gè)上午進(jìn)行一次可用性測(cè)試；

1. 這樣能保持測(cè)試簡(jiǎn)單
2. 這樣能滿足開(kāi)發(fā)者的需求。通過(guò)觀察測(cè)試參與者，可以找到足夠多的問(wèn)題
3. 這樣就不需要決定什么時(shí)候測(cè)試。選定一個(gè)月的某一天，讓它成為開(kāi)發(fā)者的可用性測(cè)試日
4. 這樣人們更可能參與進(jìn)來(lái)

提高網(wǎng)站好感的集中方式：

1. 指導(dǎo)人們?cè)谀憔W(wǎng)站上想做什么，并讓它們明白簡(jiǎn)單
2. 告訴我我想知道的
3. 盡量減少步驟
4. 花點(diǎn)心思
5. 知道我可能有哪些疑問(wèn)，并且給予解答
6. 為我提供協(xié)助，例如打印好友頁(yè)面
7. 容易從錯(cuò)誤中恢復(fù)
8. 如有不確定，記得道歉

網(wǎng)頁(yè)可用性問(wèn)題：

1. 不要使用小而對(duì)比不強(qiáng)的字體
2. 不要把標(biāo)簽放到表單的字段里面
3. 保留訪問(wèn)過(guò)的鏈接和未訪問(wèn)的鏈接之間的區(qū)別
4. 不要讓標(biāo)題漂浮在段落之間

二、瞬間之美

如果希望用戶做某件事情，比如希望更多的用戶注冊(cè)，那么就應(yīng)該將注冊(cè)按鈕放在最醒目的地方，而不是更隱蔽的小的角落。

如何引導(dǎo)用戶的視線：

1.應(yīng)用古騰堡圖表

古騰堡圖表中，左上角是第一視覺(jué)落點(diǎn)區(qū)（POA），右下角是最終視覺(jué)落點(diǎn)區(qū)（TA）。遵循這個(gè)原則，我們可以看到首頁(yè)左上角基本都是放的LOGO和重要提示，而右下角則是為了讓用戶做出動(dòng)作的內(nèi)容，比方說(shuō)購(gòu)買、操作、注冊(cè)等。

? 2.使用合適的顏色來(lái)吸引注意

網(wǎng)站想要凸顯個(gè)性，需要統(tǒng)一設(shè)計(jì)風(fēng)格，形成積極的印象

導(dǎo)航的設(shè)計(jì)：

導(dǎo)航是用戶瀏覽網(wǎng)站最重要的向?qū)ВO(shè)計(jì)的合理與否直接決定這用戶對(duì)網(wǎng)站的印象。導(dǎo)航設(shè)計(jì)遵循幾個(gè)原則：合理布局、清晰展示、主動(dòng)引導(dǎo)。

標(biāo)簽云：

標(biāo)簽云，很帥的一個(gè)東西，一大堆標(biāo)簽按照它的權(quán)重（包括點(diǎn)擊量、時(shí)間、關(guān)注度等）顯示出不同的大小、顏色等，是標(biāo)簽列表的升級(jí)版。

搜索（自動(dòng)完成）：

在搜索引擎中，當(dāng)用戶輸入一個(gè)詞后，系統(tǒng)會(huì)推薦相關(guān)的搜索詞供用戶選擇，這個(gè)瞬間，很爽，這是一種Poka-yoke機(jī)制。它能提高用戶的搜索效率，使用戶更加的信任這個(gè)網(wǎng)站，提高用戶體驗(yàn)。

縱然你的搜索中帶有高級(jí)搜索，也不要讓繁復(fù)的高級(jí)搜索框讓用戶望而卻步，最好作成可以讓用戶選擇增加搜索條件的搜索頁(yè)面

遞進(jìn)式的增加用戶的資料，除了他本身填寫的那些之外，他的評(píng)論、心情、文章都是別人了解他的好資料

盡量讓時(shí)間新的鏈接和時(shí)間久遠(yuǎn)的鏈接，通過(guò)顏色、大小或別的什么一眼就可以看出來(lái)。

視頻播放器的標(biāo)準(zhǔn)化：

進(jìn)度條滑塊按鈕要足夠大；視頻左上角要說(shuō)明視頻名稱；打開(kāi)網(wǎng)頁(yè)時(shí)不會(huì)自動(dòng)播放，而是顯示第一幀的畫面和播放按鈕。

簡(jiǎn)化長(zhǎng)表單：

并不是所有的交互都能夠簡(jiǎn)化，但要嘗試讓交互看起來(lái)更容易。為用戶建立清晰的預(yù)期，把復(fù)雜的過(guò)程分解成能一口口干掉的小塊，這樣復(fù)雜的交互也便于控制了。

編輯：

在正確的時(shí)間顯示正確的工具。

我們平時(shí)會(huì)接觸到很多具有編輯功能的軟件產(chǎn)品，試想無(wú)論我們做什么操作，所有的工具都顯示出來(lái)讓你自行選擇是件多么可怕的事情，而對(duì)工具進(jìn)行適當(dāng)?shù)姆诸悾谟脩糇霾煌僮鞯臅r(shí)候只顯示相匹配的工具，能為用戶減輕很多的負(fù)擔(dān)，讓交互體驗(yàn)更良好。

自定義標(biāo)簽：

標(biāo)簽的缺陷是：用戶會(huì)對(duì)同一個(gè)標(biāo)簽定義多個(gè)版本。

兩種解決方法：自動(dòng)輸入詞建議；用戶創(chuàng)建標(biāo)簽后，彈出窗口讓用戶選擇更合適的標(biāo)簽。

用簡(jiǎn)單的文字向用戶描述什么是標(biāo)簽。

除了標(biāo)簽搜索，也得提供自然語(yǔ)言搜索。

用系統(tǒng)通知來(lái)管理中斷：

提前通知用戶即將做出的改變，一是以郵件形式告知，二是在原有設(shè)計(jì)上提供新變化的鏈接或者說(shuō)明。而作者推薦了以類似原有歡迎頁(yè)面的形式提供新變化的說(shuō)明。

當(dāng)網(wǎng)站更新時(shí)，以公告的形式提前通知用戶，可以讓積極用戶討論更新，并通過(guò)郵件提醒讓沉睡用戶訪問(wèn)網(wǎng)站。

退出：

在用戶退出的時(shí)候，設(shè)置回到起初的登錄頁(yè)面，并且在此頁(yè)中提供相應(yīng)的新功能的介紹，以此吸引用戶再次登錄。

用戶退出后，要返回到登錄頁(yè)面，同時(shí)列出網(wǎng)站特點(diǎn)作為營(yíng)銷。

對(duì)于用戶注銷賬號(hào)，要表現(xiàn)得優(yōu)雅，應(yīng)該讓用戶很輕松的就能注銷賬戶。用最后一個(gè)機(jī)會(huì)給用戶留下好印象。

整本書從布局到操作，圍繞著用戶的體驗(yàn)做講解。其中最主要的幾點(diǎn)如下：

一、?布局

布局是一塊很重要的東西，擁有良好的布局能夠更好幫助用戶去閱讀網(wǎng)站的內(nèi)容。

根據(jù)古騰堡圖表理論，左上角為用戶的第一視覺(jué)落點(diǎn)區(qū)，右下角是最終視覺(jué)落點(diǎn)區(qū)，因此左上角基本都是放一些LOGO和重要提示，右下角則更多的是一些操作

二、?導(dǎo)航

導(dǎo)航欄很重要，這將會(huì)告訴用戶現(xiàn)在在哪里，可以到哪去，合理清晰的導(dǎo)航結(jié)構(gòu)能夠大大提升用戶的操作效率。導(dǎo)航的結(jié)構(gòu)最好為第一層為動(dòng)詞，第二次為XX東西的欄目，這樣能夠讓用戶更加清晰自己的操作。

?

三、?鏈接

鏈接生來(lái)不平等，不同重要程度的信息，需要用不同的方式展示，可以用字體大小顏色等做區(qū)分，但要注意不要濫用。

四、?化繁為簡(jiǎn)

不要讓界面看上去過(guò)于的復(fù)雜，要盡可能的節(jié)簡(jiǎn)，用戶大多數(shù)時(shí)候只是會(huì)一覽而過(guò)，并不會(huì)過(guò)多的去做停留，所以文字描述需要盡可能的節(jié)簡(jiǎn)提高用戶的查看的效率。

五、?表單操作

表單布局要合理，要減少用戶自己去對(duì)其標(biāo)簽和輸入框的時(shí)間，慎用彈出警告框，用的越多越?jīng)]有效果。在發(fā)生錯(cuò)誤時(shí)，要清晰的提醒用戶發(fā)生錯(cuò)誤的內(nèi)容和位置。一些表單我們可以提示或者預(yù)先幫助用戶填好，這都可以幫助用戶更加快捷的使用。

《點(diǎn)石成金》讀書筆記

整本書圍繞著如何從用戶的角度去做思考與設(shè)計(jì)做講解，其中最主要的內(nèi)容如下：

一、?別讓我思考

所有的網(wǎng)站或者是app這一點(diǎn)都可以是第一法則，要減少用戶的思考成本，讓用戶能夠快速精準(zhǔn)的明白網(wǎng)站各個(gè)功能的操作及用途。一個(gè)好的頁(yè)面，應(yīng)該是能夠讓用戶一目了然的，用戶并不需要做過(guò)多的思考也能夠明白如何去使用。

二、?滿意即可

用戶大多數(shù)時(shí)候只是一掃而過(guò)，不會(huì)做仔細(xì)的瀏覽，用戶不做閱讀，只是掃描，用戶不會(huì)做出最佳選擇，而是滿意即可，用戶不會(huì)追根究底，而是勉強(qiáng)應(yīng)付。

三、?盡量符合用戶習(xí)慣

盡量符合用戶的使用習(xí)慣，減少用戶的學(xué)習(xí)成本。用戶更喜歡無(wú)需思考的操作，符合用戶的習(xí)慣能夠減少的思考。

四、?省略不必要的文字

去掉不必要的文字能夠減少頁(yè)面的噪音，更加突出頁(yè)面的重要內(nèi)容，能夠更多的讓用戶看到他們希望看到的東西，也節(jié)省了用戶瀏覽的時(shí)間。

五、?主頁(yè)的內(nèi)容

首先要承認(rèn)主頁(yè)不由你控制，網(wǎng)站的主頁(yè)必須要讓用戶知道，這是什么網(wǎng)站，網(wǎng)站有些什么，網(wǎng)站能做些什么，

六、?提高用戶友好度

了解清楚你的用戶想要在網(wǎng)站上獲取什么，讓他能夠更簡(jiǎn)潔明白，盡可能的減少他操作的步驟，讓他能夠更高效的完成自己的操作。

七、?測(cè)試的重要

要想做出一個(gè)真正優(yōu)秀的網(wǎng)站，就必須要測(cè)試，只有不停的測(cè)試才能夠發(fā)現(xiàn)問(wèn)題所在。越完善的測(cè)試，越能夠發(fā)現(xiàn)問(wèn)題的所在，越能夠提升網(wǎng)站的可用性。

《瞬間之美 Web界面設(shè)計(jì)如何讓用戶心動(dòng)》?[美] Robert Hoekman, Jr. 著 向怡寧 譯

《點(diǎn)石成金 訪客至上的Web和移動(dòng)可用性設(shè)計(jì)秘笈》?[美] Steve Krug 著 蔣芳 譯

網(wǎng)絡(luò)使用情況的三個(gè)事實(shí)：

1、我們?yōu)g覽頁(yè)面時(shí)，不是閱讀，而是掃描

?除了極少數(shù)如新聞故事、報(bào)告，或產(chǎn)品描述等頁(yè)面，我們極少會(huì)花時(shí)間來(lái)閱讀大部分的頁(yè)面，相反，只是掃描一下，尋找能引起注意力的文字或詞語(yǔ)。

因?yàn)槲覀兛偸怯腥蝿?wù)在身的。大部分情況下，我們使用Web都是想完成某項(xiàng)任務(wù)，而且希望能盡快完成。也知道，在絕大多數(shù)頁(yè)面里，只有小部分內(nèi)容是與當(dāng)前任務(wù)相關(guān)的，或是自己感興趣的。同時(shí)，比之閱讀，我們更愿意和擅長(zhǎng)通過(guò)掃描來(lái)找尋相關(guān)內(nèi)容完成任務(wù)。

2、我們不做最佳選擇，而是滿意即可

對(duì)于完成某個(gè)任務(wù)，我們并不會(huì)遍尋所有可能，找出最佳解決方案，而是快速地判斷、選擇某種可能完成任務(wù)的方法。因?yàn)槲覀兛偸翘幱诿β抵校鴮ふ易罴巡呗裕枰獣r(shí)間。且對(duì)選擇進(jìn)行權(quán)衡并不一定會(huì)改善我們的機(jī)會(huì)，花費(fèi)時(shí)間不一定能找到更優(yōu)的選擇。同時(shí)就算猜錯(cuò)了，也不會(huì)產(chǎn)生什么嚴(yán)重的后果，還可以輕易推到重來(lái)。

3、不求追根究底，只要勉強(qiáng)應(yīng)付

我們并不關(guān)心程序的運(yùn)行原理，網(wǎng)站或頁(yè)面的方方面面，只關(guān)心能不能更便捷高效地完成工作。

基于以上網(wǎng)絡(luò)使用情況，網(wǎng)站應(yīng)該具備一定的可用性：讓一個(gè)有著平均能力和經(jīng)驗(yàn)的人（甚至稍低于平均水平）能明白如何使用它——不必付出過(guò)度的努力，或者遇到不必要的麻煩。

當(dāng)用戶看到一個(gè)頁(yè)面時(shí)，它應(yīng)該是不言而喻、一目了然、自我解釋的。用戶應(yīng)該能明白它是什么，能干什么，怎樣用它，而不需要進(jìn)行額外的思考。

從而讓用戶能更快、更有效地獲取信息或完成任務(wù)。良好的體驗(yàn)，讓用戶感覺(jué)自己聰慧、備受尊重、做事有成效。

而要讓頁(yè)面能一目了然，用戶無(wú)需進(jìn)行額外的努力就能使用，需要頁(yè)面盡量避免出現(xiàn)強(qiáng)迫用戶思考的元素，如混亂不堪的布局、表意不明的文字等。

以下方法有助于構(gòu)建高可用性的網(wǎng)站：

1、盡量利用習(xí)慣用法，遵循習(xí)慣和慣例——已廣為采納或標(biāo)準(zhǔn)化了的設(shè)計(jì)模式。

如頁(yè)面上的什么內(nèi)容在什么位置、服務(wù)將如何運(yùn)作、視覺(jué)元素的外觀等依據(jù)長(zhǎng)久使用習(xí)慣演化出的網(wǎng)頁(yè)設(shè)計(jì)的習(xí)慣用法。

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

利用形狀、顏色、字體大小等方式突出重要部分。視覺(jué)效果體現(xiàn)內(nèi)在邏輯關(guān)系。如邏輯上相關(guān)的部分在視覺(jué)上也相關(guān)，邏輯上包含的部分在視覺(jué)上進(jìn)行嵌套。

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

4、明顯標(biāo)識(shí)可以點(diǎn)擊的地方

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

避免內(nèi)容無(wú)層次感，無(wú)突出重點(diǎn)信息，使人眼花繚亂。通過(guò)組織布局，以有罪推論，去除頁(yè)面中對(duì)完成任務(wù)無(wú)效的無(wú)謂部分，使頁(yè)面簡(jiǎn)介高效。

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

充分使用標(biāo)題、保持段落簡(jiǎn)短、使用符號(hào)列表、突出關(guān)鍵詞語(yǔ)，使內(nèi)容層次分明，易于辨識(shí)，快速掃描抓取重點(diǎn)信息。