神譯局是36氪旗下編譯團(tuán)隊(duì)，關(guān)注科技、商業(yè)、職場(chǎng)、生活等領(lǐng)域，重點(diǎn)介紹國外的新技術(shù)、新觀點(diǎn)、新風(fēng)向。

編者按：在工作和生活中，總有些不成文的規(guī)矩是不能觸碰的，否則就要付出慘烈的代價(jià)。在用戶界面設(shè)計(jì)的過程中，也有這么一些規(guī)矩。了解它們、以這些規(guī)則為指導(dǎo)設(shè)計(jì)界面，可以有效提升用戶的體驗(yàn)。在這篇文章中，作者將為大家介紹一些用戶界面設(shè)計(jì)的原則，希望它可以幫助你設(shè)計(jì)出更人性化、體驗(yàn)更流暢的界面。本文來自Medium，作者Cristian Bosch，原文標(biāo)題“10 interaction design rules you must never break”。

圖片來自Medium

今天為大家介紹的原則來自全球知名的UX公司諾曼·尼爾森集團(tuán)，這些原則也被稱為“尼爾森十大可用性原則”。諾曼·尼爾森集團(tuán)由美國著名的多恩·諾曼（Don Norman）創(chuàng)辦，他是國際知名的心理學(xué)家和當(dāng)代認(rèn)知心理學(xué)的應(yīng)用先驅(qū)，著有《設(shè)計(jì)心理學(xué)》一書。

一.系統(tǒng)可見性原則（Visibility of System Status）

這個(gè)原則是說，系統(tǒng)需要及時(shí)告知用戶現(xiàn)在發(fā)生了什么，幫助用戶了解當(dāng)下的情況，及時(shí)反饋。

圖片來自Medium

要持續(xù)不斷地為你的用戶提供信息，告訴他們現(xiàn)在走到了哪一步，讓他們了解自己在系統(tǒng)中所處的位置，從而給用戶一種“掌控感”。

比如，我剛剛把這個(gè)物品成功加進(jìn)購物車了嗎？我的訂單狀態(tài)怎么樣了？我剛才修改的文件保存好了嗎？這個(gè)下載項(xiàng)目進(jìn)行到哪里了？現(xiàn)在發(fā)生了什么事？

給用戶明確的反饋，讓他們可以直觀地看見過程和結(jié)果，而不是讓用戶在黑暗中猜疑，這是一個(gè)基本原則。

二.將真實(shí)世界與系統(tǒng)匹配

你所設(shè)計(jì)的系統(tǒng)必須要講用戶可以聽懂的語言，要盡量使用用戶可以聽懂的單詞、句子和概念，而不是把系統(tǒng)術(shù)語擺在頁面上，造成理解上的困難。當(dāng)你想要呈現(xiàn)出某些信息時(shí)，要讓信息以自然且符合人的認(rèn)知的方式出現(xiàn)。

圖片左邊顯示一個(gè)文件夾里有三份文件，而右邊是純粹的系統(tǒng)術(shù)語｜圖片來自Medium

使用用戶熟悉的語言和圖標(biāo)，不要把問題復(fù)雜化。用戶的語言和圖標(biāo)也要盡量簡潔易懂，直奔主題，讓受眾可以更迅速地理解。另外，還可以參考心理學(xué)模型，作出可以讓用戶心理更容易接受的設(shè)計(jì)。

將圖標(biāo)引入用戶頁面設(shè)計(jì)可以說是交互設(shè)計(jì)界的重大的突破之一。在GUI（圖形用戶界面）出現(xiàn)之前，計(jì)算機(jī)只能將用戶的命令轉(zhuǎn)化成復(fù)雜的系統(tǒng)術(shù)語再執(zhí)行。每次用戶想要重新下命令，就要再經(jīng)過一輪系統(tǒng)術(shù)語的轉(zhuǎn)化。

圖標(biāo)的引入改變了這一切。用戶不必去理解復(fù)雜的系統(tǒng)術(shù)語，只要看文件夾、文件和手形圖標(biāo)，就能夠理解所有含義而無須解釋。在上圖所示的圖標(biāo)中，我們其實(shí)就引用了現(xiàn)實(shí)世界中的心理模型。

三.一致性原則

界面的語言、圖標(biāo)、情景等保持一致。用戶不需要考慮這些不同的文字、情景或者操作是否指的是一件事或?qū)е峦瑯拥慕Y(jié)果。

