不知道大家是否有過這樣的體驗：當你點擊按鈕時沒有任何反應，於是頻繁點了很多次，導致出現很多頁面。面對這樣的情景，產品設計者該如何應對？本文總結介紹了尼爾森的十大可用性原則中的前五大原則，希望對你有所啟發。

在日常使用移動端或PC端產品時，不知你有沒有這樣的體會？

1. 出現這些問題的，如何解決呢？

推薦一個比較實用的設計法則，這個法則已經有很多的文章說明了，可以說現在的任何網際網路產品都能看到這些理論的實踐，本次主要想以比較多的案列進行實戰分析。

尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎上，提煉出的十項互動設計原則。被廣泛運用於網頁、APP以及各種人機互動領域。

要注意的是，這10項原則是啟發式（heuristics）的、廣泛的經驗法則，可以指導我們更具價值的思考界面設計。

各種設計原則都可靈活運用於各個地方,可以是互動設計,也可以是界面設計,深入了解各種設計原則,讓設計師在做設計的時候可以找到更好的解決方案,提高用戶的使用體驗。

理論介紹：

雅各布·尼爾森（Jakob Nielsen）是畢業於哥本哈根的丹麥技術大學的人機互動博士，被譽為可用性測試的鼻祖，2006年4月，並被納入美國計算機學會人機互動學院，被賦予人機互動實踐的終身成就獎。

尼爾森於1995年1月1日發表了「十大可用性原則」，該原則被廣大設計師奉為教科書般的存在。雖然20多年過去了，但是對於現今的產品體驗設計仍然具有很大的參考意義。

一、狀態可見原則

人機互動的基本原則是，讓系統和用戶之間保持良好的溝通和信息傳遞。系統要告知用戶發生了什麼，預期是什麼，如果系統不能及時向用戶反饋合適的信息，用戶必然會感到失控和焦慮，不知道下一步要做什麼。

界面狀態分為兩種：靜態和動態。

靜態即用戶通過界面查閱，明確知道自己的位置、處於何種狀態，或者知道界面數據的狀態。

動態即用戶在進行界面操作時，系統應當立刻提供反饋，告訴用戶該項操作被系統接受，讓用戶對操作感知及判斷。

該原則在設計中的體現：

1. 狀態可見性-位置可見

告訴用戶處在系統的什麼位置，特別是對於新用戶，需要提供必要的信息，否則容易迷惑。比如：導航菜單、麵包屑、標籤頁、步驟條、分頁器等等。

相比於C端產品，B端產品在頁面層級往往更為複雜。因此，讓用戶明確當前所處的位置尤為重要，這也就突顯出了導航的重要性。設計師在設計的過程中，要注意提供上下文線索，避免用戶迷路。

2. 狀態可見性-進度條

告知用戶系統運行的狀態信息，比如進度、內容加載時，增加用戶掌控感。

最經典的案例莫過於Loading頁的進度條了，無論是加載頁面還是下載內容，一個清晰的進度條可以讓用戶隨時掌控進度，同時也可以用具體的數字更加明確的表示，比如：安裝程序時顯示進度條，並預估還需要多久結束，播放音樂時顯示進度條，並提示預估剩餘時間。

3. 狀態可見性-操作反饋

系統適當反饋是用戶界面設計的最基本準則。當用戶在與系統進行交互時，應當在各個階段為用戶提供必要、積極且即時的反饋，同時也要避免過度反饋打擾用戶。

可以使用的形式包括但不局限於：

• 操作反饋：點擊頁面跳轉、按鈕點擊狀態、警告提示、輸入反饋等等；
• 結果反饋：非模態彈窗，輕量化感知系統內容反饋。（反饋內容應儘量不要打斷用戶操作，所以一般採用toast形式，反饋結果後及時消失。）
• 情感反饋：搜索沒有結果時，沒有數據等等空狀態。

還可以通過元素的顏色位置、界面元素變化、文字、聲音和震動，甚至動效等多種形式給予用戶提示反饋。

注意，越是消極的反饋，比如網絡連接失敗、系統錯誤等，越是要及時告知用戶，同時提醒用戶採取適當措施。

比如：

• 提交表單時，如果校驗失敗，則在填寫有誤的內容旁邊提示錯誤原因；
• 程序未響應時，系統會讓用戶選擇是關閉程序還是等待程序響應；

4. 狀態可見性-合理的時間

系統應該在合理的時間內，給予用戶適當的反饋，讓用戶了解正在發生的事情。

