聊聊交互設(shè)計原則那些事兒

為什么需要設(shè)計原則？ 設(shè)計原則其實就是對一些設(shè)計過程中基于人類的認(rèn)知規(guī)律對設(shè)計做出的一些指導(dǎo)性原則，并且對已經(jīng)成為行業(yè)共識的設(shè)計經(jīng)驗做個總結(jié)，用來指導(dǎo)設(shè)計師界定問題、提高效率。

經(jīng)常用的設(shè)計原則有哪些？ 先來拋一個老D在早年剛接觸交互設(shè)計的時候最為大家所認(rèn)可的幾條設(shè)計原則：
1. 可學(xué)習(xí)性 目標(biāo)用戶在已有的知識和經(jīng)驗基礎(chǔ)上，能正確理解產(chǎn)品界面，無需要思考而一目了然；或者是用戶通過自己的學(xué)習(xí)，借助提示或幫助說明，能夠理解產(chǎn)品界面。則界面具有了可學(xué)習(xí)性。 可學(xué)習(xí)的內(nèi)容包括：明確當(dāng)前所在位置，知道當(dāng)前能干什么、接下來要干什么，能快速辨別界面中的元素并明白其功能。在設(shè)計時可采用合理的隱喻、習(xí)慣用法、有效的啟示。例如手機中收音機的調(diào)頻顯示和音量大小控制，模擬真實收音機，一目了然。其實這是隱喻的手法，隱喻是非常利于新用戶學(xué)習(xí)的，從現(xiàn)實世界中直接映射過來。
2. 一致性 在相似的情景下，應(yīng)在幾個方面保持一致性：視覺表現(xiàn)、交互行為、操作結(jié)果。良好的一致性，可以減少用戶學(xué)習(xí)成本培養(yǎng)用戶習(xí)慣，也可體現(xiàn)產(chǎn)品設(shè)計的嚴(yán)謹(jǐn)。如果有不同，應(yīng)作相應(yīng)的區(qū)別處理，特別是視覺表現(xiàn)上要予以區(qū)分。淘寶、當(dāng)當(dāng)、唯品會等網(wǎng)購類型的網(wǎng)站，無論你以什么形式搜索商品，到最后出現(xiàn)的商品都是以表格形式呈現(xiàn)。到你選擇商品進(jìn)入詳細(xì)頁面，對應(yīng)位置都有相關(guān)商品的詳細(xì)信息、商品評價。再到添加到購物車或直接購買，一系列的交互行為都有一致性。
3. 簡潔性 少即是多，盡可能精簡界面上的元素。當(dāng)設(shè)計出原型，先將元素減半，然后再看能否再簡化。生活其實很簡單，但很多時候我們?nèi)藶閷⑵鋸?fù)雜化了。保證主要任務(wù)流程順利完成，消減其余不相關(guān)元素的干擾。 簡潔體現(xiàn)在四個方面：減輕視覺干擾、精簡文字表述、簡化操作步驟。孢子社區(qū)的新用戶注冊是我見過在操作步驟和文字描述上最簡潔的，略去了常見的驗證碼、動態(tài)碼、重復(fù)輸入密碼的操作。
4. 流暢性 用戶操作連貫，任務(wù)完成順暢，避免干擾或打斷。明確最基本的核心任務(wù)，并保證它的順利執(zhí)行，輔助操作應(yīng)在不影響核心任務(wù)的基礎(chǔ)上展開。 避免干擾，讓用戶明確在特定界面中的首要任務(wù)和目標(biāo)，盡可能避免界面上的視覺噪音和其他干擾；避免打斷，讓用戶的操作保持連貫性，模態(tài)框的使用要謹(jǐn)慎。Gmail在把郵件刪除后，會將刪除的彈框設(shè)計成List Notification非模態(tài)這種方式，提醒用戶撤銷剛才的刪除操作，這種的處理，讓刪除的流程更加順暢和輕松自如。
5. 及時反饋 界面中任何可操作的地方，當(dāng)用戶發(fā)生操作時，都應(yīng)該及時給予反饋。讓用戶了解操作已經(jīng)生效，界面還在用戶的控制之下。反饋內(nèi)容包括：用戶操作反饋和產(chǎn)品狀態(tài)反饋。 操作反饋，指的是界面元素在用戶進(jìn)行滑過、點擊、移開等操作時，元素的反饋變化。狀態(tài)反饋，指的是產(chǎn)品在運行需要用戶等待或者系統(tǒng)出錯時的反饋，讓用戶明白狀況。迅雷每次下載完成都有聲音提醒音樂播放時的進(jìn)度條顯示就是這類反饋。
6. 可探索性 用戶在使用產(chǎn)品過程也是一個探索過程，產(chǎn)品應(yīng)該允許用戶犯錯，即使犯錯了也不能埋怨用戶，而且必須給用戶重新嘗試的機會，讓用戶處于放松的心態(tài)。 設(shè)計過程中，首先要幫助用戶避免出錯，比如采用合適的控件（相同情況下選擇控件比輸入控件出錯機會更?。o予輸入幫助或啟示。在登陸郵箱的過程中如果忘記密碼，在登陸圖標(biāo)的旁邊會有一個”忘記密碼？”的提示圖標(biāo)，來提醒用戶不用擔(dān)心，點擊進(jìn)入來解決問題。用戶出錯后，需要提供撤銷或返回功能，使用戶返回到上一步操作重新探索。出錯反饋要親和，避免責(zé)備用戶或魯莽的打斷或推出產(chǎn)品，要禮貌的指出錯誤所在并提供有用的補救建議。 這幾個條真的是比較經(jīng)典，不斷體會并運用這幾條設(shè)計原則就讓當(dāng)時不少設(shè)計師在當(dāng)時的情形下做起了交互設(shè)計，當(dāng)時國內(nèi)市面上靠譜交互設(shè)計書的數(shù)量一把手就能數(shù)完了。 就這么六個？還有其他的嗎？你放心，如果需要還有更多

