Hello 大家好，我是餿面包，又見(jiàn)面啦~今天聊聊大家耳熟能詳?shù)哪釥柹罂捎眯栽瓌t。

先問(wèn)大家一個(gè)問(wèn)題：

這些原則你可能已經(jīng)非常熟悉，但是你知道如何運(yùn)用這些原則嗎？

換句話說(shuō)，你知道如何將尼爾森設(shè)計(jì)原則放到我們的工作流程中去，讓它成為我們工作的一環(huán)嗎？

如何讓設(shè)計(jì)原則不再僅僅只是概念，而是可以實(shí)際指導(dǎo)我們落地的工具？

今天就用 10 個(gè)案例，分享一下如何將理論性的原則應(yīng)用到實(shí)際工作中。

同時(shí)，為了方便你在工作中走查。

我還準(zhǔn)備了一份走查文檔，文檔的 figma 文件可以在文末獲取。

尼爾森十大可用性原則走查表

走查表包含走查大項(xiàng)和小項(xiàng)，還有每個(gè)原則的應(yīng)用方法，走查的時(shí)候直接對(duì)著一項(xiàng)項(xiàng)檢查即可，幫助你查漏補(bǔ)缺。

原則 1：系統(tǒng)狀態(tài)可見(jiàn)性

設(shè)計(jì)應(yīng)始終通過(guò)在合理的時(shí)間內(nèi)提供適當(dāng)?shù)姆答?，讓用戶了解正在發(fā)生的事情。

例如下面這個(gè)頁(yè)面，只看這個(gè)頁(yè)面中的元素，你就能知道 3 件事情：

我在哪里、我能做什么、系統(tǒng)在做什么

這里再額外提一句，設(shè)計(jì)反饋的時(shí)候，一定要注意反饋方式要恰當(dāng)，尤其是時(shí)長(zhǎng)的控制，舉個(gè)反例，英語(yǔ)流利說(shuō) APP 的單詞查詢面板，請(qǐng)看下面的視頻，我錄制了面板彈出的時(shí)間。

面板彈出時(shí)間太長(zhǎng)

視頻中可能并不明顯，大家可以下載英語(yǔ)流利說(shuō)體驗(yàn)看看，嘗試在真實(shí)學(xué)習(xí)英語(yǔ)中去查詢單詞試試，你就能體會(huì)到微妙的時(shí)間感受了。

我在使用的時(shí)候是什么感受呢？

彈出時(shí)間太長(zhǎng)了！

設(shè)計(jì)師在面板彈出時(shí)加了一個(gè)微動(dòng)效，動(dòng)效的持續(xù)時(shí)間太長(zhǎng)，導(dǎo)致在查單詞的時(shí)候效率低下。一個(gè)工具類產(chǎn)品，效率為先，添加動(dòng)效當(dāng)然沒(méi)問(wèn)題，但是前提是一定不能影響效率。

這個(gè)案例也給我自己提了一個(gè)醒，我們?cè)谠O(shè)計(jì)一個(gè)方案的時(shí)候，單方面真的很難站在用戶的角度去思考，一定要實(shí)際去花大量的時(shí)間代入用戶的場(chǎng)景去使用，如果只是走馬觀花，大概率體會(huì)不到這些微妙的痛點(diǎn)，反而還會(huì)覺(jué)得這個(gè)微動(dòng)效不錯(cuò)。

同樣的，我也發(fā)現(xiàn)了一個(gè)比較不錯(cuò)的方案，反饋非?？?，哪怕它沒(méi)什么動(dòng)效，甚至不那么好看，但是我在查單詞的時(shí)候非常爽。

好看但不好用 VS 好用但不好看

用戶使用產(chǎn)品的根本目的是解決問(wèn)題，高效解決問(wèn)題。高效解決問(wèn)題是 1，其它的裝飾性體驗(yàn)是 0，沒(méi)有 1，再多的 0 都沒(méi)什么意義。

原則 2：系統(tǒng)與用戶現(xiàn)實(shí)匹配

系統(tǒng)與用戶現(xiàn)實(shí)匹配主要有兩個(gè)點(diǎn)：

其一：設(shè)計(jì)應(yīng)該使用用戶的語(yǔ)言，使用他們熟悉的單詞、短語(yǔ)和概念，而不是內(nèi)部術(shù)語(yǔ)。

