編輯導(dǎo)語(yǔ)：設(shè)計(jì)師在日常工作中需要掌握很多理論技巧，怎么樣讓設(shè)計(jì)出來(lái)的產(chǎn)品更加美觀，更加符合大眾審美呢？設(shè)計(jì)師有一些理論上的知識(shí)可以引用，本文作者分享了關(guān)于交互設(shè)計(jì)的七大定律法則，我們一起來(lái)了解一下。

有時(shí)在一些設(shè)計(jì)師討論分享會(huì)，或者和一些非設(shè)計(jì)師同事朋友交流，會(huì)碰到下述一些疑問(wèn)……

阿里巴巴UCAN2019大會(huì)主題《設(shè)計(jì)，讓商業(yè)美而簡(jiǎn)單》。我個(gè)人很喜歡這個(gè)口號(hào)，這是我們UX設(shè)計(jì)師朋友們每天都在做的事情，也是我們價(jià)值的體現(xiàn)。那怎么樣讓我們的設(shè)計(jì)，能讓商業(yè)美而簡(jiǎn)單，有沒(méi)有什么方法、理論、技巧、原則的東西指導(dǎo)我們進(jìn)行設(shè)計(jì)呢？

其實(shí)在設(shè)計(jì)領(lǐng)域就有很多經(jīng)過(guò)很多設(shè)計(jì)前輩引路人，通過(guò)大量的設(shè)計(jì)檢驗(yàn)過(guò)的定律及法則來(lái)作為設(shè)計(jì)的指導(dǎo)原理，它能夠幫助設(shè)計(jì)師對(duì)界面上的內(nèi)容元素進(jìn)行合理的運(yùn)用，發(fā)現(xiàn)一些產(chǎn)品使用過(guò)程中的問(wèn)題，實(shí)時(shí)進(jìn)行改善設(shè)計(jì)使產(chǎn)品的可用性上得以更好的提升，從而體現(xiàn)出美而簡(jiǎn)單的價(jià)值。

下面七條定律和原則也許可以幫助你更好地做好產(chǎn)品設(shè)計(jì)：

一、米勒定律

米勒定律是美國(guó)心理學(xué)家喬治·米勒(George A.Miller)對(duì)短時(shí)記憶能力進(jìn)行了定量研究后提出：人的短時(shí)記憶能力廣度為7±2個(gè)信息項(xiàng)，超過(guò)該范圍就容易出錯(cuò)。

提及到人的大腦短時(shí)記憶容量約為“7”，并在7+2與7-2之間浮動(dòng)，因此也這個(gè)神奇的記憶容量規(guī)律稱(chēng)為“7±2法則”。

我們做個(gè)試驗(yàn)：讀一遍下圖中的隨機(jī)字母，然后移開(kāi)眼睛回憶一下，看你能回想起幾個(gè)：

再試試這個(gè)，同樣重頭到尾讀一遍，然后移開(kāi)眼睛回憶：

你能記幾個(gè)？結(jié)果會(huì)發(fā)現(xiàn)：通常會(huì)記憶起5~9個(gè)，即7±2個(gè)，這個(gè)有趣的現(xiàn)象就是7±2效應(yīng)。

但是，后來(lái)在《設(shè)計(jì)師要懂心理學(xué)》一書(shū)中又被提到，，這一理論實(shí)際上缺乏足夠的科學(xué)依據(jù)，不少學(xué)者通過(guò)大量研究，發(fā)現(xiàn)那個(gè)神奇的數(shù)字其實(shí)是“4”。

如果人能夠注意力集中，其處理信息的過(guò)程也不受干擾，那么其工作記憶中能保存4項(xiàng)左右事務(wù)；所以建議在給用戶(hù)展示信息時(shí)，盡可能限制在4以?xún)?nèi)，合理利用分類(lèi)與歸納減少信息數(shù)量。

米勒定律及其所引發(fā)后人的研究結(jié)論，其實(shí)這一思考常常被運(yùn)用到產(chǎn)品設(shè)計(jì)當(dāng)中，如：

示例一：現(xiàn)在很多手機(jī)號(hào)、銀行卡號(hào)、身份證號(hào)等這種長(zhǎng)字符內(nèi)容，會(huì)進(jìn)行分段顯示，對(duì)比之下你會(huì)發(fā)現(xiàn)閱讀起來(lái)會(huì)大大提升易讀性。

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