1. 一個界面為主要角色設(shè)計，而不是為所有人設(shè)計。
2. 為日常場景設(shè)計，不要讓邊緣場景主導(dǎo)你的設(shè)計。
3. 所有的習(xí)慣行為都需要學(xué)習(xí)，好的習(xí)慣行為只需學(xué)習(xí)一次。
4. 除了輸入所有的行為支持鼠標(biāo)操作；除了繪圖所有的行為支持鍵盤操作。
5. 在滿足需求的前進(jìn)下，界面的信息越少越好。
6. 在滿足需求的前進(jìn)下，界面的功能越少越好。
7. 在滿足需求的前進(jìn)下，界面的交互次數(shù)越少越好。
8. 界面的操作方式最好一目了然，不需要幫助。
9. 操作前可預(yù)知；操作中有反饋；操作后可撤消。
10. 充分利用隱喻設(shè)計。
11. 讓用戶知道身在何處。
12. 界面結(jié)構(gòu)合理、功能布局、措詞統(tǒng)一，突出重點。
13. 日常場景使用的界面應(yīng)放在主要位置，且盡量的大。
14. 一般界面的顏色不超過3種，且避免大面積使用刺眼的顏色。
15. 減少用戶的記憶負(fù)擔(dān)，盡量讓用戶識別，而不是回憶。
16. 尊重用戶的習(xí)慣思維和行為，除非你有更好的設(shè)計。
17. 關(guān)注用戶的目標(biāo)，而不是任務(wù)。
18. 盡量避免對話框，且對話框深度最多不應(yīng)超過3級。

… 現(xiàn)在是不是已經(jīng)看到快吐了？嘿嘿

設(shè)計原則這么多，到底該怎么用?。?/strong> 老D深切的感受到如果每次做設(shè)計都按照這些原則一條條的去比對，那么就會“一條復(fù)一條，原則何其多”，于是老D就簡化總結(jié)了一下，交互就是設(shè)計行為，行為就是一連串的動作，具體到動作中的每一個環(huán)節(jié)都會有一個受動的對象，比如點擊按鈕、彈出窗口、閱讀彈窗內(nèi)容、關(guān)閉彈窗等等，截取整個一連串動作中的一個對象–按鈕來看，分為前、中、后三個階段： 前期：用戶在點擊前對于點擊后的結(jié)果心理是有個預(yù)期的，是由之前頁面的上下文和按鈕本身信息（文案、形狀等）來決定的； 中期：點擊的每一步動作都需要按鈕有個反饋，鼠標(biāo)進(jìn)入按鈕的感應(yīng)區(qū)域、懸?。╤over）在按鈕上，按鈕應(yīng)該自身有個狀態(tài)的的變化，比如顏色，點擊中也應(yīng)該有個變化； 后期：手動點擊后彈出的對話框是否符合用戶的心理預(yù)期，比如按鈕上邊的文字是“下載”，預(yù)期其實就是下載文檔，結(jié)果彈出一個對話框告訴你積分不夠，這樣做的體驗就是不好的。 簡單的按鈕是這樣，復(fù)雜的登錄注冊流程甚至是時間間隔好幾天的流程也是這樣，都適合用這個三個階段來劃分，只是量的大小問題。 其實還有一個更為專業(yè)的劃分方法（交互設(shè)計精髓里邊說的），老D說一下看小伙伴們是否能搞的懂哈 雖然設(shè)計原則眾多，但是可以分為四類： 一、設(shè)計價值：這個是設(shè)計工作是否有效的必要條件，決定了一下幾個層次的次級原則
二、概念設(shè)計：用來界定產(chǎn)品定義，產(chǎn)品如何融入廣泛的使用場景
三、行為原則：描述產(chǎn)品在一般情景和特殊情景應(yīng)有的行為
四、界面原則：描述行為及信息有效的視覺傳達(dá) 親愛的小伙伴，看不太懂吧？嘿嘿，老D來解讀一下吧！ 設(shè)計價值：其實就是這個設(shè)計是否符合用戶的需求，是否滿足用戶的目標(biāo)，交互設(shè)計在這一層次能夠為用戶做什么。這一層做不好，后邊的都免談。 概念設(shè)計：產(chǎn)品是怎么使用的？以什么形式呈現(xiàn)給用戶？是Web還是App？是為新手做引導(dǎo)還是為中間用戶提供方便等等。 行為原則：這個才是我們上邊提到的一堆設(shè)計原則，什么及時反饋啦、可學(xué)習(xí)啦。 界面原則：這個就是“布局要突出重點”啦、“一個界面同時最好完成一個任務(wù)啦”等等。 Alan Cooper不愧是大師，提出的四個層次一下就把那么多零七碎八的設(shè)計原則統(tǒng)統(tǒng)收在自己的框架之下了。