小伙伴們大家好

今天我將結(jié)合實際案例來深入解析尼爾森十大交互設(shè)計原則计雌，希望對大家有所幫助申屹。

本文共3929字，需要閱讀時間約10分鐘~

Jakob Nielsen（雅各布·尼爾森）是畢業(yè)于哥本哈根的丹麥技術(shù)大學的人機交互博士，他擁有79項美國專利吧凉，主要涉及讓互聯(lián)網(wǎng)更容易使用的方法假抄。他于1995年提出了“十大可用性原則”雅采。這些原則對于設(shè)計師是非常重要的理論基礎(chǔ)，如何在實際工作中來正確的運用呢慨亲？下面我們結(jié)合實例來了解一下婚瓜。

一、狀態(tài)可見原則（Visibility of system status ）

定義：系統(tǒng)狀態(tài)的可見性是指系統(tǒng)狀態(tài)傳達給用戶的程度刑棵。針對用戶的任何操作巴刻，系統(tǒng)都應(yīng)該在合理時間內(nèi)給予一定的反饋。在什么頁面蛉签，做了什么胡陪，接下來需要做什么，怎么做碍舍，系統(tǒng)應(yīng)該明確的告訴用戶柠座，讓用戶對自己的行為有所了解，有一定的心理預(yù)期片橡，防止發(fā)生操作錯誤妈经。

案例一 ?進程狀態(tài)反饋

用過hellofont與字魂兩款字體軟件的應(yīng)該會有很明顯的感受，尤其是網(wǎng)絡(luò)不好的情況，前者下載一款字體時沒有任何進度提示吹泡，只有當下載成功后前面的圖標會顯示成點亮的對號狀態(tài)骤星，而后者點擊某一款字體后便會有下載進度，這便是狀態(tài)可見原則的體現(xiàn)爆哑，實時對用戶行為進行反饋洞难，讓用戶無需多余的思考。

用戶在進行了操作后揭朝，如果產(chǎn)品沒有任何反應(yīng)队贱，用戶會缺乏安全感，會認為是我操作錯了還是產(chǎn)品出現(xiàn)問題了潭袱？所以柱嫌，根據(jù)心理預(yù)期，產(chǎn)品要對用戶每一步給出明確的反饋敌卓，需要告知用戶當前行為是否操作正確慎式、正在進行中還是已經(jīng)完成，如圖：

案例二 ? ?餓了么訂單狀態(tài)實時反饋

在餓了么下單后趟径，在訂單頁第一個位置就會顯示當前訂單的狀態(tài)瘪吏，通過地理位置來告知用戶“正在準備中”“正在送貨”以及配送員距離你多少米的顯示，下雨天蜗巧，地圖上則會以下雨的樣式展現(xiàn)掌眠，體驗非常細膩，使用時就像是跟一個知心的朋友聊天一樣幕屹，對每一步都及時并清晰的進行反饋告知蓝丙，不需要用戶消耗多余的時間去猜測。

二望拖、環(huán)境貼切原則（Match between system and the real world）

產(chǎn)品設(shè)計應(yīng)該遵循現(xiàn)實世界中人們的使用習慣和思維方式渺尘，盡可能使用通俗易懂的詞語和已習慣的交互方式，針對不同人群不同風俗應(yīng)該制定不同的設(shè)計方案说敏。

案例一 ?設(shè)計樣式貼切現(xiàn)實生活

如下圖2-1-ios13系統(tǒng)工具圖標鸥跟，指南針模擬的是現(xiàn)實指南針的樣式，同理盔沫，計算器医咨、watch、錢包架诞、設(shè)置拟淮、時鐘等都工具類的圖標都與現(xiàn)實生活中常用工具樣式極為相似，如下圖2-2的左右對比谴忧。這樣的設(shè)計讓人們非常容易接受并使用很泊，降低了用戶學習成本角虫。

案例二 ?產(chǎn)品設(shè)計貼切現(xiàn)實環(huán)境

用戶環(huán)境不同，產(chǎn)品的設(shè)計也會不同撑蚌。例如vipkid家長版與教師版上遥，家長版針對的是國內(nèi)用戶搏屑，所以是中文界面争涌，而教師版針對教師群體，是國外的教師辣恋，所以界面就貼合國外的用戶而設(shè)計亮垫。

三、用戶可控原則（User control and freedom）

在產(chǎn)品交互中伟骨，允許用戶有更多的自主操控權(quán)饮潦，如果用戶誤操作了一些功能，則應(yīng)給用戶提供一些解決方案携狭，比如撤銷/重做功能继蜡。

案例一??

使用餓了么app，如果用戶近期不想吃這家外賣逛腿，但是又不小心兌換了紅包稀并，則可以在紅包卡劵的頁面撤銷兌換，避免了用戶因為自己的操作錯誤而帶來損失单默。

案例二

