你是否和我一样,看多了用大量文字堆积的回复结果就会感到腻呢?
相比于枯燥乏味的文字,大家更喜欢图文并茂的呈现方式。
图片中,左侧是生成的卡片,右侧是没有配置卡片的效果。你会选哪一个?
或许,这根本不是选择题。
今天我们通过景点推荐的场景,带着大家一起创建你的第一个 Coze 卡片。

通过 个人空间 > 卡片 > 创建卡片 后,进入卡片配置页面。
我们先来看看卡片配置页面的整体结构。
左侧素材区、中间为展示区、右侧为素材的属性区。

接下来我们来详细介绍下。
一、卡片
为了更好的带着大家理解,我将素材区的卡片和变量分开来解释。
1、模板:包含个人的模板和官方提供的默认模板,用于快速借鉴。
官方模板中包含一些图片模板、搜索列表、头条消息、商品模板,模板种类并不多。

2、组件:用于卡片中展示的可视化元素,和排版这些元素的布局组件。
布局组件:包含单列布局、多列布局、网格布局等,布局之间可以互相嵌套。
基础组件:包含标题、文本、按钮、图片、图标、评分、图标、分割线。

3、结构:快速预览卡片内的层级结构,以及用于快速调整组件的位置。

二、元素属性区
先跳过变量来看元素的属性区域。
点击不同的元素可以看到不同元素的基础配置,不同的元素又包含不同的属性。
1、文字元素
包含内容、元素、字体权重、大小、对齐方式等等。
大部分都很好理解,接下来重点解释下 操作 和 高级配置。

操作 / 点击事件:可以在点击文字、按钮或者其他元素时自动发送消息,或者跳转到指定网页链接上。

高级配置 / 循环渲染:如果指定的变量是一组数据,那么将会按照顺序展示多条文本。

高级配置 / 显隐渲染:可以通过配置条件来控制文本的显示和隐藏的规则。


三、变量
经过上面的介绍,我们可以看出来,配置卡片就是在配置一个数据的可视化页面模板。
但是,每次用户和智能体交互时产生的数据又各不相同,怎么样可以动态地展示不同的数据呢?
变量就是解决这个问题的,我们可以为不同的元素配置不同的变量,以达到动态展示不同数据的效果,让卡片这个页面模板可以重复利用。

四、展示区
展示区,顾名思义,实时展示卡片配置效果的位置。
五、你的第一个扣子卡片
现在我们来设计一个景点推荐卡片。
需求:
作为一个旅游爱好者,我希望根据我的个人喜好得到至少 5 个景点的推荐,以便选择适合我的旅游目的地。
作为一个旅游爱好者,我希望能够获取景点的图片、名称、地址、评分、介绍和详细游玩攻略,以便我可以全面了解景点并做好行程规划。
有两种方式:
手动配置
AI 生成
我建议新手先熟练使用手动配置的技巧后,再考虑 AI 生成。
一)手动配置卡片
按照需求,我们来配置卡片。

由于图片不能直接输入链接,必须通过变量来设置,接下来我们配置一些变量,来看下效果。
配置变量:景区名称、图片地址(网络图片即可)、评分、地址、描述。

配置一个游玩攻略,我们希望它逐行展示,那么类型肯定是一个 Array(数组)。
还是老样子,如果不知道怎么写 JSON,可以让 Kimi 帮我们写一个 JSON 数组。

变量设置完成。

接下来,我们将变量和元素一一对应。

名称、图片、评分、描述 都比较简单,唯独 游玩攻略 稍有不同。
需要先开启 循环渲染,绑定对应属性,再选择对应的属性进行展示,最终出现了多条攻略的效果。

调整一些字体颜色后,我们预览来看下效果。

二)AI 生成卡片
输入提示词后,点击 AI 生成卡片。
帮我生成一个包含景点名称、景点图片、地址、评分、一句话介绍、多条游玩攻略的封面。
一键生成的效果还凑合,改吧改吧还是能用的。

六、总结
恭喜你解锁了新技能 -- Coze 卡片配置。
接下来,找到用户场景,用 Coze 卡片实现它。
相信在实践的过程中,你会有很多新的发现。
如果觉得不错,随手点个赞、收藏、转发三连吧。
如果想第一时间收到推送,也可以给我个星标 ⭐
谢谢你看我的文章 ~