設(shè)計做久了，我們也需要回頭看看最基礎(chǔ)的知識，通過對實例的思考與解析，加深對尼爾森十大可用性原則的理解與應(yīng)用。

一、系統(tǒng)狀態(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)應(yīng)該在合理的時間內(nèi)通過適當(dāng)?shù)姆答?，始終讓用戶了解正在發(fā)生的事情。

——Nielsen

具體「狀態(tài)可見」筆者認為可以從以下幾點來講，但不局限于這幾點：

1「我在哪」

系統(tǒng)需要提供準(zhǔn)確的導(dǎo)航，讓用戶知道他在哪里，他能去什么地方以及如何到達那里。可以通過導(dǎo)航菜單、面包屑、標(biāo)簽頁、步驟條、分頁器等讓用戶明確自己的在系統(tǒng)中所處的位置。設(shè)計者在設(shè)計的過程中，要注意提供上下文線索，避免用戶迷路。

Ant D的系統(tǒng)導(dǎo)航

2「狀態(tài)反饋」

用戶需要知道當(dāng)前要做什么，并且操作的結(jié)果如何，也可以給用戶的下一步行為做參考。當(dāng)用戶在與系統(tǒng)進行交互時，我們應(yīng)當(dāng)為用戶在各個階段提供必要、積極且即時的反饋，同時也要避免過度反饋打擾用戶。

可以使用的形式包括但不局限于：警告提示、通知、徽標(biāo)數(shù)（Badge）、加載進度反饋、輸入反饋、結(jié)果反饋、反饋浮層、反饋彈窗。

云村徽標(biāo)數(shù)反饋

WeChat表情添加成功反饋

京東加入購物車動畫反饋

3「任務(wù)進度」

用戶在進行某項任務(wù)時，應(yīng)當(dāng)通過進度條，數(shù)字等方式給予用戶進度提示，減緩用戶焦慮感。

內(nèi)容加載時，可以通過以下方式，讓用戶知道系統(tǒng)在工作，減緩用戶等待的焦慮感。

（1）加載動畫

（2）分步加載

優(yōu)先加載占網(wǎng)絡(luò)資源較小的元素。如先文字和默認圖標(biāo)后圖片，圖片加載完成前使用占位符顯示；當(dāng)加載的頁面內(nèi)容有固定的框架時，可以先加載框架，再加載框架內(nèi)的內(nèi)容。此方式能夠及時展示相應(yīng)內(nèi)容，減少用戶心理等待時間。

（3）占位符加載

我們可以事先在App預(yù)設(shè)好圖標(biāo)或者占位符來代替加載的文字、數(shù)字、圖片等數(shù)據(jù)。告知用戶此處有內(nèi)容，只是還沒有加載出來。占位符可以讓用戶從樣式上看出界面布局大概是哪些內(nèi)容。

（4）懶加載

淘寶網(wǎng)、知乎等大流量網(wǎng)站都已經(jīng)使用了圖片滾動懶加載的方案——僅當(dāng)圖片滾入視窗，被用戶看到的時候，才會去真正加載，避免網(wǎng)絡(luò)資源浪費。

loading動畫

簡書占位符加載

閑魚&愛回收

二、貼近用戶真實環(huán)境（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)應(yīng)該說用戶的語言，用戶熟悉的單詞，短語和概念，而不是系統(tǒng)導(dǎo)向的術(shù)語。遵循現(xiàn)實世界的約定，使信息以自然和合乎邏輯的順序出現(xiàn)。

——Nielsen

1「使用目標(biāo)用戶的語言」

用戶在使用產(chǎn)品的過程中，其大腦會“優(yōu)待”較常用的記憶內(nèi)容和操作形式，有意抑制那些相似但不常用的內(nèi)容，以便減輕認知負擔(dān)，防止混淆。這種習(xí)慣從某種程度上來說屬于“熟知記憶”。簡單講就是說人話，使用目標(biāo)用戶的熟悉的語言「圖形、配色、風(fēng)格」，不需要故作高深，就像張小龍說的，做產(chǎn)品要有傻瓜心態(tài)。

