今天和大家聊聊“認(rèn)知負(fù)荷”。最近看了一些文章深受啟發(fā),我們?cè)谖覀內(nèi)粘ＴO(shè)計(jì)中如何去避免一些讓用戶費(fèi)腦而抓狂的設(shè)計(jì)，本文我將會(huì)集合我們?nèi)粘Ｉ钪械漠a(chǎn)品和大家聊聊。

認(rèn)知負(fù)荷理論？

認(rèn)知負(fù)荷理論（cognitive load theory）是Sweller等人在20世紀(jì)80年代的，主要從認(rèn)知資源分配的角度考察學(xué)習(xí)和問題解決。Sweller等人認(rèn)為，問題解決和學(xué)習(xí)過程中的各種認(rèn)知加工活動(dòng)均需消耗認(rèn)知資源，若所有活動(dòng)所需的資源總量超過個(gè)體擁有的資源總量，就會(huì)引起資源的分配不足，從而影響個(gè)體學(xué)習(xí)或問題解決的效率，這種情況被稱為認(rèn)知超載。（內(nèi)容來自百科）

是什么造成了認(rèn)知負(fù)荷

想要避免用戶的認(rèn)知負(fù)荷，那么我們就要了解界面設(shè)計(jì)中那些因數(shù)會(huì)影響用戶的認(rèn)知，認(rèn)知負(fù)荷分內(nèi)在和外在的，內(nèi)在的當(dāng)然與用戶的文化因素有關(guān)，這里我們不做討論，我們來說下外在影響因素：

• 視覺層次結(jié)構(gòu)混亂
• 導(dǎo)航結(jié)構(gòu)不清晰
• 無規(guī)則的視覺流
• 需要大量思考

下面我將集合實(shí)例和大家探討下：

1. 視覺層次結(jié)構(gòu)混亂

下面截圖是愛奇app，這里我將討論愛奇藝一些糟糕的設(shè)計(jì)點(diǎn)。

• Navgation bar：使用頻率不高的元素過多；消息，播放歷史，添加
• Label：標(biāo)簽視覺樣式樣式多
• Color：顏色過多，是造成用戶無法形成視覺流的關(guān)鍵因素
• Gird layout：網(wǎng)格布局混亂，縱向?qū)R線過多，且無規(guī)律
• Focus：圖2焦點(diǎn)元素過多，造成用戶選擇困難

那怎么解決？

1. 強(qiáng)化主要信息，弱化次要信息（比如圖2，更多資訊，換一批等是否可以弱化，去掉顏色？）
2. 去掉過多不必要的元素（分割欄上的圖標(biāo)是否可以去掉，滿屏的標(biāo)簽是否可以統(tǒng)一弱化）
3. 使用網(wǎng)格布局（圖片和文字遵循網(wǎng)格排版）。

堅(jiān)持一個(gè)原則，一個(gè)頁面完成一個(gè)用戶目標(biāo)。

好的布局是怎么樣的？

結(jié)構(gòu)簡單，用戶目標(biāo)清晰，卡片流布局，大家留意到?jīng)]，youtube在導(dǎo)航上通過“更多”icon把不常使用的元素收起來,這就減少導(dǎo)航上擺放過多低頻率使用的操作，這樣來減少了視覺上的混亂。

2. 導(dǎo)航結(jié)構(gòu)不清晰

首先我們先了解下Navgation design pattern，界面設(shè)計(jì)中一般使用2－3種導(dǎo)航，分別一級(jí)導(dǎo)航和二級(jí)導(dǎo)航模式（一級(jí)導(dǎo)航一般只有一種，如業(yè)務(wù)比較多的，一般都使用組合導(dǎo)航，比如頂部與底部標(biāo)簽導(dǎo)航，標(biāo)簽與漢堡組合等等），我們必須在設(shè)計(jì)上區(qū)分它們，不能一級(jí)導(dǎo)航和二級(jí)導(dǎo)航樣式相同，這樣無規(guī)律的設(shè)計(jì)會(huì)讓用戶難以抉擇。

圖1:愛奇藝app產(chǎn)品內(nèi)容比較多，所以采用了頂部和底部雙標(biāo)簽導(dǎo)航來組織內(nèi)容圖2，3，4:藍(lán)色框部分搜索結(jié)果頁和視屏播放頁還有用戶信息頁，應(yīng)該要使用二級(jí)導(dǎo)航區(qū)分，但是目前奇藝依然使用一級(jí)導(dǎo)航設(shè)計(jì)模式來區(qū)分它們（目前國內(nèi)好多app都這樣沒去區(qū)分），這樣就會(huì)導(dǎo)致信息結(jié)構(gòu)混亂，信息層級(jí)不清晰。

ios使用Segmented Controller來區(qū)分的，google的materials好像在這方面沒有明確的說明，所以這就導(dǎo)致大量的導(dǎo)航混亂，不過好像大多數(shù)用戶已經(jīng)習(xí)慣了？（二級(jí)導(dǎo)航一般無特殊情況是不會(huì)允許在一級(jí)界面）

