交互設計在産品設計中是關(guān)鍵點之一(yī)，也(yě)是接近于用戶體(tǐ)驗的一(yī)種設計，能(néng)讓用戶感受到交互體(tǐ)驗的重要點；交互設計師在日常工作(zuò)時(shí)，需要注意交互設計的一(yī)些(xiē)定律，更好(hǎo)(hǎo)的做到加強交互體(tǐ)驗；本文作(zuò)者分(fēn)享了(le)關(guān)于交互設計的五大定律，我們一(yī)起來(lái)了(le)解一(yī)下(xià)。
前段時(shí)間(jiān)應邀給部門内新(xīn)入職的校(xiào)招設計師講一(yī)堂設計法則的基礎課，作(zuò)為(wèi)交互設計師，交互設計定律肯定是繞不開的一(yī)個(gè)知識點，但(dàn)對于網上(shàng)廣為(wèi)流傳的《交互設計7大定律》，我其實一(yī)直都有些(xiē)質疑。
因為(wèi)沒搞清楚作(zuò)者組織的思路(lù)，也(yě)查不到任何文檔的介紹，我覺得如(rú)果就(jiù)這(zhè)樣照本宣科的去講交互設計7大定律是不負責任的，所以我根據自己近10年的交互設計經驗，重新(xīn)定義了(le)今天這(zhè)「交互設計5大定律」，希望對你理(lǐ)解和運用設計定律有所啓發。
在介紹重新(xīn)定義的交互設計定律之前，我們先來(lái)回顧一(yī)下(xià)經典的《交互設計7大定律》：
費茨定律告訴我們要節省操作(zuò)時(shí)間(jiān)應該怎麽做：放(fàng)大目标對象，減小目标距離。
席克定律告訴我們要節省決策時(shí)間(jiān)應該怎麽做：盡可能(néng)的減少選項的數量。
米勒定律告訴我們人(rén)類記憶的上(shàng)限，所以要将信息數量控制在4±1内。
接近法則告訴我們相鄰≈相關(guān)，所以要根據信息親密性組織其位置關(guān)系。
泰思勒定律告訴我們複雜性是守恒的，我們要平衡複雜性的天平向誰傾斜，以實現(xiàn)整體(tǐ)效益最大化(huà)。
防錯原則告訴我們用戶出錯是不可避免的，我們隻能(néng)減少并降低(dī)其犯錯的可能(néng)性。
奧卡姆剃刀原理(lǐ)告訴我們如(rú)無必要，勿增實體(tǐ)，設計要盡量的簡約。
不知道你看完以上(shàng)7個(gè)定律有什(shén)麽感受，我的感受是，他們彼此之間(jiān)有些(xiē)重合（奧卡姆剃刀原理(lǐ)、席克定律、米勒定律都在傳達信息要精簡），但(dàn)用其概括交互設計的精髓，又覺得不夠完整（做到這(zhè)幾點就(jiù)夠了(le)嗎(ma)？），整體(tǐ)交互設計的精髓要義并沒有表達地很清楚（如(rú)何用一(yī)句話(huà)來(lái)概括交互設計的目标？）
帶着這(zhè)幾點疑問，我重新(xīn)去思考到底什(shén)麽是交互設計的底層設計目标？到底哪些(xiē)交互設計定律更能(néng)更好(hǎo)(hǎo)的體(tǐ)現(xiàn)其本質？以下(xià)是我思考的結果：
交互設計的終極目标是改變和影響用戶的行為(wèi)，達到期望的業務(wù)結果，比如(rú)下(xià)單率、搜索率等結果指标，結果指标因産品而異，不具有普适性，不可一(yī)言以概之。
而在交互設計的過程中，以交互設計定律為(wèi)指導的過程指标是通用的，幾乎可以說(shuō)放(fàng)之四海而皆準，我把這(zhè)四個(gè)過程指标概括為(wèi)四字箴言：少快(kuài)好(hǎo)(hǎo)省，怎麽理(lǐ)解呢(ne)？
所謂少，就(jiù)是信息功能(néng)要精煉，要一(yī)目了(le)然，要盡可能(néng)減少功能(néng)/信息的複雜度。
所謂快(kuài)，既是性能(néng)也(yě)是效率，指的是要盡可能(néng)快(kuài)的響應用戶的操作(zuò)，達成用戶目标。
所謂好(hǎo)(hǎo)，就(jiù)是産品的設計必須達成行業一(yī)流的設計标準，讓用戶用的順手、滿意。
所謂省，就(jiù)是省心省力省時(shí)，能(néng)夠幫助用戶節約時(shí)間(jiān)，降低(dī)操作(zuò)和認知負荷。
基于這(zhè)樣的過程指标，我挑選了(le)5個(gè)設計定律來(lái)進行設計指導，下(xià)面我們逐一(yī)來(lái)看。
01/
奧卡姆剃刀原理(lǐ)
奧卡姆剃刀原理(lǐ)告訴我們：如(rú)無必要，勿增實體(tǐ)，即“簡單有效原理(lǐ)”。對于工業産品适用，對于軟件類産品也(yě)是如(rú)此。因為(wèi)任何增加的非必要信息和功能(néng)，都會帶來(lái)生(shēng)産/維護成本的增加，以及用戶認知/操作(zuò)成本的增加。
在現(xiàn)今這(zhè)個(gè)注意力稀缺的時(shí)代，複雜會讓人(rén)望而卻步，也(yě)容易使人(rén)迷失，而精簡的産品更利于人(rén)們的理(lǐ)解和操作(zuò)。
典型案例：
小米的電視(shì)遙控器(qì)設計和傳統遙控器(qì)設計相比，對奧卡姆剃刀原理(lǐ)的運用非常極緻，相信大家都可以感受到精簡前後的視(shì)覺/操作(zuò)/認知負荷的降低(dī)。
我們再來(lái)看一(yī)個(gè)互聯網産品設計的案例：
19年初，外銷浏覽器(qì)做了(le)一(yī)次視(shì)覺煥新(xīn)大改版，從交互結構到視(shì)覺界面變化(huà)都比較大，所以我們就(jiù)增加了(le)新(xīn)版本的滑屏引導，告訴用戶有哪些(xiē)界面及功能(néng)的變化(huà)。
結果新(xīn)版灰度期間(jiān)，信息流滲透率下(xià)降了(le)33%，搜索下(xià)降了(le)18%，經過仔細的數據排查，發現(xiàn)都是滑屏引導惹的禍，當把滑屏引導去掉後，搜索和信息流的數據都恢複正向了(le)。
19年底，我們做的另一(yī)個(gè)運營活動也(yě)經曆了(le)類似的教訓。當時(shí)錦鯉很火(huǒ)，我們就(jiù)做了(le)一(yī)個(gè)錦鯉大作(zuò)戰的小活動，畫面精緻，獎勵也(yě)比較誘人(rén)。
但(dàn)是發現(xiàn)活動上(shàng)線後轉化(huà)率效果卻不及預期，我們再次把矛頭對準了(le)蒙層引導，通過去掉蒙層引導，CTA按鈕場(chǎng)景化(huà)，并增加微動效，轉化(huà)效果立刻得到了(le)提升。
去掉不必要的引導，讓界面自己會說(shuō)話(huà)，這(zhè)也(yě)是奧卡姆剃刀原理(lǐ)的一(yī)個(gè)體(tǐ)現(xiàn)。
02/
米勒定律
米勒定律告訴我們：人(rén)們工作(zuò)記憶平均能(néng)記住的元素數量僅為(wèi)4±1。所以我們在設計時(shí)，首先要運用奧卡姆剃刀原理(lǐ)，盡可能(néng)的去做減法，盡量将數量控制在4±1的範圍内。如(rú)果選項較多，且減無可減時(shí)，就(jiù)需要對信息/選項進行分(fēn)類和分(fēn)組，保證類别的數量在4±1的範圍内。
典型案例：
對于像手機号、銀行卡号、身(shēn)份證号這(zhè)種類型的信息，因為(wèi)其固有的信息長度無法做精簡，所以在信息組織時(shí)就(jiù)會采取分(fēn)組的方式，保證分(fēn)組的數量控制在4±1的範圍内。
另一(yī)個(gè)案例也(yě)是關(guān)于我們的外銷浏覽器(qì)：
左一(yī)是改版前的頁面，功能(néng)有12項之多，且産品認為(wèi)減無可減了(le)。我們的交互設計師通過對頁面功能(néng)使用頻度及産品功能(néng)的重要程度進行分(fēn)析，将功能(néng)劃分(fēn)為(wèi)了(le)三大類：重要功能(néng)，常用功能(néng)，必備功能(néng)。然後通過強化(huà)、保持和收納的方式将其進行右圖所示的呈現(xiàn)，界面複雜度迅速降低(dī)，功能(néng)清晰度和操作(zuò)便捷度顯著提升。
03/
多爾蒂門檻
多爾蒂門檻告訴我們：系統需要在 400ms 内對使用者的操作(zuò)做出響應，這(zhè)樣才能(néng)夠讓使用者保持專注，并提高生(shēng)産效率。
先來(lái)看一(yī)組模拟的響應效果：
圖片來(lái)自作(zuò)者「超人(rén)的電話(huà)亭」
從這(zhè)組圖片可以感受到，當圖片在400ms内時(shí)，是勉強可以接受的，但(dàn)當時(shí)間(jiān)延長到600ms及以上(shàng)時(shí)，人(rén)們就(jiù)會感受到明顯的延遲、等待和卡頓感。
多爾蒂門檻對響應時(shí)間(jiān)的上(shàng)限給出了(le)參考，而後續的研究則給出了(le)更細緻的響應标準，比如(rú)元素的點擊反饋應控制在0.1s左右，盡量不要超過0.14s，單個(gè)元素入場(chǎng)退場(chǎng)時(shí)間(jiān)應控制在0.2s左右（入場(chǎng)一(yī)般比退場(chǎng)稍慢(màn)），而頁面的轉場(chǎng)時(shí)長根據頁面大小和轉場(chǎng)動效的複雜度盡量控制在0.3s-0.4s之間(jiān)。隻有響應時(shí)間(jiān)符合上(shàng)述标準，才不會讓用戶對産品的流暢性有所懷疑。
04/
雅各布定律
用戶将大部分(fēn)時(shí)間(jiān)花在别人(rén)家的網站(zhàn)（産品）上(shàng)，而不是你的。這(zhè)意味着他們希望你的網站(zhàn)（産品）跟别人(rén)的有相同的操作(zuò)方法和使用模式。雅各布定律告訴我們：作(zuò)為(wèi)設計師，我們必須要多研究把玩(wán)各種App，這(zhè)樣我們才能(néng)夠對當下(xià)産品的設計趨勢有更直觀的感受。
對于新(xīn)入行的設計師，我會建議(yì)大家好(hǎo)(hǎo)好(hǎo)(hǎo)研究一(yī)下(xià)ios和android的OS規範，了(le)解平台的特性，同時(shí)再翻翻下(xià)面這(zhè)些(xiē)書籍，了(le)解各種常見的設計模式，豐富自己的設計組件庫。
此外，在做某種特定類型的産品設計時(shí)，也(yě)非常有必要做行業及競品分(fēn)析，這(zhè)樣才能(néng)确保我們在做産品設計時(shí)，可以延續用戶的主要視(shì)覺及行為(wèi)習慣，減少用戶的學習及使用成本。
以視(shì)頻App為(wèi)例，行業内的頭部産品在産品框架及元素布局上(shàng)都具有高度的一(yī)緻性，這(zhè)也(yě)是雅各布定律的一(yī)個(gè)體(tǐ)現(xiàn)。
05/
可感知性原則
操作(zuò)前有預期，操作(zuò)時(shí)有反饋，操作(zuò)後可撤銷。這(zhè)是十年前我入行時(shí)接觸到的一(yī)句話(huà)，我不知道是誰提出來(lái)的，但(dàn)卻是這(zhè)些(xiē)年我做交互設計最重要的一(yī)條參考原則，我将其簡單命名為(wèi)可感知性原則。
操作(zuò)前有預期，指的是要符合視(shì)覺認知原理(lǐ)，符合行業設計習慣，讓用戶一(yī)看就(jiù)懂。
操作(zuò)時(shí)有反饋，指的是操作(zuò)時(shí)要即時(shí)反饋，就(jiù)近反饋，并且反饋合理(lǐ)。
操作(zuò)後可撤銷，指的是任何操作(zuò)都盡量讓其可撤銷，讓用戶無後顧之憂，安心探索。隻要存在用戶行為(wèi)的交互，這(zhè)個(gè)準則都是可以用來(lái)檢驗的，以下(xià)圖為(wèi)例。
當我們想要删除某張照片時(shí)：
操作(zuò)前有預期：工具欄位于默認的底部位置，有删除圖标+文字明确示意的功能(néng)按鈕，讓用戶一(yī)看就(jiù)知道應該選擇哪一(yī)項操作(zuò)；
操作(zuò)時(shí)有反饋：點擊删除按鈕時(shí)，删除按鈕有一(yī)個(gè)灰色的點擊态，随後馬上(shàng)出現(xiàn)一(yī)個(gè)确認彈窗，而且是就(jiù)近位置出現(xiàn)，确認彈窗上(shàng)提示簡單，按鈕用的是CTA的形式，操作(zuò)交互一(yī)目了(le)然。
操作(zuò)後可撤銷：當用戶确認删除後，照片消失，但(dàn)是還可以去最近删除的文件夾中，恢複照片。
06/
結語
到這(zhè)裏，交互設計5大定律就(jiù)全部介紹完成了(le)，圍繞交互設計的過程指标，少、快(kuài)、好(hǎo)(hǎo)、省依次展開，給大家介紹了(le)奧卡姆剃刀原理(lǐ)、米勒定律、多爾蒂門檻、雅各布定律、可感知性原則。
也(yě)是為(wèi)了(le)滿足米勒定律的4±1原則，我将交互設計定律濃縮成了(le)5條，如(rú)果在此基礎上(shàng)加一(yī)條的話(huà)，我會在「好(hǎo)(hǎo)」的指标下(xià)，增加一(yī)條「格式塔原理(lǐ)」，它包含的7大設計原則。
格式塔原理(lǐ)是做設計排版的基石，絕對值得所有設計師反複學習、研究和運用；到這(zhè)裏重新(xīn)定義交互設計5大定律就(jiù)全部介紹完成了(le)，希望你閱讀完也(yě)有所收獲。