圖片來自Medium

一致性其實(shí)有兩種類型，一種是內(nèi)部一致，一種是外部一致。

內(nèi)部一致性指的是網(wǎng)站或者應(yīng)用的模式要保持不變。舉個(gè)例子，網(wǎng)站或者應(yīng)用里的鏈接應(yīng)該保持大小、顏色一致，每個(gè)操作對(duì)應(yīng)的圖標(biāo)也應(yīng)該是一致的。

外部的一致是指你的網(wǎng)頁或應(yīng)用應(yīng)該和人們熟悉的語言、系統(tǒng)保持一致。比如“購物車”這個(gè)概念。大多數(shù)人都知道購物車在應(yīng)用里面是什么意思，你不需要再創(chuàng)造出一個(gè)新的名詞去代替它，否則就會(huì)讓用戶感到混亂。盡量和人們的習(xí)慣保持一致，標(biāo)新立異不總是會(huì)有好的結(jié)果。

四.用戶的自由控制原則

用戶經(jīng)常會(huì)在系統(tǒng)中出現(xiàn)“反悔”心理，想要退出當(dāng)前的操作，這時(shí)候應(yīng)該為用戶提供一個(gè)“緊急出口”，即提供撤銷和重做功能。

圖片來自Medium

永遠(yuǎn)給用戶提供一個(gè)簡單易尋的“出口”。不要讓用戶在誤操作的情況下陷入某種僵局之中。舉個(gè)例子，當(dāng)你在設(shè)計(jì)一個(gè)應(yīng)用的支付界面時(shí)，應(yīng)該保證用戶可以退出來繼續(xù)購物。如果他們想在應(yīng)用上執(zhí)行某個(gè)操作，應(yīng)該給他們提供撤回功能，讓他們即使到了最后一分鐘也可以改主意。

五.防錯(cuò)原則

比起在出現(xiàn)錯(cuò)誤時(shí)及時(shí)彈出錯(cuò)誤信息，我們更應(yīng)該把精力放在用心設(shè)計(jì)、防止錯(cuò)誤發(fā)生上面。在用戶開始操作之前，就應(yīng)該防止用戶混淆選擇、作出錯(cuò)誤的選擇。

圖片來自Medium

