Halo，这里是设计夹，今天分享的是「UI页面分割」。
留白分割定义
指的是只通过增加间距的方式，利用人的视知觉原理(接近法则：人的大脑会倾向于把彼此靠近的元素视为一组)，自然地将信息分组（如下图）。
间距留白是区隔单一信息元素的默认选择（如下图）。
使用原则
建议在不影响核心数据指标的前提下，条目之间尽可能采用留白分割，会让界面更清爽，浏览更沉浸。
留白分割的分类及适用场景
线性分割定义
用线来分隔不同的信息内容。大部分APP的分割线是1px粗细，黑色，不透明度12%。
使用原则
分割线可以帮助用户理解页面是如何组成的，但过度使用分割线会造成视觉干扰，影响页面信息传达。
Android系统明确规定了分割线的使用原则：
微妙的：分割线在布局中应该很容易被注意到，但又不凸显。
次要的：只有当留白不能起到分割作用时，才采用分分割线。
少用的：谨慎使用分割线，用它来创建分组而不是分割条目。
分类及使用场景
通栏分割线：用于分割彼此完全独立的内容。
内嵌分割线：用于分割有锚点(头像或图标)的相关内容。
中间分割线：用于分割无锚点(头像或图标)的相关内容。
如果为了提高屏效，希望在一屏内尽可能多地展示信息，那么同样的信息布局，分割线带来的效果会更清晰（如下图）。
卡片分割定义
卡片是一个由内容和操作组合而成的独立主题的面性容器①，它可以包含缩略图②、标题③、副标题④、副媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧。
除了卡片容器本身，其他元素都是可选的，所有元素都以易于扫描和操作的形式放置在卡片上。
使用原则：
独立的：一张卡片可以独立存在，而不依赖于上下文环境。
不可分割的：一张卡片不能与另一张合并，也不能拆分成多张卡片。
卡片根据左右是否有边距，可简单分为通栏卡片和非通栏卡片（如下图）。
1、当这个主题内部的内容已经有分割线时，建议采用卡片分割，让主题信息层次更加清晰。
2、当单个主题内部的内容类型较多，上下所占空间较大，建议采用卡片分割，以更好的圈定该主题的内容范围，给用户明确的内容边界感。
3、当需要扩展页面的横向空间时，暗示页面可以横向滑动时，需要采用非通栏卡片，利用横向内容连续性原则，帮助用户建立可以横向滑动的意识。
当信息条目复杂度较低时，优先采用留白分割，视觉清爽无干扰。
当信息条目复杂度增加，只利用留白分割效果不明显时，建议引入线性分割，让信息层次更清晰且屏效高。
当信息条目复杂度进一步提升，比如已经有了线性分割，或者有更多操作，需要进一步强化信息条目本身的边界感，建议引入卡片，以强化条目信息的视觉层次和可操作性。
信息分割本身不是目的，分割方式的选择是为了让版面产生清晰的条理性，用悦目的信息秩序来更好地突出内容，达成最佳的信息传达效果。所以决策时，除了上述细节考虑因素，还要考虑整体版面效果和信息传达效率。
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠信務(wù)實(shí)的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營(yíng)銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號(hào)：
專屬顧問
