交互設計七大法則！新手必看的超多案例

編輯導語：怎么樣才能讓設計出來的產品更加美觀，更加符合大眾審美呢？設計師有一些理論上的知識可以引用，本文作者分享了關于交互設計的七大定律法則，我們一起來了解一下。

如同蘋果每次發布會上的演示視頻，都構建了驚人的交互設計體驗，在絲滑的動效下，讓設計師們每每都眼前一亮！

拓展閱讀：

有時在一些設計師討論分享會，或者和一些非設計師同事朋友交流，會碰到下述一些疑問……

阿里巴巴 UCAN2019 大會主題《設計，讓商業美而簡單》。我個人很喜歡這個口號，這是我們 UX 設計師朋友們每天都在做的事情，也是我們價值的體現。那怎么樣讓我們的設計，能讓商業美而簡單，有沒有什么方法、理論、技巧、原則的東西指導我們進行設計呢？

下面七條定律和原則也許可以幫助你更好地做好產品設計：

米勒定律

拓展閱讀：

米勒定律是美國心理學家喬治·米勒(George A.Miller)對短時記憶能力進行了定量研究后提出：人的短時記憶能力廣度為 7±2 個信息項，超過該范圍就容易出錯。提及到人的大腦短時記憶容量約為“7”，并在 7+2 與 7-2 之間浮動，因此這個神奇的記憶容量規律也稱為“7±2 法則”。

我們做個試驗：讀一遍下圖中的隨機字母，然后移開眼睛回憶一下，看你能回想起幾個：

再試試這個，同樣重頭到尾讀一遍，然后移開眼睛回憶：

你能記幾個？結果會發現：通常會記憶起 5~9 個，即 7±2 個，這個有趣的現象就是 7±2 效應。

但是，后來在《設計師要懂心理學》一書中又被提到，這一理論實際上缺乏足夠的科學依據，不少學者通過大量研究，發現那個神奇的數字其實是“4”。如果人能夠注意力集中，其處理信息的過程也不受干擾，那么其工作記憶中能保存 4 項左右事務；所以建議在給用戶展示信息時，盡可能限制在 4 以內，合理利用分類與歸納減少信息數量。

米勒定律及其所引發后人的研究結論，其實這一思考常常被運用到產品設計當中，如：

示例一：現在很多手機號、銀行卡號、身份證號等這種長字符內容，會進行分段顯示，對比之下你會發現閱讀起來會大大提升易讀性。

示例二：以前我們要輸 6 位數字驗證碼要切換出去看短信，憑記憶輸入，通常要切兩三次才能全部填完，后來在技術支持下，直接提取短信中的驗證碼在鍵盤上顯示點擊即可，大大減少用戶的輸錯幾率及記憶成本。

席克定律

席克定律是一種心理物理學定律。它主要體現出兩個參數：數量和時間；當所面臨的選擇數量越多，所作出選擇決策的時長花費就會長。

這定律更簡單一點歸納就是：盡可能減少選項的數量，Don’t make me think！

決策效率是一個產品導致用戶流失的重要原因之一，用戶遲遲不能做出選擇，付出的成本越大自然選擇放棄的幾率就越大，所以我們要將做決定的選項在滿足產品業務訴求的情況下，盡可能精簡，以減少所需反應的時間。如何提高用戶的選擇和獲取效率？這就考驗對產品設計的權衡，哪些內容必須要保留？哪些內容可以精簡？哪些內容可以前置后移？

示例一：大家都還記得早前的電視遙控器吧，功能齊全應有盡有，可以回想下我們平時使用最頻繁的是哪些？再看現在比如小米蘋果等電視機的遙控器，把開關、音量、頻道、菜單等最最頻繁的幾個按鍵外放，其他更多的操作藏在菜單中，沒有過多干擾，大大減少用戶做選擇的時間。

示例二：蘋果的產品也都是義無反顧地遵循著席克定律，不遺余力地縮減給予用戶的選擇，無論是在軟件產品和智能硬件產品上都是足夠精簡；如下圖 App store 有之前精品推薦還是展示很多 App，后來改版直接通過這種大卡片樣式把“精品”的 app 足夠放大讓你快速獲取。

示例三：Mac 版 QQ 客戶端的登錄框，輸完賬號密碼直接登錄很順暢的完成登錄操作，把更多那些注冊、忘記密碼等事項做收起處理，使得整個界面給人比較簡潔清爽的感覺。

費茨定律

拓展閱讀：

費茨定律主要體現出三個參數：時間、距離和大小；任意一點移動到目標位置所需要的時間，與目標距離正相關，距離越長所需時間越長，與目標大小負相關，體積越大越寬所需時間越短。這定律核心要點更簡單一點歸納就是：放大目標對象，減少目標距離。