示例三：設(shè)計(jì)師互動(dòng)平臺(tái)ZCOOL站酷的導(dǎo)航欄設(shè)計(jì)，把主要導(dǎo)航欄位外放7個(gè)，更多用收起方式呈現(xiàn)，能保證最核心的內(nèi)容優(yōu)先呈現(xiàn)給用戶(hù)。

二、席克定律

席克定律是一種心理物理學(xué)定律。它主要體現(xiàn)出兩個(gè)參數(shù)：數(shù)量和時(shí)間；當(dāng)所面臨的選擇數(shù)量越多，所作出選擇決策的時(shí)長(zhǎng)花費(fèi)就會(huì)長(zhǎng)。

這定律更簡(jiǎn)單一點(diǎn)歸納就是：
盡可能減少選項(xiàng)的數(shù)量，Don’t make me think！

決策效率是一個(gè)產(chǎn)品導(dǎo)致用戶(hù)流失的重要原因之一，用戶(hù)遲遲不能做出選擇，付出的成本越大自然選擇放棄的幾率就越大。產(chǎn)品在服務(wù)于用戶(hù)“時(shí)間是關(guān)鍵”，所以我們要將做決定的選項(xiàng)在滿(mǎn)足產(chǎn)品業(yè)務(wù)訴求的情況下，盡可能精簡(jiǎn)，以減少所需反應(yīng)的時(shí)間。如何提高用戶(hù)的選擇和獲取效率？這就考驗(yàn)對(duì)產(chǎn)品設(shè)計(jì)的權(quán)衡，哪些內(nèi)容必須要保留？哪些內(nèi)容可以精簡(jiǎn)？哪些內(nèi)容可以前置后移？

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

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

示例三：Mac版QQ客戶(hù)端的登錄框，輸完賬號(hào)密碼直接登錄很順暢的完成登錄操作，把更多那些注冊(cè)、忘記密碼等事項(xiàng)做收起處理，使得整個(gè)界面都給人比較簡(jiǎn)潔清爽的感覺(jué)。

三、費(fèi)茨定律

費(fèi)茨定律主要體現(xiàn)出三個(gè)參數(shù)：時(shí)間、距離和大??；任意一點(diǎn)移動(dòng)到目標(biāo)位置所需要的時(shí)間，與目標(biāo)距離正相關(guān)，距離越長(zhǎng)所需時(shí)間越長(zhǎng)，與目標(biāo)大小負(fù)相關(guān)，體積越大越寬所需時(shí)間越短。

這定律核心要點(diǎn)更簡(jiǎn)單一點(diǎn)歸納就是：放大目標(biāo)對(duì)象，減少目標(biāo)距離。

示例一：你會(huì)看到現(xiàn)在很多產(chǎn)品廠商，他們的產(chǎn)品宣傳廣告圖，都是把產(chǎn)品圖放大，然后才是宣傳標(biāo)題和內(nèi)容。目標(biāo)就是通過(guò)圖片大小，強(qiáng)烈是視覺(jué)沖擊，先吸引到你的眼球，讓你第一眼有印象，然后再展開(kāi)看具體的細(xì)項(xiàng)內(nèi)容。

示例二：很多產(chǎn)品也會(huì)把比較密切關(guān)聯(lián)的關(guān)聯(lián)信息，距離放得比較近，方便用戶(hù)做即將進(jìn)行的關(guān)聯(lián)操作，如微信：長(zhǎng)按復(fù)制某項(xiàng)內(nèi)容，復(fù)制后關(guān)聯(lián)操作內(nèi)容會(huì)跟復(fù)制項(xiàng)距離挨得比較近，將操作距離縮到最短；假設(shè)把關(guān)聯(lián)彈窗操作信息放在統(tǒng)一居中位置，操作以及視角距離會(huì)拉長(zhǎng)，相應(yīng)地操作時(shí)間會(huì)拉長(zhǎng)。

示例三：QQ 手機(jī)端登錄頁(yè)面也是同樣原理，次要的注冊(cè)和忘記密碼內(nèi)容縮小放在次要位置，輸入框內(nèi)容放大，輸入賬號(hào)和密碼后，緊接著點(diǎn)擊登錄按鈕，展示順序和操作也都相對(duì)比較流暢；假設(shè)把按鈕放在下方，暫不考慮鍵盤(pán)交互的情況下，輸入完賬號(hào)密碼后，登錄按鈕距離相對(duì)較遠(yuǎn)，關(guān)聯(lián)操做不夠連貫。

