豐富的回應會加入視覺元素,加強使用者與動作的互動。您可以在提示中使用下列複合式回應類型:
- 基本資訊卡
- 圖片資訊卡
- 資料表資訊卡
定義複合式回應時,請使用具有 RICH_RESPONSE
介面功能的「候選」,讓 Google 助理只在支援的裝置上傳回複合式回應。在提示中,每個 content
物件只能使用一個複合式回應。
基本資訊卡
基本資訊卡的設計雖然簡單明瞭,可以為使用者提供重要 (或摘要) 資訊,並讓使用者透過網頁連結進一步瞭解相關資訊。
主要資訊卡主要用於顯示,因為兩者沒有按鈕的互動功能。如要將按鈕連結至網頁,途徑也必須具備 WEB_LINK
功能。
![智慧螢幕的基本資訊卡範例](https://developers.google.cn/static/assistant/conversational/images/smart-display/basic-card.png?authuser=3&hl=zh-tw)
屬性
基本資訊卡回應類型具有以下屬性:
屬性 | 類型 | 必要性 | 說明 |
---|---|---|---|
title |
字串 | 選用 | 資訊卡的純文字標題。標題採用固定的字型與大小,第一行之後的字元會遭到截斷。如未指定標題,資訊卡高度會收合。 |
subtitle |
字串 | 選用 | 資訊卡的純文字子標題。標題採用固定的字型與大小,第一行之後的字元會遭到截斷。如未指定副標題,資訊卡高度會收合。 |
text |
字串 | 條件式 |
資訊卡的純文字內容。過長的文字會在最後一個字詞中斷處截斷,並加上刪節號。除非 這項資源的限制如下:
系統支援部分 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 |
字串 | 需要 | 圖片的來源網址。圖片可以是 JPG、PNG 或 GIF (動畫和非動畫)。 |
alt |
字串 | 需要 | 圖片的文字說明,供無障礙使用。 |
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=3&hl=zh-tw)
表格顯示靜態資料,且無法互動。若是互動式選取回應,請改用視覺選擇回應。
屬性
表格資訊卡回應類型包含下列屬性:
屬性 | 類型 | 必要性 | 說明 |
---|---|---|---|
title |
字串 | 條件式 | 表格的純文字標題。如果設定 subtitle ,就必須提供這項屬性。 |
subtitle |
字串 | 選用 | 表格的純文字子標題。主題自訂功能不會影響表格資訊卡中的子標題。 |
columns |
TableColumn 的陣列 |
需要 | 資料欄的標頭和對齊方式。每個 TableColumn 物件都會說明同一資料表中不同資料欄的標頭和對齊方式。 |
rows |
TableRow 的陣列 |
需要 |
資料表的資料列資料。前 3 列一定會顯示,但其他資料列可能不會顯示在特定介面上。您可以使用模擬工具進行測試,瞭解特定介面會顯示哪些資料列。 每個 |
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 專案建立自訂主題,藉此變更複合式回應的外觀。當使用者在螢幕表面叫用動作時,這項自訂功能即可定義獨特的對話外觀與風格。
如要設定自訂回應主題,請按照下列步驟操作:
- 在動作控制台中,依序前往「開發」>「主題自訂」。
- 設定下列任一或所有項目:
- 背景顏色:用來當做資訊卡的背景。一般來說,請在背景使用淺色,讓資訊卡內容更容易閱讀。
- Primary color (主要顏色):資訊卡標題文字和介面元素的主要顏色。一般來說,請使用較深的主色,加強與背景顏色的對比。
- 字型系列:說明標題和其他醒目文字元素的字型類型。
- 圖片邊角樣式:變更資訊卡角落的外觀。
- 背景圖片:用於取代背景顏色的自訂圖片。為表面裝置處於橫向或直向模式時提供兩個不同的圖片。如果使用背景圖片,主要顏色會設為白色。
- 點按「儲存」。
![在動作主控台中自訂主題](https://developers.google.cn/static/assistant/conversational/images/theme-customization.png?authuser=3&hl=zh-tw)