下圖中，每日優(yōu)鮮的「菜市場」、「水果店」，B站的「手辦」等等，都是其目標(biāo)用戶的語言：

每日優(yōu)鮮 &B站

2「使用現(xiàn)實世界中的隱喻」

從現(xiàn)實世界中借鑒的設(shè)計元素可以顯著的降低用戶的認知和學(xué)習(xí)困難，并增加他們的使用興趣。網(wǎng)易云音樂的膠片設(shè)計就是一個很好的例子，還有微信讀書的「書架」也一樣是現(xiàn)實世界的隱喻。

三、用戶有控制來去自由的權(quán)利（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.”

用戶通常會錯誤地選擇了系統(tǒng)的某個功能，并且需要一個明確標(biāo)記的”緊急出口“來離開不想要的狀態(tài)，而不必進行擴展對話。支持撤消和重做。

——Nielsen

系統(tǒng)應(yīng)當(dāng)支持「撤銷、重做、返回」等操作，讓用戶可以從哪里來到哪里去。會帶來嚴重后果的，或者不可逆的操作，最好給用戶提供二次確認彈窗，如果用戶誤操作，可以通過二次確認，避免錯誤加深。常見的二次確認主要可以通過以下方式實現(xiàn)：

• 通過文字提示，用戶閱讀后點擊是與否來進行下一步
• 通過動作，用戶通過輸入特定字符或者完成驗證碼拖拽等操作才可進行下一步操作
• 通過身份校驗，用戶需要提交個人身份信息以完成校驗

Teambition刪除項目的二次確認彈窗

四、系統(tǒng)的一致性（Consistency and standards）

“Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.”

不應(yīng)該讓用戶懷疑不同的話語、場景或行為是否在表達同樣的一件事情。系統(tǒng)設(shè)計需遵循平臺慣例，保持一致性。

——Nielsen

1「與業(yè)內(nèi)產(chǎn)品保持一致」

與用戶的操作習(xí)慣保持一致，意味著用戶不再需要重新學(xué)習(xí)，就可以在各種應(yīng)用中自由切換，從我們自身產(chǎn)品的角度來講，用戶學(xué)習(xí)成本的降低，也意味著我們獲客成本從某種程度上被降低。所以我認為，同類軟件設(shè)計的趨同化，未必不是一件好事。尊重用戶已有的操作習(xí)慣。

就像我們可以看到的，所有的電商網(wǎng)站基本上都遵循著類似的交互邏輯和視覺元素。這些約定俗成的慣例，意味著用戶不再需要重新學(xué)習(xí)在某個新的平臺上購物，降低學(xué)習(xí)成本。而這些約定俗成的規(guī)則和流程都被用戶不自覺地印刻在大腦中，成為一種自然的習(xí)慣，而獨特的設(shè)計，截然不同的規(guī)則，則常常會成為習(xí)慣以外的東西，引起混亂，讓初次上手的用戶感到受挫和沮喪。

2「產(chǎn)品內(nèi)部保持一致」

通用的信息應(yīng)該使用一致的用詞、外觀和布局，可以幫助用戶快速學(xué)習(xí)、記憶和熟悉產(chǎn)品的功能。例如：IOS系統(tǒng)采用同樣的顏色來表示可點擊元素。

3「版本迭代之間的一致性」

產(chǎn)品的不同版本之間，主要的功能、設(shè)計元素等，盡量有一定的延續(xù)性，避免用戶產(chǎn)生困惑。例如：IOS系統(tǒng)的幾個版本之間都有一定的創(chuàng)新，但仍然保留了許多原有的設(shè)計規(guī)范。

五、防止錯誤（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.”

系統(tǒng)要么消除容易出錯的情況，要么檢查它們，并在用戶采取行動之前向用戶提供確認選項。

——Nielsen

用戶難免會犯錯，一個好的產(chǎn)品可以降低用戶犯錯的概率，并且提升錯誤被解決的效率。簡單點講就是，用戶使用產(chǎn)品的過程中肯定會遇到坑，我們要不幫助用戶避免這些坑，即使用戶掉進坑里，也能讓他們很快的爬出來，也可以稱之為“產(chǎn)品設(shè)計的容錯性”。

