交互理論 | 深度解析尼爾森十大交互設計原則在設計中的用法

Jakob Nielsen（雅各布·尼爾森）的十大交互設計原則。它們被稱為「啟發式」，因為它們是廣泛的經驗法則，而不是特定的可用性指導原則。因此，我們不能把它上升為一種標準，而是應該當做一種經驗來學習，然後跟現實中的設計結合來使用。接下來，作者通過一些具體的實例來跟大家深度解析尼爾森十大交互設計原則在設計中的用法～

一、Jakob Nielsen（雅各布·尼爾森）簡介：

Jakob Nielsen（雅各布·尼爾森）是畢業於哥本哈根的丹麥技術大學的人機交互博士 ， 他擁有79項美國專利,專利主要涉及讓互聯網更容易使用的方法。尼爾森在2000年6月,入選了斯堪的納維亞互動媒體名人堂,2006年4月,並被納入美國計算機學會人機交互學院，被賦予人機交互實踐的終身成就獎 。他還被紐約時報稱為「Web 易用性大師」，被 Internet Magazine 稱為 「易用之王」。

二、尼爾森十大交互設計原則深度解析：

原則一：狀態可見原則（Visibility of system status ）

系統應該讓用戶時刻清楚當前發生了什麼事情，也就是快速的讓用戶了解自己處於何種狀態、對過去發生、當前目標、以及對未來去向有所了解，一般的方法是在合適的時間給用戶適當的反饋，防止用戶使用出現錯誤。

案例一：

比如今日頭條的下拉刷新功能：頭條頁面的刷新功能使用的是下拉刷新的交互方式，當用戶下拉頁面時，頁面狀態欄跟內容區中間會出現「新年快樂」的提示，當我鬆開頁面中間會出現「推薦中」的動態提示，載入完畢之後中間出現一條「今日頭條推薦引擎有8條更新」的文字提示；這一系列的提示就是我們所說的動態可見原則，如下圖：

案例二：

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

原則二：環境貼切原則（Match between system and the real world）

軟體系統應該使用用戶熟悉的語言、文字、語句，或者其他用戶熟悉的概念，而非系統語言。軟體中的信息應該盡量貼近真實世界，讓信息更自然，邏輯上也更容易被用戶理解。

案例一：

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

案例二：

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

原則三：用戶可控原則（User control and freedom）

用戶常常會誤觸到某些功能，我們應該讓用戶可以方便的退出。這種情況下，我們應該把「緊急出口」按鈕做的明顯一點，而且不要在退出時彈出額外的對話框。很多用戶發送一條消息、總會有他忽然意識到自己不對的地方，這個叫做臨界效應；所以最好支持撤銷/重做功能。

案例一：

比如微信聊天中的撤回功能：兩個人在微信中聊天的時候，我發了一條消息或者表情，突然覺得不合適，我可以在長按這條消息或者表情，在出現的選擇框中選擇撤回，然後重新編輯發送，來避免一時沒想好而錯發消息可能給對方或者自己造成困擾，這就是用戶可控原則，具體看下圖：

案例二：

比如谷歌相冊刪除照片之後的撤銷功能：在使用谷歌相冊的時候，我們會對照片做一些操作，比如照片的刪除，當我在谷歌相冊中刪除一張照片的時候，它會在底部出現一條提示框，框內後邊就會出現撤銷的提示，這也是用戶可控原則的體現，具體看下圖：

原則四：一致性原則（Consistency and standards）

對於用戶來說，同樣的文字、狀態、按鈕，都應該觸發相同的事情，遵從通用的平台慣例；也就是，同一用語、功能、操作保持一致。軟體產品的一致性包括以下五個方面：

（1）結構一致性：保持一種類似的結構，新的結構變化會讓用戶思考，規則的排列順序能減輕用戶的思考負擔；

案例：

例如微信每個模塊的條目布局：微信中每個模塊的條目都有統一的「圖標+文字信息」的結構樣式，能讓用戶快速了解朋友圈、掃一掃、搖一搖、看一看、搜一搜、附近的人、漂流瓶、購物、遊戲及小程序等功能都是作什麼的，這就是結構一致性的體現，如下圖：

（2）色彩一致性：產品所使用的主要色調應該是統一的，而不是換一個頁面顏色就不同；

案例：

例如網易雲音樂的顏色：網易雲音樂的圖標顏色與界面的主色均為紅色，也包括其中一些標籤和強調的文字顏色都是紅色，整個界面除了圖片的有效信息外，都通過灰、白、紅色來呈現，界面保持了很好的一致性，這就是色彩一致性原則，如下圖：

（3）操作一致性：能讓產品更新換代時仍然讓用戶保持對原產品的認知，減小用戶的學習成本；

案例：

比如安卓版微信、支付寶和釘釘APP中左上角的返回操作：它們三個安卓版的應用內返回上一級操作，都是通過頂部左側的返回按鈕進行的，當然也可以通過安卓的物理返回鍵，這就是操作一致性的體現，如下圖：

