卡片式UI适合把一个商品、一门课程或一项任务作为完整对象展示，让用户先扫读，再进入详情。设计时最重要的不是圆角和阴影，而是让每张卡片回答“这是什么、和其他选项有什么区别、点哪里继续”。如果用户主要需要逐行核对十几个字段，表格通常比卡片更合适。
下面用课程目录完成一张卡片的设计：先选字段，再确定点击方式，最后处理长标题、满额状态和手机布局。可以在墨刀设计里把内容区做成可复用组件，用自动布局检查不同内容长度，不必为每门课程重新画一张卡。
卡片、列表还是表格？先看用户怎么做决定
给内容加一个白底圆角，不等于它就适合卡片。卡片会增加边距和分组层次，也会占用更多空间。选择布局时，应该先问用户正在浏览对象，还是需要密集地比较字段。
| 用户任务 | 更合适的起点 | 原因 |
|---|---|---|
| 按封面、主题和价格挑课程 | 卡片 | 每门课程有独立身份，图片与少量信息帮助初筛 |
| 快速查找已报名课程的名称和开课时间 | 紧凑列表 | 目标比较明确，不必每行重复展示大封面 |
| 比较几十门课程的收入、退款率和到课率 | 表格 | 按同一列扫描、排序和核对更直接 |
| 按待处理、进行中、已完成拖动任务 | 看板中的任务卡 | 卡片代表任务，列代表状态，二者职责不同 |
同一种对象可以有不同呈现。面向学员的课程目录使用卡片，面向运营的课程管理使用表格，并不冲突。不要为了“全站统一”让两个不同任务使用完全相同的布局。
把一门课程压缩成一张有用的卡片
先准备一份练习课程资料：课程名为“产品原型入门：做出可点击的预约流程”，面向入门学员，共4节课、80分钟，价格为¥199。完整详情还包含教师简介、章节说明、学习要求和售后规则，但这些内容不需要全部搬进卡片。
Material的卡片指南把卡片视为围绕单一主题组织内容和动作的容器。图片、说明和按钮都不是必须全部出现的装饰项；要保留的是帮助用户识别和决策的信息。
| 信息 | 卡片中的处理 | 取舍理由 |
|---|---|---|
| 课程名称 | 主标题，允许两行；详细页保留完整名称 | 首先确认主题，不能被图片和标签压到角落 |
| 学习成果 | “完成一条可点击的预约流程” | 比重复“精品课程”“干货满满”更有判断价值 |
| 适合人群、时长 | “入门 · 4节课 · 80分钟” | 帮助判断是否适合自己的基础与时间 |
| 价格 | “¥199”，与课程范围一起理解 | 明确金额；不同计费单位不能只展示一个大数字 |
| 封面 | 展示课程主题或成果，使用一致比例 | 帮助快速识别；没有有效图片时可以使用简洁主题区 |
| 教师长简介、完整目录 | 放在详情页 | 这是进一步判断的信息，不应挤占初筛空间 |
需要控制卡片高度时，优先删除重复信息，而不是把所有字都缩小。例如标题已经写“产品原型入门”，就不必再添加“原型”“产品”“入门”三枚标签。让标签承担筛选维度，而不是重复标题。
视觉层级：先读标题，再看取舍，最后找到动作
可以按“主题区—内容区—操作区”组织课程卡：顶部封面说明主题；中部依次放标题、学习成果和时长；底部放价格与动作。主标题的对比和间距应高于辅助文字，但不需要每个字段都加粗。
- 封面比例一致，内容不必雷同。统一图片容器的比例有利于整行整齐，实际图片仍应与每门课程有关。不要靠重复同一张封面保持视觉统一。
- 留白区分信息组。标题和说明靠近，价格和主要动作形成另一组。每行之间留同样大的空白，反而容易让用户失去阅读顺序。
- 少用强边框和深阴影。卡片已经通过间距形成分组时，轻边框或表面色通常足够。大阴影叠加多层圆角会降低信息密度。
- 状态不要压过对象身份。“已满额”应清楚可见，但课程名称仍应首先可读。用户可能还需要看内容或寻找下期课程。
整张卡片能点，内部“收藏”又能点，怎么避免冲突？
先确定卡片的主要行为，再安排次要行为。课程目录的主行为通常是打开课程详情，收藏是留在当前目录完成的次要动作。二者不能共享一个含糊的点击区域。
方式一：标题和“查看课程”是明确入口。卡片其他区域不承担导航，收藏是独立按钮。这种方式规则清楚，适合还包含价格说明、文本选择或其他操作的卡片。
方式二：内容区域整体进入详情，收藏独立操作。可以扩大主入口，但要在交互说明中写明边界：点击封面或课程信息进入详情，点击收藏只改变收藏状态，不跳转。实现时应避免把一个可交互按钮直接嵌进另一个按钮或链接中；视觉上在同一卡片内，不代表技术上必须做成互相嵌套的交互元素。
| 用户操作 | 期望结果 | 容易漏掉的细节 |
|---|---|---|
| 打开课程 | 进入对应课程详情 | 返回目录后保留筛选和浏览位置 |
| 点击收藏 | 在当前页面更新收藏状态 | 失败时保留或恢复原状态，显示可理解的提示 |
| 使用键盘浏览 | 焦点能到达详情入口和收藏 | 次序与视觉阅读顺序一致，每个焦点可见 |
| 进入批量选择模式 | 点击选择控件改变选中状态 | 明确当前是选择还是导航，避免一点卡片就离开页面 |
不要把桌面悬停当作唯一提示。手机没有稳定的悬停状态；即使鼠标还未移上去，用户也应能通过标题、按钮或其他线索看出下一步在哪里。涉及键盘和触控的细节，可以继续参考UI无障碍设计中的焦点与操作反馈。
桌面三列变手机一列，不只是把卡片缩小
列数应该由卡片内容的最低可读宽度决定。假设桌面内容区宽1120px，卡片间距24px，三列时每张卡片约为357px；手机视口宽390px、两侧各留16px时，单张卡片宽358px。两种屏幕可以容纳接近的卡片宽度，不需要把字体等比例缩小。
上述数值只是这份练习的布局起点。实际还要检查页面导航、浏览器缩放、系统字体与最长标题。如果双列时标题被挤成四行、动作挤到下一行，就应更早切到单列，而不是坚持某个固定屏幕断点。
- 先确定内容区。把页面边距与卡片间距分开，避免边距叠加后手机只剩很窄的内容。
- 让卡片内部按内容排布。标题允许换行，辅助信息适度折行，按钮保持可操作的尺寸。价格和动作拥挤时可以上下排列。
- 再决定列表的列数。根据最窄可读宽度安排三列、两列或一列；不用把所有设备的卡片设成同一个固定宽度。
- 保留跨端决策信息。手机可以减少装饰和次要说明，但不应隐藏关键价格单位、满额状态或必要条件。
同一行卡片需要整齐时，可以统一封面比例，为标题保留合理行数，并把操作区对齐。不要把整个卡片锁死在很小的高度，再让长标题、错误提示和翻译文本互相覆盖。内容确实有明显长短差异时，可以使用自然高度；是否采用瀑布流，应取决于浏览方式，而不是为了掩盖字段没有取舍。
在墨刀中做一张能复用、能交付的课程卡
先制作一张默认卡，再把内容和状态拆开。墨刀设计的组件与自动布局可用于组织重复内容，原型交互用于说明卡片入口和按钮行为；设计稿中的行为标注仍需要与研发确认具体实现。
- 建立卡片结构。按封面、文字区、操作区分组，文字区用垂直排列，底部价格与动作按空间选择水平或垂直排列。
- 填入真实长度的练习内容。使用“产品原型入门：做出可点击的预约流程”，不要先用“标题”两个字测试宽度。再复制一张短标题卡，比较两者。
- 创建组件和必要变化。保留默认、已收藏、满额三种状态；满额卡仍允许查看详情，收藏状态只影响收藏动作。没有业务需要的变化不必提前堆满。
- 组成桌面与手机目录。用相同的课程数据检查列数变化、标题换行和操作区位置；修的是组件规则，不是分别拖动每一张卡片。
- 为交互写清结果。注明“查看课程→对应详情”“收藏→当前页反馈”“返回→恢复筛选与位置”。再补未加载、空列表和失败状态，避免只交付有内容的截图。
可以把下面这段作为组件说明的起点，按实际业务修改：
课程卡：用于目录初筛。显示课程名称、学习成果、适合人群、节数、时长及价格；默认标题最多显示两行，详情可查看完整名称。主要行为为查看课程，收藏独立执行。满额时显示“已满额”，保留查看详情入口。列表返回后保留筛选条件和位置。手机优先单列，标题与操作区域不得重叠。
不要只测“内容刚刚好”的那张卡片
长标题：检查两行截断是否影响辨认，尤其是多门课程前半句完全相同时。必要时调整命名，或让区分信息出现在更靠前的位置。
图片缺失：保留稳定容器或采用无图版式，不能只剩破图图标；图片补载后也不应让用户刚准备点击的位置突然移动。
课程满额：区分“不能报名”和“不能查看”。整张卡片变灰且完全不可点，会同时阻断用户查看课程内容和下一期信息。
筛选无结果：这是整个列表的状态，不必造一张空卡。显示当前条件，并给出清除筛选或调整条件的入口。
完成一张卡片后，把它复制成六张，用不同长度、价格和状态的数据检查整组效果。单卡漂亮只是基础；用户能否迅速比较、准确点击，并在手机上继续任务，才决定这组卡片是否好用。
