UI界面做好留白分割，页面就会成功一半

12 月 24, 2023 发表于: 视觉设计. 评论

Sponsor

作为一名合格的UI设计师，用好留白分割、线性分割、卡片分割，你的页面即成功了一半！据信息条目复杂度的不同，可以选择合适的分割方式来提升页面的视觉效果和用户体验。信息分割本身不是目的，而是为了产生清晰的条理性，用悦目的信息秩序来更好的突出内容，达成最佳的信息传达效果。

留白分割≧线性分割≧卡片分割

留白分割定义：指的是只通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），自然的将信息分组。（如上图）

间距留白是区隔单一信息元素的默认选择。（如下图）

使用原则：建议在不影响核心数据指标的前提下，条目之间尽可能采用留白分割，会让界面更清爽，浏览更沉浸。

留白分割的分类及适用场景：当条目信息层次较少（≦2）时，留白分割是比较合适的，当信息层次较多（≧3）时，留白分割既会浪费空间，也难以达到一目了然的分割效果。

线性分割定义：用线来分隔不同的信息内容。（大部分APP的分割线是1px粗细，黑色，不透明度12%）。

使用原则：分割线可以帮助用户理解页面是如何组成的，但过度使用分割线会造成视觉干扰，影响页面信息传达。

Android系统明确规定了分割线的使用原则：1、微妙的：分割线在布局中应该很容易被注意到，但又不凸显。2、次要的：只有当留白不能起到分割作用时，才采用分分割线。3、少用的：谨慎使用分割线，用它来创建分组而不是分割条目。（如下图）

分类及使用场景：1、通栏分割线：用于分割彼此完全独立的内容。

2、内嵌分割线：用于分割有锚点（头像或图标）的相关内容。

3、中间分割线：用于分割无锚点（头像或图标）的相关内容。

如果为了提高屏效，希望在一屏内尽可能多的展示信息，那么同样的信息布局，分割线带来的效果会更清晰（如下图）

卡片分割定义：卡片是一个由内容和操作组合而成的独立主题的面性容器①，它可以包含缩略图②、标题③、副标题④、副媒体⑤、文本⑥、问文字按钮⑦和图标按钮⑧，除了卡片容器本身，其他元素都是可选的，所有元素都以易于扫描和操作的形式放置在卡片上。

使用原则：1、包含的：卡片是一个可识别的，单独的、包含内容的单元。2、独立的：一张卡片可以独立存在，而不依赖于上下文环境。3、不可分割的：一张卡片不能与另一张合并，也不能拆分成多张卡片。分类及适用场景：卡片根据左右是否有边距，可简单分为通栏卡片和非通栏卡片（如下图）。

从视觉效果上来看，由于圆角的聚焦效应，非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好，画面的分割感会更强。1、当这个主题内部的内容已经有分割线时，建议采用卡片分割，让主题信息层次更加清晰。2、当单个主题内部的内容类型较多，上下所占空间较大，建议采用卡片分割，以更好的圈定该主题的内容范围，给用户明确的内容边界感。3、当需要扩展页面的横向空间时，暗示页面可以横向滑动时，需要采用非通栏卡片，利用横向内容连续性原则，帮助用户建立可以横向滑动的意识。