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

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

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

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

米勒定律

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

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

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

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

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

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

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

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

席克定律

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

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

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

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

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

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

費(fèi)茨定律

費(fèi)茨定律主要體現(xiàn)出三個(gè)參數(shù)：時(shí)間、距離和大?。蝗我庖稽c(diǎn)移動(dòng)到目標(biāo)位置所需要的時(shí)間，與目標(biāo)距離正相關(guān)，距離越長所需時(shí)間越長，與目標(biāo)大小負(fù)相關(guān)，體積越大越寬所需時(shí)間越短。這定律核心要點(diǎn)更簡單一點(diǎn)歸納就是：放大目標(biāo)對(duì)象，減少目標(biāo)距離。

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

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

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

泰勒斯定律

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

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

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

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

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

奧卡姆剃刀定律

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

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

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

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

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

接近原則

接近原則是一個(gè)心理學(xué)名詞，指對(duì)于彼此接近的事物，人們總會(huì)下意識(shí)地將他們建立某種關(guān)聯(lián)性，并視為一個(gè)整體去看待。這個(gè)原則更簡單一點(diǎn)歸納就是：把接近相似的信息元素組織起來。

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

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

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

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

防錯(cuò)原則

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

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

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

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

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

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

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

最后

譽(yù)為交互設(shè)計(jì)之父的阿蘭·庫珀(Alan cooper)說過一句話：除非有更好的選擇，否則就遵從標(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é)去背念這些定律法則的名字，不要覺得有了這些法則，把這些定律原則照本宣科地對(duì)照進(jìn)自己的產(chǎn)品就能提升一個(gè)檔次，設(shè)計(jì)水平就能得以很好地提升，這是不可能的。我們要去學(xué)習(xí)它理解它使用它，其中最重要的是真正地"理解"它，然后結(jié)合自身的產(chǎn)品情況及使用場景，更好地運(yùn)用它。除了交互設(shè)計(jì)七大定律原則外，其實(shí)還有很多前輩總結(jié)的一些原則，如尼爾森十原則、設(shè)計(jì)心理學(xué)、格式塔理論等這些前輩們通過多年的經(jīng)驗(yàn)總結(jié)出來的理論知識(shí)，都會(huì)對(duì)我們做產(chǎn)品做設(shè)計(jì)有一定思考和啟發(fā)，提示我們平時(shí)多看多理解，在我們產(chǎn)品上就會(huì)得以更好的體現(xiàn)，從而把產(chǎn)品做得更好。

作者：如成