Nielsen Norman Group的合伙人Jakob Nielsen和另一個知名的易用性專家Rolf Molich，一起在1990年創(chuàng)作了這十條用戶界面的設(shè)計指南。這篇文章就是教你如何在你的設(shè)計中遵循這十條經(jīng)驗(yàn)法則來提升設(shè)計的易用性、效用和合意性。

我們可以應(yīng)用Jakob Nielsen和Rolf Molich的十條用戶界面指南，心懷用戶的需求和期待來學(xué)習(xí)設(shè)計。這些啟發(fā)已經(jīng)被應(yīng)用在一些最成功公司的很多產(chǎn)品中，比如蘋果、谷歌和Adobe。這些公司的設(shè)計團(tuán)隊將這些法則應(yīng)用到他們的設(shè)計過程中，而進(jìn)一步的證據(jù)就體現(xiàn)在這些公司發(fā)布并共享的用戶界面指南上。

Nielsen和Molich的十條用戶界面設(shè)計指南

Jakob Nielsen是大名鼎鼎的網(wǎng)絡(luò)易用性研究專家，也是Nielsen Norman Group的合伙人。他和另一個知名的易用性專家Rolf Molich，一起在1990年創(chuàng)作了這十條用戶界面的設(shè)計指南。值得注意的是，他們創(chuàng)作的十條設(shè)計指南，和Ben Shneiderman的 “八條黃金法則”在內(nèi)容上有很大的重疊。這十條設(shè)計指南，是在Ben Shneiderman的“八條黃金法則”出版發(fā)表的4年后誕生的，是對Shneiderman觀點(diǎn)的重申。

1、系統(tǒng)狀態(tài)的可見性

系統(tǒng)始終要在合理的時間內(nèi)，通過適當(dāng)?shù)姆答?，讓用戶知道?dāng)前的狀況。

2、讓系統(tǒng)和真實(shí)世界匹配

系統(tǒng)應(yīng)該使用用戶的語言，包括用戶熟悉的詞語、詞組和概念，而不是系統(tǒng)用語，遵循真實(shí)世界的習(xí)慣，使信息的表達(dá)自然且有邏輯性。

3、用戶的操控和自由

為用戶提供返回上一步的數(shù)字空間，包括撤銷和重做上一個動作。

4、一致性和標(biāo)準(zhǔn)化

用戶界面設(shè)計師應(yīng)該確保圖形元素和使術(shù)語都在不同的平臺上保持統(tǒng)一。比如，一個按鈕可以代表一個種類或一個概念，不應(yīng)該在用戶使用不同屏幕的時候代表不同的概念。

5、錯誤預(yù)防

無論何時，設(shè)計系統(tǒng)時都要盡量把出現(xiàn)潛在錯誤的可能降到最小。用戶不喜歡被叫住去檢測和修復(fù)問題，因?yàn)檫@些問題有時候是超出他們的專業(yè)知識水平的。兩種可能預(yù)防錯誤的方式是，消除或者標(biāo)記出那些可能導(dǎo)致錯誤的動作。

6、識別而不是回想

當(dāng)用戶探索界面的時候，我們需要通過維護(hù)任務(wù)相關(guān)信息，把認(rèn)知負(fù)荷降到最低。人類的注意力是有限的，我們的短期記憶只能同時有五樣?xùn)|西。由于短期記憶的局限，設(shè)計師應(yīng)該確保用戶可以簡單地識別信息，但不能從片段話的對話中回想信息。識別某種東西總是比回想更容易，因?yàn)樽R別的過程中包括感知線索，會幫助我們伸入廣闊的記憶海洋中，相關(guān)的信息會從記憶中浮現(xiàn)。比如我們經(jīng)常會發(fā)現(xiàn)考試中的選擇題比簡答題更容易，這是因?yàn)檫x擇題要求我們?nèi)プR別答案，而不是在記憶里回想答案。

7、靈活性和效率

隨著用戶使用系統(tǒng)越來越多，他們就需要用更少的交互更快地導(dǎo)航。這個可以通過使用縮寫、功能鍵、隱藏命令和宏工具來達(dá)到。用戶應(yīng)該能夠自定義界面去滿足自己的需求，從而通過更簡便的方法完成它們頻繁使用的動作。

8、審美和極簡主義設(shè)計

去除繁雜實(shí)現(xiàn)極簡。所有不必要的信息都是在挑戰(zhàn)用戶有限的注意力，可能會影響用戶對于有用信息的獲取。因此，在顯示的頁面上我們只放與當(dāng)前任務(wù)相關(guān)的必要元素，同時提供清晰的可視化的導(dǎo)航，方便用戶找到其他頁面的信息。

