複合式回應

豐富的回應會加入視覺元素,加強使用者與動作的互動。您可以在提示中使用下列複合式回應類型:

  • 基本資訊卡
  • 圖片資訊卡
  • 資料表資訊卡

定義複合式回應時,請使用具有 RICH_RESPONSE 介面功能的「候選」,讓 Google 助理只在支援的裝置上傳回複合式回應。在提示中,每個 content 物件只能使用一個複合式回應。

基本資訊卡

基本資訊卡的設計雖然簡單明瞭,可以為使用者提供重要 (或摘要) 資訊,並讓使用者透過網頁連結進一步瞭解相關資訊。

主要資訊卡主要用於顯示,因為兩者沒有按鈕的互動功能。如要將按鈕連結至網頁,途徑也必須具備 WEB_LINK 功能。

智慧螢幕的基本資訊卡範例

屬性

基本資訊卡回應類型具有以下屬性:

屬性 類型 必要性 說明
title 字串 選用 資訊卡的純文字標題。標題採用固定的字型與大小,第一行之後的字元會遭到截斷。如未指定標題,資訊卡高度會收合。
subtitle 字串 選用 資訊卡的純文字子標題。標題採用固定的字型與大小,第一行之後的字元會遭到截斷。如未指定副標題,資訊卡高度會收合。
text 字串 條件式

資訊卡的純文字內容。過長的文字會在最後一個字詞中斷處截斷,並加上刪節號。除非 image 存在,否則這是必要屬性。

這項資源的限制如下:

  • 不含圖片的行數上限為 15 行,或是含有 image 的 10 行。這大約是 750 個 (不含圖片) 或 500 (含圖片) 字元。請注意,行動裝置會在螢幕較大時截斷文字,
  • 文字不得包含連結。

系統支援部分 Markdown:

  • 換行,後方為雙空格,後接 \n
  • **bold**
  • *italics*
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 個)。您也可以定義其他資料欄和資料列,以及資料欄的優先順序。

智慧螢幕上的表格資訊卡範例

表格顯示靜態資料,且無法互動。若是互動式選取回應,請改用視覺選擇回應

屬性

表格資訊卡回應類型包含下列屬性:

屬性 類型 必要性 說明
title 字串 條件式 表格的純文字標題。如果設定 subtitle,就必須提供這項屬性。
subtitle 字串 選用 表格的純文字子標題。主題自訂功能不會影響表格資訊卡中的子標題。
columns TableColumn 的陣列 需要 資料欄的標頭和對齊方式。每個 TableColumn 物件都會說明同一資料表中不同資料欄的標頭和對齊方式。
rows TableRow 的陣列 需要

資料表的資料列資料。前 3 列一定會顯示,但其他資料列可能不會顯示在特定介面上。您可以使用模擬工具進行測試,瞭解特定介面會顯示哪些資料列。

每個 TableRow 物件都會說明同一資料表中不同資料列的儲存格。

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 專案建立自訂主題,藉此變更複合式回應的外觀。當使用者在螢幕表面叫用動作時,這項自訂功能即可定義獨特的對話外觀與風格。

如要設定自訂回應主題,請按照下列步驟操作:

  1. 動作控制台中,依序前往「開發」>「主題自訂」
  2. 設定下列任一或所有項目:
    • 背景顏色:用來當做資訊卡的背景。一般來說,請在背景使用淺色,讓資訊卡內容更容易閱讀。
    • Primary color (主要顏色):資訊卡標題文字和介面元素的主要顏色。一般來說,請使用較深的主色,加強與背景顏色的對比。
    • 字型系列:說明標題和其他醒目文字元素的字型類型。
    • 圖片邊角樣式:變更資訊卡角落的外觀。
    • 背景圖片:用於取代背景顏色的自訂圖片。為表面裝置處於橫向或直向模式時提供兩個不同的圖片。如果使用背景圖片,主要顏色會設為白色。
  3. 點按「儲存」
在動作主控台中自訂主題