微信聊天界面碘举，用戶誤操作發(fā)送給朋友的信息，可以支持右鍵撤回搁廓，企業(yè)微信也有相同功能引颈，給了用戶更多的自主操控權(quán)，這也是用戶可控原則的體現(xiàn)境蜕。

四蝙场、一致性和標準原則（Consistency and standards）

產(chǎn)品的功能結(jié)構(gòu)、排版樣式粱年、顏色搭配售滤、交互操作、反饋術(shù)語需要保持一致逼泣，以防用戶以為使用的不是同一款產(chǎn)品趴泌。一些交互方式和樣式則需要遵循現(xiàn)有規(guī)范，以便用戶能夠預(yù)期到將要發(fā)生什么和如何來操作頁面拉庶。

案例一 ?視覺一致

以淘寶為例嗜憔，如5個tab的頁面，頭部顏色比較統(tǒng)一氏仗，都是淺灰色吉捶；頁面中的標簽夺鲜、價格、提示呐舔、底部tab币励、按鈕等顏色都與淘寶logo的主色一致，界面中較好的保持了一致性的原則珊拼，如下圖：

案例二 ?操作行為一致

比如頁面的跳轉(zhuǎn)方式食呻，點擊功能入口，從右到左滑出頁面澎现，點擊左上角的返回icon仅胞，由左到右滑回上一個頁面。如下圖：

例如ios微信的聊天界面剑辫，右下角的添加功能模塊中干旧，所有的小功能頁面都是由下到上彈出頁面，交互方式上保持了統(tǒng)一性妹蔽，符合用戶的心理預(yù)期椎眯，使用時候就不會很突兀。

五胳岂、防錯原則（Error prevention）

用戶在操作過程中出現(xiàn)錯誤是不可避免的编整，而優(yōu)秀的產(chǎn)品應(yīng)該在用戶出現(xiàn)錯誤之前通過頁面細節(jié)的設(shè)計來避免發(fā)生，這樣會比發(fā)生后再告知用戶更友好旦万，不會給用戶增加心理負擔闹击。

知識點1：給用戶一個約束

案例：天貓商品選項中，無貨的尺碼則不會顯示成艘，這樣用戶看到無貨便會去尋找其他合適的商品赏半；又比如飛豬旅行中選擇日期，過期的日期不可選擇淆两，這些都是給用戶限定了一個可選擇的范圍断箫，防止用戶選擇無效商品后帶來的失落感。

知識點2：為用戶提供建議

案例：如百度搜索秋冰，在輸入文字時仲义，下方會出現(xiàn)與文字相關(guān)的詞語，而用戶文字輸入錯誤并搜索后剑勾，百度并不會不給出結(jié)果埃撵，而是通過大數(shù)據(jù)來判斷用戶想要搜索的內(nèi)容，并給出搜索建議虽另，如下圖：

知識點3：善意提醒

案例：如唯品會正在支付中暂刘，退出支付頁面時，會彈出彈窗提示“放棄支付嗎”捂刺，提醒訂單會在30分鐘后取消谣拣，在用戶可能會出現(xiàn)錯誤或重要操作退出時給用戶一個善意的彈窗提醒募寨，防止用戶因不當操作造成損失。如下圖：

六森缠、易取原則（Recognition rather than recall）

產(chǎn)品設(shè)計應(yīng)該最大程度地減少用戶的記憶負擔拔鹰，讓信息、操作按鈕贵涵、選項盡量清晰可見列肢。不需要用戶記住一頁到另一頁的路徑或者信息，而且產(chǎn)品的使用指南應(yīng)該清晰可見独悴。

案例一 ?歷史記錄

搜索功能中的歷史記錄功能例书，如餓了么锣尉，點擊搜索刻炒，出現(xiàn)「歷史搜索」以及最下方的根據(jù)你的瀏覽推薦模塊，用戶無須特意記住自己之前搜的店鋪自沧，優(yōu)秀的產(chǎn)品就會幫你記住并推薦你想要的坟奥，這也是易取原則的體現(xiàn)，如下圖：

案例二 ?登錄

如網(wǎng)易云音樂的登錄流程拇厢，如果注冊過的用戶爱谁，下次登錄時直接識別當前手機號碼，并且可以「一鍵登錄」孝偎，流程非常簡化访敌，用戶不需要記住密碼或者一步步發(fā)驗證碼，極大程度減輕了用戶的記憶負擔衣盾，這也是易取原則的很好體現(xiàn)寺旺。

七、靈活高效原則（Flexibility and efficiency of use）

一款產(chǎn)品服務(wù)的用戶往往并不是單一的角色势决，例如有新手用戶阻塑、付費用戶、專家級用戶果复、活躍用戶陈莽、普通用戶等，這也導(dǎo)致了用戶訴求和需求的個性化虽抄，所以產(chǎn)品的內(nèi)容設(shè)計上需要分層次去滿足不同的用戶走搁，靈活高效去運營。

