每天打開手機,各式各樣的信息紛至沓來,每個 App 每個頁面都有好多話要說。當(dāng)信息匯集在一起的時候,如何能讓用戶一打開頁面就能輕松理解各個信息元素之間的關(guān)系與差異呢?這就要靠我們設(shè)計師在設(shè)計之初構(gòu)建合理的視覺層次了。一個頁面的信息層級是不是清晰明了,很大程度上影響到用戶的信息獲取效率和使用體驗。
在平面和網(wǎng)頁設(shè)計中,視覺層次一般分為三層:主層(Primary)、副層(Secondary)和三層(Tertiary)。其中主層一般是指頭條標(biāo)題等核心信息,也是要讓用戶第一眼就注意到的信息。副層可以是小標(biāo)題等信息,展示出主要內(nèi)容與提綱。最后的三層一般由正文或其他額外信息構(gòu)成,展示全部的內(nèi)容,可以用較小的字號。
△ 圖片來自網(wǎng)絡(luò)
不過當(dāng)我們在設(shè)計移動端頁面的時候,因為屏幕尺寸的限制,有時候需要酌情減少頁面的層級,這樣才能讓信息不會過于繁雜。
一般一個頁面會根據(jù)功能分為多個模塊,下面我們就從「模塊內(nèi)」和「模塊之間」兩個角度來談?wù)勅绾螛?gòu)建合理的視覺層次。
一、一個模塊中的層次感
我們所說的「模塊」指的是什么呢?可以是一張卡片里面的內(nèi)容,也可以是一個信息列表等等,總而言之是一個信息組。當(dāng)我們拿到需求的時候,應(yīng)該理解每個信息組里面的每條信息的價值,并且給他們分一個類。
比如有時候,PM 同學(xué)跑過來說:「我想加個大按鈕」,「不想讓用戶注意到刪除功能,但是一定要有」 ,或者「這次就想試一試,展示了這條信息點擊率會不會漲」 ,又或是「這條信息展不展示都行,你設(shè)計的時候自己看吧……」 好好好,需求我都懂,那么該如何分類呢?
四象限法則相信大家都聽說過,那么我們就改編一下這個法則,給每個信息組中的信息按「重要——不重要」「必要——不必要」來分個類吧。
面對又重要又必要的信息還等什么,一定要大要明顯,讓用戶第一眼看到。
重要卻不必要的信息,一般是從產(chǎn)品或流程本身來講不是一定要有的信息,但是因為某種原因想要突顯給用戶,比如在信用卡的產(chǎn)品列表中加入每張卡的推薦理由,或者在餐廳列表中展示某某名人去過這家店……這些信息在列表中不是必須有的,但是對于引導(dǎo)用戶判斷又十分的重要,所以我們可以次一級的來展示,要讓用戶可以注意到,但也不能搶了風(fēng)頭。
哪種信息是必要但不重要的呢?比如一個活動彈窗的關(guān)閉按鈕,一個訂單的刪除功能,一條免責(zé)聲明等等,我們不希望用戶注意到他們,但是這些功能又不得不存在,那么就要弱化展示這些信息。
不必要又不重要的信息,一般情況是要去掉的,除非在設(shè)計中信息太少了空蕩蕩的,為了排版美觀才會把這種邊緣信息留下占位。
接下來,當(dāng)我們整理好信息層級之后,要靠什么手段來展示這些層級呢?答案是加大對比。
1. 大小
對比的第一步就是大小的對比,在大家的認(rèn)知中,大的東西比小的東西更顯眼、更重要。用戶會自然而然地關(guān)注到尺寸較大的文本和尺寸較大的圖,比如下圖中一張足夠大的信用卡卡面圖片,一秒吸引目光。再比如頁面中的大標(biāo)題,都是這樣的效果。
△ 截圖來自查查公積金
在內(nèi)容列表中,標(biāo)題名字類的信息一般會使用14-17dp左右,補充說明內(nèi)容一般使用11-12dp左右,具體的使用情況要根據(jù)信息的多少、信息的重要程度、上下對比等情況來進行具體的設(shè)計。
△ 圖片來自融360、微信
2. 重量
有時候由于空間的限制,字號不能再大了?字號大了也沒拉開層次?試試增加字重量吧。iOS&Android 由于字體不同,加粗的效果也不同,請酌情增減。
3. 顏色
顏色對于用戶的感知有著巨大的影響。所以在進行視覺層次構(gòu)建的時候,不同的顏色可以輕松構(gòu)成層次結(jié)構(gòu),強烈的顏色比如紅色、橙色都很容易引人注意。白色和淺灰通常可以用來作為大面積的背景色,和其他的顏色構(gòu)成對比。在設(shè)計的時候可以運用 App 的主色和輔助色來拉開視覺層次。
△ 圖片來自查查公積金、融360視覺規(guī)范
4. 對比
我們以上圖這個貸款列表舉一個綜合的例子,四條信息從最突出到最弱化分別標(biāo)為了1、2、3、4,這幾條信息中的字號以至少6px的差值進行遞減,并且只有前兩條信息進行了加粗處理,同時顏色的選擇上也是從強到弱:
大小、重量、顏色的運用,歸根結(jié)底就是制造對比,這也是創(chuàng)建層次結(jié)構(gòu)依靠的核心。一個元素和另外一個元素構(gòu)成對比,才能有層次的展示他們之間重要程度上的差異,讓用戶更加容易獲取到信息。
二、模塊之間的層次感
當(dāng)我們已經(jīng)合理的排布了一個模塊內(nèi)的視覺層次,接下來要做的就是把多個模塊組合起來。
心理學(xué)家基于格式塔原理來檢測用戶對于元素之間關(guān)系的視覺感知,發(fā)現(xiàn)人們傾向于將視覺關(guān)系靠近的元素群視作為有關(guān)系的一組。值得說明的是,位置接近的元素,即使色彩形狀大小都不一致,但只要他們足夠靠近,都會被人們視為一組。
△ 圖片來自網(wǎng)絡(luò)
視覺層次的建立很大程度上是基于格式塔原理,所以我們要關(guān)注 UI 元素之間的靠近性。
基于這種認(rèn)知,即使每個模塊之中的內(nèi)容有對比有強弱,但是只要每個信息組之間的元素的距離較近,并與其他信息組之間的距離拉遠(yuǎn),留下足夠的留白空間,就可以清晰的將整個頁面的層次拉開。留白和元素本身之間構(gòu)成的疏密對比,會更好的讓用戶注意到留白包圍下的內(nèi)容。
△ 圖片來自網(wǎng)絡(luò)
現(xiàn)在很多 App 都是通過對比與留白來進行頁面中的「無形分割」,減少了很多線和塊的運用,讓頁面更為簡潔。基本上原則為:文字與圖片對齊,與相關(guān)內(nèi)容的間距要小于其他內(nèi)容,標(biāo)題要大。
△ 圖片來自 Airbnb
當(dāng)字體足夠大的時候,會比小字符更有「圖形感」,更加突出,可以更明確的告訴用戶從這里開始是下一段了,字號一般在20-24dp之間,根據(jù)內(nèi)容和整體風(fēng)格來決定,顏色一般選擇比較深的顏色 ,必要的時候可以加粗。當(dāng)其他內(nèi)容都是比較小的文字的時候,欄目標(biāo)題也要控制一下大小。如果圖片較多,標(biāo)題就可以再大一些。
具體多大,就要在頁面和諧的基礎(chǔ)上多試幾次……
△ 圖片來自查查公積金
如上圖,在查查公積金 App 中,當(dāng)我們設(shè)計信用卡詳情頁的時候,由于整個頁面里圖形比較突出,看起來用加粗的「辦卡禮」、「專享特權(quán)」標(biāo)題更合適一些。可是在同個 App 的公積金詳情頁里面,整個頁面用色都比較清淡,內(nèi)容都是一些文字信息,如果內(nèi)容標(biāo)題加粗的話會顯得比較突兀。所以綜合整個 App 的頁面風(fēng)格權(quán)衡之后,還是選擇了左側(cè)沒有加粗字體的設(shè)計。
總體來講,UI 設(shè)計是沒有公式的,只能有經(jīng)驗之談和大體上的建議,很多時候都要設(shè)計師一次次的去嘗試、去對比、去感受,才能給出針對當(dāng)下頁面需求最合理的層次構(gòu)建與解決方案。