7±2法則到底是什么
發(fā)布時(shí)間:2022-01-06 10:32 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2 閱讀: 3165

了解 7±2 法則,并應(yīng)用到日常設(shè)計(jì)中可以準(zhǔn)確的傳遞主體內(nèi)容,并使用戶(hù)對(duì)其產(chǎn)生一定的印象。下面,我將通過(guò)實(shí)例,來(lái)解析一下 7±2 法則在設(shè)計(jì)中常見(jiàn)的應(yīng)用方法。

我們的大腦每天都會(huì)接收很多信息,對(duì)于我們看到的一些信息,大腦會(huì)進(jìn)行理解和記憶。根據(jù) George A. Miller 的研究,人類(lèi)的大腦在短時(shí)間內(nèi)、記憶的最佳狀態(tài)是一次最多記住 5~9 項(xiàng)信息,而如果信息量超出 5~9 項(xiàng)之后,記憶就會(huì)出錯(cuò),那么勢(shì)必會(huì)影響展現(xiàn)主體內(nèi)容的初衷,這就是神奇的 7±2 法則。

了解 7±2 法則,并應(yīng)用到日常設(shè)計(jì)中,可以準(zhǔn)確的傳遞主體內(nèi)容,并使用戶(hù)對(duì)其產(chǎn)生一定的印象。

下面,我將通過(guò)實(shí)例,來(lái)解析一下 7±2 法則在設(shè)計(jì)中常見(jiàn)的應(yīng)用方法。


數(shù)字分割的設(shè)計(jì)


在設(shè)計(jì)中,經(jīng)常會(huì)遇到一些數(shù)字的展示,我們通常會(huì)把這些數(shù)字按其行業(yè)規(guī)律進(jìn)行分割。例如:手機(jī)號(hào)采用 3-4-4 的方式進(jìn)行分割,銀行卡號(hào)采用每 4 位進(jìn)行分割等等。

案例展示:

幾乎所有設(shè)計(jì)師都在用的7±2法則到底是什么?

△ 左圖(京東):注冊(cè)填寫(xiě)手機(jī)號(hào)時(shí),采取 3-4-4 的方式,中間用空格進(jìn)行分割。右圖(美團(tuán)):商家頁(yè)撥打電話的展示也同樣用空格進(jìn)行數(shù)字分割。

通過(guò) 7±2 法則,利用這種分割方式,可以達(dá)到很好的交互體驗(yàn),提升用戶(hù)操作便捷性的同時(shí)還可以使用戶(hù)進(jìn)行快速記憶。


導(dǎo)航、選項(xiàng)卡的設(shè)計(jì)


在使用 APP 時(shí),菜單欄是我們經(jīng)常要用到的區(qū)域。如果大家仔細(xì)觀察,大部分 APP 的菜單欄都遵循了 7±2 法則的原理來(lái)進(jìn)行設(shè)計(jì)的。雖然有些菜單欄可以通過(guò) X 軸滑動(dòng)來(lái)展示更多內(nèi)容,但在頁(yè)面初始狀態(tài)下,菜單數(shù)量都會(huì)保持在 5~9 個(gè)之內(nèi)。

案例展示1:

幾乎所有設(shè)計(jì)師都在用的7±2法則到底是什么?

△ 左圖(今日頭條):初始狀態(tài)下,菜單欄有效點(diǎn)擊數(shù)量為 6 個(gè)。右圖(愛(ài)奇藝):初始狀態(tài)下,菜單欄有效點(diǎn)擊數(shù)量為 6 個(gè)。

另外,PC 端的導(dǎo)航欄設(shè)計(jì),也同樣可以遵循 7±2 法則。

案例展示2:

幾乎所有設(shè)計(jì)師都在用的7±2法則到底是什么?

圖片從上到下依次為:微軟官網(wǎng)、蘋(píng)果官網(wǎng)、優(yōu)設(shè)、站酷、UI 中國(guó),菜單欄都沒(méi)有超過(guò) 9 個(gè),整體設(shè)計(jì)更加簡(jiǎn)約,使用戶(hù)更加直觀、清晰的查找自己想要的內(nèi)容。

不論是移動(dòng)端,還是 PC 端,我們都可以根據(jù) 28 原理(80%的用戶(hù)在使用 APP 時(shí),關(guān)注的內(nèi)容只占總內(nèi)容的 20%),再加上數(shù)據(jù)分析,來(lái)優(yōu)化菜單欄的展示。最后,再通過(guò) 7±2 法則的應(yīng)用,可緊緊的、有效的鎖住用戶(hù)。


內(nèi)容版式的設(shè)計(jì)


7±2 法則可以幫助我們來(lái)進(jìn)行頁(yè)面內(nèi)容的布局排版。

通過(guò)卡片式的分類(lèi)設(shè)計(jì),將同類(lèi)型的內(nèi)容組成到同一個(gè)卡片模塊,用戶(hù)可以通過(guò)先查詢(xún)卡片模塊,再來(lái)尋找具體的內(nèi)容,看起來(lái)交互路徑變長(zhǎng)了,但實(shí)際上卻大大的提高了用戶(hù)的使用效率。

案例展示:

幾乎所有設(shè)計(jì)師都在用的7±2法則到底是什么?

△ 左圖(微信):將不同的入口,通過(guò)卡片分類(lèi)進(jìn)行組合,如金融理財(cái)、生活服務(wù)。右圖(京東金融):將同類(lèi)型內(nèi)容進(jìn)行組合成到一個(gè)卡片模塊中。

內(nèi)容版式的設(shè)計(jì),就像我們?cè)趯?xiě)文章時(shí),標(biāo)題、段落換行一樣,條理清晰,方便閱讀。

以上就是 7±2 法則在日常設(shè)計(jì)中常見(jiàn)的應(yīng)用方法。在文章的最后,套用名人的一句話:“除非有更好的選擇,否則就遵從標(biāo)準(zhǔn)”,希望對(duì)大家有所啟發(fā),同時(shí)歡迎大家共同探討、交流。

UI設(shè)計(jì)之Figma系列教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購(gòu)買(mǎi)
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類(lèi)選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫(huà) 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC