原文地址：https://mp.weixin.qq.com/s/aY_H_ad15if-0dZ0orrMNA

缘起

近两年，vivo浏览器一直选择的是留白分割的设计方式，但核心竞品已经逐渐都采用了线性分割，甚至卡片分割的设计，是要坚守留白还是追随“趋势”，面对内外部声音的追问，我们开始了关于分割方式的详细研究与探索。

▲图1 资讯新闻的分割方式

研究不局限于资讯新闻信息流列表，而是回归到分割方式的本源，希望能一次性给大家一个明确的分割方式设计指南。

通过一系列的桌面研究、实践对比和趋势总结，我们可以将结论简要概括如下：

1、优先使用留白分割。

2、当留白分割不能起到明显的分割作用时，建议采用线性分隔。

3、当线性分隔不能起到明显的分割作用时，建议采用卡片分隔。

▲图2 三种分割方式示意

也就是说从选择的优先级而言：留白分割≥线性分隔≥卡片分割。详细设计理念、目标和决策因素请参考下文（小结图见文末），希望可以帮助你扫清所有关于分割方式的困惑。

留白分割

1.1 定义

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

▲图3 亲密性原则体现的留白分割

如上图所示，当纵向间距增加1.5倍后，信息被分为上下2组，当横向间距也增加1.5倍后，信息被分为上下左右四组，这就是留白分割。

值得一提的是，同类单一元素（图片、文字、图标等）之间默认采用的都是留白分割。比如相册中单张照片之间，文章中每个文字之间，间距留白是区隔单一信息元素的默认选择。