作為一個設(shè)計師，經(jīng)常會聽說各種各樣的設(shè)計法則版保。這些法則無疑是好用的果覆，是前輩們經(jīng)過大量的實戰(zhàn)，并結(jié)合各學(xué)科總結(jié)出來的精華殖熟。
在設(shè)計過程中使用這些法則局待，可以讓我們避免很多“麻煩”，這些法則就像是前輩們過坑之后豎起的良心路標(biāo)菱属，沿著這些路標(biāo)钳榨，能讓我們的設(shè)計之路走的更順滑~比飄柔都好使。
不是說前輩的經(jīng)驗就是絕對正確的纽门，也許坑里會有美好風(fēng)景薛耻，會有新發(fā)現(xiàn)，但是不得不考慮的是赏陵，你是否有資源饼齿、有能力跳進(jìn)坑里，并保證從坑里活著出來蝙搔？
大公司會有專業(yè)的用研小組缕溉，專門分析用戶數(shù)據(jù)、發(fā)現(xiàn)問題吃型，也就是專門研究各種“坑”证鸥。但絕大多數(shù)公司都沒有這種實力組建用研小組，這時候法則就顯得尤為重要。
遵循這些法則枉层，能夠讓你離用戶更近泉褐，做出體驗更好的產(chǎn)品。
其實大公司鸟蜡，更加注重這些法則的運用膜赃，因為大公司更加重視效率，或者說成本矩欠，使用這些法則不僅是為了提升用戶體驗财剖，更是讓我們在有限的時間內(nèi)，把設(shè)計做的盡可能完美癌淮，提高設(shè)計性價比躺坟。
用戶體驗的核心是用戶需求。說白了就是幫用戶解決問題乳蓄，專業(yè)點叫“用戶痛點”咪橙。既然是要解決問題，那就要先來分析問題虚倒。
其實無論什么問題美侦，都需要衡量指標(biāo)。衡量指標(biāo)的重要性在于使問題具體化魂奥，直接用“好壞”來描述顯然是沒辦法解決問題的菠剩，使用衡量指標(biāo)來具體描述問題、層層刨析耻煤，問題自然迎刃而解具壮。
用戶體驗之風(fēng)越吹越大，可以說是混的非常眼熟了哈蝇，但到底該怎么來衡量一個產(chǎn)品用戶體驗的好壞棺妓？這時候，法則就該出場了炮赦。沒錯怜跑，這些交互法則，就是用戶體驗的衡量指標(biāo)吠勘。
如果我們在前期設(shè)計階段就考慮到了這些交互法則性芬，設(shè)計評審的時候，過高率必須飆升剧防，即使吵起架來都理直氣壯批旺。
總之，羅嗦了這么多诵姜，也只是想強調(diào)法則的重要性汽煮，好用程度拯救各種年少禿頭搏熄。
既然這么有用，那必須學(xué)起來跋境唷心例！
然鵝，盡管鞋囊，網(wǎng)上流傳著各式各樣的交互法則止后，但很多都是重疊的內(nèi)容，甚至有些文章經(jīng)過一路的復(fù)制粘貼溜腐，已經(jīng)變得面目全非译株，不知所云。本仙兒嘗試對這些法則進(jìn)行一次盡可能全面的總結(jié)挺益，并結(jié)合實例歉糜，演示在交互設(shè)計中是如何具體運用的。
希望對大家有所啟發(fā)望众。幫助大家保衛(wèi)發(fā)際線匪补。哪怕是一丟丟，也值得烂翰！嗯夯缺！
那就正式開始叭~
交互法則第一彈↓
啟發(fā)式評估 /尼爾森原則
啟發(fā)式評估，英文：Heuristic Evaluation甘耿。1995年踊兜，由雅各布·尼爾森 (Jakob Nielsen) 及其同事創(chuàng)造，啟發(fā)式評估的目標(biāo)是找出設(shè)計中的可用性問題佳恬。
一共10條润文，也被稱為尼爾森十大可用性原則，是最經(jīng)典也是最常用的設(shè)計評估法則殿怜。
可分為三大塊：
具體內(nèi)容：
1鸠澈、Visibility of system status 系統(tǒng)狀態(tài)可見
- 又稱為可視性原則柱告，即：讓用戶知道系統(tǒng)在做什么；
- 系統(tǒng)狀態(tài)有反饋笑陈，等待時間要合理际度；
最近很常見的應(yīng)用場景就是加載動效 ，告知用戶系統(tǒng)狀態(tài)的同時涵妥，增加趣味性乖菱，緩解等待煩躁情緒 ↓
2、Match between system and the real world 系統(tǒng)與現(xiàn)實世界的匹配
- 又稱為環(huán)境貼切原則，即：使用用戶語言窒所，而不是開發(fā)者語言鹉勒；
- 貼近實際生活，而不是學(xué)術(shù)概念吵取∏荻睿總之，要使用用戶可理解的表現(xiàn)方式皮官；
- 信息展示要自然貼切脯倒，邏輯正確，將用戶認(rèn)知成本降到最低捺氢；
千言萬語匯成一句話：請說人話藻丢！
這條法則，應(yīng)用場景非常多讯沈，擬物化設(shè)計就是最好的例子郁岩。像計算器APP，就是模仿現(xiàn)實生活中計算器的樣子缺狠，還有相機應(yīng)用问慎、電子書翻頁效果等。最近比較常見的就是各種購物APP的VIP卡挤茄、電影票如叼、優(yōu)惠券等設(shè)計，都是模仿現(xiàn)實生活中的樣子穷劈。這種模仿會讓用戶產(chǎn)生天然熟悉感笼恰，快速上手，也就是前面說的降低用戶認(rèn)知成本歇终。
展示一個我最近很喜歡小程序：粵省事社证，雖然我不吃福建人，用不到這個小程序评凝，但卻不妨礙我對它的喜愛追葡，完美演繹什么叫“系統(tǒng)與現(xiàn)實世界的匹配”：
附一段他們的設(shè)計闡述奕短，寫的可謂是通俗易懂有內(nèi)涵↓
原文：
證件本體的設(shè)計上宜肉，我們更多采用了輕質(zhì)感擬物化設(shè)計。從實體證件中提取具有識別性的顏色和特征圖形翎碑，進(jìn)行視覺優(yōu)化谬返。同時，在 “視覺的顏色” 和 “跟真實顏色走” 兩個點間日杈，我們選擇了跟真實顏色走遣铝。通過這些簡單而必要的視覺隱喻佑刷，減少用戶記憶壓力，從直觀層面上理解業(yè)務(wù)翰蠢，更快作出反應(yīng)和決定项乒。
3、User Control and Freedom 用戶可控性/用戶自由
- 又稱為撤銷重做原則梁沧，即：操作失誤可退回檀何；
- 用戶經(jīng)常會誤觸系統(tǒng)功能，這時就需要一個清晰的“緊急出口”來離開非預(yù)期狀態(tài)廷支，而不是必須拓展一個新窗口频鉴；
例如無人不知的Ctrl+Z（撤銷快捷鍵），就是這個原則的最強運用恋拍。以及微信消息撤回功能垛孔、郵件撤回功能等。
這個太常見了施敢，就不放圖了叭周荐。
4、Consistency and standards 統(tǒng)一和標(biāo)準(zhǔn)
- 又稱為一致性原則僵娃，即：同一事物和同類操作的表示要各處保持一致概作；
- 不要讓用戶去考慮不同的單詞、場景默怨、動作是否意味著同樣的東西讯榕；
- 遵循平臺規(guī)范；
這條原則匙睹，除非是剛開始接觸設(shè)計的新手愚屁，但凡頭發(fā)少一點的，都已經(jīng)自覺使用了痕檬；比如各種“規(guī)范”霎槐，色彩規(guī)范、字體規(guī)范梦谜、組建規(guī)范等丘跌，都是這條原則的實踐；
APP中各模塊信息設(shè)計改淑，會有明顯區(qū)分，并各自保持一致浴讯。下圖中不同層級的Icon設(shè)計朵夏，很容易就能讓用戶感知到誰跟誰是一伙的。
以及像Adobe家族的軟件榆纽，即使不是自己常用的那款仰猖，也一眼就能認(rèn)出是Adobe沒錯了捏肢，而且Adobe各個軟件的界面設(shè)計、快捷鍵等饥侵，都是相通的鸵赫，都可以作為這條原則的案例。
5躏升、Error prevention 防錯性
- 又稱為防錯原則辩棒，即：比錯誤提示更友好的是——使用一種謹(jǐn)慎的設(shè)計方式，從一開始就防止問題的發(fā)生膨疏；
- 要么消除容易出錯的條件一睁，要么檢查這些條件，在用戶觸發(fā)操作時向他們提供確認(rèn)選項佃却，及早消除誤操作者吁；
例如，刪除某項內(nèi)容饲帅，系統(tǒng)都會提示是否真的要刪除复凳，用戶確認(rèn)之后才會真的刪除；填寫手機號灶泵、郵箱等賬號系統(tǒng)會自動檢測格式是否正確：
6育八、Recognition rather than recall 識別勝于回憶
- 又稱為易取原則，即：讓用戶辨認(rèn)或者說識別丘逸，是一種比讓用戶回憶更好的方式单鹿；
- 通過將對象 /操作 /選項可視化，減輕用戶記憶負(fù)擔(dān)深纲；
- 不應(yīng)該讓用戶必須記住對話框的每部分信息（也記不住爸俪），應(yīng)該在適當(dāng)?shù)臅r候湃鹊，系統(tǒng)自動提供可視化或容易檢索的信息提示儒喊；
這條原則運用的場景也很常見，比如標(biāo)簽 /熱門推薦 /日期選擇 /性別選擇....等等等等：
這種讓用戶選擇的方式有很多優(yōu)點币呵，不僅高效怀愧，而且具有一定的防錯性。比如年月日格式余赢，用戶可能會有自己的書寫習(xí)慣芯义，但是這種習(xí)慣對于系統(tǒng)來說就不一定能夠正確讀取，讓用戶直接選擇年月日妻柒，就可以完美規(guī)避這種問題扛拨。
7、Flexibility and efficiency of use 使用起來靈活高效
- 又稱為靈活高效原則举塔，即：通過合理的設(shè)計讓用戶在操作過程中更加靈活绑警、高效求泰；
- 為新手和專家設(shè)計定制化的操作方式，例如：為新手提供操作引導(dǎo)计盒，為專家用戶提供的快捷操作渴频，這樣系統(tǒng)就可以同時滿足有經(jīng)驗的用戶和沒有經(jīng)驗的用戶；
- 用戶可體定制經(jīng)常使用的操作北启；
這個也很常見卜朗，第一次使用某種功能，會有新手提示暖庄，尤其是工具類應(yīng)用聊替，引導(dǎo)用戶盡快熟悉各項功能；專家用戶會嘗試進(jìn)行個性化設(shè)置培廓，比如設(shè)置符合自己使用習(xí)慣的界面布局惹悄、設(shè)置個性化快捷鍵等。
其他場景肩钠，比如賬戶自動記錄功能泣港、輸入框提示功能小泉、自動記錄上次使用狀態(tài)....太多了仑嗅，就不再舉例了揖盘。
人人都喜歡聰明可愛的東西严就，做產(chǎn)品也是一樣，漂漂亮亮势就，聰明機靈的跟用戶打交道才能虜獲用戶的芳心最域。
8咒程、Aesthetic and minimalist design 美觀簡潔
- 又稱為易讀性原則或易掃原則洋腮，即：減少無關(guān)信息箫柳，體現(xiàn)簡潔美感，網(wǎng)絡(luò)用戶瀏覽的動作更準(zhǔn)確的形容應(yīng)該是”掃“啥供；
- 對話框不應(yīng)該包含不相關(guān)或不常用的信息悯恍；
- 對話框中每增加一個額外的信息單元，都會與相關(guān)的信息單元爭奪用戶注意力伙狐，并且會降低信息的相對可見性涮毫；
這條原則還有個內(nèi)在含義，經(jīng)常會被忽視贷屎，就是開頭分類中強調(diào)的Clean & Functional Design罢防，簡潔&功能性設(shè)計。呈現(xiàn)的時候要簡潔美觀唉侄，但是也不可忽略功能性咒吐。例如掃碼，不管是哪個產(chǎn)品都做的很簡潔，但背后隱藏的邏輯是十分復(fù)雜的渤滞，需要調(diào)用攝像頭、智能識別榴嗅、驗證等等流程妄呕。你不需要向用戶肉眼可見的展示這套流程的所有細(xì)節(jié)，但是用戶卻切實能感受到掃碼帶來的便利性嗽测，也就是功能性绪励。
這類設(shè)計很多，除掃碼以外唠粥，像日歷疏魏、賬號填寫等等等，都遵循這個原則：
許多交互新手晤愧，會為了填滿頁面放一些雜七雜八的東西大莫，純粹為了把頁面填滿而填滿。其實官份，頁面放什么都是根據(jù)用戶需求來的只厘，不要為了“填滿”放入無關(guān)信息。換句話說舅巷，就是不能為了美觀而犧牲功能性羔味。
另一方面，為了業(yè)務(wù)需求钠右，有些需要簡潔的頁面可能會夾雜一些推廣信息赋元，比如看視頻的時候本來應(yīng)該是一種盡可能的沉浸式體驗，但絕對會有很多廣告時不時跳出來飒房，對于這種情況搁凸，就要考慮取舍，畢竟大家都是為了賺錢情屹。
法則運用要靈活坪仇，切不可死板。
9垃你、Help users recognize, diagnose, and recover from errors 幫助用戶識別椅文、診斷和從錯誤中恢復(fù)
- 又稱為容錯原則，即：系統(tǒng)出現(xiàn)錯誤時惜颇，要向用戶明確的展示錯誤信息（NO!代!碼!）皆刺；
- 準(zhǔn)確指出問題，積極提供解決方法凌摄，協(xié)助用戶盡快從錯誤狀態(tài)中恢復(fù)正常羡蛾；
還有一個比較常見的應(yīng)用場景：軟件崩潰后痴怨，再次重啟提供文件緩存版本忙干。
做設(shè)計的肯定都深有體會，尤其是Adobe家最初的那些版本浪藻，還沒有自動儲存功能的時候捐迫。當(dāng)設(shè)計稿完成了90%，而你卻沒有保存爱葵，而軟件突然石樂志....然后....十里八村都聽到了一聲痛徹心扉的哀嚎......直到后來Adobe終于提供了自動儲存功能施戴，各位設(shè)計師的心臟也終于得到了拯救。
10萌丈、Help and documentation 幫助和文檔
- 又稱為人性化幫助原則赞哗，即：提供必要的幫助提示與說明文檔；
- 無需說明文檔就能流暢的使用產(chǎn)品自然是極好的辆雾，但是一般文檔也很有必要性肪笋；
- 文檔要易于搜索，關(guān)注用戶任務(wù)度迂，列出具體的執(zhí)行步驟涂乌，并且不要太冗長；
幫助功能其實不屬于應(yīng)用的重點功能英岭，但卻是人性化最強體現(xiàn)湾盒，做的好的也沒幾家，必須點名表揚Adobe诅妹，尤其是AE罚勾，文案描述清晰，搜索也很方便吭狡，并且提供多種搜索方式尖殃，可以在某個功能旁邊直接點擊小問號按鈕、在界面中使用搜索划煮、網(wǎng)頁中使用搜索等：
以上就是尼爾森大神的啟發(fā)式評估全部內(nèi)容送丰。
關(guān)于啟發(fā)式評估，我還是要再多說兩句弛秋，咳咳器躏，就？兩蟹略？句...
既然是叫”啟發(fā)式“登失，自然就有其道理。是為了帶給你一些啟發(fā)挖炬，而不是把你框住揽浙，所以??
不要生搬硬套！具體問題具體分析，不同場景靈活運用馅巷！
附法則原文：
10 Usability Heuristics for User Interface Design
by Jakob Nielsen on April 24, 1994
Summary: Jakob Nielsen's 10 general principles for interaction design. They are called “heuristics" because they are broad rules of thumb and not specific usability guidelines.
I originally developed the heuristics for heuristic evaluation in collaboration with Rolf Molich in 1990 [Molich and Nielsen 1990; Nielsen and Molich 1990]. I since refined the heuristics based on a factor analysis of 249 usability problems [Nielsen 1994a] to derive a set of heuristics with maximum explanatory power, resulting in this revised set of heuristics [Nielsen 1994b].
1膛虫、Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within a reasonable time.
2、 Match between system and the real world
The system should speak the users' language, with words, phrases, and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
3钓猬、User control and freedom
Users often choose system functions by mistake and will need a clearly marked ”emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
4走敌、Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
5、Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
6逗噩、Recognition rather than recall
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
7、Flexibility and efficiency of use
Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
8跌榔、Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
9异雁、Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
10、Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
以上僧须，Over纲刀。
祝好運??
Reference：
- <u style="text-decoration: none; border-bottom: 1px dashed grey;">Molich, R., and Nielse</u>n<u style="text-decoration: none; border-bottom: 1px dashed grey;">, J. (1990). Improving a </u>h<u style="text-decoration: none; border-bottom: 1px dashed grey;">uman-computer dialogue</u>, Communications of the ACM 33, 3 (March), 338-348.
- <u style="text-decoration: none; border-bottom: 1px dashed grey;">Nielsen, J., and Molich, R</u>.<u style="text-decoration: none; border-bottom: 1px dashed grey;"> (1990). Heuristic evaluation of user interfaces, Proc. ACM</u>CHI'90 Conf.(Seattle, WA, 1-5 April), 249-256.
- <u style="text-decoration: none; border-bottom: 1px dashed grey;">Nielsen, J. (1994a). Enhan</u>c<u style="text-decoration: none; border-bottom: 1px dashed grey;">ing the explanatory power of usability heuristics. Proc. ACM</u>CHI'94 Conf.(Boston, MA, April 24-28), 152-158.
- Nielsen, J. (1994b). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), <u style="text-decoration: none; border-bottom: 1px dashed grey;">Usability Inspection Methods</u>, John Wiley & Sons, New York, NY
合法原創(chuàng)內(nèi)容，禁止以任何形式私自盜用担平！
盜文者禿頭示绊！盜圖的也禿頭！