9、幫助用戶識別，診斷和修復(fù)錯誤

設(shè)計師應(yīng)該假定用戶是不明白技術(shù)術(shù)語的，因此我們應(yīng)該盡可能用平實(shí)的語句描述錯誤信息，保證用戶不會在理解上感到困惑。

10、幫助和資料

理想狀態(tài)下，我們希望用戶可以輕松在系統(tǒng)中找到他們需要的信息，無須尋求任何資料的幫助。然而，對于一些類型的幫助，資料文件或許是必要的。當(dāng)用戶需要幫助的時候，我們需要保證他們可以很容易找到針對任務(wù)的幫助，用合適的方式指導(dǎo)他們一步步得到解決問題的方法。

谷歌（Google），這個價值不菲的科技公司巨頭，就在他們的設(shè)計中反映了這些法則。谷歌的首席設(shè)計師Jon Wiley曾經(jīng)在2012年說：

當(dāng)我思考設(shè)計和創(chuàng)建好的用戶體驗(yàn)的時候，我通常會從以下三點(diǎn)來著手：易用性、效用和合意性。

Nielsen和Molich的十條用戶界面設(shè)計原則很好地涵蓋了用戶體驗(yàn)的三個關(guān)鍵點(diǎn)，這就意味著按照這些原則做的話，就非常有可能提升設(shè)計的用戶體驗(yàn)。

學(xué)習(xí)下Adobe如何運(yùn)用Nielsen和Molich的十條用戶界面設(shè)計指南

Adobe 公司是北美的一個大型計算機(jī)軟件公司，也是運(yùn)用這十條用戶界面設(shè)計原則走向成功的好例子。他們最流行的產(chǎn)品，圖片編輯軟件Photoshop，在它的用戶界面上就展現(xiàn)了這些設(shè)計原則。

讓我們仔細(xì)看看Photoshop是如何反映這些設(shè)計指南的，說不定我們也能從中受到啟發(fā)，學(xué)到如何運(yùn)用這些原則來提升設(shè)計的易用性、效用和合意性。

1. 系統(tǒng)狀態(tài)的可見性

Photoshop視覺化地為用戶展示他們的動作。比如，當(dāng)用戶移動圖層的時候，他們可以視覺化地看到圖層好像真的在立體空間里被拖拽了。

版權(quán)所有: Adobe Systems Incorporated. 版權(quán)條款和許可: 合理使用

當(dāng)用戶拖拽一個圖層的時候，圖形光標(biāo)從一個伸直的手變成了一只抓取的手。著讓用戶更容易理解當(dāng)前系統(tǒng)的狀態(tài)。除此以外，Adobe選擇用“手”作為圖形光標(biāo)，符合第二條設(shè)計指南。

2. 讓系統(tǒng)和真實(shí)世界匹配

Photoshop在語言使用和呈現(xiàn)方式上都模仿了真實(shí)世界，目標(biāo)用戶都會明白，它的信息結(jié)構(gòu)和用語都是攝影和印刷媒體中常用的。例如常見詞語“RGB、色相/飽和度/亮度、CMYK” 代表顏色，減淡工具和加深工具的圖標(biāo)設(shè)計模仿了傳統(tǒng)的洗照片暗房技術(shù)中使用的工具。

版權(quán)所有: Adobe Systems Incorporated. 版權(quán)條款和許可: 合理使用

Photoshop使用了“曝光”，這個在攝影界常用的詞匯。

3. 用戶的操控和自由

在用戶操作過程中的每一步，Photoshop都給了用戶操縱的自由。比如，當(dāng)用戶對一個圖片做改動的時候，或者加藝術(shù)效果的時候，如果他們做錯了，他們可以方便快捷地返回上一步。

版權(quán)所有: Adobe Systems Incorporated. 版權(quán)條款和許可: 合理使用

用戶可以用編輯菜單中的“返回上一步”和“重做下一步”來操控動作，或者他們也可以用Photoshop的快捷鍵來返回上一步，Alt+Ctrl+Z。

4. 一致性和標(biāo)準(zhǔn)化

Photoshop的菜單在格局、外觀和感覺上保持了一個標(biāo)準(zhǔn)。他們也使用了大家熟知的詞匯，比如“新建”，“打開”，“保存為”等等。

版權(quán)所有: Adobe Systems Incorporated. 版權(quán)條款和許可: 合理使用

“文件”菜單下有很多大家很熟悉的選項(xiàng)。

5. 錯誤預(yù)防

