前言

最近在梳理和學習交互設計相關的原則哮肚，補充理論知識，有助于讓自己變得更加專業(yè)，也方便與產品經理和其他同事溝通設計思路别惦。尼爾森十大可用性原則可謂是交互設計原則中的經典，由?“易用之王”雅各布·尼爾森在1995年提出夫椭，具有廣泛的通用性掸掸。以下是我結合自己的理解整理的相關筆記以及找的一些案例說明。

思維導圖

①狀態(tài)可見（Visibility of system status）【感知】

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.?系統(tǒng)應該讓用戶時刻清楚當前發(fā)生了什么事情蹭秋，在合適的時間給用戶適當的反饋扰付。??（也就是快速地讓用戶了解自己處于何種狀態(tài)、對過去發(fā)生仁讨、當前目標羽莺、以及對未來去向有所了解）

實踐要點

· 向用戶反饋現在所處狀態(tài)/進度/位置

· 給用戶及時的反饋

正面場景案例

· 手機頂部的狀態(tài)欄，就是讓用戶時刻了解自己手機的狀態(tài)陪竿，包括網絡信號禽翼、電量等信息

iOS 狀態(tài)欄

· 頁面加載過程中，顯示進度條和進度說明族跛，可以讓用戶了解加載狀態(tài)闰挡，減少等待的焦慮感

加載狀態(tài)展示

· toast提示是一種常見的反饋形式，可以在不影響用戶操作的情況下及時反饋用戶操作的結果

取消關注的反饋提示

反面場景案例

頁面加載時進度條和標題欄融為一體不易察覺礁哄，且頁面空白無感知??

②匹配現實世界認知（Match between system and the real world） 【易懂】

The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.?軟件系統(tǒng)應該使用用戶熟悉的語言长酗、文字、語句桐绒，或者其他用戶熟悉的概念夺脾，而非系統(tǒng)語言。軟件中的信息應該盡量貼近真實世界茉继，讓信息更自然咧叭，邏輯上也更容易被用戶理解。?

實踐要點

· 人性化的文案表達

? ? 用戶看得懂的語言

? ? 情感化幽默化的表達

· 采用符合用戶實際生活認知的隱喻

????動效和圖形符合現實世界認知

正面場景案例

網易云音樂的播放界面采用播放唱片的設計樣式

B站和芒果TV面向不同的用戶群體烁竭，對于頻道分類有不同的命名

反面場景案例

掌上生活未登錄時點擊右上角類似掃一掃的icon菲茬，進入登錄界面；登錄后再次點擊，進入付款碼界面而不是掃一掃界面婉弹，不符合用戶認知

③用戶控制和自由（User control and freedom）【可控】

Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.用戶常常會誤觸到某些功能睬魂，我們應該讓用戶可以方便的退出。這種情況下镀赌，我們應該把“緊急出口”按鈕做得明顯一點氯哮，而且不要在退出時彈出額外的對話框。很多用戶發(fā)送一條消息商佛、總會有他忽然意識到自己不對的地方喉钢，這個叫做臨界效應；所以最好支持撤銷/重做功能威彰。

實踐要點

· 讓用戶可進可退

· 用戶可以隨時選擇退出

正面場景案例

微信聊天中的撤回功能

反面場景案例

黃油相機編輯圖片時只有撤銷沒有重做出牧，不能退回撤銷前的效果

④一致性（Consistency and standards）【統(tǒng)一】

Users should not have to wonder whether different words, situations, or actions mean the same thing.?用戶不需要擔心不同的文字、狀態(tài)或操作是不是意味著同樣的功能歇盼。（對于用戶來說舔痕，同樣的文字、狀態(tài)豹缀、按鈕伯复，都應該觸發(fā)相同的事情，遵從通用的平臺慣例邢笙；也就是啸如，同一用語、功能氮惯、操作保持一致叮雳。?）

實踐要點

· 從內容維度

????結構一致性

????色彩一致性

????操作一致性

????反饋一致性

????文字一致性

· 從對象維度

????與平臺規(guī)范保持一致

????與自身產品保持一致

????與用戶預期保持一致

正面場景案例

微信的“發(fā)現”和“我”的列表布局，從icon到文字樣式都是保持一致的

反面場景案例

松鼠記賬的修改密碼妇汗、本位幣設置和新建周期記賬頁面中右上角表示確認的按鈕樣式不一致

⑤防錯（Error prevention）【防范】

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.?比一個優(yōu)秀錯誤提醒彈窗更好的設計方式帘不，是在這個錯誤發(fā)生之前就避免它⊙罴可以幫助用戶排除一些容易出錯的情況寞焙，或在用戶提交之前給他一個確認的選項。在此互婿，特別要注意在用戶操作具有毀滅性效果的功能時要有提示捣郊，防止用戶犯不可挽回的錯誤。

實踐要點

· 置灰或隱藏不常用的或負面的功能按鈕

· 對常犯錯誤進行及時提醒或事前提醒

·?利用用戶的聯(lián)想防止錯誤慈参，如用紅色文字/按鈕警示用戶

· 使用臨時狀態(tài)進行重要操作呛牲，執(zhí)行重要操作時提供確認操作

· 產品設計時盡量做到不讓用戶混淆

????即使有人為疏忽也不會發(fā)生錯誤的設計——不需要注意力

????外行人來使用也不會出錯的設計——不需要經驗和直覺

????不管是誰或在何時工作都不會出錯的設計——不需要專門知識和高度技能

正面場景案例

微信編輯朋友圈可見范圍時點擊返回，會提示是否保存修改

在未輸入有效的手機號時驮配，獲取驗證碼的按鈕置灰不可點擊

