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