來源：MicroUX 已獲授權

尼爾森 Jakob Nielsen

尼爾森是一位人機交互學博士，于1995年1月1日發(fā)表了「十大可用性原則」。1995年以來，他通過自己的 Alertbox 郵件列表以及useit.com 網(wǎng)站，向成千上萬的 Web 設計師和App設計師闡述了易用性方面的知識，盡管他的一些觀點可能帶來爭議，至少在 互聯(lián)網(wǎng)設計師眼中，他是易用性領域的頂尖領袖。2006年4月,并被納入美國計算機學會人機交互學院，被賦予人機交互實踐的終身成就獎 。他還被紐約時報稱為“Web 易用性大師”，被 Internet Magazine 稱為 “易用之王”。

十大可用性原則的內(nèi)容：

1、狀態(tài)可見原則

2、環(huán)境貼切原則

3、可控原則

4、一致性原則

5、防錯原則

6、協(xié)助用戶記憶原則

7、靈活高效原則

8、審美和簡約原則

9、容錯原則

10、人性化幫助原則

一、狀態(tài)可見原則

系統(tǒng)應該讓用戶時刻清楚當前發(fā)生了什么事情，也就是快速的讓用戶了解自己處于何種狀態(tài)、對過去發(fā)生、當前目標、以及對未來去向有所了解，一般的方法是在合適的時間給用戶適當?shù)姆答?，防止用戶使用出現(xiàn)錯誤。系統(tǒng)應該通過在合理時間內(nèi)的適當反饋，向用戶通知正在發(fā)生的事情或者當前的狀態(tài)。不要蒙蔽用戶，溝通是所有關系的基礎，無論人還是設備。

1. 合理時間

當系統(tǒng)響應時間小于1秒時，通常正常反饋即可；當響應時間長于1秒時，我們通常會通過加載動畫、分步加載、占位符加載等方式，減緩用戶等待的焦慮感；如果超過10秒還沒有得到響應，那么通常會認為這次請求是失敗的，需要給予用戶失敗提示。

例如：刷新提示、新頁面加載提示、支付提示、下載提示。

當然這個時間并沒有嚴格的規(guī)定，記得某個APP用戶反饋說他們的頁面加載太慢了，希望提高服務器反應速度……于是他們對此進行了優(yōu)化，優(yōu)化后用戶的反應：新版很給力，很快！那這個團隊的優(yōu)化方案是什么呢？——他們把小菊花轉圈的速度提快了

2. 適當反饋

對用戶操作的適當反饋是用戶界面設計的最基本準則。讓用戶了解當前狀態(tài)、位置、是否成功、進度如何，減少不確定性；并引導他們在正確的方向上交互，而不是浪費精力在重復操作上。反饋有：

• 狀態(tài)反饋

用戶需要知道自己的操作是否被系統(tǒng)感知，所以用戶操作后，應該第一時間給出反饋。最常見的就是各種按鈕的不同狀態(tài)，比如未點擊、點擊、不可用狀態(tài)，以及選中、未選中狀態(tài)。

就拿小說類批量訂閱列表來說，起點通過明顯的線面和顏色區(qū)分選中和未選中的章節(jié)；而長佩我買的時候是需要反應一下：免費不可選中是淺灰色、未選中是深灰色，選中是綠色……但是初始狀態(tài)時深灰色看起來像是選中？？

• 進度反饋

進度通常有頁面加載進度、下載進度、視頻播放進度等

比如下圖的invision網(wǎng)站，在閱讀文章時通過頂部進度條的反饋，讓用戶知道自己的閱讀進度。

• 位置反饋

因為網(wǎng)絡空間中用戶無法像物理空間那樣感知到自己的位置，所以我們需要在視覺上進行提醒，以免用戶迷失。

比如標簽欄、導航欄通過選中狀態(tài)來定位當前所在頁面，閱讀、看視頻、聽音樂時系統(tǒng)會記錄當前的位置，下次打開后繼續(xù)。

• 反饋方式多樣化

反饋可以通過元素的顏色位置、文字、聲音和震動，甚至動效去表達變化。

比如京東，通過產(chǎn)品圖縮小-加入購物車的動效來反饋“商品已加入購物車”，直觀形象。

案例一