清晰的導(dǎo)航架構(gòu)是怎樣的？

一級(jí)導(dǎo)航和二級(jí)導(dǎo)航區(qū)分明顯，清晰的信息架構(gòu)，用戶能知道優(yōu)先級(jí)。

這里說下Nike+的導(dǎo)航系統(tǒng),在頂部使用了標(biāo)簽式作為一級(jí)大內(nèi)容區(qū)分，二級(jí)導(dǎo)航采用類似分段內(nèi)容導(dǎo)航來區(qū)分單個(gè)模塊下的內(nèi)容。

為何要區(qū)分一級(jí)和二級(jí)導(dǎo)航？

一級(jí)導(dǎo)航一般都是大功能模塊之間的區(qū)分，二級(jí)導(dǎo)航一般用于單個(gè)功能模塊里面的內(nèi)容作為層級(jí)區(qū)分，請(qǐng)謹(jǐn)記。目前國內(nèi)app設(shè)計(jì)質(zhì)量不齊，導(dǎo)航規(guī)則混亂，沒有一個(gè)完整的Design system來指導(dǎo)整個(gè)企業(yè)的產(chǎn)品規(guī)則，所以我們可以從自己產(chǎn)品做起，在產(chǎn)品設(shè)計(jì)中把信息架構(gòu)搭建好。

無規(guī)則的視覺流

要做好視覺引導(dǎo)我們就要懂一些設(shè)計(jì)心理學(xué)，我們要了解人是如何閱讀，如何觀察，如何記憶，如何思考，如何集中注意力，如何快速進(jìn)入流的狀態(tài)等等。

最常用的閱讀模式是F pattern和Z pattern。

一個(gè)頁面一屏出現(xiàn)了這么多耀眼入口，我該如何選擇？沒有主次，看起來所有都很重要？

前面認(rèn)知負(fù)荷原理講到人在處于工作記憶的時(shí)候一次只能處理兩到三條信息，那么這么多入口在這里，用戶就需要花費(fèi)腦力去抉擇，就導(dǎo)致負(fù)荷增加。

清晰視覺流是怎樣的？

目標(biāo)清晰，視覺流符合用戶閱讀習(xí)慣，不需要再去思考，減少認(rèn)知負(fù)荷。

需要大量思考

如何才能減少用戶使用產(chǎn)品過程中的費(fèi)腦力的思考？設(shè)計(jì)的時(shí)候避免使用難以閱讀的UI patterns，要遵循常用用戶界面模式，不需要重新發(fā)明輪子bottom navtation patterns。

圖1是開眼視頻的首頁，底部tabbar上面4個(gè)icon。如果不加文字說明，用戶很難去閱讀理解，增加記憶負(fù)荷圖2 是instagram，底部tabbar即使不加文字，我們都能90%以上看懂要表達(dá)的意思，因?yàn)檫@些圖形用戶已經(jīng)熟悉，不需要再去思考記憶。

騰訊視頻?在section divide header，采用了用戶熟悉的設(shè)計(jì)模式，點(diǎn)擊動(dòng)漫精選更多酒進(jìn)入對(duì)應(yīng)的欄目頁面，如何用戶心理模型愛奇藝在section divide header，采用雙入口（標(biāo)題上和欄當(dāng)前欄目底部），且與用戶使用目標(biāo)不一致，當(dāng)?shù)谝淮吸c(diǎn)擊進(jìn)去后，用戶發(fā)現(xiàn)和預(yù)想的不一樣，然后很懊惱退出，找其他入口？這種新模范用戶需要重新去記憶，重新去思考，增加負(fù)荷。

設(shè)計(jì)原則：盡量使用用戶熟悉的圖標(biāo)樣式，可以在常用圖標(biāo)樣式去做微創(chuàng)新，集合自己品牌，提取關(guān)鍵因數(shù)，植入圖標(biāo)里面。

常用入口不要輕易改變它已有的屬性，保持原來用戶習(xí)慣的模式。

總結(jié)

上面通過日常生活中所見的產(chǎn)品和大家聊了造成認(rèn)知負(fù)荷的原因，及在設(shè)計(jì)中如何去避免，有以下幾點(diǎn)：

1. 視覺層次必須清晰易懂；
2. 導(dǎo)航架構(gòu)必須清晰，且層級(jí)分；
3. 去掉不不要的視覺元素；
4. 使用UI-patterns，避免重新發(fā)明輪子。
   

希望這篇文章能幫到您！

作者：Tony，微信公眾號(hào)：洞見設(shè)計(jì)，人人都是產(chǎn)品經(jīng)理專欄作家。百度設(shè)計(jì)師。很樂意幫助年輕設(shè)計(jì)師成長，簡歷指導(dǎo)，每周分享最有價(jià)值的設(shè)計(jì)經(jīng)驗(yàn)，擅長產(chǎn)品體驗(yàn)設(shè)計(jì)，關(guān)注【洞見設(shè)計(jì)】后臺(tái)回復(fù)“彩蛋”領(lǐng)取設(shè)計(jì)資料。

本文由 @TONY 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議