2023-2-28 ui設(shè)計(jì)分享達(dá)人
當(dāng)你使用形形色色的APP時(shí),是不是時(shí)常不由自主地感慨“這個(gè)APP的界面太丑了”、“這個(gè)APP太難用了,連入口都找不到”,是什么原因造成這種感受呢?
認(rèn)知心理學(xué)中有個(gè)概念叫做認(rèn)知負(fù)荷「cognitive load」,它表示大腦在工作中記憶資源的使用量,會(huì)影響用戶的信息閱讀和產(chǎn)品使用體驗(yàn)。本文將從信息層級(jí)、信息結(jié)構(gòu)、閱讀順序、信息密度、文案表述五個(gè)層面來(lái)探討如何降低用戶認(rèn)知負(fù)荷。
格式塔心理學(xué)的封閉性原理告訴我們,人們?cè)谡J(rèn)知某個(gè)東西的時(shí)候首先看到的會(huì)是整體、而不是單獨(dú)的部分。如圖所示,你首先看到的是一個(gè)藍(lán)色的字母U和深褐色的人頭側(cè)臉,其次才是構(gòu)成這個(gè)形狀的各種細(xì)節(jié)。
從人類視覺(jué)系統(tǒng)成像原理來(lái)說(shuō),人類天生對(duì)于顏色對(duì)比非常敏感(彩色視覺(jué)是因?yàn)橐暰W(wǎng)膜中3種視錐細(xì)胞分別感知特定顏色所致,當(dāng)用戶同時(shí)看到多種不同的顏色時(shí),不同視錐細(xì)胞就會(huì)被激活眼睛感受到強(qiáng)烈的對(duì)比)。
因此,在設(shè)計(jì)界面時(shí)通常會(huì)通過(guò)大面積的色塊對(duì)比來(lái)凸出層級(jí)更高的信息。
總結(jié)來(lái)說(shuō),我們?cè)谄綍r(shí)的設(shè)計(jì)中常用形狀大小差異和顏色對(duì)比差異來(lái)拉開(kāi)信息層級(jí)。
此外,由于人眼視度(舒適的垂直視場(chǎng)角度為-30°~25°)和用戶使用不同設(shè)備時(shí)的閱讀角度問(wèn)題,人眼對(duì)于屏幕上不同區(qū)域的關(guān)注度有著天然的差異。
因此,我們?cè)谠O(shè)計(jì)時(shí)若想拉開(kāi)信息層級(jí),除了使用面積和顏色對(duì)比外,也可以通過(guò)位置對(duì)比來(lái)實(shí)現(xiàn),即將層級(jí)較高的信息置于舒適閱讀區(qū)內(nèi)。如圖所示,移動(dòng)端設(shè)備位于屏幕中央偏上的信息在閱讀舒適度上會(huì)優(yōu)于屏幕下方的信息。
我們知道了如何通過(guò)設(shè)計(jì)手段來(lái)區(qū)分信息層級(jí),那在信息層級(jí)區(qū)分上是不是越多越好呢?
顯然不是,信息層級(jí)過(guò)多也會(huì)增加人腦的認(rèn)知負(fù)荷(整個(gè)頁(yè)面顯得很花哨);而信息層級(jí)過(guò)少,則頁(yè)面的內(nèi)容展示會(huì)比較平均、不一定能突出所有重點(diǎn)信息。一般來(lái)說(shuō),我們可以將信息劃分為重要信息、次重要信息、一般信息和和輔助信息,也就是信息層級(jí)控制在4個(gè)以內(nèi)比較合適。
如圖所示,我們把聚劃算的頁(yè)面做高斯模糊后,里面的信息層級(jí)就一目了然了。
在討論信息結(jié)構(gòu)之前,我們首先對(duì)基本的信息單元做拆解:信息單元 = 信息本體 + 信息容器,這里我們把信息本體定義為我們主動(dòng)讓用戶感知并能輔助其進(jìn)行下一步動(dòng)作的信息元素,而容器定義為具有明顯視覺(jué)區(qū)隔的信息承載物。信息本體一般包括圖片、文案、icon、行動(dòng)按鈕等,而信息容器可以大到頁(yè)面小到一般的模態(tài)、非模態(tài)控件。
如圖所示,在典型的電商場(chǎng)景中商品卡片可拆分為信息本體(商品圖、商品名、商品價(jià)格、利益點(diǎn))+ 信息容器(卡片):
熟悉格式塔原理的朋友都知道相近原則——即彼此位置相近的物體會(huì)被人們看成是一類東西。同時(shí),保持相同的信息結(jié)構(gòu)意味著視覺(jué)焦點(diǎn)內(nèi)不同層級(jí)信息的相對(duì)位置是固定的,這樣用戶在快速掃視某個(gè)產(chǎn)品時(shí)會(huì)降低記憶負(fù)擔(dān)——即無(wú)需尋找同屬性的信息。反之有一定的記憶負(fù)擔(dān),不利于用戶快速掃視重要信息。
如圖所示,滴滴我的錢包頁(yè)面5張輪播圖的信息結(jié)構(gòu)相同,遵循左文右圖和主文案在上、輔助文案在下的信息結(jié)構(gòu)。
而支付寶理財(cái)頁(yè)面的輪播圖則有著不同的信息結(jié)構(gòu),如輔助文案和按鈕在不同輪播圖中的位置和大小、樣式均不一樣,輪播時(shí)同類屬性的信息會(huì)以不同樣式在不同位置切換,增加用戶的眼動(dòng)成本和認(rèn)知負(fù)擔(dān)。
從頁(yè)面整體動(dòng)線看,同類或關(guān)聯(lián)信息會(huì)有明顯的區(qū)塊分隔。如下圖所示,滴滴「我的」tab在頁(yè)面整體動(dòng)線布局上有著非常明顯的區(qū)塊劃分來(lái)承載關(guān)聯(lián)信息:
用戶信息(個(gè)人信息+會(huì)員信息)→常用工具→促活福利(卡券 + 福利)→平臺(tái)服務(wù)(金融服務(wù) + 企業(yè)服務(wù))→低頻工具。
從信息單元內(nèi)部來(lái)看,同樣會(huì)對(duì)關(guān)聯(lián)信息做位置上的劃分。例如一般的社區(qū)信息流卡片結(jié)構(gòu)基本都是生產(chǎn)者信息→內(nèi)容信息→互動(dòng)入口。
我們前面提到過(guò)信息單元=信息本體+信息容器(容器為具有明顯視覺(jué)區(qū)隔的信息承載物),而信息容器的排布也有其內(nèi)在的規(guī)律。
筆者體驗(yàn)過(guò)大量產(chǎn)品后,大致總結(jié)了3種較為常見(jiàn)的容器排布結(jié)構(gòu),即三角結(jié)構(gòu)、宮格結(jié)構(gòu)和列表結(jié)構(gòu),每種結(jié)構(gòu)容器的排列規(guī)則會(huì)遵循一定的主次關(guān)系并根據(jù)其特點(diǎn)有不同的適用場(chǎng)景。
(1)三角結(jié)構(gòu)
我們都知道三角形是多邊形里最穩(wěn)定的結(jié)構(gòu),其容器排布主次突出(根據(jù)主要容器與次要容器的位置關(guān)系可分為上下結(jié)構(gòu)和左右結(jié)構(gòu)),用戶縱向的視覺(jué)遷移路徑較短,一般比較適用于數(shù)量較少、且有明顯優(yōu)先級(jí)的場(chǎng)景。
(2)宮格結(jié)構(gòu)
宮格結(jié)構(gòu)適用于優(yōu)先級(jí)相同或相似的功能入口,一般以四宮格和六宮格為主,數(shù)量過(guò)多時(shí)容易造成視覺(jué)疲勞和信息密度過(guò)高。四宮格信息容器和六宮格信息容器如圖:
值得注意的是容器內(nèi)也可以是宮格結(jié)構(gòu),但這種宮格結(jié)構(gòu)的信息主體數(shù)量會(huì)比信息容器更多:
(3)列表結(jié)構(gòu)
列表結(jié)構(gòu)同樣適用于優(yōu)先級(jí)相同或相似的功能入口,但與宮格結(jié)構(gòu)不同的是列表結(jié)構(gòu)的一般具有排布邏輯或規(guī)則,如按照時(shí)間線排布。
列表結(jié)構(gòu)包含橫向列表和縱向列表,橫向列表適用于短文案卡片(比如活動(dòng)或功能入口),方便用戶掃視更多圖片;縱向列表適用于長(zhǎng)文案卡片,用戶可以快速掃視較多文字。
在B端設(shè)計(jì)需求中,我們經(jīng)常會(huì)遇到讓用戶輸入一堆信息的場(chǎng)景,這時(shí)候如果我們把所有信息都羅列在1個(gè)頁(yè)面中,可能會(huì)造成高跳出率和低完成率。
表單設(shè)計(jì)領(lǐng)域的專家Adam Silver通過(guò)實(shí)際項(xiàng)目發(fā)現(xiàn):將較長(zhǎng)表單按照關(guān)聯(lián)性拆解為若干部分,能有效提升用戶滿意度以及完成率。除此之外,Adam還總結(jié)了這種設(shè)計(jì)理念的16個(gè)優(yōu)點(diǎn),我們認(rèn)為其中比較有價(jià)值的是這3個(gè)點(diǎn):
市面上將長(zhǎng)表單拆分成幾個(gè)步驟做分頁(yè)處理的產(chǎn)品比較多,如下圖小紅書就將店鋪申請(qǐng)流程拆分為了填寫店鋪類型、經(jīng)營(yíng)類目、個(gè)人信息3個(gè)部分。
我們都知道用戶的閱讀習(xí)慣一般是近似于從左往右、從上至下的Z字形結(jié)構(gòu),且基于人眼視度和不同設(shè)備屏幕角度的差異,人們掃視屏幕時(shí)一般會(huì)先注意到屏幕中央偏上一點(diǎn)的位置,因此我們?cè)谠O(shè)計(jì)信息結(jié)構(gòu)時(shí)也要考慮用戶的閱讀路徑和習(xí)慣,將對(duì)用戶高價(jià)值或者高優(yōu)先級(jí)的信息置于視覺(jué)焦點(diǎn)容易觸及的地方。
那什么是對(duì)用戶高價(jià)值或者高優(yōu)先級(jí)的信息呢?我們判斷的標(biāo)準(zhǔn)是哪種信息形式(圖片or文字)更能高效地傳遞有效信息以輔助用戶決策,比如在電商產(chǎn)品或外賣產(chǎn)品中一般采用上圖下文或者左圖右文的信息結(jié)構(gòu),且會(huì)將圖片的信息層級(jí)拉到最高,這是因?yàn)橛脩粼诳焖賿咭曔^(guò)程中僅通過(guò)看圖即可看到這件商品,初步了解外賣商家賣的是什么。
但如果我們換一個(gè)場(chǎng)景,這種形式就不那么適用了,用戶僅通過(guò)看圖并不了解這條資訊的大致含義,因此,此時(shí)文案的優(yōu)先級(jí)更高,常常采用上文下圖或者左文右圖的形式。
國(guó)外的用研團(tuán)隊(duì)曾通過(guò)眼動(dòng)熱力圖的AB實(shí)驗(yàn)發(fā)現(xiàn)通過(guò)在圖片中加入人類面部表情的視覺(jué)引導(dǎo)對(duì)于信息的閱讀率有明顯提升作用。如圖所示在第一張廣告圖中,用戶的視覺(jué)焦點(diǎn)大部分集中在了嬰兒的臉部,而右側(cè)的文案則很少有用戶關(guān)注,第二張圖中嬰兒由正臉轉(zhuǎn)化成了側(cè)臉同時(shí)眼睛看向右側(cè)的文字,此時(shí)右側(cè)文字的眼動(dòng)熱力成像明顯提升。
這里的信息密度指的是在單位容器內(nèi)(卡片、頁(yè)面)所呈現(xiàn)的信息量,比如在1個(gè)頁(yè)面中如果信息密度大,則相對(duì)屏效較高,但卻容易增加用戶的認(rèn)知負(fù)荷;反之,1個(gè)頁(yè)面中信息密度低則相對(duì)屏效較低,用戶的認(rèn)知負(fù)荷也相對(duì)較低。
我們來(lái)看1個(gè)關(guān)于信息密度對(duì)于閱讀體驗(yàn)影響的案例:在美國(guó)開(kāi)車,人們常常因?yàn)榭床欢诌叺耐\嚺贫`停被罰款,我們可以看到左圖中的停車牌上密密麻麻全是字,想要閱讀根本無(wú)從下手。
Nikki Sylianteng是一個(gè)華裔的設(shè)計(jì)師,當(dāng)她初來(lái)乍到美國(guó)時(shí)也因此遇到了很多不便,針對(duì)這個(gè)問(wèn)題她簡(jiǎn)化用戶的需求,即:
于是她將文字信息做了可視化處理,通過(guò)較少的文字+色塊極大地降低了停車牌的信息密度,讓司機(jī)看到后一目了然。Nikki Sylianteng的這種設(shè)計(jì)被美國(guó)各地的市政部門廣泛采用。
在傳統(tǒng)媒介中,一張充滿文字和圖片的報(bào)紙與一個(gè)時(shí)尚雜志封面的信息密度對(duì)比更加明顯,給讀者帶來(lái)的閱讀體驗(yàn)和認(rèn)知負(fù)荷也完全不同,這也是為什么很少有人會(huì)耐心讀完報(bào)紙上的文字。
關(guān)于海報(bào)與雜志設(shè)計(jì)還牽涉到圖版率這一個(gè)概念,簡(jiǎn)單講就是圖片面積所占整體版面的比率,通常來(lái)說(shuō)圖版率越高則表現(xiàn)力和親和力就越強(qiáng),有興趣的讀者可以自行上網(wǎng)了解圖版率的相關(guān)知識(shí),在這里就不做詳細(xì)闡述了。
在廣告場(chǎng)景下,當(dāng)用戶被圖片吸引視覺(jué)焦點(diǎn)后,文案表述就顯得尤其重要了。這時(shí)候我們要搞清楚3個(gè)問(wèn)題:
首先,我們得搞清楚核心目標(biāo)受眾是誰(shuí),同一款產(chǎn)品來(lái)自一線城市的年輕白領(lǐng)和三四線城市的中年人關(guān)注點(diǎn)和付費(fèi)動(dòng)機(jī)可能完全不一樣(比如同樣都是手機(jī),一線城市的年輕白領(lǐng)更關(guān)注顏值和性能,而三四線城市中年人更關(guān)注價(jià)格和質(zhì)量)。
這時(shí)候產(chǎn)品的廣告文案也必須依據(jù)核心目標(biāo)受眾的需求點(diǎn)來(lái)設(shè)計(jì)才能命中用戶,小米手機(jī)的線下廣告語(yǔ)在一線城市的地鐵站(左圖)和農(nóng)村的大字報(bào)廣告(右圖)就采取了完全不同的描述策略。
在回答完以上3個(gè)問(wèn)題后還需要注意,我們的文案描述目標(biāo)受眾是否能夠理解,因?yàn)槿巳翰灰粯樱涫芙逃潭群屠斫饽芰σ矔?huì)不一樣。
在設(shè)計(jì)動(dòng)作文案時(shí),我們時(shí)常會(huì)受到慣性思維(常態(tài)場(chǎng)景下的通用做法)的影響而忽略了動(dòng)作本身的意涵。
比如下圖的二次確認(rèn)彈窗用戶取消上傳和取消訂單是一個(gè)對(duì)當(dāng)前行為的否定,但我們習(xí)慣于用“確定”和“取消”來(lái)讓用戶回應(yīng)是否進(jìn)行某個(gè)行為(我們也可以從另一個(gè)角度理解,否定的否定就是肯定,點(diǎn)擊「取消」按鈕即繼續(xù)用戶當(dāng)前行為,但這種理解很繞),這個(gè)時(shí)候就會(huì)帶來(lái)理解上的歧義,當(dāng)出現(xiàn)這種情況時(shí),最好的做法就是將動(dòng)作本身簡(jiǎn)單明了地描述出來(lái)避免產(chǎn)生歧義。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com