很高兴和大家一起分享知识，讨论学习！今天要分享的是布局中内容的划分-线和面，为什么想着分享这个呢？

想必大家其实都知道同属一个集合的要放在一起，有关联性的要挨得近一些等等这些排版规则，但是在实际运用中，这些就抛之脑后了，小编有时候也如此，所以，整理了一些在APP设计中对内容的划分技巧！

希望各位小伙伴在阅读后针对APP布局内容划分上有自己的理解和分析，也欢迎在后台与我们讨论碰撞～

（全文共计2097字，阅读约需要6分钟）

怎么做好布局层级的划分呢？也就是对内容和和内容之间最好的划分。我们常用的有留白、分割块、卡片、通栏分割线、非通栏分割线。什么时候用线？什么时候用面？设计角度上，线与面的区别是什么？

什么是分割？

APP中的分割起到的作用是分割，组织，细化。合理的运用分割，能够帮助用户了解页面层次性以及内容的组织性。

在UI设计中，常用三种设计形式划分不同信息内容，从而有效组织、整合好信息彼此之间的关系，达到一种信息多而不乱，清晰明确的视觉表现——这是“形”的根本目的(形色字构质动)。

面：不同板块，颜色深

留白

留白是通过增加内容之间的间距形成，适用于有规律性的内容排版。

技巧：适当的留白，增加呼吸感。

对内容干扰性：弱

分割块

分割块指的是不同板块之间因分隔与底层产生的颜色差，模块之间通过高亮的在Z轴上有升起的感觉。

技巧：适用于不同板块，一屏中分割块少于3个，减少分割感

对内容干扰性：强

卡片

卡片，其实可以看作是一个容器，一般用在有规律的信息流、为了增加页面利用率，区分不同维度的内容以及提升可操作性。

对内容干扰性：强

例如：

1、躺平、淘宝个人中心页面这样的卡片设计，更加明确了模块的划分，将不同维度的内容放进卡片中，提升视觉统一性和用户阅读流畅性。

2、zfb财富页面这类卡片设计，提高了横向页面利用率，且在当前页面可操作性相对较强。

线：相同板块的不同内容，颜色浅

通栏分割线

通栏分割线指的是：分割线横向贯穿整个页面，一般是为了区分更加独立的信息。

技巧：对标题+内容的分割

对内容干扰性：较强

例如：

1、知乎app在对feed流的处理中，采用通栏分割线，作用是让每个信息之间分割更加明显，更加独立。

2、淘宝APP的卡片设计中采用相对卡片的通栏分割线，是为了更好的表明一下内容从属于这个分割线上的标题。

哔哩哔哩和新浪微博也是如此。

​

非通栏分割线

非通栏分割线适用于内容与内容之间的区分，同属一类。

技巧：内容和内容的分割，常见在资讯新闻页

对内容干扰性：较强

应用场景

看完上面上面的介绍后，我们得到的知识来巩固并运用一下吧！

视觉强弱：面 > 线 > 留白（无）

以下为案例，当我们遇到这样的问题时，如何利用信息之间的关系合理的进行布局划分。

案例一：

消息列表，一般是占据整屏的多个矩形块。首先，我们考虑他们的关系，一个对话为一个隐形的矩形块，考虑极值，也就是占满一屏，互不干扰，但是结构相似，体现出整体性，接着，我们考虑视觉效果，为了减少干扰我们的元素，选择视觉干扰强度较小的留白，也就是A，。

我们再来分析一下为什么B不行，怎么改？

B存在的问题是，每一块都充满了独立的味道，考虑极值的情况，一屏放7个对话，也就会产生6条分割线，且为通栏分割线，整屏分裂感很强，容易干扰用户阅读流畅性。怎么改？非通栏分割线即可，适合内容+内容的分割，且保证信息之间的某种关联性。

案例二：

模态框，A和B的区别在于分割线和留白，这里用到四大排版原则（亲密性、对齐、对比、重复）的亲密性，相关、同类、存在包含关系的元素，可以通过距离来控制，适当的距离可以让界面整洁，减少干扰内容的元素可以大大提升用户阅读流畅性。

B存在的问题，一个是考虑背景面积，一个考虑分裂感，模态框面积小，如果整个页面全是分割线则干扰元素增加，不仅影响美观还影响阅读流畅性。

怎么改呢?不是不可以用分割线，对于标题+内容，大部分采用的是通栏分割线，对于内容之间的划分则是非通栏分割线，以上标题下的通栏分割线可以保留，按钮上改为非通栏风格线，其他则可以省略。

案例三：

卡片式应用场景非常的多，不管是手机上还是ipad上以至于大屏幕的电视上都能见到它们的身影，为什么会选择卡片式呢？首先是对于模块的划分会更加清楚，针对不同维度的内容可以有更好归属，用户一目了然。其次是横向的延展性，在仅有的一屏里，为了放置更多类型的模块，我们将同类横向，如下图，考虑商业诉求以及用户可操作性的同时，酌情设计，且不能生搬硬套。

总结：

在实际的设计工作中，我们的目的是为了更好的呈现内容及功能，且不能盲目追求设计趋势，适合的才是最好的！

希望这篇文章对你的设计工作有所帮助！