「防止錯誤」我理解上主要分為三個階段：錯誤行動發(fā)生前，引導(dǎo)用戶向正確的方向前進；用戶觸碰到危險操作時給予提示；危險操作發(fā)生之后，提供撤回的入口。

比如iphone的照片刪除，從相冊刪除時，會進入回收站，開始30天倒計時，倒計時結(jié)束，才算真正刪除。

在我個人看來，對回收站的理解是，如果用戶不小心連續(xù)刪除照片的時候，突然把一張不需要刪除的的也給刪掉了，但是已經(jīng)來不及撤銷了，所以可以在回收站里進行恢復(fù)?；蛘呤钱?dāng)時覺得不重要不需要的圖片刪除了，之后一些天又有需要的時候，在回收站里可以扒出來。

iPhone從相冊刪除和從回收站刪除的提示

其次，在某些特殊的場景下，危險操作可以可以直接置灰。

六、系統(tǒng)識別勝過用戶記憶（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.”

通過使用對象、動作和選項的可視化表達，最大限度地減輕用戶的記憶負擔(dān)。

——Nielsen

好記性不如爛筆頭，盡可能通過我們系統(tǒng)，減少用戶的記憶負擔(dān)。

1. 記住用戶的操作記錄

比如現(xiàn)有的主流視頻播放軟件，基本都會以賬號為體系，跨設(shè)備記住用戶上次觀看的進度，以便在下次在任何設(shè)備上打開時，都可以接著上次的觀看進度繼續(xù)播放。

2. 一個流程對應(yīng)一個操作目標(biāo)

在用戶的操作流程中，應(yīng)當(dāng)減少操作路徑，同時保持正確的對應(yīng)關(guān)系，一個流程只有一個重要的操作，一次操作只有一個結(jié)果，邏輯清晰，有先有后，如果操作過程中，需要用戶做出選擇，則提供一個優(yōu)選項。

3. 提供適量的信息

多數(shù)情況，用戶記憶信息在7±2左右，1個記憶最牢靠。3個最清楚，7個以上就需要給信息進行分類，來幫助用戶理解和記憶。通過合理的設(shè)計手段，來使信息有效地推送給用戶，或者幫助用戶輕松完成任務(wù)。

4. 選擇而不是輸入

可以的情況下，盡量讓用戶選擇而不是輸入。對用戶側(cè)而言，選擇的操作成本肯定是比輸入要低。

• 比如美團上，輸入海底撈，會為用戶智能推薦具體的門店。
• 支付寶的搜索頁，會展示用戶的搜索記錄和熱門推薦。

美團

支付寶搜索默認頁

七、靈活性和使用效率（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.”

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

——Nielsen

可以通過設(shè)置快捷入口、列出用戶最近訪問、給用戶默認選項，減少多余操作等方式提高產(chǎn)品的靈活性和使用效率。

阿里云控制臺側(cè)邊欄展開效果

提高產(chǎn)品的靈活性還有一個很重要的點，要考慮到產(chǎn)品的長遠性。作為設(shè)計師，我們不能孤立的看待某次改版和某個接到的產(chǎn)品需求，我們要在思考當(dāng)前需求的同時，對下個版本（甚至接下來三個版本）的需求要有比較清晰的預(yù)判和認知。然后去將后續(xù)版本中可能調(diào)整的地方在本期的需求里預(yù)留可拓展性。

這樣結(jié)合產(chǎn)品整個生命周期來進行設(shè)計的產(chǎn)品，才能具有較好的靈活性，否則只是不斷的功能累加，產(chǎn)品框架可能會在一次次功能迭代中變得混亂。

八、美觀和簡約設(shè)計（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.”

不要包含不相關(guān)或低頻次的信息/操作。頁面中的每個額外信息都會降低主要內(nèi)容的相對可見性。

——Nielsen

