UI页面层级分割怎么做 页面层级分割有几种常用方式

在我们进行UI设计的过程中 , 经常要做一些页面的设计 , 会遇到一些比较难做的细节 , 那我们在做页面设计时 , 该如何有效地区分信息的层级呢?今天小编主要来为大家介绍 , 常用的三种分割信息的方式 , 赶快来看看吧 。

UI页面层级分割怎么做 页面层级分割有几种常用方式

文章插图
1.分割线
顾名思义 , 分割线就是用线来分割不同的信息 , 能够将内容清晰地分组 , 当你想要区分不同的内容模块的时候 , 让信息更加具有独立性 , 常常会使用从左至右贯穿整个页面 , 这种也被叫做通栏分割线 。如果是为了区分同一类目的内容 , 会使用非贯穿的内嵌分割线 , 一般是左侧会留有缺口 , 既能很好地组织信息 , 也可以起到平衡视觉的作用 , 不过我们要注意分割颜色不易过深 , 不然就会显得死板和生硬 。
2.卡片分割
卡片是一个装有信息内容的容器 , 每个卡片都是独立的内容单元 , 根据左边是否留有边距 , 分为通栏卡片以及非通栏卡片 , 可以根据产品的视觉风格去选择卡片的类型 , 卡片分割的方式区分信息的强度很强 , 页面结构清晰 , 给人内容边界感很明显 。
【UI页面层级分割怎么做 页面层级分割有几种常用方式】3.留白分割
指的是通过增大间距 , 利用接近原则 , 自然地将信息进行视觉分组 , 这种留白的方式能够为页面增加呼吸感 , 可以降低视觉噪音 , 看起来更加的简洁 。
以上无论那种区分信息层级的方式本质上都是为了让页面的结构增加条理性 , 赶快记下来熟练运用吧 。

    推荐阅读