四、泰勒斯定律

泰斯勒定律又稱(chēng)復(fù)雜性守恒定律，指的是任何系統(tǒng)都存在其固有的復(fù)雜性，且無(wú)法被減少，我們要考慮的是，怎么樣更好地處理它，讓用戶(hù)簡(jiǎn)單、高效地使用它。

這一定律也時(shí)常在平時(shí)工作中，在面對(duì)較為復(fù)雜的業(yè)務(wù)、流程、頁(yè)面的時(shí)候，要去思考如何在不影響業(yè)務(wù)和功能的情況下，保證用戶(hù)的使用體驗(yàn)；也不能為了所謂的頁(yè)面簡(jiǎn)潔而刪掉一些業(yè)務(wù)認(rèn)為重要的東西，最終導(dǎo)致功能滿(mǎn)足不了業(yè)務(wù)訴求。

設(shè)計(jì)本身就是一個(gè)反復(fù)溝通的一個(gè)過(guò)程，哪些內(nèi)容可以精簡(jiǎn)？哪些可以怎么處理？哪些強(qiáng)調(diào)弱化？這些都需要和業(yè)務(wù)產(chǎn)品方做反復(fù)溝通，達(dá)成意見(jiàn)一致，找到業(yè)務(wù)和體驗(yàn)之間的權(quán)衡點(diǎn)。在面對(duì)不可避免的系統(tǒng)復(fù)雜性，我們要做的是花費(fèi)更多的精力，實(shí)現(xiàn)用戶(hù)界面上的簡(jiǎn)化，不把系統(tǒng)的復(fù)雜性交給用戶(hù)。

示例一：比如抖音、UC瀏覽器、淘寶等平臺(tái)，會(huì)通過(guò)用戶(hù)平時(shí)瀏覽的時(shí)長(zhǎng)、點(diǎn)贊、收藏等行為，來(lái)進(jìn)行數(shù)據(jù)分析智能推送用戶(hù)關(guān)心的內(nèi)容，從而使用戶(hù)對(duì)平臺(tái)產(chǎn)生更高的使用黏著度；通過(guò)一種技術(shù)的處理，減少用戶(hù)界面上的操作，幫助用戶(hù)更快達(dá)到其目標(biāo)；

示例二：蘋(píng)果的Keynote和微軟的PowerPoint對(duì)保存定義差異，Keynote是系統(tǒng)自動(dòng)保存，用戶(hù)做到哪里隨時(shí)關(guān)閉，會(huì)自動(dòng)幫你進(jìn)行保存。PowerPoint是手動(dòng)保存，用戶(hù)做任何操作需要保存才能存檔，否則中途死機(jī)或者軟件出問(wèn)題導(dǎo)致軟件自動(dòng)關(guān)閉，而你做的東西可能會(huì)功虧一簣。

示例三：在做一個(gè)比較復(fù)雜的申請(qǐng)時(shí)，在內(nèi)容上和業(yè)務(wù)方溝通后已沒(méi)辦法再減，如果全部?jī)?nèi)容在界面上放在一頁(yè)去展示，會(huì)給用戶(hù)直觀上感覺(jué)內(nèi)容很多，當(dāng)我們可以把內(nèi)容分拆一下，而且告知用戶(hù)整個(gè)流程完成下來(lái)大概需要幾步需要填什么內(nèi)容，提前告知用戶(hù)，然給用戶(hù)心里有預(yù)期。

五、奧卡姆剃刀定律

奧卡姆剃刀定律也是關(guān)于本體論簡(jiǎn)化的原則，它提出：如無(wú)必要，勿增實(shí)體。即任何存在的東西，應(yīng)該有對(duì)應(yīng)的事實(shí)依據(jù)，否則我們不應(yīng)該去考慮它。

今天我們用到「奧卡姆剃刀」這個(gè)詞語(yǔ)時(shí)，其實(shí)是在原理論上延伸開(kāi)，泛指意指刪繁就簡(jiǎn)，剔除問(wèn)題中無(wú)用的雜項(xiàng)，傾向于簡(jiǎn)單的解決辦法。為什么要將復(fù)雜變簡(jiǎn)單呢？