比如今日頭條的下拉刷新功能：頭條頁面的刷新功能使用的是下拉刷新的交互方式，當用戶下拉頁面時，頁面狀態(tài)欄跟內(nèi)容區(qū)中間會出現(xiàn)“新年快樂”的提示，當我松開頁面中間會出現(xiàn)“推薦中”的動態(tài)提示，加載完畢之后中間出現(xiàn)一條“今日頭條推薦引擎有8條更新”的文字提示；這一系列的提示就是我們所說的動態(tài)可見原則，如下圖：

案例二

比如安心記加班中關注和取消圈子功能：當用戶點擊關注按鈕之后，頁面中間會出現(xiàn)一個“關注成功”的提示，停留2S之后消失；類似這種，操作之后的提示也是狀態(tài)可見原則的一中，如下圖：

二、環(huán)境貼切原則

環(huán)境貼切原則簡單來講就是讓功能操作符合用戶的日常使用場景，遵循現(xiàn)實世界的慣

1. 使用目標用戶的語言

這里的語言不僅僅包括文案層面的語言，還包括產(chǎn)品的設計語言（圖形、配色和風格）。

產(chǎn)品使用的語言應該使目標用戶能夠清晰理解的。如果用戶不能理解，他們會感到被忽視和受挫敗，許多人將選擇其他產(chǎn)品完成目標。

2.模擬現(xiàn)實世界的對象

模仿現(xiàn)實世界的產(chǎn)品或者使用映射，能夠利用人們現(xiàn)有的知識，降低學習成本，使他們輕松快速的理解界面。

比如微信閱讀打開書的動效就像現(xiàn)實世界的打開一本書一樣、給medium文章進行標記就像我們現(xiàn)實中使用馬克筆一樣。

案例一

比如計算器的軟件界面設計基本上跟我們現(xiàn)實中使用的樣式差不多，下圖左一是現(xiàn)實中是使用的計算器，左二、三依次為錘子手機和蘋果X自帶計算器軟件的界面，真的是很相似，這樣設計能讓用戶很快上手，易于操作，因為現(xiàn)實生活中用戶已經(jīng)很熟悉計算器的使用方法了，這就是環(huán)境貼切原則：

案例二

例如新浪微博安卓的中文版和國際版：微博的中文版和國際版的logo和內(nèi)部頁面風格、語言、結構布局包括交互方式也不一樣；考慮到國外用戶的使用，軟件的語言默認為英文，當然還支持各種語言版本，可以根據(jù)所需在設置中調(diào)整，另外國際版界面的布局使用的設計風格完全遵守谷歌的設計規(guī)范，這就是環(huán)境貼切原則，具體看下圖：

三、可控原則

用戶要能對當前的情況很好地了解和掌控，足夠自由。例如：iPhone的Home鍵，音樂播放的控制，APP頁面跳轉的控制等等。這種情況下，我們應該把“緊急出口”按鈕做的明顯一點，而且不要在退出時彈出額外的對話框。很多用戶發(fā)送一條消息、總會有他忽然意識到自己不對的地方，這個叫做臨界效應；所以最好支持撤銷/重做功能。

案例一

比如微信聊天中的撤回功能：當用戶誤操作時要給用戶提供提供撤銷、取消、重做等相關功能，比如聊天類產(chǎn)品的信息都可以短時間內(nèi)撤銷。然后重新編輯發(fā)送，來避免一時沒想好而錯發(fā)消息可能給對方或者自己造成困擾，這就是用戶可控原則

案例二

谷歌相冊刪除照片之后的撤銷功能：在使用谷歌相冊的時候，我們會對照片做一些操作，比如照片的刪除，當我在谷歌相冊中刪除一張照片的時候，它會在底部出現(xiàn)一條提示框，框內(nèi)后邊就會出現(xiàn)撤銷的提示，這也是可控原則的體現(xiàn)

四、一致性原則

對于用戶來說，同樣的文字、狀態(tài)、按鈕，都應該觸發(fā)相同的事情，遵從通用的平臺慣例；也就是，同一用語、功能、操作保持一致。軟件產(chǎn)品的一致性包括以下五個方面：

結構一致性

保持一種類似的結構，新的結構變化會讓用戶思考，規(guī)則的排列順序能減輕用戶的思考負擔；例如微信每個模塊的條目布局：微信中每個模塊的條目都有統(tǒng)一的“圖標+文字信息”的結構樣式，能讓用戶快速了解朋友圈、掃一掃、搖一搖、看一看、搜一搜、附近的人、漂流瓶、購物、游戲及小程序等功能都是做什么的，這就是結構一致性的體現(xiàn)

色彩一致性

