一文讀懂 交互設(shè)計(jì)七大定律
實(shí)例解讀“交互設(shè)計(jì)七大定律”，助力設(shè)計(jì)伙伴們提升設(shè)計(jì)思維。
在交互設(shè)計(jì)中很多時(shí)候我們呈現(xiàn)了最終的效果，但是卻不知細(xì)致的過(guò)程究竟是如何，或許只是依葫蘆畫瓢，并沒(méi)有理論支撐。下面七大交互設(shè)計(jì)定律詳解，助力設(shè)計(jì)過(guò)程。
一、費(fèi)茨定律
二、米勒定律（7±2法則）
三、?？硕?/strong>
四、接近法則
五、泰斯勒定律（復(fù)雜性守恒定律）
六、奧卡姆剃刀原理
七、新鄉(xiāng)重夫：防錯(cuò)原則
一、費(fèi)茨定律
費(fèi)茨定律是人機(jī)交互和人體工程學(xué)活動(dòng)的數(shù)學(xué)模型，由保羅·費(fèi)茨在1954年提出。它預(yù)測(cè)了從任意位置移動(dòng)到一個(gè)目標(biāo)區(qū)域所需的時(shí)間。由位置的距離（D）和目標(biāo)大?。╓）兩個(gè)主要因素決定。
T：代表完成移動(dòng)所需的平均時(shí)間
A：代表光標(biāo)開始/停止時(shí)間
B：代表光標(biāo)移動(dòng)速度
D：代表從起點(diǎn)到目標(biāo)中心的距離
W：代表目標(biāo)的尺寸
簡(jiǎn)單來(lái)說(shuō)就是指：
1. 起始位置離目標(biāo)區(qū)域的距離越遠(yuǎn)，移動(dòng)到目標(biāo)區(qū)域的時(shí)間就越長(zhǎng)，
2. 如目標(biāo)區(qū)域的面積越大，起始位置到目標(biāo)區(qū)域的時(shí)間就越短。
3. 速度越快、目標(biāo)越小，錯(cuò)誤率越大，因?yàn)樗俣却媪藴?zhǔn)確度。
【生活中的“費(fèi)茨定律”】
汽車上的剎車踏板和油門踏板相距很近，并剎車踏板的面積要比油門踏板大，這樣駕駛員能在相對(duì)最短的時(shí)間內(nèi)把腳從油門踏板移動(dòng)到剎車踏板上，從而快速制動(dòng)，確保安全。
相反，如果如果剎車踏板和油門踏板距離較遠(yuǎn)，剎車踏板又較小，那么從油門踏板切換到剎車踏板時(shí)間就會(huì)變長(zhǎng)，且不容易踩中剎車踏板，發(fā)生安全隱患的風(fēng)險(xiǎn)就會(huì)急劇升高。
設(shè)計(jì)起源于生活，善于發(fā)現(xiàn)生活中的“美”～
【界面中的“費(fèi)茨定律”】
費(fèi)茨定律在產(chǎn)品界面設(shè)計(jì)中是可以提高 用戶在使用中的效率指標(biāo)，幫助用戶更快速的完成某個(gè)操作或任務(wù)流。
如QQ的登錄界面（圖2），輸入框比普通的輸入框更大，能更好的點(diǎn)擊。登錄按鈕的面積恰好比大拇指端的面積大一些，且整個(gè)按鈕的所在位置剛好在拇指的容易觸達(dá)區(qū)域（圖1），此按鍵的目標(biāo)區(qū)域（W）于觸達(dá)的距離（D）均是最佳的。
如果把按鍵放在更下方，只點(diǎn)擊登錄按鈕的確更容易觸碰。但是從操作流程上是輸入完成之后再點(diǎn)擊登錄，那么整個(gè)觸達(dá)距離（D）更長(zhǎng)，反應(yīng)時(shí)間也隨之變長(zhǎng)。即運(yùn)用費(fèi)茨定律時(shí)需要考慮業(yè)務(wù)流程。
二、米勒定律（7±2法則）
7±2法則是1956年由 喬治·米勒 所提出的，根據(jù)喬治·米勒的研究，人的短時(shí)記憶能力廣度為5-9個(gè)信息塊，超過(guò)了該范圍就容易出錯(cuò)。這說(shuō)明大腦短時(shí)記憶容量約為“7”，并在7+2與7-2之間浮動(dòng)，因此把這個(gè)記憶容量規(guī)律稱為“7±2法則”。
信息長(zhǎng)度越短，越容易記憶，反之則記憶難度越高
如下圖 字段（1），字符為1、3、5、7，小于7個(gè)容易短時(shí)間看完且短暫記住。如字段（2），字符大于9個(gè)時(shí)，記憶難度先行加深，瀏覽時(shí)間更長(zhǎng)，更不容易記住，只能記住其中幾個(gè)或是開頭和結(jié)尾幾個(gè)字符。
如下圖a、b兩串同樣的字符，先看a這一串字符，能記住幾個(gè)？再看b這串字符，又能記住幾個(gè)？ 我們將b字符進(jìn)行分段，運(yùn)用7+2法則，將一長(zhǎng)串字符進(jìn)行分段記憶，那么是否更加容易記憶。
【生活中的“7±2法則”】
這樣的例子很多，也源于我們生活。如銀行卡號(hào)、手機(jī)號(hào)等等，都是進(jìn)行了分段處理，控制在盡量少的字符以內(nèi)，便于識(shí)別、記憶。
【界面中的“7±2法則”】
PC端的導(dǎo)航和選項(xiàng)卡通常都不會(huì)超過(guò)9個(gè)，如導(dǎo)航導(dǎo)航功能分類很多，則可以通過(guò)聚合的方式聚合一部分，但是聚合的那部分也需運(yùn)用米勒定律（7±2法則）控制數(shù)量。
- 移動(dòng)端中tab欄中數(shù)量一般保持在2-5個(gè)，最少不低于2個(gè)，最多不高于7個(gè)；
- 側(cè)拉欄的列表最多一般也不會(huì)超過(guò)9個(gè)，如果大于9個(gè)，一般就會(huì)進(jìn)行分類，通過(guò)分隔條、分割線、卡片就行分割，保證每一個(gè)小區(qū)塊內(nèi)的數(shù)量小于9個(gè)；
- 選項(xiàng)卡分類的數(shù)量一般是4-6個(gè)，如更多便會(huì)進(jìn)行折疊，點(diǎn)擊折疊的內(nèi)容可查看全部。如未進(jìn)行折疊，那么也進(jìn)行了滑動(dòng)的處理，始終保持一屏內(nèi)顯示7個(gè)以內(nèi)的數(shù)量，滑動(dòng)查看更多。
[加餐]：—— 系列位置效應(yīng)/序列效應(yīng)
關(guān)于記憶還存在一種影響因素，一個(gè)物體在序列中的位置也影響我們對(duì)它的記憶。
包含有2種：
a.首因/初始效應(yīng)：相對(duì)中間位置，我們對(duì)一個(gè)系列最前面的物體的記憶力更清晰；
b.近時(shí)效應(yīng)：相對(duì)于中間位置，我們更容易對(duì)序列末尾的物體記憶更清晰。因?yàn)橐粋€(gè)系列最后幾項(xiàng)還存在工作記憶里，能夠較為輕松取得。
舉個(gè)例子：
1.就像我們看小說(shuō)的時(shí)候，內(nèi)容幾千章、幾百上千萬(wàn)字，除了精彩部分能記住。同時(shí)也能清晰的記住小說(shuō)的開頭和結(jié)尾。
2.如下圖文字，“約翰 是一個(gè).....的人”，第一句和第二句給人完全是兩個(gè)不同的感覺(jué)。第一句，我們首先會(huì)看到，約翰是一個(gè)聰明、勤奮...的人，因?yàn)槭紫瘸霈F(xiàn)了聰明、勤奮二字，那么就會(huì)給人友好的感覺(jué)。第二句，首先出現(xiàn)了嫉妒、固執(zhí)，那么便會(huì)給人造成一種厭惡的感覺(jué)。這即是首因效應(yīng)。
總結(jié)：在界面設(shè)計(jì)中、列舉項(xiàng)目時(shí)、演講時(shí)等等，把最重要的放在前面或者后面（而不是中間），以達(dá)到最大的想象效果。
三、?？硕?/strong>
希克定律是一種心理物理學(xué)定律。用戶所面臨的選擇數(shù)量越多，做出選擇所花費(fèi)的時(shí)間就越長(zhǎng)。在人機(jī)交互的界面中選項(xiàng)越多，意味著用戶做出決策的時(shí)間越長(zhǎng)。
在設(shè)計(jì)時(shí)需考慮“在不妨礙用戶選擇的情況下，如何提供較少的選項(xiàng)”。多而亂的選項(xiàng)會(huì)延長(zhǎng)用戶做決策的時(shí)間，甚至對(duì)一些“選擇困難戶”來(lái)說(shuō)，會(huì)直接導(dǎo)致任務(wù)流失敗。某些功能之間必定存在某些聯(lián)系，即可以對(duì)同類進(jìn)行分組，沒(méi)必要全部展示。這樣不僅可以減少用戶的選擇，每一個(gè)組的使用率也會(huì)增加。
【生活中的“?？投伞薄?/strong>
如家喻戶曉的電視遙控器
圖（1）大量的按鍵，用戶需要去思考每一個(gè)按鍵代表的是什么功能，且每一個(gè)按鍵較小，易造成誤操作。
圖（2）保留了核心功能，上下左右、音量加減、確定、返回等，其它功能集中在菜單按鈕內(nèi)，所有功能按鍵一目了然，用戶能清晰知道按鍵功能。且按鍵進(jìn)行了增大設(shè)計(jì)，減少用戶誤操作。
【頁(yè)面中的“?？投伞薄?/strong>
拋開我們已有的印象，支付寶和數(shù)字人民幣產(chǎn)品的定位，只看頁(yè)面所指向的功能。左邊的支付寶和右邊的數(shù)字人民幣在用戶使用時(shí)候，數(shù)字人民幣的思考成本會(huì)更低，內(nèi)容更少、功能突出，決策時(shí)間將會(huì)更短。
四、接近法則
根據(jù)格式塔的心理學(xué)理論 ：當(dāng)觀察者看到彼此臨近（空間/時(shí)間）的元素時(shí)，人的意識(shí)會(huì)認(rèn)為該臨近的元素之間是相關(guān)的。
如下圖
1.第一眼習(xí)慣性的會(huì)把左邊看成一個(gè)整體，右邊是另外一個(gè)整體。而不是把圓形和方形分別看成一個(gè)整體。越是臨近的元素，越容易被看成相似的一個(gè)組，人的大腦第一反應(yīng)會(huì)通過(guò)距離的遠(yuǎn)近來(lái)進(jìn)行判別。
2.接近法則的“權(quán)重”非常大，甚者可抵消其他法則，比如為上圖（1）、圖（2）添加顏色，甚至改變形狀，得到如下圖（3）、圖（4），我們?nèi)詴?huì)把接近圖形當(dāng)成一個(gè)組：
（格式塔理論是心理學(xué)中為數(shù)不多的理性主義理論之一，在設(shè)計(jì)中還有幾個(gè)比較常用的法則：相似性、連續(xù)性、封閉性、對(duì)稱性等，關(guān)注我，在后續(xù)文章陸續(xù)解讀喲～）
2.頁(yè)面中的“接近法則”
界面中同樣也運(yùn)用了接近法則，通過(guò)距離、留白、色塊來(lái)區(qū)分各類不同的組。如下圖，目的是在視覺(jué)上通過(guò)不同組的劃分來(lái)區(qū)分各個(gè)功能板塊的關(guān)聯(lián)。使頁(yè)面更清晰明了，用戶在使用時(shí)易懂板塊之間的關(guān)聯(lián)及層級(jí)關(guān)系。
[加餐]：上圖carben\雪球，不僅運(yùn)用了接近法則，還運(yùn)用了相似性、連續(xù)性、封閉性等原理進(jìn)行頁(yè)面構(gòu)圖。如carben中的第一個(gè)組，我的訂單，其中icon運(yùn)用了相似性，全是線性圖標(biāo)，且圖標(biāo)大小幾乎一致、顏色一致。整個(gè)組運(yùn)用卡片的形式進(jìn)行了封閉，使其構(gòu)成獨(dú)立模塊。
接近法則運(yùn)用的目的：在視覺(jué)上通過(guò)組與組的區(qū)分，來(lái)劃分功能模塊之間的關(guān)聯(lián)性，讓界面變得更加清晰，同時(shí)幫助用戶在瀏覽頁(yè)面時(shí)，能夠清楚的看到到各個(gè)內(nèi)容模塊之間的關(guān)聯(lián)性，就是視覺(jué)信息的劃分和分組展示。
五、泰斯勒定律（復(fù)雜性守恒定律）
泰斯勒定律又稱復(fù)雜性守恒定律，該定律認(rèn)為每一個(gè)過(guò)程都有其固有的復(fù)雜性，這個(gè)復(fù)雜性存在一個(gè)臨界點(diǎn)，在臨界點(diǎn)之間都可以簡(jiǎn)化，超過(guò)了這個(gè)臨界點(diǎn)便不能再簡(jiǎn)化。
整體復(fù)雜度：即一個(gè)功能有一個(gè)整體的復(fù)雜度，不管是簡(jiǎn)單，還是復(fù)雜都會(huì)存在。
復(fù)雜度可移動(dòng)區(qū)間：一個(gè)復(fù)雜的功能直到在臨界點(diǎn)之前均可以進(jìn)行簡(jiǎn)化，且不會(huì)影響整個(gè)功能
固有復(fù)雜度：在臨界點(diǎn)之后便成為固有復(fù)雜度，臨界點(diǎn)之后便不能對(duì)該功能進(jìn)行簡(jiǎn)化，如果再進(jìn)行簡(jiǎn)化則會(huì)應(yīng)該該功能的使用/用戶體驗(yàn)。
【頁(yè)面中的“泰斯勒定律”】
如電視遙控器：
1.最初的電視遙控器按鍵多，使用復(fù)雜。
2.經(jīng)過(guò)優(yōu)化后，功能仍然是之前的功能，但是按鍵減少，操作更好用。
3.到現(xiàn)階段的遙控器已經(jīng)設(shè)計(jì)成了極簡(jiǎn)風(fēng)格，功能沒(méi)變，按鍵更少，核心功能更加好用，其它功能也能從相應(yīng)的入口進(jìn)入。從而減少使用者思考成本，提高效率。但是如果再進(jìn)行簡(jiǎn)化，則會(huì)適得其反，核心功能不再能體現(xiàn)，反而引起用戶焦慮，用戶在思考該按哪個(gè)鍵，從哪里進(jìn)入。
總結(jié)：從整體上講，功能的復(fù)雜性是沒(méi)有變化的，只是從一個(gè)地方移動(dòng)到另外一個(gè)地方。
如遙控器中的很多按鈕所指向的功能，只是將很多不是核心功能的按鈕進(jìn)行了合并，但是并沒(méi)有刪除它。但這化繁為簡(jiǎn)的背后是為了更好的提升用戶體驗(yàn)，但產(chǎn)品、設(shè)計(jì)、開發(fā)或許會(huì)更多的付出，這或許也是一種守恒吧。即實(shí)際工作中也需要合理權(quán)衡復(fù)雜性守恒的原理的使用。
六、奧卡姆剃刀原理
“如不必要，不要增加實(shí)體數(shù)目”——奧卡姆的威廉（William of Ockham，14世紀(jì)哲學(xué)家）
“在其它條件相等的情況下，需要較少的就是最好的、有價(jià)值的”——羅伯特·葛羅泰斯特（Robert Grosseteste，12世紀(jì)教士、學(xué)者）
“自然在最簡(jiǎn)單的狀況下運(yùn)作”——亞里士多德（Aristotle）
奧卡姆剃刀原理的核心思想為：“如無(wú)必要，勿增實(shí)體。即簡(jiǎn)單有效原理”。一些不必要的元素會(huì)降低設(shè)計(jì)的效率，而且增加不可預(yù)測(cè)后果的發(fā)生概率。不管是實(shí)體、視覺(jué)、認(rèn)知上，多余的負(fù)擔(dān)都會(huì)削弱表現(xiàn)效能。多余的設(shè)計(jì)元素，有可能會(huì)造成失敗或其它問(wèn)題。
舉個(gè)實(shí)際例子：
1+1和（1+3）/ \sqrt{2*2} 都可以得到2的結(jié)論，第一種情況我們只需說(shuō)明加法的算法即可，但第二種情況加減乘除以及根號(hào)的算法都需要說(shuō)明，如果都能得出2這個(gè)結(jié)論，沒(méi)必要搞些花里胡哨的，能1+1就直接1+1。
這個(gè)個(gè)動(dòng)圖，酷友們應(yīng)該都看見過(guò)。兩個(gè)人決斗，A和B，A舞了半天大刀，準(zhǔn)備進(jìn)攻。B便看了半天，當(dāng)A開始進(jìn)攻時(shí)，B的激光長(zhǎng)劍，一劍KO了A。結(jié)論：一切花里胡哨都是空的。
[加餐]：“如無(wú)必要、勿增實(shí)體”。奧卡姆剃刀原理的實(shí)行是有一個(gè)前提的，便是：“如無(wú)”，如果沒(méi)有必要才不用增加實(shí)體，如果有必要?jiǎng)t該加還是要加。
七、新鄉(xiāng)重夫：防錯(cuò)原則
用戶在界面中發(fā)生的錯(cuò)誤大部分是由產(chǎn)品設(shè)計(jì)或者開發(fā)過(guò)程中的疏忽導(dǎo)致的，而不能認(rèn)為是用戶的操作疏忽導(dǎo)致的。所以我們可以通過(guò)改變產(chǎn)品體驗(yàn)設(shè)計(jì)把過(guò)失率降到最低。一款好的產(chǎn)品是不會(huì)讓用戶進(jìn)行思考的。當(dāng)看見一個(gè)頁(yè)面時(shí)，可不言而喻、一目了然，自我解釋。（推薦一本書《Don‘t make me think》）
在設(shè)計(jì)中非常有必要考慮防錯(cuò)機(jī)制，避免用戶多次重復(fù)操作。如某些操作不可挽回，則需要有強(qiáng)提示和強(qiáng)確認(rèn)，防止用戶犯不可挽回的錯(cuò)誤。
如在錄入表單中，前端與后端及時(shí)檢測(cè)錄入信息的有效性和正確性，而不是讓用戶填寫完所有表單再點(diǎn)擊提交按鈕之后，再來(lái)驗(yàn)證對(duì)錯(cuò)。如提交表單后再全部一起驗(yàn)證，這種反饋相對(duì)遲鈍，雖然不會(huì)影響主體流程，但導(dǎo)致用戶不能及時(shí)發(fā)現(xiàn)錯(cuò)誤，而進(jìn)行更改。而需要重新回過(guò)頭再錄入、再提交、再報(bào)錯(cuò)，這樣會(huì)嚴(yán)重影響使用效率。
應(yīng)從三個(gè)維度細(xì)分“防錯(cuò)原則”
1.操作前：提醒防錯(cuò)
a.精簡(jiǎn)的文字說(shuō)明，提醒用戶易犯錯(cuò)的地方
用戶首次進(jìn)入進(jìn)行引導(dǎo)的作用，那么引導(dǎo)和提示的位置應(yīng)較為突出，讓用戶能容易感知。
b.當(dāng)結(jié)果不可逆時(shí)，詢問(wèn)用戶讓其知道操作后果
用戶操作前給予正確的引導(dǎo)，減少用戶操作發(fā)生用戶的可能。通常分為若提示和強(qiáng)提示，若提示即文字說(shuō)明、氣泡浮窗等；強(qiáng)提示一般會(huì)中斷用戶的操作，彈窗詢問(wèn)、彈窗+輸入框的形式。
c.前置填充默認(rèn)值
某些選項(xiàng)給用戶提供前置默認(rèn)值，尤其是用戶需要做重復(fù)的操作，或者是某些必須開啟/關(guān)閉的狀態(tài)，亦或需要精確數(shù)字的時(shí)候，先提供一個(gè)默認(rèn)值，然后讓用戶再修改它們。
d.選項(xiàng)優(yōu)于輸入
能讓用戶選擇的就不讓用戶輸入，寧可讓他點(diǎn)擊完成任務(wù)，也不讓他輸入完成任務(wù)，因?yàn)檩斎氡赛c(diǎn)擊的失誤概率要大的多，操作成本也相對(duì)較高。
2.操作中：實(shí)時(shí)感知
a.用戶在選項(xiàng)中輸入后值后，當(dāng)輸入的值失去焦點(diǎn)，前端實(shí)時(shí)判斷輸入的值是否正確，如錯(cuò)誤便及時(shí)提示。
b.用戶在選項(xiàng)中輸入后值后，當(dāng)輸入的值失去焦點(diǎn)/字符長(zhǎng)度符合，前端實(shí)時(shí)判斷輸入的值是否正確，如錯(cuò)誤便toast提示。
3.操作后：及時(shí)反饋&友好引導(dǎo)
每個(gè)階段的操作需進(jìn)行及時(shí)的反饋，不管是正確or錯(cuò)誤。有一種因素叫“心理犯錯(cuò)”，是用戶對(duì)自己操作不自信的表現(xiàn)，如不及時(shí)告訴他操作結(jié)果，可能會(huì)給用戶造成一定的心理焦慮。
及時(shí)反饋能避免用戶誤操作的可能性，提高完成任務(wù)的效率。反饋不僅要指出有錯(cuò)，還要指出錯(cuò)在哪里，反饋文案需準(zhǔn)確、友好（文案呈現(xiàn)方式最好是和用戶聊天的形式，而非是在審問(wèn)用戶）。
總結(jié)：
這七大設(shè)計(jì)交互定律雖被認(rèn)為是標(biāo)準(zhǔn)，但從實(shí)際項(xiàng)目出發(fā)，它們只起到了參考和啟發(fā)的作用。作為設(shè)計(jì)師的我們：
1、不能照本宣科，任何法則只是輔助和理論依據(jù)的作用，法則會(huì)讓設(shè)計(jì)更加有理有據(jù)，每一條法則背后都蘊(yùn)含著對(duì)設(shè)計(jì)的思考。
2、不能按圖索驥，法則是死的，人是活的，不能死磕法則，每個(gè)法則之間其實(shí)也是有關(guān)聯(lián)性的，需結(jié)合實(shí)際項(xiàng)目靈活運(yùn)用。
3、不要迷戀任何設(shè)計(jì)法則，因?yàn)樽罱K落地的東西是需要考慮商業(yè)性和實(shí)用價(jià)值。某些設(shè)計(jì)方案或許違背了相應(yīng)的設(shè)計(jì)理論，但卻符合產(chǎn)品的現(xiàn)狀和用戶層次。即這種情況需考慮實(shí)際落地和利益最大化。
最后希望各位小伙伴們掌握更多的設(shè)計(jì)法則、模型，不僅僅是專業(yè)的展示，更是工作效率的提升。
