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

      这3种流行的UI布局你怎么选：留白、线性、卡片分割

  资讯新闻的分割方式
  研究不局限于资讯新闻信息流列表，而是回归到分割方式的本源，希望能一次性给大家一个明确的分割方式设计指南。
  通过一系列的桌面研究、实践对比和趋势总结，我们可以将结论简要概括如下：

  优先使用留白分割。
  当留白分割不能起到明显的分割作用时，建议采用线性分割。
  当线性分隔不能起到明显的分割作用时，建议采用卡片分割。
  这3种流行的UI布局你怎么选：留白、线性、卡片分割

  三种分割方式示意

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

  留白分割
  1.定义
  所谓留白分割，指的是只通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），自然的将信息进行分组。亲密性原则体现的留白分割
   当纵向间距增加1.5倍后，信息被分为上下2组，当横向间距也增加1.5倍后，信息被分为上下左右四组，这就是留白分割。

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

  2.使用原则

  单个元素之间默认使用留白分割，随着元素的增多，多个元素按照特定的组合形成条目，条目与条目之间，或者条目组与条目组之间进行区隔时，就涉及到今天的主题：留白/线性/卡片分割方式的选择。在这一点iOS和Android系统中差异还蛮大的。

   iOS和Android系统的分割方式差异

  在iOS中，线性分割是条目间默认的分割方式（参见iPhone通讯录和设置），当多个条目成组后，为了区分不同组别，则会采用更高层级的卡片分割方式。

  在Android系统，留白分割是条目间默认的分割方式，线性分割用于划分信息组块，而不仅仅是区隔上下文内容。（参见Pixel 5的通讯录和设置）

  从2014年Material Design发布后“卡片式设计”的风靡，再到2019

  年前后“去线化设计”盛行，结合设计趋势，再对比上图中iOS和Android

  的分割效果，建议在不影响核心数据指标的前提下，条目之间尽可能采用留白分割，会让界面更清爽，浏览更沉浸（毕竟即使是卡片设计的创始团队

  Google，在设计Android OS时也并没有滥用卡片）。

  3.留白分割的分类及适用场景

  留白分割的分类，指的是留白间距大小的设计规范，信息之间有多少种间距，每种间距适用于什么情境。

  这3种流行的UI布局你怎么选：留白、线性、卡片分割

  留白分割的分类

  日常设计中，视觉设计师经常会将页面网格化，然后以最小网格为基准，设计不同倍数的间距大小，以此来增强页面的秩序感。

  理论上讲，只要分隔的间距够大，都可以根据接近性原则形成信息分组。但信息层次越多，需要的间距种类就越多，间距种类一多，信息层次就越不清晰（只能单纯根据间距大小判断信息层次，就好像只用邻近色进行色彩区分一样，不对比就不容易发现差异，不够直白）。而且每增加一个视觉层次，要求其间距至少要是上一层次间距的2倍，接近法则才能生效产生明显的分组效果。
  
       以上就是优漫教育小编为大家介绍的“UI设计培训分享：3中流行的UI设计布局结构”相关内容，学习ui设计培训，可以参考优漫教育提供的ui学习路线，该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等，根据优漫提供的ui学习路线图。