互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁的動作不是讀，不是看，而是掃。易掃，意味著突出重點，弱化和剔除無關(guān)信息，擁有良好的視覺層次結(jié)構(gòu)，降低頁面干擾。

產(chǎn)品設(shè)計的四大基本原則：親密性、對齊、重復(fù)、對比。

四大基本原則的應(yīng)用思路：把信息歸入邏輯親密性，利用對齊，找到并制造重復(fù)元素，加入對比。

• 彼此相關(guān)的項應(yīng)當(dāng)靠近，歸組在一起，建立更近的親密性。親密性的根本目的是實現(xiàn)組織性。將頁面劃分成明確定義的區(qū)域。用戶在第一眼掃視之后，快速定位到所需的有用信息，忽略不感興趣的部分，大大節(jié)省獲取信息的時間。
• 對齊的根本目的是使頁面統(tǒng)一而且有條理。建立清晰的頁面視覺層次，有助于用戶快速弄清楚當(dāng)前頁面信息之間的從屬、主次或關(guān)聯(lián)等輪廓。突出重要的信息元素，邏輯上相關(guān)的部分在視覺上也相關(guān)，邏輯上包含的部分在視覺上嵌套。
• 重復(fù)的根本目的是統(tǒng)一，并增強視覺效果。盡量利用習(xí)慣用法，既能遵從用戶的習(xí)慣便于用戶理解，又能避免不必要的重復(fù)造輪子。
• 對比的根本目的是增強頁面的效果（更有可讀性），有助于信息的組織（防止混淆）。最大限度降低干擾，降低頁面上的視覺噪聲。吸引用戶眼球的信息不宜過多，以免用戶眼花繚亂。

九、幫助用戶識別、診斷，并從錯誤中恢復(fù)（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.”

錯誤信息應(yīng)該用通俗易懂的語言表達，較準(zhǔn)確地指出問題，并且提出解決方案。避免通過代碼等用戶難以理解的形式。

——Nielsen

1. 提供解決方案

下圖為訪問某網(wǎng)站時，谷歌和Safari的提示，點開谷歌提示上的藍色文字「檢查代理服務(wù)器和防火墻」，會給出更詳細的解決方案，根據(jù)其指示操作，就可以解決問題。但是反觀Safari，我可能就不能理解具體問題出在哪里了。

2. 幫助用戶從錯誤中恢復(fù)

微信撤回的消息支持重新編輯，用戶可能輸入錯了某個字而撤回，重新編輯，只需要對錯誤的字進行修改，無需再編輯大段文字。這個功能，我在實際使用的過程中，頻率還是挺高的。

順便說一個體驗不太好的地方，公眾號后臺文章編輯器，停留的時間太久之后（我都是零碎時間寫幾個字，?，所以會可能上次打開的，過幾個小時再編輯一下），上傳圖片就會顯示失敗，但不提示原因。最初，我會反復(fù)導(dǎo)出圖片，覺得應(yīng)該是圖片有問題，后來，偶然發(fā)現(xiàn)是頁面停留時間過長，刷新一下頁面就好了。

十、幫助文檔（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)能讓用戶不需要閱讀文檔就會使用那是最好的，但通常情況下還是需要幫助文檔的。任何信息應(yīng)該容易被搜索，且專注于用戶的目標(biāo)任務(wù)，并列出具體的步驟來告知用戶。

——Nielsen

我們設(shè)計的時候，需要根據(jù)幫助文檔的重要性來決定其具體形式。一些比較簡單的引導(dǎo)，比如改版引導(dǎo)、新功能引導(dǎo)，通常只需要出現(xiàn)一次即可；表單填寫時的一些疑難字段，可以通過小問號hover提示；一些太復(fù)雜的操作提示，包括具體步驟截圖啊之類的，就會單獨形成一篇幫助文檔，來給用戶提供指導(dǎo)。

幫助的提示應(yīng)當(dāng)是易于理解、方便查找、便于應(yīng)用的。

谷歌搜索的幫助提示

阿里云幫助文檔

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

題圖來自Unsplash，基于CC0協(xié)議。