关注▲Clip设计夹后台回复“进群”加入设计成长群
设计夹的第173篇文章分享
Halo，这里是设计夹，今天分享的是「UI页面分割」。
留白分割定义
指的是只通过增加间距的方式，利用人的视知觉原理(接近法则：人的大脑会倾向于把彼此靠近的元素视为一组)，自然地将信息分组（如下图）。
间距留白是区隔单一信息元素的默认选择（如下图）。
使用原则
建议在不影响核心数据指标的前提下，条目之间尽可能采用留白分割，会让界面更清爽，浏览更沉浸。
留白分割的分类及适用场景
线性分割定义
用线来分隔不同的信息内容。大部分APP的分割线是1px粗细，黑色，不透明度12%。
使用原则
分割线可以帮助用户理解页面是如何组成的，但过度使用分割线会造成视觉干扰，影响页面信息传达。
Android系统明确规定了分割线的使用原则：
微妙的：分割线在布局中应该很容易被注意到，但又不凸显。
次要的：只有当留白不能起到分割作用时，才采用分分割线。
少用的：谨慎使用分割线，用它来创建分组而不是分割条目。
分类及使用场景
通栏分割线：用于分割彼此完全独立的内容。
内嵌分割线：用于分割有锚点(头像或图标)的相关内容。
中间分割线：用于分割无锚点(头像或图标)的相关内容。
如果为了提高屏效，希望在一屏内尽可能多地展示信息，那么同样的信息布局，分割线带来的效果会更清晰（如下图）。
卡片分割定义
卡片是一个由内容和操作组合而成的独立主题的面性容器①，它可以包含缩略图②、标题③、副标题④、副媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧。
除了卡片容器本身，其他元素都是可选的，所有元素都以易于扫描和操作的形式放置在卡片上。
使用原则：
独立的：一张卡片可以独立存在，而不依赖于上下文环境。
不可分割的：一张卡片不能与另一张合并，也不能拆分成多张卡片。
卡片根据左右是否有边距，可简单分为通栏卡片和非通栏卡片（如下图）。
1、当这个主题内部的内容已经有分割线时，建议采用卡片分割，让主题信息层次更加清晰。
2、当单个主题内部的内容类型较多，上下所占空间较大，建议采用卡片分割，以更好的圈定该主题的内容范围，给用户明确的内容边界感。
3、当需要扩展页面的横向空间时，暗示页面可以横向滑动时，需要采用非通栏卡片，利用横向内容连续性原则，帮助用户建立可以横向滑动的意识。
当信息条目复杂度较低时，优先采用留白分割，视觉清爽无干扰。
当信息条目复杂度增加，只利用留白分割效果不明显时，建议引入线性分割，让信息层次更清晰且屏效高。
当信息条目复杂度进一步提升，比如已经有了线性分割，或者有更多操作，需要进一步强化信息条目本身的边界感，建议引入卡片，以强化条目信息的视觉层次和可操作性。
信息分割本身不是目的，分割方式的选择是为了让版面产生清晰的条理性，用悦目的信息秩序来更好地突出内容，达成最佳的信息传达效果。所以决策时，除了上述细节考虑因素，还要考虑整体版面效果和信息传达效率。
另外推荐去「是一颗李子」主页查看更多内容: zcool.com.cn/u/25179434
?为了帮大家更快掌握AI绘画，设计夹推出一本150页的《AI绘画关键词教程》，包含12类AI绘画方向，图词一体方便快速预览/复制，内容持续更新中…
慢慢来比较快，如觉得有帮助，
请点个赞&在看，谢谢！
添加微信, 邀你进设计成长群?
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
