起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專(zhuān)項(xiàng)技能課
1300+專(zhuān)題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專(zhuān)業(yè)技能直播
會(huì)員專(zhuān)屬社群
榮耀標(biāo)識(shí) 如何打造極致的用戶(hù)體驗(yàn)的秘訣—尼爾森十大可用性原則?。ㄉ希?/h2>
不知道大家是否有過(guò)這樣的體驗(yàn)：當(dāng)你點(diǎn)擊按鈕時(shí)沒(méi)有任何反應(yīng)，于是頻繁點(diǎn)了很多次，導(dǎo)致出現(xiàn)很多頁(yè)面。面對(duì)這樣的情景，產(chǎn)品設(shè)計(jì)者該如何應(yīng)對(duì)？本文總結(jié)介紹了尼爾森的十大可用性原則中的前五大原則，希望對(duì)你有所啟發(fā)。
在日常使用移動(dòng)端或PC端產(chǎn)品時(shí)，不知你有沒(méi)有這樣的體會(huì)？
1. 出現(xiàn)這些問(wèn)題的，如何解決呢？
推薦一個(gè)比較實(shí)用的設(shè)計(jì)法則，這個(gè)法則已經(jīng)有很多的文章說(shuō)明了，可以說(shuō)現(xiàn)在的任何互聯(lián)網(wǎng)產(chǎn)品都能看到這些理論的實(shí)踐，本次主要想以比較多的案列進(jìn)行實(shí)戰(zhàn)分析。
尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個(gè)可用性問(wèn)題的基礎(chǔ)上，提煉出的十項(xiàng)交互設(shè)計(jì)原則。被廣泛運(yùn)用于網(wǎng)頁(yè)、APP以及各種人機(jī)交互領(lǐng)域。
要注意的是，這10項(xiàng)原則是啟發(fā)式（heuristics）的、廣泛的經(jīng)驗(yàn)法則，可以指導(dǎo)我們更具價(jià)值的思考界面設(shè)計(jì)。
各種設(shè)計(jì)原則都可靈活運(yùn)用于各個(gè)地方,可以是交互設(shè)計(jì),也可以是界面設(shè)計(jì),深入了解各種設(shè)計(jì)原則,讓設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候可以找到更好的解決方案,提高用戶(hù)的使用體驗(yàn)。
理論介紹：
雅各布·尼爾森（Jakob Nielsen）是畢業(yè)于哥本哈根的丹麥技術(shù)大學(xué)的人機(jī)交互博士，被譽(yù)為可用性測(cè)試的鼻祖，2006年4月，并被納入美國(guó)計(jì)算機(jī)學(xué)會(huì)人機(jī)交互學(xué)院，被賦予人機(jī)交互實(shí)踐的終身成就獎(jiǎng)。
尼爾森于1995年1月1日發(fā)表了「十大可用性原則」，該原則被廣大設(shè)計(jì)師奉為教科書(shū)般的存在。雖然20多年過(guò)去了，但是對(duì)于現(xiàn)今的產(chǎn)品體驗(yàn)設(shè)計(jì)仍然具有很大的參考意義。
一、狀態(tài)可見(jiàn)原則
人機(jī)交互的基本原則是，讓系統(tǒng)和用戶(hù)之間保持良好的溝通和信息傳遞。系統(tǒng)要告知用戶(hù)發(fā)生了什么，預(yù)期是什么，如果系統(tǒng)不能及時(shí)向用戶(hù)反饋合適的信息，用戶(hù)必然會(huì)感到失控和焦慮，不知道下一步要做什么。
界面狀態(tài)分為兩種：靜態(tài)和動(dòng)態(tài)。
靜態(tài)即用戶(hù)通過(guò)界面查閱，明確知道自己的位置、處于何種狀態(tài)，或者知道界面數(shù)據(jù)的狀態(tài)。
動(dòng)態(tài)即用戶(hù)在進(jìn)行界面操作時(shí)，系統(tǒng)應(yīng)當(dāng)立刻提供反饋，告訴用戶(hù)該項(xiàng)操作被系統(tǒng)接受，讓用戶(hù)對(duì)操作感知及判斷。
該原則在設(shè)計(jì)中的體現(xiàn)：
1. 狀態(tài)可見(jiàn)性-位置可見(jiàn)
告訴用戶(hù)處在系統(tǒng)的什么位置，特別是對(duì)于新用戶(hù)，需要提供必要的信息，否則容易迷惑。比如：導(dǎo)航菜單、面包屑、標(biāo)簽頁(yè)、步驟條、分頁(yè)器等等。
相比于C端產(chǎn)品，B端產(chǎn)品在頁(yè)面層級(jí)往往更為復(fù)雜。因此，讓用戶(hù)明確當(dāng)前所處的位置尤為重要，這也就突顯出了導(dǎo)航的重要性。設(shè)計(jì)師在設(shè)計(jì)的過(guò)程中，要注意提供上下文線索，避免用戶(hù)迷路。
2. 狀態(tài)可見(jiàn)性-進(jìn)度條
告知用戶(hù)系統(tǒng)運(yùn)行的狀態(tài)信息，比如進(jìn)度、內(nèi)容加載時(shí)，增加用戶(hù)掌控感。
最經(jīng)典的案例莫過(guò)于Loading頁(yè)的進(jìn)度條了，無(wú)論是加載頁(yè)面還是下載內(nèi)容，一個(gè)清晰的進(jìn)度條可以讓用戶(hù)隨時(shí)掌控進(jìn)度，同時(shí)也可以用具體的數(shù)字更加明確的表示，比如：安裝程序時(shí)顯示進(jìn)度條，并預(yù)估還需要多久結(jié)束，播放音樂(lè)時(shí)顯示進(jìn)度條，并提示預(yù)估剩余時(shí)間。
3. 狀態(tài)可見(jiàn)性-操作反饋
系統(tǒng)適當(dāng)反饋是用戶(hù)界面設(shè)計(jì)的最基本準(zhǔn)則。當(dāng)用戶(hù)在與系統(tǒng)進(jìn)行交互時(shí)，應(yīng)當(dāng)在各個(gè)階段為用戶(hù)提供必要、積極且即時(shí)的反饋，同時(shí)也要避免過(guò)度反饋打擾用戶(hù)。
可以使用的形式包括但不局限于：
- 操作反饋：點(diǎn)擊頁(yè)面跳轉(zhuǎn)、按鈕點(diǎn)擊狀態(tài)、警告提示、輸入反饋等等；
- 結(jié)果反饋：非模態(tài)彈窗，輕量化感知系統(tǒng)內(nèi)容反饋。（反饋內(nèi)容應(yīng)盡量不要打斷用戶(hù)操作，所以一般采用toast形式，反饋結(jié)果后及時(shí)消失。）
- 情感反饋：搜索沒(méi)有結(jié)果時(shí)，沒(méi)有數(shù)據(jù)等等空狀態(tài)。
還可以通過(guò)元素的顏色位置、界面元素變化、文字、聲音和震動(dòng)，甚至動(dòng)效等多種形式給予用戶(hù)提示反饋。
注意，越是消極的反饋，比如網(wǎng)絡(luò)連接失敗、系統(tǒng)錯(cuò)誤等，越是要及時(shí)告知用戶(hù)，同時(shí)提醒用戶(hù)采取適當(dāng)措施。
比如：
- 提交表單時(shí)，如果校驗(yàn)失敗，則在填寫(xiě)有誤的內(nèi)容旁邊提示錯(cuò)誤原因；
- 程序未響應(yīng)時(shí)，系統(tǒng)會(huì)讓用戶(hù)選擇是關(guān)閉程序還是等待程序響應(yīng)；
4. 狀態(tài)可見(jiàn)性-合理的時(shí)間
系統(tǒng)應(yīng)該在合理的時(shí)間內(nèi)，給予用戶(hù)適當(dāng)?shù)姆答仯層脩?hù)了解正在發(fā)生的事情。
當(dāng)系統(tǒng)反饋時(shí)間小于1秒，通常正常反饋即可；相反長(zhǎng)于1秒時(shí)，我們通常會(huì)通過(guò)加載動(dòng)畫(huà)、占位符、分步加載等方式，減緩用戶(hù)等待的焦慮感。
如果超過(guò)10秒還沒(méi)有得到相應(yīng)，那么通常會(huì)認(rèn)為這次請(qǐng)求是失敗的，需要給用戶(hù)失敗提示。
例如：下載提示、刷新提示、支付提示、新頁(yè)面加載提示等。
二、 環(huán)境貼切原則
讓系統(tǒng)盡可能貼切用戶(hù)所在的真實(shí)環(huán)境。把復(fù)雜的系統(tǒng)語(yǔ)言換成用戶(hù)看得懂的語(yǔ)言；環(huán)境貼切原則的根本目標(biāo)是讓用戶(hù)可以快速上手產(chǎn)品，降低學(xué)習(xí)成本。
《iPhone人機(jī)交互指南》里提到的隱喻與擬物化是很好的實(shí)踐。此外，還應(yīng)該使用易懂和約定俗成的表達(dá)。
該原則在設(shè)計(jì)中的體現(xiàn)：
1. 環(huán)境貼切-易理解的語(yǔ)言
這里說(shuō)的語(yǔ)言不僅僅包括文案層面的語(yǔ)言，還包括產(chǎn)品的設(shè)計(jì)語(yǔ)言（圖形、配色、風(fēng)格、動(dòng)效、手勢(shì)等）設(shè)計(jì)語(yǔ)言都應(yīng)該是易于用戶(hù)理解和認(rèn)知的。
產(chǎn)品使用的語(yǔ)言應(yīng)該是目標(biāo)用戶(hù)能夠清晰理解的。如果用戶(hù)不能理解，他們會(huì)感到被忽視和受挫敗，許多人將選擇其他產(chǎn)品完成目標(biāo)。
從設(shè)計(jì)心理學(xué)角度來(lái)講，用戶(hù)在使用產(chǎn)品的過(guò)程中，其大腦會(huì)“優(yōu)待”較常用的記憶內(nèi)容和操作形式，有意抑制那些相似但不常用的內(nèi)容，以便減輕認(rèn)知負(fù)擔(dān)，防止混淆，這種習(xí)慣從某種程度上來(lái)說(shuō)屬于“熟知記憶”。
比如細(xì)分市場(chǎng)的產(chǎn)品，針對(duì)中老年、青年、兒童的產(chǎn)品或商務(wù)、娛樂(lè)的產(chǎn)品，都要分別使用符合自己的定位的語(yǔ)言。
反面案例就是windows系統(tǒng)出錯(cuò)了頁(yè)面，一堆亂碼，看不懂又很慌張，就很不友好。
另外還有一點(diǎn)，很多大公司的app都會(huì)針對(duì)他們不同國(guó)家的用戶(hù)群體進(jìn)行各種語(yǔ)言的翻譯處理。為了照顧不同國(guó)家的用戶(hù)的使用習(xí)慣對(duì)頁(yè)面結(jié)構(gòu)布局，風(fēng)格，語(yǔ)言，字體，包括交互方式都會(huì)做特殊處理。這就是場(chǎng)景貼合原則。
2. 環(huán)境貼切-模擬現(xiàn)實(shí)世界對(duì)象
模仿現(xiàn)實(shí)世界的產(chǎn)品或者使用映射，能夠利用人們現(xiàn)有的知識(shí)，可以顯著的降低用戶(hù)的認(rèn)知和學(xué)習(xí)困難，并增加他們的使用興趣。
比較好的案例就是iOS原生的計(jì)算器、指南針，微信紅包都是模仿了現(xiàn)實(shí)世界的產(chǎn)品
3. 環(huán)境貼切-符合現(xiàn)實(shí)世界隱喻
從現(xiàn)實(shí)世界中借鑒的設(shè)計(jì)元素可明顯降低用戶(hù)的認(rèn)知和學(xué)習(xí)難度，并且增加興趣。
最有代表性的就是網(wǎng)易云的音樂(lè)播放界面圖形隱喻表達(dá)。美團(tuán)APP的母嬰類(lèi)目icon的設(shè)計(jì)非常有趣，且非常容易理解和使用，讓人印象深刻。
4. 環(huán)境貼切-操作手勢(shì)符合聯(lián)想
使用的操作手勢(shì)，應(yīng)該是用戶(hù)自然就能聯(lián)想到的，不要?jiǎng)?chuàng)造、更改操作手勢(shì)的意義。
5. 環(huán)境貼切-自然的動(dòng)效
動(dòng)效的加載樣式應(yīng)符合自然規(guī)律，需要平緩過(guò)渡，而不是生硬的加載效果。
比如：網(wǎng)易云音樂(lè)播放時(shí)唱片轉(zhuǎn)動(dòng)、停止播放時(shí)唱片自動(dòng)移開(kāi)，有趣且有效。
三、用戶(hù)可控原則
用戶(hù)在使用產(chǎn)品的過(guò)程中，誤操作是經(jīng)常發(fā)生的事情，系統(tǒng)應(yīng)提供撤銷(xiāo)和重做功能，讓用戶(hù)具有對(duì)產(chǎn)品的控制性與自由度。
用戶(hù)可控原則的根本目標(biāo)是讓用戶(hù)可以在界面自由操作，而且無(wú)需為操作不當(dāng)承擔(dān)責(zé)任。
該原則在設(shè)計(jì)中的體現(xiàn)：
1. 可控原則-可自由導(dǎo)航
清晰便捷的導(dǎo)航方式，使用戶(hù)可自由控制返回和跳轉(zhuǎn)的頁(yè)面。
由于B端系統(tǒng)的復(fù)雜性，有些功能的層級(jí)會(huì)比較深。彈窗A中的某個(gè)操作可能會(huì)觸發(fā)彈窗B的彈出，如果彈窗A和B承載的功能具有父級(jí)和子級(jí)的關(guān)系，同樣需要考慮「返回」的功能以及清晰的層級(jí)關(guān)系。
2. 可控原則-可自由返回撤銷(xiāo)
用戶(hù)在使用系統(tǒng)的過(guò)程也是一個(gè)試錯(cuò)的過(guò)程，系統(tǒng)要讓用戶(hù)覺(jué)得自己的行為是可控的，可以犯錯(cuò)，并且在犯錯(cuò)之后可以反悔。
用戶(hù)在使用產(chǎn)品時(shí)可以自由進(jìn)退，遵循從哪里來(lái)就返回到哪里去的原則。當(dāng)用戶(hù)誤操作時(shí)要給用戶(hù)提供撤銷(xiāo)、取消、重做等相關(guān)功能。不可逆的操作要給用戶(hù)明顯的提示。
比如微信聊天是可以撤回的，并且撤回之后還支持重新編輯；對(duì)于我這種打字總是出錯(cuò)的人簡(jiǎn)直就是福利。
iphone相冊(cè)刪除照片后，支持在短期內(nèi)找回；在word中編輯文檔時(shí)，支持撤銷(xiāo)和恢復(fù)，保存的同時(shí)，還能查看歷史保存記錄。
回收站功能：讓用戶(hù)更有自由度，增加用戶(hù)安全感，可控的找回誤刪除資源。
3. 可控原則-不可逆轉(zhuǎn)的操作需要警告
系統(tǒng)在重要的不可逆轉(zhuǎn)的操作需要給用戶(hù)提供二次確認(rèn)或者撤銷(xiāo)的功能，這樣可提高用戶(hù)的操作可控性。在產(chǎn)品設(shè)計(jì)上，防止用戶(hù)常見(jiàn)的誤操作。
比如很多產(chǎn)品在涉及到內(nèi)容的刪除操作時(shí)，經(jīng)常會(huì)有彈窗提醒，讓用戶(hù)再次確認(rèn)。這樣是防止用戶(hù)誤操作帶來(lái)的刪除損失。用戶(hù)不用因?yàn)椴僮鲙?lái)心理負(fù)擔(dān)，從而提升操作可控性。
比如iPhone iOS系統(tǒng)：
- 常見(jiàn)的二次確認(rèn)主要可以通過(guò)以下方式實(shí)現(xiàn)：通過(guò)文字提示，用戶(hù)閱讀后點(diǎn)擊是與否來(lái)進(jìn)行下一步；
- 通過(guò)動(dòng)作，用戶(hù)通過(guò)輸入特定字符或者完成驗(yàn)證碼拖拽等操作才可進(jìn)行下一步操作；
- 通過(guò)身份校驗(yàn)，用戶(hù)需要提交個(gè)人身份信息以完成校驗(yàn)；
四、一致性原則
整個(gè)系統(tǒng)要保持產(chǎn)品結(jié)構(gòu)架構(gòu)、導(dǎo)航、用語(yǔ)、色彩、操作行為交互的一致性與標(biāo)準(zhǔn)性，遵循平臺(tái)慣例與行業(yè)標(biāo)準(zhǔn)。我們?cè)谠O(shè)計(jì)中常見(jiàn)的制作平臺(tái)規(guī)范，其實(shí)就是為了保證平臺(tái)設(shè)計(jì)的一致性。
一致性原則的根本目的是保證產(chǎn)品的專(zhuān)業(yè)性，給用戶(hù)帶去統(tǒng)一的體驗(yàn)感受。
該原則在設(shè)計(jì)中的體現(xiàn)：
1. 一致性-產(chǎn)品內(nèi)部一致
遵循產(chǎn)品內(nèi)部的慣例，可幫助用戶(hù)快速學(xué)習(xí)使用產(chǎn)品功能。產(chǎn)品內(nèi)部的一致性包含：產(chǎn)品功能框架、文字、設(shè)計(jì)風(fēng)格、布局、反饋等等。
比如：小熊藝術(shù)app，一款針對(duì)孩子學(xué)習(xí)美術(shù)的app，不管是首頁(yè)、個(gè)人中心以及加載等頁(yè)面，風(fēng)格保持一致性都是主打清新黃色+可愛(ài)icon。黃色小熊更是在不同的合適的時(shí)機(jī)出現(xiàn)，banner、加載，課程動(dòng)畫(huà)中等。不僅風(fēng)格一致性、布局、反饋等產(chǎn)品內(nèi)部保持一致性，也形成了統(tǒng)一的品牌傳達(dá)。
但是，有時(shí)候?yàn)榱诉_(dá)到產(chǎn)品目標(biāo)，偶爾也會(huì)故意采用不一致的設(shè)計(jì)。
比如：常見(jiàn)的對(duì)話框都將“確定”按鈕放在右邊位置，所以用戶(hù)在操作時(shí)，很容易產(chǎn)生條件反射，順手點(diǎn)擊右邊按鈕，然后才突然發(fā)現(xiàn)自己點(diǎn)錯(cuò)了。雖然看起來(lái)有些別扭甚至很多人不喜歡，但是很有效，這種設(shè)計(jì)在軟件卸載、App取消會(huì)員訂閱等操作中非常常見(jiàn)，主要是為了做一些心理暗示和引導(dǎo)，避免用戶(hù)卸載或退訂。
2. 一致性-交互行為一致
交互和用戶(hù)的習(xí)慣一致，意味著用戶(hù)不再需要重新學(xué)習(xí)，各種應(yīng)用之間的切換沒(méi)有學(xué)習(xí)成本。
我們?cè)谇捌谝呀?jīng)培養(yǎng)好用戶(hù)的使用習(xí)慣，那么就不要輕易改變，減少用戶(hù)的認(rèn)知成本與學(xué)習(xí)成本。
例如：常見(jiàn)的頁(yè)面的后退或返回都在屏幕左上角、搜索欄都在屏幕最上方、菜單欄都懸浮在屏幕底部。
3. 一致性-迭代產(chǎn)品一致
當(dāng)產(chǎn)品線進(jìn)行更新迭代的時(shí)候，應(yīng)該保留用戶(hù)既有的交互和操作習(xí)慣，用戶(hù)在上一個(gè)版本形成的交互認(rèn)知在下一個(gè)版本是否能被沿用，這對(duì)于用戶(hù)來(lái)說(shuō)在產(chǎn)品體驗(yàn)上會(huì)造成很大的干擾。
比如微信的多年的迭代，底部tab功能一直都是這樣，主要功能入口一致沒(méi)有變化，就體現(xiàn)了迭代產(chǎn)品的一致性。
4. 一致性-同一團(tuán)隊(duì)/公司產(chǎn)品線一致
Office軟件中包含的各個(gè)產(chǎn)品，其界面布局和設(shè)計(jì)風(fēng)格都保持了高度一致，如下圖所示是PowerPoint和Word的界面，可以看出，二者的“插入”一級(jí)菜單下所包含功能的排列順序、布局方式乃至圖標(biāo)圖形，都是高度類(lèi)似的。
5. 一致性-設(shè)計(jì)語(yǔ)言一致
遵循統(tǒng)一的產(chǎn)品設(shè)計(jì)規(guī)范／邏輯。這里的一致性包含產(chǎn)品和跨平臺(tái)產(chǎn)品之間的一致性。確保整個(gè)系統(tǒng)的結(jié)構(gòu)一致性、色彩一致性、操作一致性、反饋一致性、同種組件樣式保持一致等設(shè)計(jì)語(yǔ)言都遵循同一套設(shè)計(jì)規(guī)則。
比如，產(chǎn)品內(nèi)相同顏色的反復(fù)出現(xiàn)，為產(chǎn)品打造視覺(jué)錘符號(hào)，強(qiáng)化產(chǎn)品在用戶(hù)心中的記憶點(diǎn)。
符合平臺(tái)設(shè)計(jì)規(guī)范，比如：蘋(píng)果系統(tǒng)參照人機(jī)交互設(shè)計(jì)指南設(shè)計(jì)規(guī)范，安卓系統(tǒng)參照Material Design設(shè)計(jì)規(guī)范，或者直接參照自己團(tuán)隊(duì)的的設(shè)計(jì)規(guī)范，應(yīng)該遵循慣例，并且保持系統(tǒng)的一致感，不要盲目地標(biāo)新立異。
6. 一致性-業(yè)內(nèi)產(chǎn)品保持一致
不知道你發(fā)現(xiàn)了沒(méi)，現(xiàn)在的電商、音樂(lè)、社交等等app越來(lái)越一樣了，一樣的交互，一樣的排版設(shè)計(jì)，基本上都遵循著類(lèi)似的交互邏輯和視覺(jué)元素。
為什么會(huì)這樣？同類(lèi)軟件設(shè)計(jì)的趨同化，未必不是一件好事？
與業(yè)內(nèi)產(chǎn)品保持一致，意味著用戶(hù)不再需要重新學(xué)習(xí)，就可以在各種應(yīng)用中自由切換，用戶(hù)學(xué)習(xí)成本的降低，也意味著我們獲客成本從某種程度上被降低。
而這些約定俗成的規(guī)則和流程都被用戶(hù)不自覺(jué)地印刻在大腦中，成為一種自然的習(xí)慣，而獨(dú)特的設(shè)計(jì)，截然不同的規(guī)則，則常常會(huì)成為習(xí)慣以外的東西，引起混亂，讓初次上手的用戶(hù)感到受挫和沮喪。
如，在App底部的導(dǎo)航圖標(biāo)中，“首頁(yè)”永遠(yuǎn)排在第一個(gè)，個(gè)人中心（“我的”）永遠(yuǎn)排在最后。并且對(duì)于類(lèi)似“首頁(yè)”“購(gòu)物車(chē)”“訂單”等常見(jiàn)按鈕，不同App的設(shè)計(jì)樣式都非常相似。如下圖三個(gè)不同音樂(lè)app的對(duì)比圖：
如果你特立獨(dú)行地把個(gè)人中心放在第一個(gè)位置，或者采用奇怪的圖標(biāo)作為個(gè)人中心的icon，用戶(hù)使用時(shí)肯定會(huì)覺(jué)得別扭。
五、防錯(cuò)原則
防錯(cuò)原則的根本目標(biāo)是阻止錯(cuò)誤行為，避免進(jìn)一步犯錯(cuò)，指引用戶(hù)正確的完成操作行為。
「防止錯(cuò)誤」主要分為三個(gè)階段：錯(cuò)誤行動(dòng)發(fā)生前，引導(dǎo)用戶(hù)向正確的方向前進(jìn)；用戶(hù)觸碰到危險(xiǎn)操作時(shí)給予提示；危險(xiǎn)操作發(fā)生之后，提供撤回的入口。
該原則在設(shè)計(jì)中的體現(xiàn)：
1. 在執(zhí)行危險(xiǎn)操作前做設(shè)計(jì)
比一個(gè)優(yōu)秀的錯(cuò)誤提醒彈窗更好的設(shè)計(jì)方式，是在這個(gè)錯(cuò)誤發(fā)生之前就避免它。它可以幫助用戶(hù)排除一些容易出錯(cuò)的情況，或在用戶(hù)提交之前給他一個(gè)確認(rèn)的選項(xiàng)。
通常情況下，按鈕置灰表示對(duì)應(yīng)功能或操作無(wú)法使用，這也是防止錯(cuò)誤的一條有效途徑，因?yàn)橛脩?hù)通過(guò)按鈕樣式就可獲知其狀態(tài)，提前規(guī)避無(wú)效的提交操作。
當(dāng)然，不是只要功能或操作無(wú)法使用時(shí)，就應(yīng)該將對(duì)應(yīng)的按鈕置灰。
其實(shí)更好的做法是填寫(xiě)完標(biāo)題后按鈕不置灰，點(diǎn)擊完成按鈕后定位或高亮必填項(xiàng)，讓用戶(hù)更容易識(shí)別錯(cuò)誤點(diǎn)。
比如在登錄時(shí)，只有輸出信息后才可以點(diǎn)擊登錄按鈕，未輸入信息時(shí)，按鈕是不可以點(diǎn)擊的狀態(tài)。通過(guò)系統(tǒng)主動(dòng)對(duì)用戶(hù)進(jìn)行操作限制，幫助用戶(hù)避免發(fā)生錯(cuò)誤。
限制用戶(hù)的選擇并不是一個(gè)好主意，但是如果有明確的規(guī)則來(lái)定義可接受的選項(xiàng)，那么限制用戶(hù)可以輸入的類(lèi)型是一個(gè)很好的策略。
再比如輸入驗(yàn)證碼頁(yè)面，為了防止用戶(hù)多輸入或者少輸入驗(yàn)證碼，只給到四個(gè)輸入框，讓用戶(hù)只能輸入四位數(shù)字，減少輸入錯(cuò)誤的幾率。
2. 在執(zhí)行危險(xiǎn)操作中做設(shè)計(jì)
提供清晰的提示，防止用戶(hù)犯錯(cuò)，提示包括標(biāo)簽、文字、顏色、以及反饋狀態(tài)等。利用顏色，動(dòng)效提供警示信息，比如常見(jiàn)的微信退出的按鈕是紅色的，狀態(tài)未完成的標(biāo)簽是紅色的等等。
如：表單填寫(xiě)過(guò)程中讓用戶(hù)及時(shí)知道輸入格式，出錯(cuò)原因，避免填寫(xiě)完成后再提醒，浪費(fèi)用戶(hù)時(shí)間。
范圍限制：限制用戶(hù)的選擇并不是一個(gè)好主意，但是如果有明確的規(guī)則來(lái)定義可接受的選項(xiàng)，那么限制用戶(hù)可以輸入的類(lèi)型是一個(gè)很好的策略。比如：電影購(gòu)票時(shí)，已購(gòu)買(mǎi)的位子不會(huì)再提供選擇，很好的避免了買(mǎi)重的問(wèn)題
3. 危險(xiǎn)操作發(fā)生之后做設(shè)計(jì)
特別要注意在用戶(hù)操作具有毀滅性結(jié)果的功能時(shí)要有提示，防止用戶(hù)犯不可挽回的錯(cuò)誤，需打斷用戶(hù)，提示用戶(hù)是否要進(jìn)行此操作，讓用戶(hù)有更多的思考時(shí)間。所以在一些不可逆的操作中二次確認(rèn)是非常有必要的。
這條原則很重要也很常見(jiàn)。在刪除信息時(shí)，系統(tǒng)會(huì)讓用戶(hù)確認(rèn)刪除，也就是我們常說(shuō)的二次確認(rèn)，電商平臺(tái)允許在一定的規(guī)則下取消訂單等等。
總結(jié)
尼爾森是大可用性原則可靈活運(yùn)用于各個(gè)地方，可以是交互設(shè)計(jì)，也可以是界面設(shè)計(jì)，深入了解該設(shè)計(jì)原則，可以找到更好的解決方案，提高用戶(hù)的使用體驗(yàn)。
要注意的是，這10項(xiàng)原則是啟發(fā)式（heuristics）的、廣泛的經(jīng)驗(yàn)法則，而不是具體的規(guī)定。
- 狀態(tài)可見(jiàn)原則：位置可見(jiàn)、數(shù)量可見(jiàn)、狀態(tài)可見(jiàn)；
- 環(huán)境貼近原則：語(yǔ)言應(yīng)該是用戶(hù)所能理解和習(xí)慣的；
- 用戶(hù)可控原則：可見(jiàn)導(dǎo)航、關(guān)閉與返回、撤銷(xiāo)與重做；
- 一致性原則：產(chǎn)品內(nèi)部一致、交互一致、迭代產(chǎn)品一致、同一產(chǎn)品線一致、設(shè)計(jì)語(yǔ)言一致、業(yè)內(nèi)產(chǎn)品一致；
- 防錯(cuò)原則：操作前預(yù)警、操作中確認(rèn)、操作后可撤回；
好了，明天我們繼續(xù)聊聊后面的幾個(gè)原則。文中如果有不嚴(yán)謹(jǐn)、錯(cuò)誤的地方希望大家給予指正，希望大家可以多多點(diǎn)贊評(píng)論鼓勵(lì)下，最后感謝您的耐心閱讀。
本文由 @三原設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash ，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
更多精彩內(nèi)容，請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
不知道大家是否有過(guò)這樣的體驗(yàn)：當(dāng)你點(diǎn)擊按鈕時(shí)沒(méi)有任何反應(yīng)，于是頻繁點(diǎn)了很多次，導(dǎo)致出現(xiàn)很多頁(yè)面。面對(duì)這樣的情景，產(chǎn)品設(shè)計(jì)者該如何應(yīng)對(duì)？本文總結(jié)介紹了尼爾森的十大可用性原則中的前五大原則，希望對(duì)你有所啟發(fā)。
在日常使用移動(dòng)端或PC端產(chǎn)品時(shí)，不知你有沒(méi)有這樣的體會(huì)？
1. 出現(xiàn)這些問(wèn)題的，如何解決呢？
推薦一個(gè)比較實(shí)用的設(shè)計(jì)法則，這個(gè)法則已經(jīng)有很多的文章說(shuō)明了，可以說(shuō)現(xiàn)在的任何互聯(lián)網(wǎng)產(chǎn)品都能看到這些理論的實(shí)踐，本次主要想以比較多的案列進(jìn)行實(shí)戰(zhàn)分析。
尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個(gè)可用性問(wèn)題的基礎(chǔ)上，提煉出的十項(xiàng)交互設(shè)計(jì)原則。被廣泛運(yùn)用于網(wǎng)頁(yè)、APP以及各種人機(jī)交互領(lǐng)域。
要注意的是，這10項(xiàng)原則是啟發(fā)式（heuristics）的、廣泛的經(jīng)驗(yàn)法則，可以指導(dǎo)我們更具價(jià)值的思考界面設(shè)計(jì)。
各種設(shè)計(jì)原則都可靈活運(yùn)用于各個(gè)地方,可以是交互設(shè)計(jì),也可以是界面設(shè)計(jì),深入了解各種設(shè)計(jì)原則,讓設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候可以找到更好的解決方案,提高用戶(hù)的使用體驗(yàn)。
理論介紹：
雅各布·尼爾森（Jakob Nielsen）是畢業(yè)于哥本哈根的丹麥技術(shù)大學(xué)的人機(jī)交互博士，被譽(yù)為可用性測(cè)試的鼻祖，2006年4月，并被納入美國(guó)計(jì)算機(jī)學(xué)會(huì)人機(jī)交互學(xué)院，被賦予人機(jī)交互實(shí)踐的終身成就獎(jiǎng)。
尼爾森于1995年1月1日發(fā)表了「十大可用性原則」，該原則被廣大設(shè)計(jì)師奉為教科書(shū)般的存在。雖然20多年過(guò)去了，但是對(duì)于現(xiàn)今的產(chǎn)品體驗(yàn)設(shè)計(jì)仍然具有很大的參考意義。
一、狀態(tài)可見(jiàn)原則
人機(jī)交互的基本原則是，讓系統(tǒng)和用戶(hù)之間保持良好的溝通和信息傳遞。系統(tǒng)要告知用戶(hù)發(fā)生了什么，預(yù)期是什么，如果系統(tǒng)不能及時(shí)向用戶(hù)反饋合適的信息，用戶(hù)必然會(huì)感到失控和焦慮，不知道下一步要做什么。
界面狀態(tài)分為兩種：靜態(tài)和動(dòng)態(tài)。
靜態(tài)即用戶(hù)通過(guò)界面查閱，明確知道自己的位置、處于何種狀態(tài)，或者知道界面數(shù)據(jù)的狀態(tài)。
動(dòng)態(tài)即用戶(hù)在進(jìn)行界面操作時(shí)，系統(tǒng)應(yīng)當(dāng)立刻提供反饋，告訴用戶(hù)該項(xiàng)操作被系統(tǒng)接受，讓用戶(hù)對(duì)操作感知及判斷。
該原則在設(shè)計(jì)中的體現(xiàn)：
1. 狀態(tài)可見(jiàn)性-位置可見(jiàn)
告訴用戶(hù)處在系統(tǒng)的什么位置，特別是對(duì)于新用戶(hù)，需要提供必要的信息，否則容易迷惑。比如：導(dǎo)航菜單、面包屑、標(biāo)簽頁(yè)、步驟條、分頁(yè)器等等。
相比于C端產(chǎn)品，B端產(chǎn)品在頁(yè)面層級(jí)往往更為復(fù)雜。因此，讓用戶(hù)明確當(dāng)前所處的位置尤為重要，這也就突顯出了導(dǎo)航的重要性。設(shè)計(jì)師在設(shè)計(jì)的過(guò)程中，要注意提供上下文線索，避免用戶(hù)迷路。
2. 狀態(tài)可見(jiàn)性-進(jìn)度條
告知用戶(hù)系統(tǒng)運(yùn)行的狀態(tài)信息，比如進(jìn)度、內(nèi)容加載時(shí)，增加用戶(hù)掌控感。
最經(jīng)典的案例莫過(guò)于Loading頁(yè)的進(jìn)度條了，無(wú)論是加載頁(yè)面還是下載內(nèi)容，一個(gè)清晰的進(jìn)度條可以讓用戶(hù)隨時(shí)掌控進(jìn)度，同時(shí)也可以用具體的數(shù)字更加明確的表示，比如：安裝程序時(shí)顯示進(jìn)度條，并預(yù)估還需要多久結(jié)束，播放音樂(lè)時(shí)顯示進(jìn)度條，并提示預(yù)估剩余時(shí)間。
3. 狀態(tài)可見(jiàn)性-操作反饋
系統(tǒng)適當(dāng)反饋是用戶(hù)界面設(shè)計(jì)的最基本準(zhǔn)則。當(dāng)用戶(hù)在與系統(tǒng)進(jìn)行交互時(shí)，應(yīng)當(dāng)在各個(gè)階段為用戶(hù)提供必要、積極且即時(shí)的反饋，同時(shí)也要避免過(guò)度反饋打擾用戶(hù)。
可以使用的形式包括但不局限于：
- 操作反饋：點(diǎn)擊頁(yè)面跳轉(zhuǎn)、按鈕點(diǎn)擊狀態(tài)、警告提示、輸入反饋等等；
- 結(jié)果反饋：非模態(tài)彈窗，輕量化感知系統(tǒng)內(nèi)容反饋。（反饋內(nèi)容應(yīng)盡量不要打斷用戶(hù)操作，所以一般采用toast形式，反饋結(jié)果后及時(shí)消失。）
- 情感反饋：搜索沒(méi)有結(jié)果時(shí)，沒(méi)有數(shù)據(jù)等等空狀態(tài)。
還可以通過(guò)元素的顏色位置、界面元素變化、文字、聲音和震動(dòng)，甚至動(dòng)效等多種形式給予用戶(hù)提示反饋。
注意，越是消極的反饋，比如網(wǎng)絡(luò)連接失敗、系統(tǒng)錯(cuò)誤等，越是要及時(shí)告知用戶(hù)，同時(shí)提醒用戶(hù)采取適當(dāng)措施。
比如：
- 提交表單時(shí)，如果校驗(yàn)失敗，則在填寫(xiě)有誤的內(nèi)容旁邊提示錯(cuò)誤原因；
- 程序未響應(yīng)時(shí)，系統(tǒng)會(huì)讓用戶(hù)選擇是關(guān)閉程序還是等待程序響應(yīng)；
4. 狀態(tài)可見(jiàn)性-合理的時(shí)間
系統(tǒng)應(yīng)該在合理的時(shí)間內(nèi)，給予用戶(hù)適當(dāng)?shù)姆答仯層脩?hù)了解正在發(fā)生的事情。
當(dāng)系統(tǒng)反饋時(shí)間小于1秒，通常正常反饋即可；相反長(zhǎng)于1秒時(shí)，我們通常會(huì)通過(guò)加載動(dòng)畫(huà)、占位符、分步加載等方式，減緩用戶(hù)等待的焦慮感。
如果超過(guò)10秒還沒(méi)有得到相應(yīng)，那么通常會(huì)認(rèn)為這次請(qǐng)求是失敗的，需要給用戶(hù)失敗提示。
例如：下載提示、刷新提示、支付提示、新頁(yè)面加載提示等。
二、 環(huán)境貼切原則
讓系統(tǒng)盡可能貼切用戶(hù)所在的真實(shí)環(huán)境。把復(fù)雜的系統(tǒng)語(yǔ)言換成用戶(hù)看得懂的語(yǔ)言；環(huán)境貼切原則的根本目標(biāo)是讓用戶(hù)可以快速上手產(chǎn)品，降低學(xué)習(xí)成本。
《iPhone人機(jī)交互指南》里提到的隱喻與擬物化是很好的實(shí)踐。此外，還應(yīng)該使用易懂和約定俗成的表達(dá)。
該原則在設(shè)計(jì)中的體現(xiàn)：
1. 環(huán)境貼切-易理解的語(yǔ)言
這里說(shuō)的語(yǔ)言不僅僅包括文案層面的語(yǔ)言，還包括產(chǎn)品的設(shè)計(jì)語(yǔ)言（圖形、配色、風(fēng)格、動(dòng)效、手勢(shì)等）設(shè)計(jì)語(yǔ)言都應(yīng)該是易于用戶(hù)理解和認(rèn)知的。
產(chǎn)品使用的語(yǔ)言應(yīng)該是目標(biāo)用戶(hù)能夠清晰理解的。如果用戶(hù)不能理解，他們會(huì)感到被忽視和受挫敗，許多人將選擇其他產(chǎn)品完成目標(biāo)。
從設(shè)計(jì)心理學(xué)角度來(lái)講，用戶(hù)在使用產(chǎn)品的過(guò)程中，其大腦會(huì)“優(yōu)待”較常用的記憶內(nèi)容和操作形式，有意抑制那些相似但不常用的內(nèi)容，以便減輕認(rèn)知負(fù)擔(dān)，防止混淆，這種習(xí)慣從某種程度上來(lái)說(shuō)屬于“熟知記憶”。
比如細(xì)分市場(chǎng)的產(chǎn)品，針對(duì)中老年、青年、兒童的產(chǎn)品或商務(wù)、娛樂(lè)的產(chǎn)品，都要分別使用符合自己的定位的語(yǔ)言。
反面案例就是windows系統(tǒng)出錯(cuò)了頁(yè)面，一堆亂碼，看不懂又很慌張，就很不友好。
另外還有一點(diǎn)，很多大公司的app都會(huì)針對(duì)他們不同國(guó)家的用戶(hù)群體進(jìn)行各種語(yǔ)言的翻譯處理。為了照顧不同國(guó)家的用戶(hù)的使用習(xí)慣對(duì)頁(yè)面結(jié)構(gòu)布局，風(fēng)格，語(yǔ)言，字體，包括交互方式都會(huì)做特殊處理。這就是場(chǎng)景貼合原則。
2. 環(huán)境貼切-模擬現(xiàn)實(shí)世界對(duì)象
模仿現(xiàn)實(shí)世界的產(chǎn)品或者使用映射，能夠利用人們現(xiàn)有的知識(shí)，可以顯著的降低用戶(hù)的認(rèn)知和學(xué)習(xí)困難，并增加他們的使用興趣。
比較好的案例就是iOS原生的計(jì)算器、指南針，微信紅包都是模仿了現(xiàn)實(shí)世界的產(chǎn)品
3. 環(huán)境貼切-符合現(xiàn)實(shí)世界隱喻
從現(xiàn)實(shí)世界中借鑒的設(shè)計(jì)元素可明顯降低用戶(hù)的認(rèn)知和學(xué)習(xí)難度，并且增加興趣。
最有代表性的就是網(wǎng)易云的音樂(lè)播放界面圖形隱喻表達(dá)。美團(tuán)APP的母嬰類(lèi)目icon的設(shè)計(jì)非常有趣，且非常容易理解和使用，讓人印象深刻。
4. 環(huán)境貼切-操作手勢(shì)符合聯(lián)想
使用的操作手勢(shì)，應(yīng)該是用戶(hù)自然就能聯(lián)想到的，不要?jiǎng)?chuàng)造、更改操作手勢(shì)的意義。
5. 環(huán)境貼切-自然的動(dòng)效
動(dòng)效的加載樣式應(yīng)符合自然規(guī)律，需要平緩過(guò)渡，而不是生硬的加載效果。
比如：網(wǎng)易云音樂(lè)播放時(shí)唱片轉(zhuǎn)動(dòng)、停止播放時(shí)唱片自動(dòng)移開(kāi)，有趣且有效。
三、用戶(hù)可控原則
用戶(hù)在使用產(chǎn)品的過(guò)程中，誤操作是經(jīng)常發(fā)生的事情，系統(tǒng)應(yīng)提供撤銷(xiāo)和重做功能，讓用戶(hù)具有對(duì)產(chǎn)品的控制性與自由度。
用戶(hù)可控原則的根本目標(biāo)是讓用戶(hù)可以在界面自由操作，而且無(wú)需為操作不當(dāng)承擔(dān)責(zé)任。
該原則在設(shè)計(jì)中的體現(xiàn)：
1. 可控原則-可自由導(dǎo)航
清晰便捷的導(dǎo)航方式，使用戶(hù)可自由控制返回和跳轉(zhuǎn)的頁(yè)面。
由于B端系統(tǒng)的復(fù)雜性，有些功能的層級(jí)會(huì)比較深。彈窗A中的某個(gè)操作可能會(huì)觸發(fā)彈窗B的彈出，如果彈窗A和B承載的功能具有父級(jí)和子級(jí)的關(guān)系，同樣需要考慮「返回」的功能以及清晰的層級(jí)關(guān)系。
2. 可控原則-可自由返回撤銷(xiāo)
用戶(hù)在使用系統(tǒng)的過(guò)程也是一個(gè)試錯(cuò)的過(guò)程，系統(tǒng)要讓用戶(hù)覺(jué)得自己的行為是可控的，可以犯錯(cuò)，并且在犯錯(cuò)之后可以反悔。
用戶(hù)在使用產(chǎn)品時(shí)可以自由進(jìn)退，遵循從哪里來(lái)就返回到哪里去的原則。當(dāng)用戶(hù)誤操作時(shí)要給用戶(hù)提供撤銷(xiāo)、取消、重做等相關(guān)功能。不可逆的操作要給用戶(hù)明顯的提示。
比如微信聊天是可以撤回的，并且撤回之后還支持重新編輯；對(duì)于我這種打字總是出錯(cuò)的人簡(jiǎn)直就是福利。
iphone相冊(cè)刪除照片后，支持在短期內(nèi)找回；在word中編輯文檔時(shí)，支持撤銷(xiāo)和恢復(fù)，保存的同時(shí)，還能查看歷史保存記錄。
回收站功能：讓用戶(hù)更有自由度，增加用戶(hù)安全感，可控的找回誤刪除資源。
3. 可控原則-不可逆轉(zhuǎn)的操作需要警告
系統(tǒng)在重要的不可逆轉(zhuǎn)的操作需要給用戶(hù)提供二次確認(rèn)或者撤銷(xiāo)的功能，這樣可提高用戶(hù)的操作可控性。在產(chǎn)品設(shè)計(jì)上，防止用戶(hù)常見(jiàn)的誤操作。
比如很多產(chǎn)品在涉及到內(nèi)容的刪除操作時(shí)，經(jīng)常會(huì)有彈窗提醒，讓用戶(hù)再次確認(rèn)。這樣是防止用戶(hù)誤操作帶來(lái)的刪除損失。用戶(hù)不用因?yàn)椴僮鲙?lái)心理負(fù)擔(dān)，從而提升操作可控性。
比如iPhone iOS系統(tǒng)：
- 常見(jiàn)的二次確認(rèn)主要可以通過(guò)以下方式實(shí)現(xiàn)：通過(guò)文字提示，用戶(hù)閱讀后點(diǎn)擊是與否來(lái)進(jìn)行下一步；
- 通過(guò)動(dòng)作，用戶(hù)通過(guò)輸入特定字符或者完成驗(yàn)證碼拖拽等操作才可進(jìn)行下一步操作；
- 通過(guò)身份校驗(yàn)，用戶(hù)需要提交個(gè)人身份信息以完成校驗(yàn)；
四、一致性原則
整個(gè)系統(tǒng)要保持產(chǎn)品結(jié)構(gòu)架構(gòu)、導(dǎo)航、用語(yǔ)、色彩、操作行為交互的一致性與標(biāo)準(zhǔn)性，遵循平臺(tái)慣例與行業(yè)標(biāo)準(zhǔn)。我們?cè)谠O(shè)計(jì)中常見(jiàn)的制作平臺(tái)規(guī)范，其實(shí)就是為了保證平臺(tái)設(shè)計(jì)的一致性。
一致性原則的根本目的是保證產(chǎn)品的專(zhuān)業(yè)性，給用戶(hù)帶去統(tǒng)一的體驗(yàn)感受。
該原則在設(shè)計(jì)中的體現(xiàn)：
1. 一致性-產(chǎn)品內(nèi)部一致
遵循產(chǎn)品內(nèi)部的慣例，可幫助用戶(hù)快速學(xué)習(xí)使用產(chǎn)品功能。產(chǎn)品內(nèi)部的一致性包含：產(chǎn)品功能框架、文字、設(shè)計(jì)風(fēng)格、布局、反饋等等。
比如：小熊藝術(shù)app，一款針對(duì)孩子學(xué)習(xí)美術(shù)的app，不管是首頁(yè)、個(gè)人中心以及加載等頁(yè)面，風(fēng)格保持一致性都是主打清新黃色+可愛(ài)icon。黃色小熊更是在不同的合適的時(shí)機(jī)出現(xiàn)，banner、加載，課程動(dòng)畫(huà)中等。不僅風(fēng)格一致性、布局、反饋等產(chǎn)品內(nèi)部保持一致性，也形成了統(tǒng)一的品牌傳達(dá)。
但是，有時(shí)候?yàn)榱诉_(dá)到產(chǎn)品目標(biāo)，偶爾也會(huì)故意采用不一致的設(shè)計(jì)。
比如：常見(jiàn)的對(duì)話框都將“確定”按鈕放在右邊位置，所以用戶(hù)在操作時(shí)，很容易產(chǎn)生條件反射，順手點(diǎn)擊右邊按鈕，然后才突然發(fā)現(xiàn)自己點(diǎn)錯(cuò)了。雖然看起來(lái)有些別扭甚至很多人不喜歡，但是很有效，這種設(shè)計(jì)在軟件卸載、App取消會(huì)員訂閱等操作中非常常見(jiàn)，主要是為了做一些心理暗示和引導(dǎo)，避免用戶(hù)卸載或退訂。
2. 一致性-交互行為一致
交互和用戶(hù)的習(xí)慣一致，意味著用戶(hù)不再需要重新學(xué)習(xí)，各種應(yīng)用之間的切換沒(méi)有學(xué)習(xí)成本。
我們?cè)谇捌谝呀?jīng)培養(yǎng)好用戶(hù)的使用習(xí)慣，那么就不要輕易改變，減少用戶(hù)的認(rèn)知成本與學(xué)習(xí)成本。
例如：常見(jiàn)的頁(yè)面的后退或返回都在屏幕左上角、搜索欄都在屏幕最上方、菜單欄都懸浮在屏幕底部。
3. 一致性-迭代產(chǎn)品一致
當(dāng)產(chǎn)品線進(jìn)行更新迭代的時(shí)候，應(yīng)該保留用戶(hù)既有的交互和操作習(xí)慣，用戶(hù)在上一個(gè)版本形成的交互認(rèn)知在下一個(gè)版本是否能被沿用，這對(duì)于用戶(hù)來(lái)說(shuō)在產(chǎn)品體驗(yàn)上會(huì)造成很大的干擾。
比如微信的多年的迭代，底部tab功能一直都是這樣，主要功能入口一致沒(méi)有變化，就體現(xiàn)了迭代產(chǎn)品的一致性。
4. 一致性-同一團(tuán)隊(duì)/公司產(chǎn)品線一致
Office軟件中包含的各個(gè)產(chǎn)品，其界面布局和設(shè)計(jì)風(fēng)格都保持了高度一致，如下圖所示是PowerPoint和Word的界面，可以看出，二者的“插入”一級(jí)菜單下所包含功能的排列順序、布局方式乃至圖標(biāo)圖形，都是高度類(lèi)似的。
5. 一致性-設(shè)計(jì)語(yǔ)言一致
遵循統(tǒng)一的產(chǎn)品設(shè)計(jì)規(guī)范／邏輯。這里的一致性包含產(chǎn)品和跨平臺(tái)產(chǎn)品之間的一致性。確保整個(gè)系統(tǒng)的結(jié)構(gòu)一致性、色彩一致性、操作一致性、反饋一致性、同種組件樣式保持一致等設(shè)計(jì)語(yǔ)言都遵循同一套設(shè)計(jì)規(guī)則。
比如，產(chǎn)品內(nèi)相同顏色的反復(fù)出現(xiàn)，為產(chǎn)品打造視覺(jué)錘符號(hào)，強(qiáng)化產(chǎn)品在用戶(hù)心中的記憶點(diǎn)。
符合平臺(tái)設(shè)計(jì)規(guī)范，比如：蘋(píng)果系統(tǒng)參照人機(jī)交互設(shè)計(jì)指南設(shè)計(jì)規(guī)范，安卓系統(tǒng)參照Material Design設(shè)計(jì)規(guī)范，或者直接參照自己團(tuán)隊(duì)的的設(shè)計(jì)規(guī)范，應(yīng)該遵循慣例，并且保持系統(tǒng)的一致感，不要盲目地標(biāo)新立異。
6. 一致性-業(yè)內(nèi)產(chǎn)品保持一致
不知道你發(fā)現(xiàn)了沒(méi)，現(xiàn)在的電商、音樂(lè)、社交等等app越來(lái)越一樣了，一樣的交互，一樣的排版設(shè)計(jì)，基本上都遵循著類(lèi)似的交互邏輯和視覺(jué)元素。
為什么會(huì)這樣？同類(lèi)軟件設(shè)計(jì)的趨同化，未必不是一件好事？
與業(yè)內(nèi)產(chǎn)品保持一致，意味著用戶(hù)不再需要重新學(xué)習(xí)，就可以在各種應(yīng)用中自由切換，用戶(hù)學(xué)習(xí)成本的降低，也意味著我們獲客成本從某種程度上被降低。
而這些約定俗成的規(guī)則和流程都被用戶(hù)不自覺(jué)地印刻在大腦中，成為一種自然的習(xí)慣，而獨(dú)特的設(shè)計(jì)，截然不同的規(guī)則，則常常會(huì)成為習(xí)慣以外的東西，引起混亂，讓初次上手的用戶(hù)感到受挫和沮喪。
如，在App底部的導(dǎo)航圖標(biāo)中，“首頁(yè)”永遠(yuǎn)排在第一個(gè)，個(gè)人中心（“我的”）永遠(yuǎn)排在最后。并且對(duì)于類(lèi)似“首頁(yè)”“購(gòu)物車(chē)”“訂單”等常見(jiàn)按鈕，不同App的設(shè)計(jì)樣式都非常相似。如下圖三個(gè)不同音樂(lè)app的對(duì)比圖：
如果你特立獨(dú)行地把個(gè)人中心放在第一個(gè)位置，或者采用奇怪的圖標(biāo)作為個(gè)人中心的icon，用戶(hù)使用時(shí)肯定會(huì)覺(jué)得別扭。
五、防錯(cuò)原則
防錯(cuò)原則的根本目標(biāo)是阻止錯(cuò)誤行為，避免進(jìn)一步犯錯(cuò)，指引用戶(hù)正確的完成操作行為。
「防止錯(cuò)誤」主要分為三個(gè)階段：錯(cuò)誤行動(dòng)發(fā)生前，引導(dǎo)用戶(hù)向正確的方向前進(jìn)；用戶(hù)觸碰到危險(xiǎn)操作時(shí)給予提示；危險(xiǎn)操作發(fā)生之后，提供撤回的入口。
該原則在設(shè)計(jì)中的體現(xiàn)：
1. 在執(zhí)行危險(xiǎn)操作前做設(shè)計(jì)
比一個(gè)優(yōu)秀的錯(cuò)誤提醒彈窗更好的設(shè)計(jì)方式，是在這個(gè)錯(cuò)誤發(fā)生之前就避免它。它可以幫助用戶(hù)排除一些容易出錯(cuò)的情況，或在用戶(hù)提交之前給他一個(gè)確認(rèn)的選項(xiàng)。
通常情況下，按鈕置灰表示對(duì)應(yīng)功能或操作無(wú)法使用，這也是防止錯(cuò)誤的一條有效途徑，因?yàn)橛脩?hù)通過(guò)按鈕樣式就可獲知其狀態(tài)，提前規(guī)避無(wú)效的提交操作。
當(dāng)然，不是只要功能或操作無(wú)法使用時(shí)，就應(yīng)該將對(duì)應(yīng)的按鈕置灰。
其實(shí)更好的做法是填寫(xiě)完標(biāo)題后按鈕不置灰，點(diǎn)擊完成按鈕后定位或高亮必填項(xiàng)，讓用戶(hù)更容易識(shí)別錯(cuò)誤點(diǎn)。
比如在登錄時(shí)，只有輸出信息后才可以點(diǎn)擊登錄按鈕，未輸入信息時(shí)，按鈕是不可以點(diǎn)擊的狀態(tài)。通過(guò)系統(tǒng)主動(dòng)對(duì)用戶(hù)進(jìn)行操作限制，幫助用戶(hù)避免發(fā)生錯(cuò)誤。
限制用戶(hù)的選擇并不是一個(gè)好主意，但是如果有明確的規(guī)則來(lái)定義可接受的選項(xiàng)，那么限制用戶(hù)可以輸入的類(lèi)型是一個(gè)很好的策略。
再比如輸入驗(yàn)證碼頁(yè)面，為了防止用戶(hù)多輸入或者少輸入驗(yàn)證碼，只給到四個(gè)輸入框，讓用戶(hù)只能輸入四位數(shù)字，減少輸入錯(cuò)誤的幾率。
2. 在執(zhí)行危險(xiǎn)操作中做設(shè)計(jì)
提供清晰的提示，防止用戶(hù)犯錯(cuò)，提示包括標(biāo)簽、文字、顏色、以及反饋狀態(tài)等。利用顏色，動(dòng)效提供警示信息，比如常見(jiàn)的微信退出的按鈕是紅色的，狀態(tài)未完成的標(biāo)簽是紅色的等等。
如：表單填寫(xiě)過(guò)程中讓用戶(hù)及時(shí)知道輸入格式，出錯(cuò)原因，避免填寫(xiě)完成后再提醒，浪費(fèi)用戶(hù)時(shí)間。
范圍限制：限制用戶(hù)的選擇并不是一個(gè)好主意，但是如果有明確的規(guī)則來(lái)定義可接受的選項(xiàng)，那么限制用戶(hù)可以輸入的類(lèi)型是一個(gè)很好的策略。比如：電影購(gòu)票時(shí)，已購(gòu)買(mǎi)的位子不會(huì)再提供選擇，很好的避免了買(mǎi)重的問(wèn)題
3. 危險(xiǎn)操作發(fā)生之后做設(shè)計(jì)
特別要注意在用戶(hù)操作具有毀滅性結(jié)果的功能時(shí)要有提示，防止用戶(hù)犯不可挽回的錯(cuò)誤，需打斷用戶(hù)，提示用戶(hù)是否要進(jìn)行此操作，讓用戶(hù)有更多的思考時(shí)間。所以在一些不可逆的操作中二次確認(rèn)是非常有必要的。
這條原則很重要也很常見(jiàn)。在刪除信息時(shí)，系統(tǒng)會(huì)讓用戶(hù)確認(rèn)刪除，也就是我們常說(shuō)的二次確認(rèn)，電商平臺(tái)允許在一定的規(guī)則下取消訂單等等。
總結(jié)
尼爾森是大可用性原則可靈活運(yùn)用于各個(gè)地方，可以是交互設(shè)計(jì)，也可以是界面設(shè)計(jì)，深入了解該設(shè)計(jì)原則，可以找到更好的解決方案，提高用戶(hù)的使用體驗(yàn)。
要注意的是，這10項(xiàng)原則是啟發(fā)式（heuristics）的、廣泛的經(jīng)驗(yàn)法則，而不是具體的規(guī)定。
- 狀態(tài)可見(jiàn)原則：位置可見(jiàn)、數(shù)量可見(jiàn)、狀態(tài)可見(jiàn)；
- 環(huán)境貼近原則：語(yǔ)言應(yīng)該是用戶(hù)所能理解和習(xí)慣的；
- 用戶(hù)可控原則：可見(jiàn)導(dǎo)航、關(guān)閉與返回、撤銷(xiāo)與重做；
- 一致性原則：產(chǎn)品內(nèi)部一致、交互一致、迭代產(chǎn)品一致、同一產(chǎn)品線一致、設(shè)計(jì)語(yǔ)言一致、業(yè)內(nèi)產(chǎn)品一致；
- 防錯(cuò)原則：操作前預(yù)警、操作中確認(rèn)、操作后可撤回；
好了，明天我們繼續(xù)聊聊后面的幾個(gè)原則。文中如果有不嚴(yán)謹(jǐn)、錯(cuò)誤的地方希望大家給予指正，希望大家可以多多點(diǎn)贊評(píng)論鼓勵(lì)下，最后感謝您的耐心閱讀。
本文由 @三原設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash ，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
學(xué)到很多，很有啟發(fā)，謝謝作者。
不客氣，能幫到你就好