界面设计中的分割方式( 二 ) 分校|猴子|脑机接口公司|美国

1、微妙的：分隔线在布局中应该很容易被注意到，但又不凸显。
2、次要的：只有当留白不能起到分割作用时才采用分割线。
3、少用的：谨慎使用分隔线，用它来创建分组而不是分割条目内容。

文章插图
3）使用场景及分类
分割线可以分为三种类型：
1、通栏分割线（Full-bleed dividers）：用于分隔彼此完全独立的内容。
2、内嵌分割线（Inset dividers）：用于分隔有锚点（头像或图标）的相关内容。
3、中间分割线（Middle dividers）：用于分隔无锚点（头像或图标）的相关内容。

文章插图
多数时候（信息层级≤2），采用分隔线进行分割的信息，采用留白也是可以分割的，只不过需要留白间距足够大，比如我们把上述分割线的方式换成留白，因为间距够大，视觉效果也很清晰（没有多余线性元素的干扰）。
用大留白替换分割线示意：
但是如果为了提高屏效，希望在一屏内尽可能多的展示信息，那么同样的信息布局，分割线带来的分割效果会更清晰，如下图所示：
当信息层级≥3之后，使用线性分割就要谨慎一些，线条无法区分多层级并会影响视觉效果，可以具体看一下是否满足下方卡分割的使用条件。
2. 方式二：卡片1）定义
卡片是一个由内容和操作组合而成的独立主题的面性容器。
①面性容器；②缩略图；③标题；
④副标题；⑤富媒体；⑥文本；
⑦文字按钮；⑧图标按钮；
除了卡片容器本身，其他元素都是可选的，所有元素都以易于扫描和操作的形式放置在卡片之上。

文章插图
2）使用原则
使用卡片时应注意以下三个使用原则：

文章插图
1、包含的：卡片是一个可识别的、单独的、包含内容的单元。
2、独立的：一张卡片可以独立存在，而不依赖于上下文环境。
3、不可分割的：一张卡片不能与另一张合并，也不能拆分成多张卡片。
使用卡片需要满足以上三个原则，但并不是满足以上原则就可以使用卡片，具体卡片分类和适用情境请参考下面内容。
3）使用场景及分类
卡片根据左右是否有边距，可以简单分为通栏卡片和非通栏卡片。

文章插图
从视觉效果上来看，由于圆角的聚焦效应，非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好，画面的分割感会更强。
不管是哪种卡片类型，它们都是独立的、包含单个主题的内容(操作)的容器，它内容的独立性与我们前面提到的通栏分割线分隔的内容相似。
那什么时候使用通栏分割线，什么时候使用卡片分割呢？这里有三个参考建议给你：
1、当这个主题内部的内容已经有分割线时，建议采用卡片分割，以让主题信息层次更清晰。
2、当单个主题内部的内容类型较多，上下所占空间较大（比如≥1/2屏），建议采用卡片分割，以更好的圈定该主题的内容范围，给用户明确的内容边界感。
3、当需要扩展页面的横向空间时，暗示页面可以横向滑动时，需要采用非通栏卡片，利用横向内容连续性原则，帮助用户建立可以横向滑动的意识。

文章插图
3. 方式三：留白1）定义