開(kāi)篇靈魂拷問(wèn)：

你認(rèn)為一個(gè)怎樣的產(chǎn)品才算是一個(gè)好的產(chǎn)品？

這個(gè)問(wèn)題耳熟嗎？面試的時(shí)候是不是有被問(wèn)到過(guò)？

我們經(jīng)常使用的那些產(chǎn)品，哪些是好的產(chǎn)品呢？

當(dāng)我們談?wù)撘粋€(gè) APP 產(chǎn)品時(shí)，

作為用戶(hù)你最關(guān)心的是什么？

一般都是是這個(gè)產(chǎn)品好用嗎？功能復(fù)雜嗎？

而不是這個(gè)產(chǎn)品用戶(hù)界面顏色好看嗎？

交互的動(dòng)效酷炫嗎？

互聯(lián)網(wǎng)已經(jīng)深入到每個(gè)人的生活當(dāng)中，

時(shí)刻影響著我們；

一個(gè)好的產(chǎn)品會(huì)給我們帶來(lái)便捷，

使我們的生活變得簡(jiǎn)單而又美好；

也會(huì)有一些產(chǎn)品使用時(shí)會(huì)感到不舒服，

糟糕的產(chǎn)品體驗(yàn)會(huì)讓我們的生活變得復(fù)雜而又煩惱。

所以，決定一個(gè)產(chǎn)品好不好用，

能不能長(zhǎng)期使用都是用戶(hù)體驗(yàn)直接決定的。

用戶(hù)體驗(yàn)關(guān)注的是在滿(mǎn)足用戶(hù)需求的同時(shí)帶給用戶(hù)美好的感受。

接下來(lái)我們來(lái)聊一聊「尼爾森十大原則」，

這十大原則是具體而又全面的用戶(hù)體驗(yàn)可行性檢驗(yàn)方法。

    

尼爾森是誰(shuí)？

雅各布·尼爾森（Jakob Nielsen）是畢業(yè)于哥本哈根的丹麥技術(shù)大學(xué)的人機(jī)交互博士，他擁有79項(xiàng)美國(guó)專(zhuān)利,專(zhuān)利主要涉及讓互聯(lián)網(wǎng)更容易使用的方法。于1995年1月1日發(fā)表了「十大可用性原則」。1995年以來(lái)，他通過(guò)自己的 Alertbox 郵件列表以及 useit.com 網(wǎng)站，向成千上萬(wàn)的 Web 設(shè)計(jì)師傳授 Web 易用性方面的知識(shí)，盡管他的一些觀點(diǎn)可能帶來(lái)爭(zhēng)議，至少在 Web 設(shè)計(jì)師眼中，他是 Web 易用性領(lǐng)域的頂尖領(lǐng)袖。2006年4月，并被納入美國(guó)計(jì)算機(jī)學(xué)會(huì)人機(jī)交互學(xué)院，被賦予人機(jī)交互實(shí)踐的終身成就獎(jiǎng)。他還被紐約時(shí)報(bào)稱(chēng)為“Web 易用性大師”，被 Internet Magazine 稱(chēng)為 “易用之王”。

        

尼爾森的十大可用性原則，它們被稱(chēng)為「啟發(fā)式」，      
        

是廣泛的經(jīng)驗(yàn)法則，而不是特定的可用性指導(dǎo)原則。

雖然是1995年提出來(lái)的，

但是至今仍然被奉為交互設(shè)計(jì)師的入門(mén)法則，

我們不能把它上升為一種標(biāo)準(zhǔn)，

而只當(dāng)做一種經(jīng)驗(yàn)來(lái)學(xué)習(xí)，

然后跟現(xiàn)實(shí)中的設(shè)計(jì)結(jié)合來(lái)使用。

因?yàn)槟崂蠋熓菑?web 設(shè)計(jì)提出的十大可用性原則，

我們要結(jié)合的是目前移動(dòng)互聯(lián)網(wǎng)的特點(diǎn)，

然后在「尼爾森十大原則」的結(jié)構(gòu)下探討在用戶(hù)體驗(yàn)上達(dá)到的目標(biāo)。

