跳到正文

卡片

Card

初级通用

卡片(Card)是把一项内容及其相关信息、操作放在同一块区域里的展示方式。它让用户能逐项浏览和比较,比如在项目页同时看到每个项目的名称、状态和入口。

你可能会说:「我想把每个项目的名称、状态和操作放在一起,让人能一项项扫着看。」

动手看看

项目空间最近更新的项目
新建项目
品牌官网改版
进行中
整理新版首页内容与视觉规范。
7 月 12 日更新
打开项目
编辑
更多
秋季活动策划
待启动
汇总活动排期、物料和协作分工。
7 月 9 日更新
打开项目
编辑
更多
卡片版本

切换卡片版本,再悬停卡片或用 Tab 聚焦入口试试。每张卡片都把项目名称、简介和入口放在一起,方便逐项浏览。

状态贴着项目名称,扫过列表就能比较进度;适合需要快速判断哪些项目正在推进的工作台。

要点

  1. 1

    围绕同一个对象放信息

    你做项目管理页时,一张卡片可以放一个项目的名称、负责人、进度和最近更新时间。因为这些信息都在描述同一个项目,用户扫完一张就能形成判断,不必到页面各处拼线索。

  2. 2

    让重要内容先被看见

    卡片里可以有图片、标题、说明和操作,但不必样样齐全。比如 AI 工具的任务卡片,任务名称和运行状态通常比创建时间更值得先看到;我们按用户要做的判断安排顺序就行。

  3. 3

    分清卡片和卡片内的操作

    卡片可以只是信息容器,不一定整张都能点。如果卡片里已有“打开”“删除”等操作,整张卡片再设为点击入口,用户就容易弄不清点不同位置会发生什么。先说清各处能做什么。

容易混淆的地方

卡片是一项内容的组织单位,不等于卡片网格布局:同样的卡片可以排成一列,也可以排成多列。它也不等于列表;列表强调逐项排列,卡片则把每项的多种信息和操作归在一个区域里。若重点是按字段对比大量记录,表格往往更直接。

什么时候用

适合用

  • 做项目首页时,每个项目都有名称、状态、负责人和进入详情的入口,适合用卡片逐项展示。
  • 做商品浏览页时,用户需要一起看图片、价格、名称和购买入口,可以把每件商品组织成卡片。
  • 做 AI 任务记录页时,每条任务有摘要、运行状态和查看结果入口,卡片能帮用户逐条浏览。

不适合用

  • 后台要对几十条订单的金额、日期和状态逐列比较时,用表格更方便对齐字段和扫描差异。
  • 页面只有一串文章标题,用户主要是按顺序查找并打开文章时,用普通列表或链接即可。
  • 用户正在填写收货地址、选择配送方式并提交订单时,核心是完成输入,用表单组织字段更合适。

练一练

你在做 AI 工具的任务页:每条任务要展示名称、运行状态、完成时间和“查看结果”入口,用户主要逐条浏览。你会怎么组织?

让 AI 帮你做

请把任务记录页的每条任务做成一张卡片,展示名称、运行状态、完成时间和“查看结果”入口。用户要能逐条扫读;请区分信息区域与可点击操作,不要默认整张卡片都能点击。

接下来学什么