示例一：你會看到現在很多產品廠商，他們的產品宣傳廣告圖，都是把產品圖放大，然后才是宣傳標題和內容。目標就是通過大圖片，強烈的視覺沖擊，先吸引到你的眼球，讓你第一眼有印象，然后再展開看具體的細項內容。

示例二：很多產品也會把比較密切的關聯信息，距離放得比較近，方便用戶做即將進行的關聯操作，如微信：長按復制某項內容，復制后關聯操作內容會跟復制項距離挨得比較近，將操作距離縮到最短；假設把關聯彈窗操作信息放在統一居中位置，操作以及視角距離會拉長，相應地操作時間會拉長。

示例三：QQ 手機端登錄頁面也是同樣原理，次要的注冊和忘記密碼內容縮小放在次要位置，輸入框內容放大，輸入賬號和密碼后，緊接著點擊登錄按鈕，展示順序和操作也都相對比較流暢；假設把按鈕放在下方，暫不考慮鍵盤交互的情況下，輸入完賬號密碼后，登錄按鈕距離相對較遠，關聯操作不夠連貫。

泰勒斯定律

泰斯勒定律又稱復雜性守恒定律，指的是任何系統都存在其固有的復雜性，且無法被減少，我們要考慮的是，怎么樣更好地處理它，讓用戶簡單、高效地使用它。這一定律也時常在平時工作中，面對較為復雜的業務、流程、頁面的時候，要去思考如何在不影響業務和功能的情況下，保證用戶的使用體驗；也不能為了所謂的頁面簡潔而刪掉一些業務認為重要的東西，最終導致功能滿足不了業務訴求。

設計本身就是一個反復溝通的一個過程，哪些內容可以精簡？哪些可以怎么處理？哪些強調弱化？這些都需要和業務產品方做反復溝通，達成意見一致，找到業務和體驗之間的權衡點。在面對不可避免的系統復雜性，我們要做的是花費更多的精力，實現用戶界面上的簡化，不把系統的復雜性交給用戶。

示例一：比如抖音、UC 瀏覽器、淘寶等平臺，會通過用戶平時瀏覽的時長、點贊、收藏等行為，來進行數據分析智能推送用戶關心的內容，從而使用戶對平臺產生更高的使用黏著度；通過一種技術的處理，減少用戶界面上的操作，幫助用戶更快達到其目標；

示例二：蘋果的 Keynote 和微軟的 PowerPoint 對保存定義差異，Keynote 是系統自動保存，用戶做到哪里隨時關閉，會自動幫你進行保存。PowerPoint 是手動保存，用戶做任何操作需要保存才能存檔，否則中途死機或者軟件出問題導致軟件自動關閉，而你做的東西可能會功虧一簣。

示例三：在做一個比較復雜的申請時，在內容上和業務方溝通后已沒辦法再減，如果全部內容在界面上放在一頁去展示，會給用戶直觀上感覺內容很多，當我們可以把內容分拆一下，而且告知用戶整個流程完成下來大概需要幾步需要填什么內容，提前告知用戶，然給用戶心里有預期。

奧卡姆剃刀定律

奧卡姆剃刀定律也是關于本體論簡化的原則，它提出：如無必要，勿增實體。即任何存在的東西，應該有對應的事實依據，否則我們不應該去考慮它。

今天我們用到「奧卡姆剃刀」這個詞語時，其實是在原理論上延伸開，泛指意指刪繁就簡，剔除問題中無用的雜項，傾向于簡單的解決辦法。為什么要將復雜變簡單呢？因為復雜容易使人迷失，只有簡單化后才利于人們理解和操作；簡單的頁面讓用戶一眼就能找到他們感興趣的內容，使用戶瀏覽更舒適，更能專心于你要表達的內容上，而復雜的頁面會讓用戶找不到信息的重點，容易分散用戶的視覺注意力。

示例一：對比微信手機話費充值頁面，和左側其他平臺的充值頁，你會發現用戶在話費充值這件事上，通過微信充值會非常明確而且快速完成任務，而左側平臺頁面整體頁面元素比較多，就會干擾用戶完成主要的任務操作，當然這也取決于產品本身的定位和策略不一樣，展示的內容也會不一樣。

示例二：iPhone 蘋果手機當時把直接把僅有的一個實體 home 鍵拿掉，通過上滑操作來代替回到首頁的操作，這也讓后來其他的手機廠商都追隨這樣的設計一致做了調整。

示例三：MUJI 的設計，也很好地體現了這個定律原則，通過“精選材質”、“ 修改工序”、“ 簡化包裝”重新審視了商品，制造出簡潔而舒心的商品。