產(chǎn)品所使用的主要色調(diào)應該是統(tǒng)一的，而不是換一個頁面顏色就不同；例如網(wǎng)易云音樂的顏色：網(wǎng)易云音樂的圖標顏色與界面的主色均為紅色，包括其中一些標簽和強調(diào)的文字顏色都是紅色，整個界面除了圖片的有效信息外，都通過灰、白、紅色來呈現(xiàn)，界面保持了很好的一致性

操作一致性

能讓產(chǎn)品更新?lián)Q代時仍然讓用戶保持對原產(chǎn)品的認知，減小用戶的學習成本；比如安卓版微信、支付寶和釘釘APP中左上角的返回操作：它們?nèi)齻€安卓版的應用內(nèi)返回上一級操作，都是通過頂部左側的返回按鈕進行的，當然也可以通過安卓的物理返回鍵，這就是操作一致性的體現(xiàn)

反饋一致性

用戶在操作按鈕或者條目的時候，點擊的反饋效果也要保持一致；比如安卓版手機QQ信息列表的打開方式：它的信息都是列表式結構，不管你點擊那一行條目，下一級界面都是由右往左滑出，點擊頂部左上角的返回按鈕會從左往右滑回，體驗相當一致；這就是反饋一致性的體現(xiàn)

文字一致性

產(chǎn)品中除了風格、色彩這些保持一致以外還要保證閱讀的文字大小、樣式、顏色、布局統(tǒng)一；再例如微信幾個關鍵界面的字體：下圖我用紅色框框起來的條目部分的文字，三個主界面不盡相同，但是，字體大小、顏色、布局的樣式都一樣，這樣讓整個APP視覺上看起來很舒服，這就是字體一致性，因此，我們在做視覺設計的時候盡量使用同意風格的文字。

五、防錯&防呆原則

比出現(xiàn)錯誤信息提示更好的是更用心的設計防止這類問題發(fā)生。在用戶選擇動作發(fā)生之前，就要防止用戶容易混淆或者錯誤的選擇。特別要注意在用戶操作具有毀滅性效果的功能時要有提示，防止用戶犯不可挽回的錯誤。

案例一

比如安卓版本的知乎登錄操作：當用戶在知乎中登錄時，在沒有填寫完手機號碼和密碼前，底部的登錄按鈕是置灰不可點擊的，只有兩項都填寫完整底部的登錄按鈕才會變?yōu)榭牲c擊狀態(tài)，也就會藍色的，這就是日常常見最典型的防錯原則一種體現(xiàn)

案例二

比如安卓版微信發(fā)朋圈時，點擊返回按鈕出現(xiàn)的提示彈窗：彈出框方式會增加不可逆操作的難度，當用戶發(fā)一條動態(tài)一半的時候，因為誤操作或者其它退出當前狀態(tài)的時候，使用彈窗是個不錯的選擇，因為用戶這個操作會讓之前辛苦編輯的內(nèi)容刪除找不回，想要再發(fā)只能從頭開始，對用戶造成損失比較大；

六、協(xié)助用戶記憶原則

盡量減少用戶對操作目標的記憶負荷，動作和選項都應該是可見的。用戶不必記住一個頁面到另一個頁面的信息。系統(tǒng)的使用說明應該是可見的或者是容易獲取的。

案例一

比如谷歌相冊中的刪除照片操作：用一個類似垃圾桶的“圖標”標識刪除功能，對于用戶來講是有一定的認知負荷的，且點擊“刪除”之后用戶對于造成的后果及影響也不清楚，因此，刪除之后出現(xiàn)彈窗提示很有必要，此彈窗清除的寫明了刪除之后的影響、后續(xù)的幫助說明以及操作的選項，彈出框的出現(xiàn)很好的減少了用戶前后的記憶負荷，這就是易取原則的體現(xiàn)，如下圖：

案例二

比如安卓版愛奇藝更新后的新功能引導：更新完APP之后，當用戶觸發(fā)到這些功能時，會出現(xiàn)下圖類型的遮罩類的提示，這些提示告訴用戶功能所在的地方以及功能的作用；這種做法在很多APP中都會出現(xiàn)，這也是易取原則的一種體現(xiàn)，看下圖：

七、靈活高效原則

好的產(chǎn)品需要同時兼顧新用戶和資深用戶的需求。對新用戶來說，需要功能明確、清晰，對于老用戶需要快捷高效使用高頻功能。不可迎合某一種用戶，把不必要的信息占據(jù)重要部分。