反面場景案例

松鼠賬單在導出賬單時侈净，默認選擇默認導出尊勿，此時其實不支持自定義選擇賬本、賬戶和時間畜侦，但界面上沒有隱藏這些選項，點擊也無任何反饋躯保，讓用戶感到疑惑

⑥識別好過記憶（Recognition rather than recall）【易取】

Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.通過把組件旋膳、按鈕和選項可見，最小化用戶的記憶負擔途事。用戶不必記住各個對話框中的信息验懊。系統(tǒng)的使用說明應該是可見的，或在合適的時候易于檢索尸变。?

實踐要點

· 用戶提交內容時把結果展示出來讓用戶確認

· 將選擇對象可視化义图，或豐富記憶線索

· 使用通用的指令，減少用戶記憶負擔

· 為用戶提供歷史記錄或草稿召烂，讓用戶方便查詢

· 減少用戶輸入成本碱工，如提供選項、默認值或手勢輸入奏夫，自動默認＞用戶選擇＞用戶輸入

·?自動讀取怕篷、記錄信息，減少操作路徑

正面場景案例

在淘寶搜索時可以根據輸入的的內容推薦搜索關鍵詞酗昼，減輕用戶輸入成本

提交訂單時會把訂單詳情內容展示給用戶進行確認

反面場景案例

微信在沒有獲取到權限時廊谓，會用文字提示用戶去開啟，用戶很難記住開啟權限的路徑

⑦靈活高效（Flexibility and efficiency of use）【便捷】

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.?加速器——新手用戶常陈橄鳎看不見——通痴舯裕可以加速專家用戶的交互，這樣系統(tǒng)就可以同時滿足沒有經驗和有經驗的用戶呛哟。允許用戶定制常用功能叠荠。

實踐要點

· 突出常用功能，提供快捷鍵

· 提供撤銷/重做功能

· 提供歷史記錄功能（在以前基礎上操作竖共，定制化）

正面場景案例

搜狗輸入法支持滑行輸入蝙叛，讓專業(yè)用戶輸入更高效

支付寶用戶可以自定義首頁的常用應用??

反面場景案例

隨手記在流水頁不支持長按或左滑進行快速刪除，必須進入詳情頁才可以

⑧優(yōu)美且簡約（Aesthetic and minimalist design）【簡約】

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.對話中的內容應該去除不相關的信息或幾乎不需要的信息公给。任何不相關的信息都會讓原本重要的信息更難被用戶察覺借帘。?

實踐要點

· 讓用戶注意力有承接性，不出現視覺跳躍

· 保證信息可讀性淌铐，清晰明了肺然，重點突出

· 建立清晰的視覺層級和信息層級

· 如無必要，勿增實體

· 提示一次只給一個

· 沉浸式體驗獨占全屏

正面場景案例

App Store 首頁的編輯推薦文章都以卡片展示腿准，突出標題和圖片际起，沒有多余的內容

反面場景案例

花生地鐵的新聞頁面布局較為雜亂拾碌，Banner下方的四個按鈕很突兀，信息流中還穿插著簽到

⑨幫助用戶確認街望、診斷和糾正錯誤（Help users recognize, diagnose, and recover from errors）【容錯】

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.錯誤信息應該用簡單的語言(不要用代碼)來表達校翔，準確地指出問題所在，并建設性地提出解決方案灾前。?

實踐要點

· 用用戶能夠理解的語言告訴用戶錯誤原因

· 給用戶提供確切的解決辦法

· 安撫挫敗感防症，情緒化表達

· 自動糾錯，并及時進行修正哎甲，將給用戶帶來極大的便利

正面場景案例

淘寶在網絡錯誤時蔫敲，會明確原因，安撫用戶炭玫，并提供刷新按鈕

反面場景案例

12306操作頻繁或弱網時奈嘿，toast提示“操作失敗”，讓用戶看不懂且沒有提供明確的解決方案

⑩人性化幫助（Help and documentation）【幫助】

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.即使不需要文檔就可以使用系統(tǒng)也更好吞加，但可能有必要提供幫助和文檔裙犹。任何這樣的信息都應該易于搜索，集中在用戶的任務上榴鼎，列出要執(zhí)行的具體步驟伯诬，并且不要太大。?

?

幫助提示優(yōu)先級

· 無需提示巫财，簡單易懂

· 一次性提示盗似，只需要提示一次用戶就懂

· 常駐提示

· 幫助文檔

實踐要點

· 在需要的情況下自動出現

· 幫助文檔應該方便尋找，比如放在顯眼的菜單欄

· 幫助操作應該易于理解平项，比如圖文引導

· 方便用戶應用赫舒，如在操作的同時就能看見幫助的信息

正面場景案例

廣州地鐵乘車碼頁面右上角有很明顯的“幫助”入口，可以幫助用戶快速確認起點終點換乘路線

反面場景案例

花生地鐵的圖文引導做得很好闽瓢，但是在首頁很難找到入口接癌，感嘆號更像是一個警示圖而不是一個幫助入口

總結

現在的APP已經越來越注重用戶體驗，想找到很典型的反面例子還挺不容易的扣讼，通過正反面舉例也讓自己對這些原則印象更加深刻缺猛。尼爾森十大原則是比較通用的可用性原則，盡管以前曾學習研究過椭符，這次重新復習仍有新的收獲荔燎。

參考文章

https://www.nngroup.com/articles/ten-usability-heuristics/

尼爾森十大交互原則

尼爾森十大可用性原則

尼爾森十大交互原則思考心得

交互十大原則（尼爾森十大交互原則）