尼爾森十大可?用性原則為：

01. 狀態(tài)可見(jiàn)原則 

02. 環(huán)境貼切原則 

03. 撤銷(xiāo)重做原則

04. 一致性原則 

05. 防錯(cuò)原則

06. 易取原則 

07. 靈活原則 

08. 易掃原則 

09. 容錯(cuò)原則 

10. 人性化幫助原則

下面我們就針對(duì)每一條來(lái)單獨(dú)分析一下吧~

1  ·.  狀態(tài)可見(jiàn)原則 

系統(tǒng)應(yīng)該讓用戶(hù)知道發(fā)生了什么，

在適當(dāng)?shù)臅r(shí)間內(nèi)做出適當(dāng)?shù)姆答仭?/span>

不要蒙蔽用戶(hù)；

溝通是所有關(guān)系的基礎(chǔ)，無(wú)論?還是設(shè)備。

示例：在淘寶里，我下拉時(shí)他告訴我「松開(kāi)刷新」，也就是現(xiàn)在還沒(méi)有開(kāi)始刷新；我松開(kāi)后狀態(tài)變更成「刷新中」，表示現(xiàn)在正在刷新。

這樣的設(shè)計(jì)告訴我們，界面現(xiàn)在是什么狀態(tài)，現(xiàn)在在干嘛，在整個(gè)功能的變化過(guò)程中我們都能看到對(duì)應(yīng)的文字描述。

其他示例：下拉刷新時(shí)的加載中，加載完成提示，收藏成功、支付成功、實(shí)付失敗等提示。

2 ·. 環(huán)境貼切原則

功能和服務(wù)貼近用戶(hù)使用的場(chǎng)景，

符合當(dāng)前場(chǎng)景用戶(hù)的體驗(yàn)。

產(chǎn)品的功能和服務(wù)應(yīng)該貼近真實(shí)世界，

讓信息更自然，邏輯上也更容易被用戶(hù)理解。

示例：我們?cè)诘昀镔I(mǎi)東西的時(shí)候經(jīng)常會(huì)聽(tīng)到這樣的聲音「支付寶導(dǎo)致：5元」就是貼近環(huán)境的設(shè)計(jì)。

商家需要確認(rèn)你是否付錢(qián)，

但是又經(jīng)常忙于手頭的事情無(wú)法及時(shí)查看；

而這樣功能的設(shè)計(jì)，商家即使在忙著手頭的事情依然能通過(guò)聲音來(lái)確認(rèn)已經(jīng)收到你的錢(qián)了。

這樣的設(shè)計(jì)對(duì)于商家和消費(fèi)者是友好便捷的。

3  ·.  撤銷(xiāo)重做原則 

在使用產(chǎn)品時(shí)了解和掌控當(dāng)前頁(yè)面。

如果用戶(hù)誤操作，可以隨時(shí)撤銷(xiāo)，用戶(hù)在使用產(chǎn)品時(shí)足夠自由。

示例1：我們用微信和對(duì)方聊天時(shí)，當(dāng)我們寫(xiě)了很多字，發(fā)出去時(shí)卻發(fā)現(xiàn)其中有錯(cuò)誤，這時(shí)我們可以使用微信的撤回功能，體驗(yàn)更好的是，撤回消息旁邊有「重新編輯」功能，可以讓之前編輯的文本回到對(duì)話(huà)框重新編輯再發(fā)送。如下圖：

示例2：iOS系統(tǒng)照片的刪除和撤回

4 ·. 一致性原則

同樣的文字、狀態(tài)、按鈕，都應(yīng)該觸發(fā)相同的事情，遵從通用的平臺(tái)慣例。也就是，同一用語(yǔ)、功能、操作保持一致。主要包括以下五個(gè)方面：

1. 結(jié)構(gòu)一致性

保持一種類(lèi)似的結(jié)構(gòu)，新的結(jié)構(gòu)變化會(huì)讓用戶(hù)思考，規(guī)則的排序能減輕用戶(hù)的思考負(fù)擔(dān)。

