## 组件设计指南

### 何时使用

需要将不同类型的数据，组成集合在同一区域展示时；

需要更多的数据或操作对图片进行补充说明时；

有交互性的信息内容，需要在一个空间布局内变换长度时。

### 与页面布局相关

##### 需要更准确的遵循栅格系统，使整体页面布局规范协调。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Card1.png" />
    <em>图示：同样大小的卡片在栅格系统中</em>
  </div>
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Card2.png" />
    <em>图示：不同大小的卡片在栅格系统中</em>
  </div>
</div>

<hr />

### 组件搭配使用

##### 卡片与搜索框搭配使用，当卡片数量较多时，用户可精确检索快速找到对应卡片。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Card3.png" />
    <em></em>
  </div>

</div>

<hr />

##### 卡片与分页搭配使用，当卡片无法在一屏呈现时，让用户可选择性浏览不同页的卡片。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Card4.png" />
    <em></em>
  </div>

</div>

<hr />

##### 卡片与分步加载搭配使用，当卡片数量较多且需要实时更新时，或需要瀑布流展示时，减少用户操作、提供沉浸式体验。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Card5.png" />
    <em></em>
  </div>

</div>

<hr />

### 推荐/慎用示例

##### 每一屏内的卡片数量不宜过多，避免信息过于冗杂，增加用户使用的信息负荷。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Card6.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Card7.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>

<hr />

##### 数据格式一致、信息类型较简时，建议使用列表呈现而非卡片，避免增加页面的复杂性。

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Card8.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Card9.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