當系統反饋時間小於1秒，通常正常反饋即可；相反長於1秒時，我們通常會通過加載動畫、占位符、分步加載等方式，減緩用戶等待的焦慮感。

如果超過10秒還沒有得到相應，那麼通常會認為這次請求是失敗的，需要給用戶失敗提示。

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

二、 環境貼切原則

讓系統儘可能貼切用戶所在的真實環境。把複雜的系統語言換成用戶看得懂的語言；環境貼切原則的根本目標是讓用戶可以快速上手產品，降低學習成本。

《iphone人機互動指南》裡提到的隱喻與擬物化是很好的實踐。此外，還應該使用易懂和約定俗成的表達。

該原則在設計中的體現：

1. 環境貼切-易理解的語言

這裡說的語言不僅僅包括文案層面的語言，還包括產品的設計語言（圖形、配色、風格、動效、手勢等）設計語言都應該是易於用戶理解和認知的。

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

從設計心理學角度來講，用戶在使用產品的過程中，其大腦會「優待」較常用的記憶內容和操作形式，有意抑制那些相似但不常用的內容，以便減輕認知負擔，防止混淆，這種習慣從某種程度上來說屬於「熟知記憶」。

比如細分市場的產品，針對中老年、青年、兒童的產品或商務、娛樂的產品，都要分別使用符合自己的定位的語言。

反面案例就是windows系統出錯了頁面，一堆亂碼，看不懂又很慌張，就很不友好。

另外還有一點，很多大公司的app都會針對他們不同國家的用戶群體進行各種語言的翻譯處理。為了照顧不同國家的用戶的使用習慣對頁面結構布局，風格，語言，字體，包括交互方式都會做特殊處理。這就是場景貼合原則。

2. 環境貼切-模擬現實世界對象

模仿現實世界的產品或者使用映射，能夠利用人們現有的知識，可以顯著的降低用戶的認知和學習困難，並增加他們的使用興趣。

比較好的案例就是iOS原生的計算器、指南針，微信紅包都是模仿了現實世界的產品

3. 環境貼切-符合現實世界隱喻

從現實世界中借鑑的設計元素可明顯降低用戶的認知和學習難度，並且增加興趣。

最有代表性的就是網易雲的音樂播放界面圖形隱喻表達。美團APP的母嬰類目icon的設計非常有趣，且非常容易理解和使用，讓人印象深刻。

4. 環境貼切-操作手勢符合聯想

使用的操作手勢，應該是用戶自然就能聯想到的，不要創造、更改操作手勢的意義。

5. 環境貼切-自然的動效

動效的加載樣式應符合自然規律，需要平緩過渡，而不是生硬的加載效果。

比如：網易雲音樂播放時唱片轉動、停止播放時唱片自動移開，有趣且有效。

三、用戶可控原則

用戶在使用產品的過程中，誤操作是經常發生的事情，系統應提供撤銷和重做功能，讓用戶具有對產品的控制性與自由度。

用戶可控原則的根本目標是讓用戶可以在界面自由操作，而且無需為操作不當承擔責任。

該原則在設計中的體現：

1. 可控原則-可自由導航

清晰便捷的導航方式，使用戶可自由控制返回和跳轉的頁面。

由於B端系統的複雜性，有些功能的層級會比較深。彈窗A中的某個操作可能會觸發彈窗B的彈出，如果彈窗A和B承載的功能具有父級和子級的關係，同樣需要考慮「返回」的功能以及清晰的層級關係。

2. 可控原則-可自由返回撤銷

用戶在使用系統的過程也是一個試錯的過程，系統要讓用戶覺得自己的行為是可控的，可以犯錯，並且在犯錯之後可以反悔。

用戶在使用產品時可以自由進退，遵循從哪裡來就返回到哪裡去的原則。當用戶誤操作時要給用戶提供撤銷、取消、重做等相關功能。不可逆的操作要給用戶明顯的提示。

比如微信聊天是可以撤回的，並且撤回之後還支持重新編輯；對於我這種打字總是出錯的人簡直就是福利。

iphone相冊刪除照片後，支持在短期內找回；在word中編輯文檔時，支持撤銷和恢復，保存的同時，還能查看歷史保存記錄。

回收站功能：讓用戶更有自由度，增加用戶安全感，可控的找回誤刪除資源。

3. 可控原則-不可逆轉的操作需要警告

系統在重要的不可逆轉的操作需要給用戶提供二次確認或者撤銷的功能，這樣可提高用戶的操作可控性。在產品設計上，防止用戶常見的誤操作。

