令用戶費(fèi)腦的認(rèn)知設(shè)計(jì)，該如何規(guī)避？

　

今天和大家聊聊“認(rèn)知負(fù)荷”。比來看了一些文章深受啟發(fā),我們在我們?nèi)粘ＴO(shè)計(jì)中如何去制止一些讓用戶費(fèi)腦而抓狂的設(shè)計(jì)，本文我將會集合我們?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)知加工活動均需消耗認(rèn)知資源，若所有活動所需的資源總量超過個體擁有的資源總量，就會引起資源的分配不足，從而影響個體學(xué)習(xí)或問題解決的效率，這種情況被稱為認(rèn)知超載。（內(nèi)容來自百科）

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

想要制止用戶的認(rèn)知負(fù)荷，那么我們就要了解界面設(shè)計(jì)中那些因數(shù)會影響用戶的認(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)元素過多，造成用戶選擇困難

那怎么解決？

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

堅(jiān)持一個原則，一個頁面完成一個用戶目標(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)航，別離一級導(dǎo)航和二級導(dǎo)航模式（一級導(dǎo)航一般只有一種，如業(yè)務(wù)比較多的，一般都使用組合導(dǎo)航，好比頂部與底部標(biāo)簽導(dǎo)航，標(biāo)簽與漢堡組合等等），我們必需在設(shè)計(jì)上區(qū)分它們，不能一級導(dǎo)航和二級導(dǎo)航樣式相同，這樣無規(guī)律的設(shè)計(jì)會讓用戶難以抉擇。

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

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

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

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

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

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

一級導(dǎo)航一般都是大功能模塊之間的區(qū)分，二級導(dǎo)航一般用于單個功能模塊里面的內(nèi)容作為層級區(qū)分，請謹(jǐn)記。目前國內(nèi)app設(shè)計(jì)質(zhì)量不齊，導(dǎo)航規(guī)則混亂，沒有一個完整的Design system來指導(dǎo)整個企業(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。

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

標(biāo)簽：烏魯木齊 林芝 鹽城 東營 九江