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

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

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

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

下面,我將通過實例,來解析一下 7±2 法則在設(shè)計中常見的應(yīng)用方法。


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


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

案例展示:

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

△ 左圖(京東):注冊填寫手機號時,采取 3-4-4 的方式,中間用空格進行分割。右圖(美團):商家頁撥打電話的展示也同樣用空格進行數(shù)字分割。

通過 7±2 法則,利用這種分割方式,可以達到很好的交互體驗,提升用戶操作便捷性的同時還可以使用戶進行快速記憶。


導(dǎo)航、選項卡的設(shè)計


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

案例展示1:

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

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

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

案例展示2:

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

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

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


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


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

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

案例展示:

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

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

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

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

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