ui設(shè)計(jì)模塊中的層次結(jié)構(gòu)如何區(qū)分?

ui設(shè)計(jì)模塊中的層次結(jié)構(gòu)如何區(qū)分?“模塊”是什么意思?可以是卡片內(nèi)的內(nèi)容，也可以是信息列表等，總而言之是一個(gè)信息組。當(dāng)我們得到需求時(shí)，應(yīng)理解每個(gè)信息組中每條信息的價(jià)值，并給它們分類。四象限規(guī)則大家都知道吧，我們就這一規(guī)則，將每個(gè)信息組中的信息按照“重要—不重要”和“必要—不必要”進(jìn)行分類。

這些信息在列表中不必要的，但是對(duì)于指導(dǎo)用戶判斷是非常重要的，所以我們可以在次級(jí)上展示它，既可以讓用戶注意到，也沒有搶了風(fēng)頭。

哪些信息是必要但不重要的呢?

當(dāng)我們處理好信息層級(jí)之后，怎么展示這些層級(jí)呢?答案是加大對(duì)比。

1.大小

對(duì)比的頭一步是大小的對(duì)比。在大家的觀念中，大的東西比小的東西更引人注目、更重要。用戶自然會(huì)注意到大尺寸的文字和大尺寸的圖片。

在內(nèi)容列表中，標(biāo)題名字類的信息一般會(huì)使用14-17dp左右，補(bǔ)充說明內(nèi)容一般使用11-12dp左右。具體的使用應(yīng)根據(jù)信息的多少、信息的重要性、上下對(duì)比等進(jìn)行設(shè)計(jì)。

2.重量

有時(shí)，由于空間限制，字體大小不能再大了，字體太大，也不能拉開層次，試著增加字體的重量。iOS和Android由于字體不同，加粗的效果也不同，請(qǐng)酌情增加或減少。

3.顏色

顏色對(duì)用戶的感知有很大的影響。因此，在構(gòu)建視覺層次結(jié)構(gòu)時(shí)，不同的顏色很容易形成層次結(jié)構(gòu)，紅色、橙色等較強(qiáng)的顏色很容易引起用戶的注意。

白色和淺灰色通?？梢杂米鞔蟊尘吧?，與其它顏色形成對(duì)比。設(shè)計(jì)的主色調(diào)和副色調(diào)可以用來打開視覺層次結(jié)構(gòu)。

4. 對(duì)比

大小、重量和顏色的運(yùn)用歸根結(jié)底是制造對(duì)比，也就是創(chuàng)建層次結(jié)構(gòu)的核心，一個(gè)元素與另一個(gè)元素構(gòu)成對(duì)比，可以以分層的方式顯示它們之間的重要性差異，使用戶更容易獲得信息。