為了預(yù)防用戶在操作過程中出現(xiàn)錯誤，當(dāng)用戶的光標(biāo)懸停在工具上時，Photoshop會提供標(biāo)簽提示，對工具進(jìn)行簡要描述，幫助用戶確定他們挑選正確的工具來完成他們當(dāng)前的任務(wù)。

版權(quán)所有: Adobe Systems Incorporated. 版權(quán)條款和許可: 合理使用

當(dāng)用戶的光標(biāo)懸停在橡皮圖標(biāo)上時，Photoshop顯示出“橡皮工具”標(biāo)簽提示。

6. 識別而不是回想

不管是在選擇藝術(shù)濾鏡菜單時，還是在打開新的圖片文件時，Photoshop都為用戶提供了示例試圖或圖片預(yù)覽，來幫助用戶做出正確的選擇。這讓用戶可以在視覺上識別出他們在尋找的東西，而不是去回想功能或文件的名稱或者用關(guān)鍵詞來搜索?？赡苣阋彩褂眠^其他的圖片編輯軟件，讓你通過回想并輸入名稱來找到你需要的文件。因?yàn)槲覀冋掌奈募?jīng)常都是這樣的：29412_09342.JPG，所以想回想起文件名真的很難。

版權(quán)所有: Adobe Systems Incorporated. 版權(quán)條款和許可: 合理使用

用戶可以通過日落圖片的縮略圖來識別和選取圖片。

7. 靈活性和效率

Photoshop用戶大愛這個軟件的原因之一是它的靈活性且高效率。用戶可以利用它的靈活性來組織和添加組件到他們的工作區(qū)，他們也可以保存自己的工作區(qū)，以后操作時可以提高效率。

版權(quán)所有: Adobe Systems Incorporated. 版權(quán)條款和許可: 合理使用

用戶可以保存自己的工作區(qū)設(shè)置。

8. 審美和極簡主義設(shè)計

Photoshop左側(cè)的工具欄只顯示了圖標(biāo)，并被放在了窗口的左側(cè)，這很有效地化繁瑣為極簡，保持了極簡主義美學(xué)。

版權(quán)所有: Adobe Systems Incorporated. 版權(quán)條款和許可: 合理使用

Photoshop工具欄是極簡主義設(shè)計，通過只顯示圖標(biāo)來避免繁瑣。

9. 幫助用戶識別、診斷和修復(fù)錯誤

當(dāng)用戶使用中發(fā)生錯誤時，Photoshop會彈出會話框，告訴用戶什么出錯了，怎樣修復(fù)錯誤。

版權(quán)所有: Adobe Systems Incorporated. 版權(quán)條款和許可: 合理使用

上圖中的錯誤信息是當(dāng)用戶錯誤使用“仿制圖章”工具時彈出的，Photoshop在會話框中解釋了什么出錯了，出錯的原因是什么，以及用戶接下來應(yīng)該怎么做。

10. 幫助和資料

用戶可以在主菜單中輕松獲得幫助和資料文件。從這里，你可以找到不同的幫助主題和如何使用軟件的完整教程。

版權(quán)所有: Adobe Systems Incorporated. 版權(quán)條款和許可: 合理使用

這個窗口里顯示了一些幫助信息，是關(guān)于如何創(chuàng)建網(wǎng)頁圖形界面中的滾動條的。用戶也能在左側(cè)的菜單中選擇幫助的主題。

應(yīng)用用戶界面設(shè)計指南，十個步驟提升易用性、效用和合意性。

作為一個設(shè)計師，你應(yīng)該具備有理有據(jù)地批判自己和他人設(shè)計的能力。應(yīng)用Nielsen和Molich的評估界面設(shè)計的十條法則，會幫助你識別潛在的問題，并指導(dǎo)你和你的團(tuán)隊去創(chuàng)造出更好的用戶體驗(yàn)。這里有一個工作表，你可以用它來練習(xí)，找一個網(wǎng)站，看看這十條法則中哪些被應(yīng)用到了，哪些被違反了。最后，通過這十條法則提升網(wǎng)站和應(yīng)用吧。

小結(jié)

當(dāng)你運(yùn)用這十條設(shè)計指南時，你會懷著易用性、效用和合意性去設(shè)計。和來自蘋果，谷歌和Adobe等大公司的設(shè)計師一樣，你也可以用這些設(shè)計指南去研究、審視和支撐你的設(shè)計決定，可以自信的創(chuàng)造出可用并精美的設(shè)計。試著用這十條指南，做做上面的小練習(xí)。

原作者：Euphemia Wong

譯者：天蛙 ??審校：Ying

原文鏈接：https://www.interaction-design.org

本文由 @天蛙 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。