接近原則

接近原則是一個心理學名詞，指對于彼此接近的事物，人們總會下意識地將他們建立某種關聯性，并視為一個整體去看待。這個原則更簡單一點歸納就是：把接近相似的信息元素組織起來。

接近原則是非常常用和極其有效的一種設計技巧，根據人的認知習慣和心理模型來構建頁面，能很好地幫助用戶節省瀏覽和理解內容的成本。

界面設計中的接近原則是對相似的信息及功能類別進行分組、布局；它在界面中的作用能夠直接影響到用戶與產品的視覺交流，借此引導用戶的瀏覽及操作行為。目的都是在視覺上通過組與組的區分來劃分功能與功能之間的關聯性，讓界面變得更清晰，并且幫助用戶在瀏覽頁面時，能夠清楚地感知到各個信息組之間的關系，也就是信息的歸類。

示例一：現在很多表單的設計，比如系統設置、個人中心等此類多表單的頁面，通常都會將相關聯信息歸類組合處理，能讓信息的歸類更加清晰，從視覺角度看頁面更有層次感，讓信息之間有一定的間歇，減少閱讀的疲勞感。

示例二：我們進行一些業務的申請，也常常碰到填單頁面，如下圖，信息就是這么多你全部羅列出來，從視覺感觀上看，會給用戶感覺要填很多內容；把相關聯信息歸類成手機號/國別/職業/學歷這些個人自身的基礎信息，郵箱/單位名稱/單位地址這些歸成另一類，在信息歸類上就可以和上面區分開，讓頁面更有層次感。

防錯原則

拓展閱讀：

防錯原則最早出現在 19 世紀 60 年代的汽車制造領域，是由豐田汽車的專家工程師新鄉重夫創造的理念。

防錯原則其實是站在用戶的角度，盡可能地提供相應措施，減少錯誤概率，令用戶更安心更有效率地完成任務。要注意換位思考，從用戶角度出發，站在用戶使用場景，預測用戶有可能發生錯誤操作。比起一個優秀的錯誤提示，更好的設計是在這個錯誤出現前就提前告知用戶，最大程度的減少錯誤的發生。

3 個維度幫助我們更好地做好防錯機制：

1. 操作前，怎么把提示做得更清晰，讓用戶在準備操作時就能清晰知道在哪操作要做什么；
2. 操作中，實時告知當前位置，讓用戶知道自己進行到哪了；
3. 操作后，能及時給予反饋，一旦錯誤可及時調整；

示例一：下圖登錄窗口，很好地詮釋目前很多操作表單的使用樣式。

1. 操作前，輸入框提示語能讓用戶知道是哪里操作，密碼框內提示輸入的密碼規則也寫出來，提高操作效率；
2. 操作中，輸入框高亮明確讓用戶知道當前所在位置，并且讓用戶更聚焦在當前內容；
3. 操作后，如內容有誤，給出明確提示，讓用戶能及時調整；

示例二：微信手機充值設計，輸入一個通訊錄存有，但輸入疑似錯誤的手機號碼時，頁面會提醒用戶是否輸錯，且給出用戶可能想要的結果，通過系統辨識，幫助用戶做內容校正，防止用戶操作錯誤。

最后

譽為交互設計之父的阿蘭·庫珀(Alan cooper)說過一句話：除非有更好的選擇，否則就遵從標準。這些被認定的設計定律原則，其實是最基礎的理論知識，當我們了解它后，這會成為個人的知識技能儲備，在平時設計工作中會給我們很好的參考和啟發，幫助我們更有效地完成自己的設計。

這些所謂的定律原則，當你全部理解之后，你會發現他們之間有些是相似甚至是重合的，如席克定律、米勒定律和奧卡姆剃刀定律，其實都是在強調信息要精簡。

所以我們要怎么做？

不要去迷戀任何法則，不要糾結去背念這些定律法則的名字，不要覺得有了這些法則，把這些定律原則照本宣科地對照進自己的產品就能提升一個檔次，設計水平就能得以很好地提升，這是不可能的。我們要去學習它理解它使用它，其中最重要的是真正地“理解”它，然后結合自身的產品情況及使用場景，更好地運用它。除了交互設計七大定律原則外，其實還有很多前輩總結的一些原則，如尼爾森十原則、設計心理學、格式塔理論等這些前輩們通過多年的經驗總結出來的理論知識，都會對我們做產品做設計有一定思考和啟發，提示我們平時多看多理解，在我們產品上就會得以更好的體現，從而把產品做得更好。

拓展閱讀：

以上，感謝閱讀！