1. 提供快捷入口

在首頁放置常用功能，或者提供自定義入口，比如猿題庫的自定義科目

2. 允許用戶重復操作

對用戶頻繁使用的功能，提供重復操作入口或者模板。比如美團外賣，可以直接選擇再來一單

3. 提供默認選項

通過提供系統(tǒng)默認選項，而減少用戶多余的操作。比如美團、攜程等當?shù)胤疹惍a(chǎn)品，會默認選擇當前定位的城市；購物會選擇默認收貨地址等

案例一

比如安卓版本支付寶中的編輯應用功能：支付寶首頁的應用是可以根據(jù)自身喜好自定義的，包括定義常用應用、排序、刪除、新增等等；這樣用戶可以根據(jù)自己的個人興趣定制自己適合的應用分布方式，這就叫做用戶定制常用功能，也就是靈活高效原則的一種體現(xiàn)

案例二

比如安卓版QQ聊天常用表情模塊：安卓版本的QQ聊天界面表情彈窗中會有一個“常用表情”的模塊，它把個人平時使用頻率或者次數(shù)最多的表情進行歸類，當用戶使用的時候能很快的找到自己喜歡或者常用的表情，提高了聊天效率，體驗很好

八、：審美和簡約原則

對話中不應該包含無關緊要的信息。在段落中每增加一個單位的重要信息，意味著要減少相應的弱化一些其他信息,無論交互還是視覺都應該注意這條原則。

案例一

在新版本的蘋果手機中自帶的軟件中標題都屬于字體放大，界面簡潔的設計風格；在自帶音樂軟件中，段落中的標題和正文區(qū)別是很明顯的，標題明顯很大，而正文部分相對較小

案例二

安卓版網(wǎng)易云音樂及QQ音樂播放頁面：網(wǎng)易云音樂和QQ音樂APP音樂播放界面，從視覺及功能布局上面做的相當不錯，美觀簡約、功能主次分明、用戶體驗不錯；

九、容錯原則

錯誤信息應該使用簡潔的文字（不要用代碼），指出錯誤是什么，并給出解決建議。也就是在用戶出錯時如何為出錯的用戶提供及時正確的幫助？即要幫助用戶識別出錯誤，分析出錯誤的原因再幫助用戶回到正確的道路上。如果真的不能幫助用戶從錯誤中恢復，也要盡量為用戶提供幫助讓用戶損失降到最低。

案例一

網(wǎng)易郵箱PC端的注冊界面：用戶在網(wǎng)易163電腦端注冊郵箱時，在輸入出錯時不但會出現(xiàn)錯誤的提示，還會給出相應的建議，幫助用戶進行正確的抉擇，這樣就避免用戶出現(xiàn)更大的失誤并且提高了注冊的效率，這是一種相當好的用戶體驗，也是容錯原則的一種體現(xiàn)，如下圖：

案例二

例如Twitter注冊頁面的錯誤提示：用戶在注冊Twitter賬號時，第一步要輸入名字和手機號碼，當用戶輸入正確的時候，輸入框后邊會有綠色的對勾圓圈，提示用戶輸入正確，可以進入下一步操作了，而當用戶輸入錯誤的時候，輸入框會變?yōu)榧t色并且在下方出現(xiàn)紅色字的錯誤提示，這樣讓用戶很清楚的知道用戶輸入錯誤以及錯誤的原因，這樣用戶就知道怎么修改了

十、人性化幫助原則

即使系統(tǒng)不適用幫助文檔是最好的，但我們也應該提供一份幫助文檔。任何幫助信息都應該可以方便地搜索到，以用戶的任務為核心，列出相應的步驟，但文字不要太多。

案例一

淘寶APP和知乎APP登錄頁面的幫助入口：在比較重要的功能入口處有必要提供相應的幫助入口，來解決用戶在操作功能過程中遇到的問題或者反饋問題的入口，不要讓用戶在出現(xiàn)問題時手足無措，不知道怎么辦，具體看下圖：

案例二

比如mac上一些常用的大型軟件：原型制作工具Axure RP 8軟件、圖像編輯軟件Photshop CC以及mac上的Safari瀏覽器，在頂部狀態(tài)欄上都有有一個“幫助”的入口，也體現(xiàn)了幫助文檔的必要性，所以，不管是什么樣的產(chǎn)品都要給用戶提供一個幫助的入口，用來解決用戶操作過程中遇到的問題