（4）反饋一致性：用戶在操作按鈕或者條目的時候，點擊的反饋效果應該是一致的；

案例：

比如安卓版手機QQ信息列表的打開方式：它的信息都是列表式結構，不管你點擊那一行條目，下一級界面都是由右往左滑出，點擊頂部左上角的返回按鈕會從左往右滑回，體驗相當一致；這就是反饋一致性的體現，如下動圖：

（5）文字一致性：產品中呈現給用戶閱讀的文字大小、樣式、顏色、布局等都應該是一致的；

案例：

例如微信幾個關鍵界面的字體：下圖我用紅色框框起來的條目部分的文字，三個主界面不盡相同，但是，字體大小、顏色、布局的樣式都一樣，這樣讓整個APP視覺上看起來很舒服，這就是字體一致性，因此，我們在做視覺設計的時候盡量使用同意風格的文字。

原則五：防錯原則（Error prevention）

比一個優秀錯誤提醒彈窗更好的設計方式，是在這個錯誤發生之前就避免它。可以幫助用戶排除一些容易出錯的情況，或在用戶提交之前給他一個確認的選項。在此，特別要注意在用戶操作具有毀滅性效果的功能時要有提示，防止用戶犯不可挽回的錯誤。

案例一：

比如知乎安卓版本的登錄操作：當用戶在知乎中登錄時，在沒有填寫完手機號碼和密碼前，底部的登錄按鈕是置灰不可點擊的，只有兩項都填寫完整底部的登錄按鈕才會變為可點擊狀態，也就會藍色的，這就是為了防止用戶犯更多錯誤，也是防錯原則的一種體現，如下圖：

案例二：

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

原則六：易取原則（Recognition rather than recall）

通過把組件、按鈕及選項可見化，來降低用戶的記憶負荷。用戶不需要記住各個對話框中的信息。軟體的使用指南應該是可見的，且在合適的時候可以再次查看。

案例一：

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

案例二：

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

原則七：靈活高效原則（Flexibility and efficiency of use）

汽車油門—新手用戶常常看不見，而且對於高手來說可以通過它快速與汽車互動。這樣的系統可以同時滿足有經驗和無經驗的用戶。允許用戶定製常用功能。

案例一：

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

案例二：

比如安卓版QQ聊天常用表情模塊：安卓版本的QQ聊天界面表情彈窗中會有一個「常用表情」的模塊，它把個人平時使用頻率或者次數最多的表情進行歸類，當用戶使用的時候能很快的找到自己喜歡或者常用的表情，提高了聊天效率，體驗很好，這也是靈活高效原則的體現，如下圖：

原則八：優美且簡約原則（Aesthetic and minimalist design）

對話中的內容應該去除不相關的信息或幾乎不需要的信息。任何不相關的信息都會讓原本重要的信息更難被用戶察覺。

案例一：

蘋果手機中自帶的軟體（IOS11設計規範）：在新版本的蘋果手機中自帶的軟體中標題都屬於字體放大，界面簡潔的設計風格；還有蘋果自帶的音樂軟體中，段落中的標題和正文區別是很明顯的，標題明顯很大，而正文部分相對較小，這就是優美簡約原則的體現，如下圖：

案例二：

例如安卓版網易雲音樂及QQ音樂播放頁面：網易雲音樂和QQ音樂APP音樂播放界面，從視覺及功能布局上面做的相當不錯，美觀簡約、功能主次分明、用戶體驗不錯；也是優美且簡約原則的一種體現，如下圖：

原則九：容錯原則（Help users recognize, diagnose, and recover from errors）

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

案例一：

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

案例二：

例如Twitter註冊頁面的錯誤提示：用戶在註冊Twitter賬號時，第一步要輸入名字和手機號碼，當用戶輸入正確的時候，輸入框後邊會有綠色的對勾圓圈，提示用戶輸入正確，可以進入下一步操作了，而當用戶輸入錯誤的時候，輸入框會變為紅色並且在下方出現紅色字的錯誤提示，這樣讓用戶很清楚的知道用戶輸入錯誤以及錯誤的原因，這樣用戶就知道怎麼修改了，這也是容錯原則的一種體現，如下圖：

原則十：人性化幫助原則（Help and documentation）

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

案例一：

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

案例二：

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

三、總結

以上就是我對Jakob Nielsen（雅各布·尼爾森）的十大交互設計原則的理解和實例解讀，從中學習到了很多的設計經驗和技巧，希望對大家有所幫助。

最後，謝謝大家的閱讀，喜歡就點個贊哦～～筆芯～～

參考文獻：https://www.nngroup.com/articles/ten-usability-heuristics/

作者：熊貓小生，交互設計師，4年互聯網產品設計經驗，曾主導多個互聯網產品的設計工作。

本文由 @熊貓小生 原創發佈於人人都是產品經理。未經許可，禁止轉載

原文鏈接：交互理論 | 深度解析尼爾森十大交互設計原則在設計中的用法