實(shí)例解析「神奇數(shù)字7±2法則」在設(shè)計(jì)中的應(yīng)用

前言：交互設(shè)計(jì)之父阿蘭·庫(kù)珀說(shuō)過(guò)這樣一句話(huà)：「除非有更好的選擇，否則就遵從標(biāo)準(zhǔn)。」在交互設(shè)計(jì)領(lǐng)域中，有很多被時(shí)間和前人驗(yàn)證過(guò)的設(shè)計(jì)法則，這些法則是從用戶(hù)的行為邏輯中總結(jié)出來(lái)的，掌握這些法則能讓我們迅速有效的完成自己的設(shè)計(jì)，接下來(lái)，筆者通過(guò)一些實(shí)例來(lái)解析下這些原則在設(shè)計(jì)中的應(yīng)用。

一、神奇數(shù)字 7±2 法則簡(jiǎn)介

7±2 法則正式提出于美國(guó)心理學(xué)家 George A. Miller 1956年發(fā)布的論文《神奇的數(shù)字7加減2：我們加工信息能力的某些限制》。

1956年喬治米勒對(duì)短時(shí)記憶能力進(jìn)行了定量研究，他發(fā)現(xiàn)人類(lèi)頭腦最好的狀態(tài)能記憶含有7(±2)項(xiàng)信息塊，在記憶了5-9項(xiàng)信息后人類(lèi)的頭腦就開(kāi)始出錯(cuò)。與席克定律類(lèi)似，神奇數(shù)字 7±2 法則也經(jīng)常被應(yīng)用在移動(dòng)應(yīng)用交互設(shè)計(jì)上。

二、神奇數(shù)字 7±2 法則在設(shè)計(jì)中的應(yīng)用

1. PC 端導(dǎo)航或選項(xiàng)卡盡量不要超過(guò)9個(gè)，應(yīng)用的選項(xiàng)卡不會(huì)超過(guò)5個(gè)。

案例一：比如蘋(píng)果、人人都是產(chǎn)品經(jīng)理及 UI 中國(guó)官網(wǎng)導(dǎo)航欄，我們看到這三個(gè)主流網(wǎng)站的導(dǎo)航欄模塊都沒(méi)有超過(guò)9個(gè)，空間布局合理，使用起來(lái)方便快捷，尤其是蘋(píng)果官網(wǎng)，簡(jiǎn)約設(shè)計(jì)的典范，因此，盡量使得自己設(shè)計(jì)的網(wǎng)站導(dǎo)航少于9個(gè)會(huì)讓用戶(hù)對(duì)于網(wǎng)站的內(nèi)容一目了然，更快捷也更加有效。

案例二：比如安卓版微信、支付寶和 QQ 底部導(dǎo)航，在使用 APP 的時(shí)候，我們都會(huì)用到軟件的底部導(dǎo)航區(qū)域，如果大家仔細(xì)觀察，會(huì)發(fā)現(xiàn)，任何軟件的底部導(dǎo)航都不會(huì)超過(guò)5個(gè)，就像下圖中的微信、支付寶及 QQ 界面一樣，底部導(dǎo)航也沒(méi)有超過(guò)五個(gè)的。

2. 如果導(dǎo)航或選項(xiàng)卡內(nèi)容很多，可以用一個(gè)層級(jí)結(jié)構(gòu)來(lái)展示各段及其子段，并注意其深廣度的平衡。

案例一：比如天貓商城和亞馬遜網(wǎng)站的商品分類(lèi)選項(xiàng)卡，導(dǎo)航是分為多個(gè)層級(jí)的。如果導(dǎo)航的內(nèi)容很多放不下的話(huà)，我們就可以將它整合歸類(lèi)來(lái)分層級(jí)收納，就像天貓和亞馬遜官網(wǎng)對(duì)于商品分類(lèi)的處理方式一樣，使用父子層級(jí)的方式來(lái)歸類(lèi)展示商品。

案例二：比如京東及當(dāng)當(dāng)網(wǎng) APP 分類(lèi)模塊，下圖分別為京東及當(dāng)當(dāng)網(wǎng) APP 的商品分類(lèi)模塊界面，我們不難看出，兩個(gè)產(chǎn)品的商品分類(lèi)布局形式很相似，都是用了選項(xiàng)卡的方式來(lái)分類(lèi)商品，層級(jí)明確，相應(yīng)的提升了用戶(hù)找尋商品的效率。

3. 把大塊整段的信息分割成各個(gè)小段，并顯著標(biāo)記每個(gè)信息段和子段，以便清晰的確認(rèn)各自的內(nèi)容。

案例一：比如蘋(píng)果官網(wǎng) iPhone X 對(duì)于語(yǔ)言版本的介紹板塊，如下圖所示，語(yǔ)言版本介紹模塊把一整段語(yǔ)言，分成四個(gè)模塊的信息來(lái)介紹，而且每個(gè)模塊都要自己的標(biāo)題，再加上段落之間的空間留白，使得此段信息看起來(lái)清晰明了。

案例二：比如支付寶和微信銀行卡界面卡號(hào)信息的展示方式，正如下圖所展示的，為了便于記憶，支付寶及微信的銀行卡展示界面，將卡號(hào)信息的展示采取了分段的方式，這個(gè)也源于我們現(xiàn)實(shí)生活中使用的銀行卡，大家都知道銀行卡的卡號(hào)是分段展示在卡上的。

三、寫(xiě)在最后

以上就是我對(duì)于「神奇數(shù)字7±2法則」的理解以及其在日常設(shè)計(jì)中的用法，希望對(duì)大家有點(diǎn)啟發(fā)，同時(shí)歡迎大家與我們進(jìn)行交流探討。

歡迎關(guān)注作者微信公眾號(hào)：「熊貓?jiān)O(shè)計(jì)院」

「設(shè)計(jì)法則系列好文」

• 《那些很熟悉但又叫不出名字的設(shè)計(jì)法則：功能可供性》
• 《那些很熟悉但又叫不出名字的設(shè)計(jì)法則：馮·雷斯托夫效應(yīng)》
• 《那些很熟悉但又叫不出名字的設(shè)計(jì)法則之「系列位置效應(yīng)」》
• 《那些很熟悉但又叫不出名字的設(shè)計(jì)法則：希克定律》
• 《那些很熟悉但又叫不出名字的設(shè)計(jì)法則：形式服從功能》
• 《那些很熟悉但又不知怎么用的設(shè)計(jì)法則：80/20法則》
• 《那些很熟悉但又叫不出名字的設(shè)計(jì)法則：倒金字塔法則》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專(zhuān)欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專(zhuān)欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com