UI范 - 聽說掌握這十大設計原則，可以更容易進大廠？－鑽石舞台

全國優秀設計師社群回覆：進群

------------------------------------------------

↓關注 UI范 ·打造你的知識武器庫↓

尼爾森Jakob Nielsen

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

十大可用性原則的內容：

1、狀態可見原則

2、環境貼切原則

3、可控原則

4、一致性原則

5、防錯原則

6、協助用戶記憶原則

7、靈活高效原則

8、審美和簡約原則

9、容錯原則

10、人性化幫助原則

一、狀態可見原則

系統應該讓用戶時刻清楚當前發生了什麼事情，也就是快速的讓用戶了解自己處於何種狀態、對過去發生、當前目標、以及對未來去向有所了解，一般的方法是在合適的時間給用戶適當的反饋，防止用戶使用出現錯誤。系統應該通過在合理時間內的適當反饋，向用戶通知正在發生的事情或者當前的狀態。不要蒙蔽用戶，溝通是所有關係的基礎，無論人還是設備。

1.合理時間

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

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

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

2.適當反饋

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

狀態反饋

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

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

進度反饋

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

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

位置反饋

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

比如標籤欄、導航欄通過選中狀態來定位當前所在頁面，閱讀、看視頻、聽音樂時系統會記錄當前的位置，下次打開後繼續。

反饋方式多樣化

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

比如京東，通過產品圖縮小-加入購物車的動效來反饋「商品已加入購物車」，直觀形象。

案例一

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

案例二

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

二、環境貼切原則

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

1.使用目標用戶的語言

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

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

2.模擬現實世界的對象

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

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

案例一

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

案例二

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

三、可控原則

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

案例一

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

案例二

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

四、一致性原則

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

結構一致性

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

色彩一致性

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

操作一致性

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

反饋一致性

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

文字一致性

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

五、防錯&防呆原則

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

案例一

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

案例二

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

六、協助用戶記憶原則

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

案例一

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

案例二

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

七、靈活高效原則

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

1.提供快捷入口

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

2.允許用戶重複操作

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

3.提供默認選項通過提供系統默認選項，而減少用戶多餘的操作。比如美團、攜程等當地服務類產品，會默認選擇當前定位的城市；購物會選擇默認收貨地址等

案例一

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

案例二

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

八、：審美和簡約原則

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

案例一

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

案例二

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

九、容錯原則

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

案例一

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

案例二

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