示例：微信中每個(gè)模塊的條目都有統(tǒng)一的「圖標(biāo)+文字信息」的結(jié)構(gòu)樣式，能讓用戶(hù)快速了解每一個(gè)模塊；

2. 色彩一致性

產(chǎn)品所使用的主要色調(diào)應(yīng)該是統(tǒng)一的，而不是換一個(gè)頁(yè)面，顏色就不同。

示例：淘寶的圖標(biāo)顏色與界面的主色均為橙色，也包括其中一些標(biāo)簽和強(qiáng)調(diào)的文字顏色都是橙色色。整個(gè)界面除了圖片的有效信息外，都通過(guò)灰、白、橙色色來(lái)呈現(xiàn)，界面保持了很好的一致性；

3. 操作一致性

能在產(chǎn)品更新?lián)Q代時(shí)仍然讓用戶(hù)保持對(duì)原產(chǎn)品的認(rèn)知，減小用戶(hù)的學(xué)習(xí)成本。

示例：微信在對(duì)話(huà)框和通訊錄都采用了左滑出操作的交互，如下圖：

4. 反饋一致性

用戶(hù)在操作按鈕或者條目的時(shí)候，點(diǎn)擊的反饋效果應(yīng)該是一致的。

示例：QQ的每個(gè)分組點(diǎn)擊后都是向下展開(kāi)組內(nèi)成員列表；

5. 文字一致性

產(chǎn)品中呈現(xiàn)給用戶(hù)閱讀的文字大小、樣式、顏色、布局等都應(yīng)該是一致的。

示例：例如微信幾個(gè)關(guān)鍵界面的字體：三個(gè)主界面內(nèi)容結(jié)構(gòu)不盡相同，但是，列表的標(biāo)題字體和間距都一樣，這樣讓整個(gè)APP視覺(jué)上看起來(lái)很舒服；

5  ·.  防錯(cuò)原則

比出現(xiàn)錯(cuò)誤信息提示更更好的是，用設(shè)計(jì)防?止這類(lèi)問(wèn)題發(fā)生。在用戶(hù)選擇動(dòng)作發(fā)?生之前， 就要防止用戶(hù)容易混淆或者錯(cuò)誤的選擇。

1. 限制操作范圍與條件；

示例：未輸入驗(yàn)證碼前，底部的登錄按鈕是置灰不可點(diǎn)擊的，只有填寫(xiě)完整，底部的登錄按鈕才會(huì)變?yōu)榭牲c(diǎn)擊狀態(tài)。這就是為了防止用戶(hù)犯更多錯(cuò)誤；

2. 對(duì)有風(fēng)險(xiǎn)的操作進(jìn)?二次確認(rèn)；

示例：刪除個(gè)好友時(shí)，通過(guò)二次彈窗給出防錯(cuò)措施。

6 ·. 易取原則

減少用戶(hù)記憶負(fù)荷，在適合的時(shí)機(jī)給用戶(hù)需要獲取的信息。

1. 為用戶(hù)提供歷史記錄、關(guān)注、收藏等功能；

示例：愛(ài)奇藝為用戶(hù)提供了看過(guò)記錄和我的收藏，幫助用戶(hù)記憶：

2. 選擇而不是輸入，盡量降低輸入成本;

示例1：打車(chē)軟件自動(dòng)獲取當(dāng)前位置；

示例2：iOS系統(tǒng)收到驗(yàn)證碼后自動(dòng)帶入到鍵盤(pán)，點(diǎn)擊直接輸入；

7 ·. 靈活原則

對(duì)于新用戶(hù)來(lái)說(shuō)，需要功能明確、清晰，對(duì)于老用戶(hù)需要快捷使用高頻功能。不可為了某一種用戶(hù)，把不必要的信息占據(jù)重要部分。主要體現(xiàn)在3個(gè)方面：

1. 自定義功能或模塊的展示位置；

示例：支付寶首頁(yè)的應(yīng)用是可以根據(jù)自身喜好自定義的，包括定義常用應(yīng)用、排序、刪除、新增等等。這樣用戶(hù)可以根據(jù)自己的個(gè)人興趣定制自己適合的應(yīng)用分布方式，這就叫做用戶(hù)定制常用功能，如下圖：

