图11 卡片可以包含的元素示意

2. 使用原则

使用卡片时应注意以下三个使用原则：

图12 卡片可以包含的元素示意

1. 包含的：卡片是一个可识别的、单独的、包含内容的单元。
2. 独立的：一张卡片可以独立存在，而不依赖于上下文环境。
3. 不可分割的：一张卡片不能与另一张合并，也不能拆分成多张卡片。

使用卡片需要满足以上三个原则，但并不是满足以上原则就可以使用卡片，具体卡片分类和适用情境请参考下文。

3. 分类及适用情境

卡片根据左右是否有边距，可以简单分为通栏卡片和非通栏卡片。

图13 卡片样式分类

从视觉效果上来看，由于圆角的聚焦效应，非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好，画面的分割感会更强。

不管是哪种卡片类型，它们都是独立的、包含单个主题的内容（操作）的容器，它内容的独立性与我们前面提到的通栏分割线分隔的内容相似。

那什么时候使用通栏分割线，什么时候使用卡片分割呢？这里有三个参考建议给你：

1. 当这个主题内部的内容已经有分割线时，建议采用卡片分割，以让主题信息层次更清晰。
2. 当单个主题内部的内容类型较多，上下所占空间较大（比如≥1/2屏），建议采用卡片分割，以更好的圈定该主题的内容范围，给用户明确的内容边界感。
3. 当需要扩展页面的横向空间时，暗示页面可以横向滑动时，需要采用非通栏卡片，利用横向内容连续性原则，帮助用户建立可以横向滑动的意识。

图14 使用卡片的三个参考条件

回到开篇关于vivo浏览器信息流分隔方式的选择，因为项目成员偏好不同，大家各执一词都无法说服对方，所以设计师设计了三种不同的分割方案（仅分割方式这一个变量），分别进行了定性研究、定量研究和灰度数据调研。