其二：遵循現(xiàn)實(shí)世界的慣例，使信息以自然且符合邏輯的順序出現(xiàn)。

第一點(diǎn)很好理解，我把它理解為"見(jiàn)人說(shuō)人話，見(jiàn)鬼說(shuō)鬼話"。也就是你要根據(jù)用戶和場(chǎng)景來(lái)選擇用戶語(yǔ)言。

例如用戶大部分是老年人，使用"您"就比"你"更合適，用戶大部分是兒童，文案就要盡可能用詞簡(jiǎn)單易懂，甚至可以可愛(ài)俏皮。

遵循用戶的習(xí)慣用語(yǔ)

原則 3：用戶控制和自由

用戶經(jīng)常會(huì)在使用過(guò)程中發(fā)生誤操作，這時(shí)就需要一個(gè)非常明確的"緊急出口"，來(lái)幫助他們從當(dāng)時(shí)的情景中恢復(fù)過(guò)來(lái)。

其實(shí)就是要讓用戶能退出，并且有反悔的機(jī)會(huì)，常見(jiàn)的設(shè)計(jì)方法有撤銷(xiāo)、回收站等，這些大家應(yīng)該都見(jiàn)過(guò)很多，就不多贅述了。

原則 4：一致性和標(biāo)準(zhǔn)

同一產(chǎn)品內(nèi)，產(chǎn)品架構(gòu)導(dǎo)航、功能名稱、信息的視覺(jué)界面以及操作行為的交互方式等需要保持一致，同時(shí)產(chǎn)品需要與通用的業(yè)界標(biāo)準(zhǔn)一致。

導(dǎo)航、功能名稱和視覺(jué)交互一致性大家應(yīng)該都很熟悉，不舉例子了，主要想聊一聊行業(yè)通用性標(biāo)準(zhǔn)的一致性。

先假設(shè)現(xiàn)在讓你設(shè)計(jì)一款外賣(mài) APP，下面幾個(gè)選擇，你會(huì)選擇哪個(gè)？

A：市面上的外賣(mài) APP 太雷同，我要根據(jù)自己的喜好來(lái)做。

B：我要把它做得很前衛(wèi)、很潮流。

C：調(diào)研其他外賣(mài) APP，按照他們的大框架做。

請(qǐng)問(wèn)，你會(huì)選擇哪一個(gè)呢？

先別告訴我，我們?cè)賮?lái)想象一個(gè)場(chǎng)景。

現(xiàn)在你是用戶，不是設(shè)計(jì)師了，你餓得不行，打算點(diǎn)一個(gè)外賣(mài)，你打開(kāi)了一款全新的外賣(mài) APP。

這款 APP 就是前面新設(shè)計(jì)的那款，這時(shí)，你希望這個(gè) APP 是什么樣子的？

有答案了嗎？前后兩個(gè)答案是否匹配呢？

當(dāng)我們是用戶的時(shí)候，我們?nèi)c(diǎn)外賣(mài)，我們最在乎的是什么？是界面好不好看？是視覺(jué)夠不夠前衛(wèi)潮流？

都不是。

我想我們最在乎的還是外賣(mài)的豐富度、優(yōu)惠力度以及能否簡(jiǎn)單快捷的完成支付。

好，這時(shí)候回到第一個(gè)問(wèn)題。

如果我們?cè)O(shè)計(jì)的外賣(mài) APP，和市面上常見(jiàn)的外賣(mài) APP 完全不一樣，用戶進(jìn)來(lái)后不熟悉界面，要花很長(zhǎng)時(shí)間才能點(diǎn)一份外賣(mài)，那么除非你有大額補(bǔ)貼，不然留不住用戶。

大部分設(shè)計(jì)師都不是藝術(shù)家，而是問(wèn)題解決者，我知道所有設(shè)計(jì)師都有一顆創(chuàng)新夢(mèng)，但是不能盲目，大方向跟緊潮流，在小地方小創(chuàng)新也未嘗不可。

原則 5：錯(cuò)誤預(yù)防

在用戶操作的時(shí)候，要能夠有效預(yù)防錯(cuò)誤的發(fā)生。

我總結(jié)了 4 種場(chǎng)景的防錯(cuò)設(shè)計(jì)方式：

