Web可用性三大定律：

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

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

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

省略多余的文字：

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

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

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

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

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

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

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

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

面包屑導(dǎo)航：

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

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

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

測試：

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

測試一位用戶比不做測試好一倍

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

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

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

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

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

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

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

二、瞬間之美

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

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

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

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

? 2.使用合適的顏色來吸引注意

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

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

導(dǎo)航是用戶瀏覽網(wǎng)站最重要的向?qū)ВO(shè)計(jì)的合理與否直接決定這用戶對網(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)簽列表的升級版。

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

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

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

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

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

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

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

簡化長表單：

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

編輯：

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

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

自定義標(biāo)簽：

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

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

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

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

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

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

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

退出：

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

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

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

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

一、?布局

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

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

二、?導(dǎo)航

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

?

三、?鏈接

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

四、?化繁為簡

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

五、?表單操作

表單布局要合理，要減少用戶自己去對其標(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īng)該是能夠讓用戶一目了然的，用戶并不需要做過多的思考也能夠明白如何去使用。

二、?滿意即可

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

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

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

四、?省略不必要的文字

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

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

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

六、?提高用戶友好度

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

七、?測試的重要

要想做出一個(gè)真正優(yōu)秀的網(wǎng)站，就必須要測試，只有不停的測試才能夠發(fā)現(xiàn)問題所在。越完善的測試，越能夠發(fā)現(xià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覽頁面時(shí)，不是閱讀，而是掃描

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

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

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

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

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

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

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

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

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

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

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

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

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

2、建立有效的視覺層次

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

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

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

5、最小化干擾，降低視覺噪聲

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

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

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