丰富响应会添加视觉元素,以增强用户与 Action 的互动。您可以在提示中使用以下丰富的响应类型:
- 基本卡片
- 图片卡片
- 表格卡片
定义丰富响应时,请使用具有 RICH_RESPONSE
surface 功能的候选响应,以便 Google 助理仅在支持的设备上返回富响应。在提示中,每个 content
对象只能使用一个富响应。
基本卡片
基本卡片旨在简洁明了,用于向用户显示关键(或摘要)信息,并允许用户在您选择的情况下(使用网页链接)了解详情。
基本卡片主要用于显示目的,因为它们没有按钮,就没有互动功能。如需将按钮关联到 Web,Surface 还必须具有 WEB_LINK
功能。
![智能显示屏上的基本卡片示例](https://developers.google.cn/static/assistant/conversational/images/smart-display/basic-card.png?authuser=1&hl=da)
属性
基本卡片响应类型具有以下属性:
媒体资源 | 类型 | 要求 | 说明 |
---|---|---|---|
title |
string | 可选 | 卡片的纯文本标题。标题采用固定的字体和大小,第一行之后的字符会被截断。如果未指定标题,卡片高度会收起。 |
subtitle |
string | 可选 | 卡片的纯文本副标题。标题采用固定的字体和大小,第一行之后的字符会被截断。如果未指定副标题,卡片高度会收起。 |
text |
string | 基于条件 |
卡片的纯文本内容。过长的文本会在最后一个单词中断处以省略号截断。除非存在 此媒体资源具有以下限制:
仅支持有限的 Markdown 子集:
|
image |
Image |
可选 | 卡片中显示的图片。图片可以是 JPG、PNG 和 GIF(动画和非动画)。 |
image_fill |
ImageFill |
可选 | 当图片的宽高比与图片容器的宽高比不符时,要使用的卡片与图片容器之间的边框。 |
button |
Link |
可选 | 点按此按钮可将用户链接到某个网址。该按钮必须具有 name 属性(包含按钮文本)和 url 属性(包含链接网址)。按钮文字不得具有误导性,并在审核流程中检查。 |
示例代码
YAML
candidates: - first_simple: variants: - speech: This is a card. text: This is a card. content: card: title: Card Title subtitle: Card Subtitle text: Card Content image: url: 'https://developers.google.com/assistant/assistant_96.png' alt: Google Assistant logo
JSON
{ "candidates": [ { "first_simple": { "variants": [ { "speech": "This is a card.", "text": "This is a card." } ] }, "content": { "card": { "title": "Card Title", "subtitle": "Card Subtitle", "text": "Card Content", "image": { "url": "https://developers.google.com/assistant/assistant_96.png", "alt": "Google Assistant logo" } } } } ] }
Node.js
app.handle('Card', conv => { conv.add('This is a card.'); conv.add(new Card({ "title": "Card Title", "subtitle": "Card Subtitle", "text": "Card Content", "image": new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' }) })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {} }, "prompt": { "override": false, "content": { "card": { "title": "Card Title", "subtitle": "Card Subtitle", "text": "Card Content", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, "firstSimple": { "speech": "This is a card.", "text": "This is a card." } } } }
图片卡片
图片卡片旨在作为同时包含图片的基本卡片提供更简单的替代方案。如果要显示图片并且不需要支持文本或互动组件,请使用图片卡片。
属性
图片卡片响应类型具有以下属性:
媒体资源 | 类型 | 要求 | 说明 |
---|---|---|---|
url |
string | 必需 | 图片的来源网址。图片可以是 JPG、PNG 或 GIF(动画和非动画)。 |
alt |
string | 必需 | 要用于无障碍功能的图片的文字说明。 |
height |
int32 | 可选 | 图片的高度,以像素为单位。 |
width |
int32 | 可选 | 此图片的宽度,以像素为单位。 |
示例代码
YAML
candidates: - first_simple: variants: - speech: This is an image prompt. text: This is an image prompt. content: image: alt: Google Assistant logo url: 'https://developers.google.com/assistant/assistant_96.png'
JSON
{ "candidates": [ { "first_simple": { "variants": [ { "speech": "This is an image prompt.", "text": "This is an image prompt." } ] }, "content": { "image": { "alt": "Google Assistant logo", "url": "https://developers.google.com/assistant/assistant_96.png" } } } ] }
Node.js
app.handle('Image', conv => { conv.add("This is an image prompt!"); conv.add(new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {} }, "prompt": { "override": false, "content": { "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } }, "firstSimple": { "speech": "This is an image prompt.", "text": "This is an image prompt." } } } }
表格卡片
利用表格卡片,您可以在响应中显示表格数据(例如,体育积分榜、选举结果和航班)。您可以定义 Google 助理在表格卡片中显示的列和行(每个列和行最多 3 个)。您还可以定义其他列和行以及它们的优先级。
![智能显示屏上的表格卡片示例](https://developers.google.cn/static/assistant/conversational/images/smart-display/table.png?authuser=1&hl=da)
表显示静态数据且不可互动。对于交互式选择响应,请改用可视化选择响应。
属性
表卡片响应类型具有以下属性:
媒体资源 | 类型 | 要求 | 说明 |
---|---|---|---|
title |
string | 基于条件 | 表格的纯文本标题。如果设置了 subtitle ,则必须使用此属性。 |
subtitle |
string | 可选 | 表格的纯文本副标题。表格卡片中的字幕不受主题自定义设置的影响。 |
columns |
TableColumn 的数组 |
必需 | 标题和列的对齐方式。每个 TableColumn 对象描述了同一表中不同列的标题和对齐方式。 |
rows |
TableRow 的数组 |
必需 |
表的行数据。前 3 行一定会显示,但其他行可能不会在某些 surface 中显示。您可以使用模拟器进行测试,以查看针对给定 surface 显示哪些行。 每个 |
image |
Image |
可选 | 与表关联的图片。 |
button |
Link |
可选 | 点按此按钮可将用户链接到某个网址。该按钮必须具有 name 属性(包含按钮文本)和 url 属性(包含链接网址)。按钮文字不得具有误导性,并在审核流程中检查。
|
示例代码
以下代码段展示了如何实现表格卡片:
YAML
candidates: - first_simple: variants: - speech: This is a table. text: This is a table. content: table: title: Table Title subtitle: Table Subtitle columns: - header: Column A - header: Column B - header: Column C rows: - cells: - text: A1 - text: B1 - text: C1 - cells: - text: A2 - text: B2 - text: C2 - cells: - text: A3 - text: B3 - text: C3 image: alt: Google Assistant logo url: 'https://developers.google.com/assistant/assistant_96.png'
JSON
{ "candidates": [ { "first_simple": { "variants": [ { "speech": "This is a table.", "text": "This is a table." } ] }, "content": { "table": { "title": "Table Title", "subtitle": "Table Subtitle", "columns": [ { "header": "Column A" }, { "header": "Column B" }, { "header": "Column C" } ], "rows": [ { "cells": [ { "text": "A1" }, { "text": "B1" }, { "text": "C1" } ] }, { "cells": [ { "text": "A2" }, { "text": "B2" }, { "text": "C2" } ] }, { "cells": [ { "text": "A3" }, { "text": "B3" }, { "text": "C3" } ] } ], "image": { "alt": "Google Assistant logo", "url": "https://developers.google.com/assistant/assistant_96.png" } } } } ] }
Node.js
app.handle('Table', conv => { conv.add('This is a table.'); conv.add(new Table({ "title": "Table Title", "subtitle": "Table Subtitle", "image": new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' }), "columns": [{ "header": "Column A" }, { "header": "Column B" }, { "header": "Column C" }], "rows": [{ "cells": [{ "text": "A1" }, { "text": "B1" }, { "text": "C1" }] }, { "cells": [{ "text": "A2" }, { "text": "B2" }, { "text": "C2" }] }, { "cells": [{ "text": "A3" }, { "text": "B3" }, { "text": "C3" }] }] })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {} }, "prompt": { "override": false, "content": { "table": { "button": {}, "columns": [ { "header": "Column A" }, { "header": "Column B" }, { "header": "Column C" } ], "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 }, "rows": [ { "cells": [ { "text": "A1" }, { "text": "B1" }, { "text": "C1" } ] }, { "cells": [ { "text": "A2" }, { "text": "B2" }, { "text": "C2" } ] }, { "cells": [ { "text": "A3" }, { "text": "B3" }, { "text": "C3" } ] } ], "subtitle": "Table Subtitle", "title": "Table Title" } }, "firstSimple": { "speech": "This is a table.", "text": "This is a table." } } } }
自定义响应
您可以通过为 Actions 项目创建自定义主题来更改丰富响应的外观。这种自定义有助于定义用户在具有屏幕的 Surface 上调用您的 Action 时对话的独特外观和风格。
如需设置自定义响应主题,请执行以下操作:
- 在 Actions 控制台中,依次转到 Develop > Theme custom。
- 设置以下任一或所有项:
- 背景颜色:用作卡片的背景。一般来说,为背景使用浅色,使卡片内容更易于阅读。
- 主要颜色:卡片标题文本和界面元素的主颜色。通常,使用较深的主要颜色可以与背景颜色形成更好的对比。
- 字体系列:描述用于标题和其他醒目文本元素的字体类型。
- 图片角样式:更改卡片角的外观。
- 背景图片:用于替代背景颜色的自定义图片。针对 Surface 设备处于横屏模式或竖屏模式时提供两张不同的图片。如果您使用背景图片,则主色会设置为白色。
- 点击保存。
![在 Actions 控制台中自定义主题](https://developers.google.cn/static/assistant/conversational/images/theme-customization.png?authuser=1&hl=da)