比如很多產品在涉及到內容的刪除操作時，經常會有彈窗提醒，讓用戶再次確認。這樣是防止用戶誤操作帶來的刪除損失。用戶不用因為操作帶來心理負擔，從而提升操作可控性。

比如iPhone iOS系統：

• 常見的二次確認主要可以通過以下方式實現：通過文字提示，用戶閱讀後點擊是與否來進行下一步；
• 通過動作，用戶通過輸入特定字符或者完成驗證碼拖拽等操作才可進行下一步操作；
• 通過身份校驗，用戶需要提交個人身份信息以完成校驗；

四、一致性原則

整個系統要保持產品結構架構、導航、用語、色彩、操作行為交互的一致性與標準性，遵循平台慣例與行業標準。我們在設計中常見的製作平台規範，其實就是為了保證平台設計的一致性。

一致性原則的根本目的是保證產品的專業性，給用戶帶去統一的體驗感受。

該原則在設計中的體現：

1. 一致性-產品內部一致

遵循產品內部的慣例，可幫助用戶快速學習使用產品功能。產品內部的一致性包含：產品功能框架、文字、設計風格、布局、反饋等等。

比如：小熊藝術app，一款針對孩子學習美術的app，不管是首頁、個人中心以及加載等頁面，風格保持一致性都是主打清新黃色+可愛icon。黃色小熊更是在不同的合適的時機出現，banner、加載，課程動畫中等。不僅風格一致性、布局、反饋等產品內部保持一致性，也形成了統一的品牌傳達。

但是，有時候為了達到產品目標，偶爾也會故意採用不一致的設計。

比如：常見的對話框都將「確定」按鈕放在右邊位置，所以用戶在操作時，很容易產生條件反射，順手點擊右邊按鈕，然後才突然發現自己點錯了。雖然看起來有些彆扭甚至很多人不喜歡，但是很有效，這種設計在軟體卸載、App取消會員訂閱等操作中非常常見，主要是為了做一些心理暗示和引導，避免用戶卸載或退訂。

2. 一致性-交互行為一致

交互和用戶的習慣一致，意味著用戶不再需要重新學習，各種應用之間的切換沒有學習成本。

我們在前期已經培養好用戶的使用習慣，那麼就不要輕易改變，減少用戶的認知成本與學習成本。

例如：常見的頁面的後退或返回都在屏幕左上角、搜索欄都在屏幕最上方、菜單欄都懸浮在屏幕底部。

3. 一致性-疊代產品一致

當產品線進行更新疊代的時候，應該保留用戶既有的交互和操作習慣，用戶在上一個版本形成的交互認知在下一個版本是否能被沿用，這對於用戶來說在產品體驗上會造成很大的干擾。

比如微信的多年的疊代，底部tab功能一直都是這樣，主要功能入口一致沒有變化，就體現了疊代產品的一致性。

4. 一致性-同一團隊/公司產品線一致

Office軟體中包含的各個產品，其界面布局和設計風格都保持了高度一致，如下圖所示是PowerPoint和Word的界面，可以看出，二者的「插入」一級菜單下所包含功能的排列順序、布局方式乃至圖標圖形，都是高度類似的。

5. 一致性-設計語言一致

遵循統一的產品設計規範／邏輯。這裡的一致性包含產品和跨平台產品之間的一致性。確保整個系統的結構一致性、色彩一致性、操作一致性、反饋一致性、同種組件樣式保持一致等設計語言都遵循同一套設計規則。

比如，產品內相同顏色的反覆出現，為產品打造視覺錘符號，強化產品在用戶心中的記憶點。

符合平台設計規範，比如：蘋果系統參照人機互動設計指南設計規範，安卓系統參照Material Design設計規範，或者直接參照自己團隊的的設計規範，應該遵循慣例，並且保持系統的一致感，不要盲目地標新立異。

6. 一致性-業內產品保持一致

不知道你發現了沒，現在的電商、音樂、社交等等app越來越一樣了，一樣的交互，一樣的排版設計，基本上都遵循著類似的交互邏輯和視覺元素。

為什麼會這樣？同類軟體設計的趨同化，未必不是一件好事？

與業內產品保持一致，意味著用戶不再需要重新學習，就可以在各種應用中自由切換，用戶學習成本的降低，也意味著我們獲客成本從某種程度上被降低。

而這些約定俗成的規則和流程都被用戶不自覺地印刻在大腦中，成為一種自然的習慣，而獨特的設計，截然不同的規則，則常常會成為習慣以外的東西，引起混亂，讓初次上手的用戶感到受挫和沮喪。