案例一 ?回頂部功能

如每日優(yōu)鮮首頁上滑一段內(nèi)容后迈窟，底部tab首頁icon會切換為「回頂部」私植，靈活設(shè)計產(chǎn)品功能，方便了需要返回頂部的用戶菠隆，如下圖：

案例二 功能個性化定制

如美團兵琳、支付寶金剛區(qū)個性化編輯功能狂秘，用戶可以根據(jù)自身需求與喜好來編輯功能的顯示與順序，常用功能靠前躯肌，不常用功能刪除者春，提高了用戶的使用效率，如下圖：

京東-我的頻道清女，也是靈活高效原則的一個很好體現(xiàn)钱烟，用戶根據(jù)使用頻率來定制專屬頻道，增強了用戶自身的存在感嫡丙，提升用戶體驗拴袭，如圖：

八、美學和簡約設(shè)計原則（Aesthetic and minimalist design）

頁面內(nèi)容在于精而不在于多曙博，由于手機屏幕的大小限制拥刻，產(chǎn)品應(yīng)該突出重點，去除弱化不相關(guān)或不常用的信息父泳，讓用戶更加專注于重要信息般哼。

案例：

以餓了么與美團外賣的金剛區(qū)為例，功能比較多惠窄，排版上并沒有大小一致依次排列下去蒸眠，而是選出最重要的五個功能設(shè)計成大圖標放在第一排，而次要不常用的則縮小弱化杆融，大小形狀對比突出重要內(nèi)容楞卡，如下圖：

九、容錯原則（Help users recognize, diagnose, and recover from errors）

當用戶出現(xiàn)錯誤時脾歇，能夠為用戶提供明確清晰的解決方案蒋腮，把用戶的損失降到最低。

案例：

如網(wǎng)易郵箱介劫，用戶刪掉郵件徽惋，會有Snackbar彈出，右側(cè)有撤銷選項座韵，如果用戶誤刪則可以點擊撤銷险绘，如圖：

十、人性化幫助原則（Help and documentation）

用戶在初次使用一款產(chǎn)品時誉碴，有些功能通常會不清楚怎么使用宦棺，所以產(chǎn)品需要給用戶提供一些文檔幫助，并且容易被用戶找到黔帕，文字要簡短清晰代咸，幫助用戶快速去了解產(chǎn)品和如何去使用。

案例一 ?新手引導(dǎo)

如口碑App成黄，初次下載后會有功能引導(dǎo)的頁面呐芥，通過提供文檔說明來幫助用戶快速了解如何使用產(chǎn)品逻杖，如圖：

案例二 ?表單填寫中的提示

如知乎中的資料編輯頁面，在頁面頂部會有展示說明思瘟，填寫資料處會有備注文檔荸百，指導(dǎo)用戶如何填寫，這都是人性化幫助的一種體現(xiàn)滨攻，如圖：

重點回顧

1够话、狀態(tài)可見原則：針對用戶的任何操作，系統(tǒng)都應(yīng)該在合理時間內(nèi)給予一定的反饋光绕。

2女嘲、環(huán)境貼切原則：產(chǎn)品設(shè)計應(yīng)該遵循現(xiàn)實世界中人們的使用習慣和思維方式，有針對性地去設(shè)計產(chǎn)品內(nèi)容诞帐。

3欣尼、用戶可控原則：用戶有更多的自主操控權(quán)利，針對用戶的錯誤景埃，提出清晰的解決方案媒至。

4、一致性和標準原則：產(chǎn)品的功能結(jié)構(gòu)谷徙、排版樣式、顏色搭配驯绎、交互操作完慧、反饋術(shù)語都需要保持一致。

5剩失、防錯原則：在用戶犯錯之前給予用戶一些合理的建議屈尼。

6、易取原則：盡可能減少用戶的記憶負擔拴孤。

7脾歧、靈活高效原則：產(chǎn)品的內(nèi)容設(shè)計上需要分層次去滿足不同的用戶。

8演熟、美學和簡約設(shè)計原則：突出重點鞭执，去除弱化不常用的信息，讓用戶更加專注于重要信息芒粹。

9、容錯原則：把用戶的錯誤損失降到最低。

10泳炉、人性化幫助原則：必要頁面給用戶提供文檔幫助殊轴。

以上便是我對尼爾森十大交互設(shè)計原則的理解，我從中學到了許多座云，希望對你也能有幫助~

謝謝閱讀疙赠，我們共同進步~ 筆芯~?

參考文獻：

https://www.nngroup.com/articles/ten-usability-heuristics/

參考書籍：《UI那些事兒》?

覺得有用的話就轉(zhuǎn)發(fā)給更多有需要的人吧~ 付材，公眾號【胖小魚設(shè)計小棧】圃阳，歡迎大家關(guān)注伞租。