起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識交互設計定律的應用案例
編輯導語：設計師在日常工作中需要掌握很多理論技巧，怎么樣讓設計出來的產品更加美觀，更加符合大眾審美呢？本文作者分析了互聯網上的交互設計7大定律并對其提出了質疑。本文主要從作者經驗出發，分享了交互設計5大定律。推薦對交互設計感興趣的用戶閱讀。
前段時間應邀給部門內新入職的校招設計師講一堂設計法則的基礎課，作為產品經理，交互設計定律肯定是繞不開的一個知識點，但對于網上廣為流傳的《交互設計7大定律》，我其實一直都有些質疑，因為沒搞清楚作者組織的思路，也查不到任何文檔的介紹，我覺得如果就這樣照本宣科的去講交互設計7大定律是不負責任的，所以我根據自己近10年的交互設計經驗，重新定義了今天這「交互設計5大定律」，希望對你理解和運用設計定律有所啟發。
在介紹重新定義的交互設計定律之前，我們先來回顧一下經典的《交互設計7大定律》。
費茨定律告訴我們要節省操作時間應該怎么做：放大目標對象，減小目標距離。
席克定律告訴我們要節省決策時間應該怎么做：盡可能的減少選項的數量。
米勒定律告訴我們人類記憶的上限，所以要將信息數量控制在4±1內。
接近法則告訴我們相鄰≈相關，所以要根據信息親密性組織其位置關系。
泰思勒定律告訴我們復雜性是守恒的，我們要平衡復雜性的天平向誰傾斜，以實現整體效益最大化。
防錯原則告訴我們用戶出錯是不可避免的，我們只能減少并降低其犯錯的可能性。
奧卡姆剃刀原理告訴我們如無必要，勿增實體，設計要盡量的簡約。
不知道你看完以上7個定律有什么感受，我的感受是，他們彼此之間有些重合（奧卡姆剃刀原理、席克定律、米勒定律都在傳達信息要精簡），但用其概括交互設計的精髓，又覺得不夠完整（做到這幾點就夠了嗎？），整體交互設計的精髓要義并沒有表達地很清楚（如何用一句話來概括交互設計的目標？）
帶著這幾點疑問，我重新去思考到底什么是交互設計的底層設計目標？到底哪些交互設計定律能更好的體現其本質？以下是我思考的結果：
交互設計的終極目標是改變和影響用戶的行為，達到期望的業務結果，比如下單率、搜索率等結果指標，結果指標因產品而異，不具有普適性，不可一言以概之。而在交互設計的過程中，以交互設計定律為指導的過程指標是通用的，幾乎可以說放之四海而皆準，我把這四個過程指標概括為四字箴言：少快好省。怎么理解呢？
- 所謂少，就是信息功能要精煉，要一目了然，要盡可能減少功能/信息的復雜度。
- 所謂快，既是性能也是效率，指的是要盡可能快的響應用戶的操作，達成用戶目標。
- 所謂好，就是產品的設計必須達成行業一流的設計標準，讓用戶用的順手、滿意。
- 所謂省，就是省心省力省時，能夠幫助用戶節約時間，降低操作和認知負荷。
基于這樣的過程指標，我挑選了5個設計定律來進行設計指導，下面我們逐一來看。
一、奧卡姆剃刀原理
奧卡姆剃刀原理告訴我們：如無必要，勿增實體，即“簡單有效原理”。對于工業產品適用，對于軟件類產品也是如此。因為任何增加的非必要信息和功能，都會帶來生產/維護成本的增加，以及用戶認知/操作成本的增加。在現今這個注意力稀缺的時代，復雜會讓人望而卻步，也容易使人迷失，而精簡的產品更利于人們的理解和操作。
典型案例：
小米的電視遙控器設計和傳統遙控器設計相比，對奧卡姆剃刀原理的運用非常極致，相信大家都可以感受到精簡前后的視覺/操作/認知負荷的降低。
我們再來看一個互聯網產品設計的案例：
19年初，外銷瀏覽器做了一次視覺煥新大改版，從交互結構到視覺界面變化都比較大，所以我們就增加了新版本的滑屏引導，告訴用戶有哪些界面及功能的變化，結果新版灰度期間，信息流滲透率下降了33%，搜索下降了18%，經過仔細的數據排查，發現都是滑屏引導惹的禍，當把滑屏引導去掉后，搜索和信息流的數據都恢復正向了。
19年底，我們做的另一個運營活動也經歷了類似的教訓。當時錦鯉很火，我們就做了一個錦鯉大作戰的小活動，畫面精致，獎勵也比較誘人，但是發現活動上線后轉化率效果卻不及預期，我們再次把矛頭對準了蒙層引導，通過去掉蒙層引導，CTA按鈕場景化，并增加微動效，轉化效果立刻得到了提升。去掉不必要的引導，讓界面自己會說話，這也是奧卡姆剃刀原理的一個體現。
二、米勒定律
米勒定律告訴我們：人們工作記憶平均能記住的元素數量僅為4±1。所以我們在設計時，首先要運用奧卡姆剃刀原理，盡可能的去做減法，盡量將數量控制在4±1的范圍內。如果選項較多，且減無可減時，就需要對信息/選項進行分類和分組，保證類別的數量在4±1的范圍內。
典型案例：
對于像手機號、銀行卡號、身份證號這種類型的信息，因為其固有的信息長度無法做精簡，所以在信息組織時就會采取分組的方式，保證分組的數量控制在4±1的范圍內。
另一個案例也是關于我們的外銷瀏覽器：
左一是改版前的頁面，功能有12項之多，且產品認為減無可減了。我們的交互設計師通過對頁面功能使用頻度及產品功能的重要程度進行分析，將功能劃分為了三大類：重要功能，常用功能，必備功能。然后通過強化、保持和收納的方式將其進行右圖所示的呈現，界面復雜度迅速降低，功能清晰度和操作便捷度顯著提升。
三、多爾蒂門檻
多爾蒂門檻告訴我們：系統需要在400ms內對使用者的操作做出響應，這樣才能夠讓使用者保持專注，并提高生產效率。
先來看一組模擬的響應效果：
△圖片來自作者「超人的電話亭」
從這組圖片可以感受到，當圖片在400ms內時，是勉強可以接受的，但當時間延長到600ms及以上時，人們就會感受到明顯的延遲、等待和卡頓感。
多爾蒂門檻對響應時間的上限給出了參考，而后續的研究則給出了更細致的響應標準，比如元素的點擊反饋應控制在0.1s左右，盡量不要超過0.14s，單個元素入場退場時間應控制在0.2s左右（入場一般比退場稍慢），而頁面的轉場時長根據頁面大小和轉場動效的復雜度盡量控制在0.3s-0.4s之間。
只有響應時間符合上述標準，才不會讓用戶對產品的流暢性有所懷疑。
四、雅各布定律
用戶將大部分時間花在別人家的網站（產品）上，而不是你的。這意味著他們希望你的網站（產品）跟別人的有相同的操作方法和使用模式。雅各布定律告訴我們：作為設計師，我們必須要多研究把玩各種App，這樣我們才能夠對當下產品的設計趨勢有更直觀的感受。
對于新入行的設計師，我會建議大家好好研究一下ios和android的OS規范，了解平臺的特性，同時再翻翻下面這些書籍，了解各種常見的設計模式，豐富自己的設計組件庫。
此外，在做某種特定類型的產品設計時，也非常有必要做行業及競品分析，這樣才能確保我們在做產品設計時，可以延續用戶的主要視覺及行為習慣，減少用戶的學習及使用成本。
以視頻App為例，行業內的頭部產品在產品框架及元素布局上都具有高度的一致性，這也是雅各布定律的一個體現。
五、可感知性原則
操作前有預期，操作時有反饋，操作后可撤銷。這是十年前我入行時接觸到的一句話，我不知道是誰提出來的，但卻是這些年我做交互設計最重要的一條參考原則，我將其簡單命名為可感知性原則。
操作前有預期，指的是要符合視覺認知原理，符合行業設計習慣，讓用戶一看就懂。
操作時有反饋，指的是操作時要即時反饋，就近反饋，并且反饋合理。
操作后可撤銷，指的是任何操作都盡量讓其可撤銷，讓用戶無后顧之憂，安心探索。只要存在用戶行為的交互，這個準則都是可以用來檢驗的，以下圖為例。
當我們想要刪除某張照片時：
操作前有預期：工具欄位于默認的底部位置，有刪除圖標+文字明確示意的功能按鈕，讓用戶一看就知道應該選擇哪一項操作。
操作時有反饋：點擊刪除按鈕時，刪除按鈕有一個灰色的點擊態，隨后馬上出現一個確認彈窗，而且是就近位置出現，確認彈窗上提示簡單，按鈕用的是CTA的形式，操作交互一目了然。
操作后可撤銷：當用戶確認刪除后，照片消失，但是還可以去最近刪除的文件夾中，恢復照片。
六、結語
到這里，交互設計5大定律就全部介紹完成了，圍繞交互設計的過程指標，少、快、好、省依次展開，給大家介紹了奧卡姆剃刀原理、米勒定律、多爾蒂門檻、雅各布定律、可感知性原則。
也是為了滿足米勒定律的4±1原則，我將交互設計定律濃縮成了5條，如果在此基礎上加一條的話，我會在「好」的指標下，增加一條「格式塔原理」，它包含的7大設計原則。
格式塔原理是做設計排版的基石，絕對值得所有設計師反復學習、研究和運用。到這里重新定義交互設計5大定律就全部介紹完成了，如果你閱讀完也有所收獲，不要忘了轉發喲~
本文由@Liusir 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
我以后會打造輸入自己的一款產品
產品的復雜性是不會消失的，但是可以轉移，遙控器案例是復雜性轉移到了顯示界面上，所以遙控器的設計簡單了。老電視的顯示界面是簡單的，所以遙控器設計復雜。
同感，當代的電視界面，學習成本對我一個年輕人，都感到高
這些定律說的都很不錯，就是實際運用還是需要靈活點，慢慢積累經驗然后再靈活運用原理會讓作品更高級
案例與理論相結合倒是便于理解，但是真正實操時又是另一回事了。
交互設計的終極目標是改變和影響用戶的行為，達到期望的業務結果
哇，作者運用的例子都好高級的樣子，比較偏理論，對于實踐就。。。
每天學習一個知識：交互設計定律。作者整的這些案例要被我盜走去吹牛去啦??！
感覺定律、概念都是人創造的，學習一下就好的，但不要局限
感謝作者分享！真的剖析的很好??！有時候就是需要這些案例的積累才能融匯貫通的理解和運用！