ui设计模块中的层次结构如何区分?

发布时间:2021-09-26 13:44:52来源：转载

ui设计模块中的层次结构如何区分?“模块”是什么意思?可以是卡片内的内容，也可以是信息列表等，总而言之是一个信息组。当我们得到需求时，应理解每个信息组中每条信息的价值，并给它们分类。四象限规则大家都知道吧，我们就这一规则，将每个信息组中的信息按照“重要—不重要”和“必要—不必要”进行分类。

这些信息在列表中不必要的，但是对于指导用户判断是非常重要的，所以我们可以在次级上展示它，既可以让用户注意到，也没有抢了风头。

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

当我们处理好信息层级之后，怎么展示这些层级呢?答案是加大对比。

1.大小

对比的头一步是大小的对比。在大家的观念中，大的东西比小的东西更引人注目、更重要。用户自然会注意到大尺寸的文字和大尺寸的图片。

在内容列表中，标题名字类的信息一般会使用14-17dp左右，补充说明内容一般使用11-12dp左右。具体的使用应根据信息的多少、信息的重要性、上下对比等进行设计。

2.重量

有时，由于空间限制，字体大小不能再大了，字体太大，也不能拉开层次，试着增加字体的重量。iOS和Android由于字体不同，加粗的效果也不同，请酌情增加或减少。

3.颜色

颜色对用户的感知有很大的影响。因此，在构建视觉层次结构时，不同的颜色很容易形成层次结构，红色、橙色等较强的颜色很容易引起用户的注意。

白色和浅灰色通常可以用作大背景色，与其它颜色形成对比。设计的主色调和副色调可以用来打开视觉层次结构。

4. 对比

大小、重量和颜色的运用归根结底是制造对比，也就是创建层次结构的核心，一个元素与另一个元素构成对比，可以以分层的方式显示它们之间的重要性差异，使用户更容易获得信息。

机构简介