因?yàn)閺?fù)雜容易使人迷失，只有簡(jiǎn)單化后才利于人們理解和操作；簡(jiǎn)單的頁(yè)面讓用戶(hù)一眼就能找到他們感興趣的內(nèi)容，使用戶(hù)瀏覽更舒適，更能專(zhuān)心于你要表達(dá)的內(nèi)容上，而復(fù)雜的頁(yè)面會(huì)讓用戶(hù)找不到信息的重點(diǎn)，容易分散用戶(hù)的視覺(jué)注意力。

示例一：對(duì)比微信手機(jī)話費(fèi)充值頁(yè)面，和左側(cè)其他平臺(tái)的充值頁(yè)，你會(huì)發(fā)現(xiàn)用戶(hù)在做話費(fèi)充值這件事上，通過(guò)微信充值會(huì)非常明確而且快速能夠完成任務(wù)，而左側(cè)平臺(tái)頁(yè)面整體頁(yè)面元素比較多，就會(huì)干擾用戶(hù)完成主要的任務(wù)操作，當(dāng)然這也取決于產(chǎn)品本身的定位和策略不一樣展示的內(nèi)容也會(huì)不一樣。

示例二：iPhone蘋(píng)果手機(jī)當(dāng)時(shí)把直接把僅有的一個(gè)實(shí)體home鍵拿掉，通過(guò)上滑操作來(lái)代替回到首頁(yè)的操作，這也讓后來(lái)其他的手機(jī)廠商都追隨這樣的設(shè)計(jì)一致做了調(diào)整。

示例三：MUJI的設(shè)計(jì)，無(wú)疑也是很好地體現(xiàn)了這個(gè)定律原則，通過(guò)“精選材質(zhì)”、“ 修改工序”、“ 簡(jiǎn)化包裝”重新審視了商品，制造出簡(jiǎn)潔而舒心的商品。

六、接近原則

接近原則是一個(gè)心理學(xué)名詞，指對(duì)于彼此接近的事物，人們總會(huì)下意識(shí)地將他們建立某種關(guān)聯(lián)性，并視為一個(gè)整體去看待。

這原則更簡(jiǎn)單一點(diǎn)歸納就是：把接近相似的信息元素組織起來(lái)。

接近原則是非常常用和極其有效的一種設(shè)計(jì)技巧，根據(jù)人的認(rèn)知習(xí)慣和心里模型來(lái)構(gòu)建頁(yè)面，能很好地幫助用戶(hù)節(jié)省瀏覽和理解內(nèi)容的成本。

界面設(shè)計(jì)中的接近原則是對(duì)相似的信息及功能類(lèi)別進(jìn)行分組、布局；它在界面中的作用能夠直接影響到用戶(hù)與產(chǎn)品的視覺(jué)交流，借此引導(dǎo)用戶(hù)的瀏覽及操作行為。目的都是在視覺(jué)上通過(guò)組與組的區(qū)分來(lái)劃分功能與功能之間的關(guān)聯(lián)性，讓界面變得更清晰，并且?guī)椭脩?hù)在瀏覽頁(yè)面時(shí)，能夠清楚地感知到各個(gè)信息組之間的關(guān)系，也就是信息的歸類(lèi)。

示例一：現(xiàn)在很多表單的設(shè)計(jì)，比如系統(tǒng)設(shè)置、個(gè)人中心等此類(lèi)多表單的頁(yè)面，通常都會(huì)將相關(guān)聯(lián)信息歸類(lèi)組合處理，既能讓信息的歸類(lèi)更加清晰，從視覺(jué)角度看頁(yè)面更有層次感，讓信息之間有一定的間歇，減少閱讀的疲勞感。

示例二：我們進(jìn)行一些業(yè)務(wù)的申請(qǐng)，也常常碰到填單頁(yè)面，如下圖，信息就是這么多你全部羅列出來(lái)，從視覺(jué)感觀上看，會(huì)給用戶(hù)感覺(jué)要填很多內(nèi)容；把相關(guān)聯(lián)信息歸手機(jī)號(hào)/國(guó)別/職業(yè)/學(xué)歷這些個(gè)人自身的基礎(chǔ)信息，郵箱/單位名稱(chēng)/單位地址這些歸成另一類(lèi)，在信息歸類(lèi)上就可以和上面區(qū)分開(kāi)，讓頁(yè)面更有層次感。

七、防錯(cuò)原則

防錯(cuò)原則最早出現(xiàn)在19世紀(jì)60年代的汽車(chē)制造領(lǐng)域，由豐田汽車(chē)的專(zhuān)家工程師新鄉(xiāng)重夫創(chuàng)造的理念。

