# 卡片设计规范
聚在工大经历多次迭代，UI中的卡片一直作为主要元素，接下来让我讲讲不同的卡片承担的作用吧
## 列表卡片
### 职能 : 列表
当项目较多时，可使用此卡片滚动布局，代替ListItem + Divider
![列表卡片](/%E5%8D%A1%E7%89%87%E8%AE%BE%E8%AE%A1/%E5%88%97%E8%A1%A8%E5%8D%A1%E7%89%87.jpg)
## 大卡片
## 职能 : 提纯
提纯并展示最关键的数据信息，其中首行使加粗、加大的字体，下面依次排列附属数据；注意：不建议大卡片加入过多按钮，建议最多两个按钮，大卡片的应该是作为对界面信息的总结而存在，而不是操作区
### 展示状态
![大卡片](/%E5%8D%A1%E7%89%87%E8%AE%BE%E8%AE%A1/%E6%95%B0%E6%8D%AE%E5%B1%95%E7%A4%BA%20%E5%A4%A7%E5%8D%A1%E7%89%87.jpg)
### 加载状态
卡片整体后退，卡片中的内容整体相对卡片也后退，后退同时卡片内容全部过渡为模糊状态，模糊程度应肉眼可分辨内容主体，保证舒适的观感
![大卡片](/%E5%8D%A1%E7%89%87%E8%AE%BE%E8%AE%A1/%E5%8A%A0%E8%BD%BD%E4%B8%AD%20%E5%A4%A7%E5%8D%A1%E7%89%87.jpg)
### 准备状态
卡片类似被上方按钮“封印”的状态，点击按钮，按钮消失，卡片向前运动，卡片中的内容也向前运动，同时伴随模糊度降低为0，转化为展示状态
![大卡片](/%E5%8D%A1%E7%89%87%E8%AE%BE%E8%AE%A1/%E5%BE%85%E5%8A%A0%E8%BD%BD%20%E5%A4%A7%E5%8D%A1%E7%89%87.jpg)
## 半宽小卡片
## 职能 : 展示
通常用于内容较少，可进行2*排布时
![大卡片](/%E5%8D%A1%E7%89%87%E8%AE%BE%E8%AE%A1/%E5%8D%8A%E5%AE%BD%E5%B0%8F%E5%8D%A1%E7%89%87.jpg)
## 表格卡片
## 职能 : 表格
用于>2排布
![大卡片](/%E5%8D%A1%E7%89%87%E8%AE%BE%E8%AE%A1/%E8%A1%A8%E6%A0%BC%E5%8D%A1%E7%89%87.jpg)
## 列首标记卡片
## 职能 : 提醒
一般位于列表首个，与列表卡片颜色相比更深，用于提醒一些信息
![大卡片](/%E5%8D%A1%E7%89%87%E8%AE%BE%E8%AE%A1/%E5%88%97%E9%A6%96%E6%A0%87%E8%AE%B0%E5%8D%A1%E7%89%87.jpg)
## 强调卡片
## 职能 : 强调
颜色与主题色完全不同，用于突出此卡片数据的重要性
![大卡片](/%E5%8D%A1%E7%89%87%E8%AE%BE%E8%AE%A1/%E5%BC%BA%E8%B0%83%E5%8D%A1%E7%89%87.jpg)
## 小卡片融合
## 职能 : 展示
较少的半宽卡片可以进行融合拼接，更加美观
![大卡片](/%E5%8D%A1%E7%89%87%E8%AE%BE%E8%AE%A1/%E5%B0%8F%E5%8D%A1%E7%89%87%E8%9E%8D%E5%90%88.jpg)