1. 顏色警示：用警示色來(lái)標(biāo)識(shí)危險(xiǎn)，提起用戶的警覺(jué)性
2. 動(dòng)作限制：限制用戶的操作，例如按鈕不可點(diǎn)擊、限制格式等
3. 增加門(mén)檻：二次確認(rèn)、雙擊完成操作
4. 補(bǔ)救措施：撤銷(xiāo)、回收站、糾錯(cuò)

4 種常見(jiàn)防錯(cuò)方式

原則 6：識(shí)別而不是回憶

用戶不必記住從界面的信息，通過(guò)使元素、操作和選項(xiàng)可見(jiàn)來(lái)降低用戶的內(nèi)存負(fù)載。

原則 6 讓我想起一個(gè)有趣的事情，咱們現(xiàn)在很少使用手寫(xiě)了，有時(shí)候提筆就忘字，但是，我們想不起來(lái)怎么寫(xiě)的字，卻能很輕松認(rèn)出來(lái)。

為啥？

就是因?yàn)樽R(shí)別比記憶更簡(jiǎn)單。所以我們最好讓用戶盡可能的"識(shí)別"，而不是"記憶"。

下面可以看美團(tuán)外賣(mài)的一個(gè)案例，下圖是美團(tuán)外賣(mài)首頁(yè)的金剛區(qū)，相信大家非常熟悉了，可能天天都在用。

哪怕我們天天使用，但是當(dāng)我把文字覆蓋后，你還能快速辨別嗎？是不是反應(yīng)時(shí)間變長(zhǎng)了？

圖標(biāo) + 文字增強(qiáng)識(shí)別度

原則 7：靈活高效地使用

讓新用戶好上手的同時(shí)，給老用戶提供快捷操作。

有哪些快捷方式可以使用？

快捷操作 + 自動(dòng)執(zhí)行?？旖萱I太常見(jiàn)了，就不舉例了，舉一個(gè)自動(dòng)執(zhí)行的例子：百度網(wǎng)盤(pán)復(fù)制分享信息后，打開(kāi) APP，自己就能讀取信息打開(kāi)文件，不需要再手動(dòng)輸入鏈接和密碼。

復(fù)制分享鏈接后自動(dòng)識(shí)別

原則 8：美觀簡(jiǎn)約的設(shè)計(jì)

界面應(yīng)該簡(jiǎn)潔美觀，減少出現(xiàn)不相關(guān)的信息。

這一點(diǎn)在國(guó)內(nèi)軟件上挺難做到的……我記得我用攜程買(mǎi)票，亂七八糟一堆我不需要的信息，我想設(shè)計(jì)師們也身不由己，業(yè)務(wù)需要。

那我們就束手無(wú)策了嗎？

當(dāng)然不是。

俗話說(shuō)，錢(qián)多有錢(qián)多的過(guò)法，錢(qián)少有錢(qián)少的過(guò)法。咱們不能去掉這些信息，至少保證這些信息別太干擾主流程，保證信息層級(jí)是清晰的，別把主旋律搞錯(cuò)了。

重點(diǎn)突出，主次分明

原則 9：幫助用戶認(rèn)知、判斷和修復(fù)錯(cuò)誤

錯(cuò)誤消息應(yīng)該用簡(jiǎn)單的語(yǔ)言表達(dá)，準(zhǔn)確地指出問(wèn)題，并建設(shè)性地提出解決方案。

主要應(yīng)用有空頁(yè)面、錯(cuò)誤提示等，比如微信公眾號(hào)里能夠識(shí)別疑似錯(cuò)別字，飛書(shū)文檔可以幫助你修正錯(cuò)別字等，這些都是幫助用戶識(shí)別、判斷和修復(fù)錯(cuò)誤的方式。

識(shí)別、判斷、修復(fù)錯(cuò)誤

原則 10：幫助和使用手冊(cè)

當(dāng)然了，最好的設(shè)計(jì)是不用解釋用戶就能明白，不行的話，就需要提供幫助信息來(lái)幫助用戶完成任務(wù)。

常見(jiàn)的幫助方式有新手引導(dǎo)、幫助中心和輸入建議等，都是經(jīng)常能見(jiàn)到了，這里尤其注意"輸入建議"，大家可以去看看飛書(shū)的 OKR 和 BOSS 直聘的簡(jiǎn)歷建議，都是非常好的幫助用戶完善內(nèi)容的幫助方式。

幫助用戶

以上，就是本次分享的尼爾森十大可用性原則的案例和用法，希望能夠幫到你。

作者：餿面包