當(dāng)用戶在進(jìn)行一項(xiàng)非常重要的操作時(shí)，比如刪除一個(gè)文件，或者給1000個(gè)人群發(fā)郵件，請(qǐng)確保用戶能夠收到相關(guān)提示，知道他們正在完成一項(xiàng)重要的操作。這種提示可以是一個(gè)確認(rèn)步驟，也可以是一個(gè)對(duì)話框提醒風(fēng)險(xiǎn)。有了這么一項(xiàng)提示功能，可以防止用戶因?yàn)檎`操作犯下重大錯(cuò)誤。

六.識(shí)別比回憶更好

在界面設(shè)計(jì)中，應(yīng)該盡可能地減少用戶的記憶負(fù)擔(dān)。所有的操作、提示、選項(xiàng)應(yīng)該直觀地展示在頁面上。用戶無需記住所有頁面的所有信息。在一些情況下，系統(tǒng)還應(yīng)該為用戶提供檢索功能。

圖片來自Medium

用戶體驗(yàn)設(shè)計(jì)師的核心目標(biāo)之一就是減少用戶在認(rèn)知上的負(fù)擔(dān)?？茖W(xué)研究顯示，記憶是一種消耗巨大的活動(dòng)。

廣義上的記憶通常以兩種方式存在：識(shí)別和回顧。

識(shí)別就是看到某件事情，立馬知道是什么，比如看到朋友的臉，立刻知道這位朋友是誰。而回憶則不同，回憶需要你從記憶中找到某一個(gè)事物的相關(guān)信息，比如一個(gè)人的名字。這通常是最耗時(shí)耗力的過程，因?yàn)槿说拇竽X需要組合多種信息才能真正找到想要的內(nèi)容。

我們希望交互界面可以減少用戶“回憶”的成分，增加“識(shí)別”的比例。比如，我們現(xiàn)在會(huì)用一個(gè)小房間的圖標(biāo)表示主頁，用一個(gè)鉛筆的圖標(biāo)表示編輯。這些圖標(biāo)是大家通用的，也就減少了額外需要記憶的內(nèi)容，減少了用戶的負(fù)擔(dān)。

七.靈活高效的原則

有經(jīng)驗(yàn)的用戶通?？梢栽谌藱C(jī)交互的過程中迅速掌握系統(tǒng)，新手用戶則不行。要設(shè)計(jì)出完善的系統(tǒng)，同時(shí)滿足有經(jīng)驗(yàn)的用戶和經(jīng)驗(yàn)不足的新手，保持靈活高效。

圖片來自Medium

如果用戶在應(yīng)用中不得不重復(fù)某些操作，他們一定會(huì)希望這些操作可以簡化一下，變得更有效率。

舉個(gè)例子，一些應(yīng)用經(jīng)過改版后，只要在列表上向左劃就能刪掉某個(gè)項(xiàng)目，而在傳統(tǒng)的應(yīng)用中必須點(diǎn)開、彈出一個(gè)對(duì)話框、點(diǎn)擊確認(rèn)刪除才能刪掉某個(gè)項(xiàng)目。要考慮到新手用戶的使用情況，需要有足夠的提示教他們適應(yīng)新操作方法，同時(shí)滿足老用戶對(duì)靈活高效的追求。

八.極簡設(shè)計(jì)的美學(xué)原則

在對(duì)話框里不要插入無關(guān)緊要的信息。每增加一個(gè)單位的信息，都會(huì)相應(yīng)地弱化其他信息的可見度。

圖片來自Medium

當(dāng)我們講到設(shè)計(jì)要有藝術(shù)性，我們并不是說要在界面上擺滿巴洛克風(fēng)格的藝術(shù)元素。在這里我們的重點(diǎn)不在于使用什么紋理或者圖像，而是要“降噪”，即簡化信息、突出重點(diǎn)。

我們的首要追求是制作出用戶容易理解的界面。通過簡化內(nèi)容（無論是圖像還是文本），我們可以幫助用戶集中注意力，同時(shí)接收最重要的信息。

九.幫助用戶識(shí)別、診斷問題，并從錯(cuò)誤中恢復(fù)

即使出現(xiàn)錯(cuò)誤的信息，也應(yīng)該盡量用語言（而不是系統(tǒng)術(shù)語，如“404”）來表達(dá)。要幫助用戶識(shí)別錯(cuò)誤、診斷問題，提出解決方案，將損失降到最低。

圖片來自Medium

用戶遇到錯(cuò)誤不可避免。在出現(xiàn)錯(cuò)誤之后如何引導(dǎo)用戶，這是用戶體驗(yàn)設(shè)計(jì)師必須要考慮的問題。比較理想的方式是在顯示錯(cuò)誤的頁面上為用戶提供問題描述、不同的選項(xiàng)或解決方案。

現(xiàn)在讓我們以404頁面為例。作為設(shè)計(jì)師，我們都知道404頁面的含義是什么，但是用戶可能會(huì)感到困惑。現(xiàn)在，我們可以在錯(cuò)誤頁面上添加一些內(nèi)容，將它轉(zhuǎn)化為文字描述，比如“對(duì)不起，我們無法跳轉(zhuǎn)至您查找的網(wǎng)頁”，同時(shí)為用戶提供一些主題相似的網(wǎng)頁。這樣以來，即使用戶跳轉(zhuǎn)到了錯(cuò)誤的頁面，也不會(huì)有太多消極的感受。

十.人性化幫助原則

一個(gè)系統(tǒng)不需要幫助自然是最好的。但是在實(shí)際的操作中，我們還是需要為用戶提供文檔幫助：信息要容易搜索，要專注于用戶的任務(wù)，要能列出具體步驟來執(zhí)行，并且步驟還不能太長。

圖片來自Medium

為用戶提供的幫助要清晰可見?？梢园袶elp圖標(biāo)放在頁面頂端或者主菜單里。當(dāng)用戶遇到了自己無法解決的問題，他們一定會(huì)從幫助窗口找答案。可以再設(shè)定一個(gè)可以提供建議、搜索答案的搜索框。如果沒有現(xiàn)成的答案，那么就要給用戶提供電子郵箱、客服電話等，讓用戶有渠道和工作人員聯(lián)系，及時(shí)獲得幫助。

譯者：Michiko

本文來自翻譯, 如若轉(zhuǎn)載請(qǐng)注明出處。