卡片

大白话解释

卡片就是把一条信息单独装进一个小方框里。方框有边界、有留白、通常还有一点淡淡的阴影，让这块内容看起来是从背景上浮起来的。

你可以把它想成超市货架上的一个个商品盒：每个盒子装一样东西，互相不串味，一眼扫过去就知道有几样东西、分别是什么。新闻列表、商品列表、用户资料，几乎都是这么排的。

卡片真正的价值不是那个框，而是让一堆零散信息变得可数、可比较。因为每张卡大小差不多、结构一样，人的眼睛才容易横向对比，比如同样是价格，那就看单价那一行。

什么时候会遇到

• 看设计稿时，列表里每条数据外面都套了一个框，设计标注写着卡片间距十六像素。
• 产品要求列表里每张卡点一下能进详情页，但卡片里的小按钮点了不该跳转。
• 卡片里的标题有时一行有时三行，导致每张卡高低不一，页面看起来参差不齐。
• 做响应式时纠结一行放几张卡，手机放一张、平板两张、桌面四张。
• 跟 Agent 描述时你说那种带图片和标题的小方块，对方得确认是不是卡片。

可以直接对 Agent 说

「把商品列表改成卡片布局，每张卡上面是商品图，下面是标题和价格，鼠标移上去整张卡轻微浮起来并且有点阴影。」

「这些卡片标题长短不一导致高度不齐，帮我把标题固定显示两行、超出用省略号，让每张卡高度一致。」

「卡片里那个收藏小爱心点了不要跳转到详情页，只有点卡片其他区域才跳，帮我把这两个点击区域分开。」