上海总部电话：021-88666999
上海总部电话：021-88666999
20年
互联网应用服务商
上海总部电话：021-88666999
20年
互联网应用服务商
请输入搜索关键词
探索行业前沿，共享知识宝库
我要投稿
Halo，这里是设计夹，今天分享的是「UI页面分割」。
留白分割定义
指的是只通过增加间距的方式，利用人的视知觉原理(接近法则：人的大脑会倾向于把彼此靠近的元素视为一组)，自然地将信息分组（如下图）。
间距留白是区隔单一信息元素的默认选择（如下图）。
使用原则
建议在不影响核心数据指标的前提下，条目之间尽可能采用留白分割，会让界面更清爽，浏览更沉浸。
留白分割的分类及适用场景
线性分割定义
用线来分隔不同的信息内容。大部分APP的分割线是1px粗细，黑色，不透明度12%。
使用原则
分割线可以帮助用户理解页面是如何组成的，但过度使用分割线会造成视觉干扰，影响页面信息传达。
Android系统明确规定了分割线的使用原则：
微妙的：分割线在布局中应该很容易被注意到，但又不凸显。
次要的：只有当留白不能起到分割作用时，才采用分分割线。
少用的：谨慎使用分割线，用它来创建分组而不是分割条目。
分类及使用场景
通栏分割线：用于分割彼此完全独立的内容。
内嵌分割线：用于分割有锚点(头像或图标)的相关内容。
中间分割线：用于分割无锚点(头像或图标)的相关内容。
如果为了提高屏效，希望在一屏内尽可能多地展示信息，那么同样的信息布局，分割线带来的效果会更清晰（如下图）。
卡片分割定义
卡片是一个由内容和操作组合而成的独立主题的面性容器①，它可以包含缩略图②、标题③、副标题④、副媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧。
除了卡片容器本身，其他元素都是可选的，所有元素都以易于扫描和操作的形式放置在卡片上。
使用原则：
当信息条目复杂度较低时，优先采用留白分割，视觉清爽无干扰。
当信息条目复杂度增加，只利用留白分割效果不明显时，建议引入线性分割，让信息层次更清晰且屏效高。
当信息条目复杂度进一步提升，比如已经有了线性分割，或者有更多操作，需要进一步强化信息条目本身的边界感，建议引入卡片，以强化条目信息的视觉层次和可操作性。
信息分割本身不是目的，分割方式的选择是为了让版面产生清晰的条理性，用悦目的信息秩序来更好地突出内容，达成最佳的信息传达效果。所以决策时，除了上述细节考虑因素，还要考虑整体版面效果和信息传达效率。
曲德曲科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
曲德曲科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。曲德曲科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信亚星官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
2025-03-08
开发一个微信和抖音小程序大概需要多少钱？
2025-03-08
微信小程序必看的8种费用，不花冤枉钱！
2025-03-08
做一个考试题库小程序需要多少钱？
2025-03-08
微信小程序开发费用解析：从千元到数十万的成本构成与应用场景
2025-03-08
生物医疗领域网站构建指导手册Bio-Medical Field Website Construction Guide
2025-03-08
来直观的感受设计细节是怎么增加网站效率的
2025-03-08
外贸网站建设和国内网站建设的有哪些不同？
2025-03-08
企业亚星官网改版升级有4大目标，让亚星官网从此高大上！