2. 將“常用”自動(dòng)歸納以提升使用效率;

示例：微信聊天界面表情彈窗中會(huì)有一個(gè)「最近使用」的模塊，它把個(gè)人平時(shí)使用頻率或者次數(shù)最多的表情進(jìn)行歸類(lèi)。當(dāng)用戶(hù)使用的時(shí)候，能很快的找到自己喜歡或者常用的表情，提高了聊天效率；包括餓了么的「我的訂單」里的每一個(gè)訂單都可以通過(guò)再來(lái)一單重新一鍵下單，如下圖：

3. 縮短操作路路徑，提升使?用效率與體驗(yàn)；

示例：微信的對(duì)話(huà)框，當(dāng)點(diǎn)擊「+」調(diào)出下面的操作選項(xiàng)時(shí)，會(huì)默認(rèn)彈出剛截圖或拍照的照片，方便用戶(hù)直接調(diào)取，還有APP長(zhǎng)按后出來(lái)的快捷操作列表，如下圖：

8 ·. 易掃原則

直譯：美學(xué)和簡(jiǎn)約的設(shè)計(jì)；頁(yè)面不應(yīng)包含不相關(guān)或很少需要的信息，頁(yè)面中的每個(gè)額外信息都會(huì)降低主要內(nèi)容的相對(duì)可見(jiàn)性。

示例：如下圖列表中出現(xiàn)的信息都是用戶(hù)比較關(guān)注的信息，比如配送費(fèi)，配送時(shí)間，距離等；攜程的選擇機(jī)票界面講最重要的時(shí)間和機(jī)票價(jià)格放大突出，讓用戶(hù)能一眼看到，如圖：

 9 ·. 容錯(cuò)原則

直譯：幫助用戶(hù)識(shí)別、診斷和從錯(cuò)誤中恢復(fù)；我們盡量避免用戶(hù)出現(xiàn)錯(cuò)誤，但當(dāng)出現(xiàn)錯(cuò)誤時(shí)，我們應(yīng)該盡量去安撫用戶(hù)的挫敗感。

?配圖+文字代替「404」，明確告訴用戶(hù)哪?錯(cuò)了和解決方案。

示例：界面加載失敗時(shí)的刷新提示，還有登錄時(shí)的手機(jī)號(hào)碼校驗(yàn)，如果手機(jī)格式錯(cuò)誤會(huì)出現(xiàn)會(huì)提示用戶(hù)手機(jī)格式不正確和正確的格式。

 10 ·. 人性化幫助

幫助性提示最好的方法是：

1.無(wú)需提示:非常簡(jiǎn)單易懂，用戶(hù)看界面就知道怎么操作，無(wú)需提示；

2.一次性提示:只需要一次提示用戶(hù)就懂如何使用；

示例：常見(jiàn)的新功能引導(dǎo)、引導(dǎo)?等，示例：

3.常駐提示: 較重要的提示，用于指導(dǎo)或幫助用戶(hù)；

示例：支付寶轉(zhuǎn)賬時(shí)，常駐在頂部的安全確認(rèn)提示，還有轉(zhuǎn)賬時(shí)的服務(wù)費(fèi)提示，如圖：

4.幫助文檔:稍微復(fù)雜一點(diǎn)的軟件，雖然要讓他盡量簡(jiǎn)單但幫助文檔都是必要的；

示例：微信設(shè)置界面里的「幫助與反饋」，還有支付寶轉(zhuǎn)賬時(shí)彈出來(lái)的「求助反饋」，點(diǎn)進(jìn)去后的常見(jiàn)問(wèn)題界面;

以上就是我對(duì)Jakob Nielsen（雅各布·尼爾森）的十大交互設(shè)計(jì)原則的理解和實(shí)例解讀，希望對(duì)大家有所幫助。如果大家同樣對(duì)這些方面有些興趣或者看了后有些什么想法，歡迎一起討論。

轉(zhuǎn)自：站酷-搞設(shè)計(jì)的月野兔