防錯(cuò)原則其實(shí)是為站在用戶(hù)的角度，盡可能地提供相應(yīng)措施，減少錯(cuò)誤概率，令用戶(hù)更安心更效率地地完成任務(wù)。要注意換位思考，從用戶(hù)角度出發(fā)，站在用戶(hù)使用場(chǎng)景，預(yù)測(cè)用戶(hù)有可能發(fā)生錯(cuò)誤操作。比起一個(gè)優(yōu)秀的錯(cuò)誤提示，更好的設(shè)計(jì)是在這個(gè)錯(cuò)誤出現(xiàn)前就提前告知用戶(hù)，最大程度的減少錯(cuò)誤的發(fā)生。

3個(gè)維度幫助我們更好地做好防錯(cuò)機(jī)制：

• 操作前，怎么把提示做得更清晰清晰，讓用戶(hù)在準(zhǔn)備操作時(shí)候就能清晰知道在哪操作要做什么；
• 操作中，實(shí)時(shí)告知當(dāng)前位置，讓用戶(hù)知道自己進(jìn)行到哪了；
• 操作后，能及時(shí)給予反饋，一旦錯(cuò)誤可及時(shí)調(diào)整；

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

• 操作前，輸入框提示語(yǔ)能讓用戶(hù)知道是哪里操作，密碼框內(nèi)提示輸入的密碼規(guī)則也寫(xiě)出來(lái)，提高操作效率；
• 操作中，輸入框高亮明確讓用戶(hù)知道當(dāng)前所在位置，并且讓用戶(hù)更聚焦在當(dāng)前內(nèi)容；
• 操作后，如內(nèi)容有誤，給出明確提示，讓用戶(hù)能及時(shí)調(diào)整；

示例二：微信手機(jī)充值設(shè)計(jì)，輸入一個(gè)通訊錄存有，但輸入疑似錯(cuò)誤的手機(jī)號(hào)碼時(shí)，頁(yè)面會(huì)提醒用戶(hù)是否輸錯(cuò)，且給出可能是用戶(hù)想要的結(jié)果，通過(guò)系統(tǒng)辨識(shí)，幫助用戶(hù)做內(nèi)容校正，防止用戶(hù)操作錯(cuò)誤。

八、最后

譽(yù)為交互設(shè)計(jì)之父的阿蘭·庫(kù)珀(Alan cooper)說(shuō)過(guò)一句話：除非有更好的選擇，否則就遵從標(biāo)準(zhǔn)。這些被認(rèn)定的設(shè)計(jì)定律原則，其實(shí)是最基礎(chǔ)的理論知識(shí)，當(dāng)我們了解它后，這會(huì)成為個(gè)人的知識(shí)技能儲(chǔ)備，在平時(shí)設(shè)計(jì)工作中會(huì)給我們很好的參考和啟發(fā)，幫助我們更有效地完成自己的設(shè)計(jì)。

這些所謂的定律原則，當(dāng)你全部理解之后，你會(huì)發(fā)現(xiàn)他們之間有些是相似甚至是重合的，如席克定律、米勒定律和奧卡姆剃刀定律，其實(shí)都是在強(qiáng)調(diào)信息要精簡(jiǎn)。

所以我們要怎么做？

不要去迷戀任何法則，不要糾結(jié)去背念這些定律法則的名字，不要覺(jué)得有了這些法則，把這些定律原則照本宣科地對(duì)照進(jìn)自己的產(chǎn)品就能提升一個(gè)檔次，設(shè)計(jì)水平就能得以很好地提升，這是不可能的。

我們要去學(xué)習(xí)它理解它使用它，其中最重要的是真正地“理解”它，然后結(jié)合自身的產(chǎn)品情況及使用場(chǎng)景，更好地運(yùn)用它。

除了交互設(shè)計(jì)七大定律原則外，其實(shí)還有很多前輩總結(jié)的一些原則，如尼爾森十原則、設(shè)計(jì)心理學(xué)、格式塔理論等這些前輩們通過(guò)多年的經(jīng)驗(yàn)總結(jié)出來(lái)的理論知識(shí)，都會(huì)對(duì)我們做產(chǎn)品做設(shè)計(jì)有一定思考和啟發(fā)，提示我們平時(shí)多看多理解，在我們產(chǎn)品上就會(huì)得以更好的體現(xiàn)，從而把產(chǎn)品做得更好。

以上，感謝閱讀！

本文由 @EC Huang 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議