如，在App底部的導航圖標中，「首頁」永遠排在第一個，個人中心（「我的」）永遠排在最後。並且對於類似「首頁」「購物車」「訂單」等常見按鈕，不同App的設計樣式都非常相似。如下圖三個不同音樂app的對比圖：

如果你特立獨行地把個人中心放在第一個位置，或者採用奇怪的圖標作為個人中心的icon，用戶使用時肯定會覺得彆扭。

五、防錯原則

防錯原則的根本目標是阻止錯誤行為，避免進一步犯錯，指引用戶正確的完成操作行為。

「防止錯誤」主要分為三個階段：錯誤行動發生前，引導用戶向正確的方向前進；用戶觸碰到危險操作時給予提示；危險操作發生之後，提供撤回的入口。

該原則在設計中的體現：

1. 在執行危險操作前做設計

比一個優秀的錯誤提醒彈窗更好的設計方式，是在這個錯誤發生之前就避免它。它可以幫助用戶排除一些容易出錯的情況，或在用戶提交之前給他一個確認的選項。

通常情況下，按鈕置灰表示對應功能或操作無法使用，這也是防止錯誤的一條有效途徑，因為用戶通過按鈕樣式就可獲知其狀態，提前規避無效的提交操作。

當然，不是只要功能或操作無法使用時，就應該將對應的按鈕置灰。

其實更好的做法是填寫完標題後按鈕不置灰，點擊完成按鈕後定位或高亮必填項，讓用戶更容易識別錯誤點。

比如在登錄時，只有輸出信息後才可以點擊登錄按鈕，未輸入信息時，按鈕是不可以點擊的狀態。通過系統主動對用戶進行操作限制，幫助用戶避免發生錯誤。

限制用戶的選擇並不是一個好主意，但是如果有明確的規則來定義可接受的選項，那麼限制用戶可以輸入的類型是一個很好的策略。

再比如輸入驗證碼頁面，為了防止用戶多輸入或者少輸入驗證碼，只給到四個輸入框，讓用戶只能輸入四位數字，減少輸入錯誤的機率。

2. 在執行危險操作中做設計

提供清晰的提示，防止用戶犯錯，提示包括標籤、文字、顏色、以及反饋狀態等。利用顏色，動效提供警示信息，比如常見的微信退出的按鈕是紅色的，狀態未完成的標籤是紅色的等等。

如：表單填寫過程中讓用戶及時知道輸入格式，出錯原因，避免填寫完成後再提醒，浪費用戶時間。

範圍限制：限制用戶的選擇並不是一個好主意，但是如果有明確的規則來定義可接受的選項，那麼限制用戶可以輸入的類型是一個很好的策略。比如：電影購票時，已購買的位子不會再提供選擇，很好的避免了買重的問題

3. 危險操作發生之後做設計

特別要注意在用戶操作具有毀滅性結果的功能時要有提示，防止用戶犯不可挽回的錯誤，需打斷用戶，提示用戶是否要進行此操作，讓用戶有更多的思考時間。所以在一些不可逆的操作中二次確認是非常有必要的。

這條原則很重要也很常見。在刪除信息時，系統會讓用戶確認刪除，也就是我們常說的二次確認，電商平台允許在一定的規則下取消訂單等等。

總結

尼爾森是大可用性原則可靈活運用於各個地方，可以是互動設計，也可以是界面設計，深入了解該設計原則，可以找到更好的解決方案，提高用戶的使用體驗。

要注意的是，這10項原則是啟發式（heuristics）的、廣泛的經驗法則，而不是具體的規定。

• 狀態可見原則：位置可見、數量可見、狀態可見；
• 環境貼近原則：語言應該是用戶所能理解和習慣的；
• 用戶可控原則：可見導航、關閉與返回、撤銷與重做；
• 一致性原則：產品內部一致、交互一致、疊代產品一致、同一產品線一致、設計語言一致、業內產品一致；
• 防錯原則：操作前預警、操作中確認、操作後可撤回；

好了，明天我們繼續聊聊後面的幾個原則。文中如果有不嚴謹、錯誤的地方希望大家給予指正，希望大家可以多多點讚評論鼓勵下，最後感謝您的耐心閱讀。

本文由 @三原設計 原創發布於人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash ，基於 CC0 協議

該文觀點僅代表作者本人，人人都是產品經理平台僅提供信息存儲空間服務。