2024-2-21 前端达人
作为一名合格的UI设计师，用好留白分割、线性分割、卡片分割，你的页面即成功了一半！
留白分割≧线性分割≧卡片分割
留白分割定义：指的是只通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），自然的将信息分组。（如上图）
间距留白是区隔单一信息元素的默认选择。（如下图）
使用原则：建议在不影响核心数据指标的前提下，条目之间尽可能采用留白分割，会让界面更清爽，浏览更沉浸。
留白分割的分类及适用场景：当条目信息层次较少（≦2）时，留白分割是比较合适的，当信息层次较多（≧3）时，留白分割既会浪费空间，也难以达到一目了然的分割效果。
线性分割定义：用线来分隔不同的信息内容。（大部分APP的分割线是1px粗细，黑色，不透明度12%）。
使用原则：分割线可以帮助用户理解页面是如何组成的，但过度使用分割线会造成视觉干扰，影响页面信息传达。
Android系统明确规定了分割线的使用原则：
1、微妙的：分割线在布局中应该很容易被注意到，但又不凸显。
2、次要的：只有当留白不能起到分割作用时，才采用分分割线。
3、少用的：谨慎使用分割线，用它来创建分组而不是分割条目。（如下图）
分类及使用场景：
1、通栏分割线：用于分割彼此完全独立的内容。
2、内嵌分割线：用于分割有锚点（头像或图标）的相关内容。
3、中间分割线：用于分割无锚点（头像或图标）的相关内容。
如果为了提高屏效，希望在一屏内尽可能多的展示信息，那么同样的信息布局，分割线带来的效果会更清晰（如下图）
卡片分割定义：卡片是一个由内容和操作组合而成的独立主题的面性容器①，它可以包含缩略图②、标题③、副标题④、副媒体⑤、文本⑥、问文字按钮⑦和图标按钮⑧，除了卡片容器本身，其他元素都是可选的，所有元素都以易于扫描和操作的形式放置在卡片上。
使用原则：
1、包含的：卡片是一个可识别的，单独的、包含内容的单元。
2、独立的：一张卡片可以独立存在，而不依赖于上下文环境。
3、不可分割的：一张卡片不能与另一张合并，也不能拆分成多张卡片。
分类及适用场景：
卡片根据左右是否有边距，可简单分为通栏卡片和非通栏卡片（如下图）。
从视觉效果上来看，由于圆角的聚焦效应，非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好，画面的分割感会更强。
1、当这个主题内部的内容已经有分割线时，建议采用卡片分割，让主题信息层次更加清晰。
2、当单个主题内部的内容类型较多，上下所占空间较大，建议采用卡片分割，以更好的圈定该主题的内容范围，给用户明确的内容边界感。
3、当需要扩展页面的横向空间时，暗示页面可以横向滑动时，需要采用非通栏卡片，利用横向内容连续性原则，帮助用户建立可以横向滑动的意识。
小结：
信息分割本身不是目的，分割方式的选择是为了让版面产生清晰的条理性，用悦目的信息秩序来更好的突出内容，达成最佳的信息传达效果，所以决策时，除了上述细节考虑因素，还要考虑整体版面效果和信息传达效率。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发