ui設計模塊中的層次結構如何區(qū)分?

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

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

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

當我們處理好信息層級之后，怎么展示這些層級呢?答案是加大對比。

1.大小

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

在內容列表中，標題名字類的信息一般會使用14-17dp左右，補充說明內容一般使用11-12dp左右。具體的使用應根據(jù)信息的多少、信息的重要性、上下對比等進行設計。

2.重量

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

3.顏色

顏色對用戶的感知有很大的影響。因此，在構建視覺層次結構時，不同的顏色很容易形成層次結構，紅色、橙色等較強的顏色很容易引起用戶的注意。

白色和淺灰色通?？梢杂米鞔蟊尘吧c其它顏色形成對比。設計的主色調和副色調可以用來打開視覺層次結構。

4. 對比

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