الردود المنسّقة

تضيف الردود المنسّقة عناصر مرئية لتحسين تفاعلات المستخدم مع الحركة. يمكنك استخدام أنواع الردود المنسّقة التالية كجزء من الطلب:

  • البطاقة الأساسية
  • بطاقة صورة
  • بطاقة جدول

عند تحديد رد منسَّق، يمكنك استخدام مرشح مع RICH_RESPONSE على السطح، حتى لا يعرض "مساعد Google" إلا الاستجابة التفاعلية على الأجهزة المتوافقة. يمكنك استخدام استجابة غنية بصريًا واحدة فقط لكل عنصر content في مطالبة.

البطاقة الأساسية

تم تصميم البطاقات الأساسية لتكون موجزة لتقديم المعلومات الرئيسية (أو التلخيصية) للمستخدمين، وللسماح للمستخدمين بمعرفة المزيد إذا اخترت ذلك (باستخدام رابط ويب).

استخدِم البطاقات الأساسية لأغراض العرض بشكل أساسي، لأنّها لا تتيح التفاعل. والإمكانات بدون زر. لربط زر بالويب، يجب أن يتوفّر سطح لديها أيضًا القدرة WEB_LINK.

مثال على بطاقة أساسية على شاشة ذكية

أماكن إقامة

يتضمّن نوع استجابة البطاقة الأساسي السمات التالية:

الموقع النوع المطلوب للحصول على الشارة الوصف
title سلسلة اختياري عنوان بنص عادي للبطاقة العناوين ذات خط وحجم ثابتين، يتم اقتطاع من الأحرف التي تتجاوز السطر الأول. يمكن تصغير ارتفاع البطاقة في حال عدم توفّرها العنوان المحدد.
subtitle سلسلة اختياري ترجمة نصية عادية للبطاقة. تكون العناوين ذات خط وحجم ثابتين، ويتم اقتطاع الأحرف التي تتجاوز السطر الأول. يمكن تصغير ارتفاع البطاقة في حال لم يتم تحديد أي عنوان فرعي.
text سلسلة الجملة الشرطية

محتوى النص العادي للبطاقة يتم اقتطاع النص الطويل جدًا في تنهار الكلمة الأخيرة بعلامة الحذف. هذه السمة مطلوبة ما لم "image" موجود.

يخضع هذا الموقع للقيود التالية:

  • 15 سطرًا كحد أقصى بدون صورة، أو 10 مع image وهذا هو حوالي 750 (بدون صورة) أو 500 (مع صورة). تجدر الإشارة إلى أنّ الأجهزة الجوّالة تقتطع النص. قبل الأسطح ذات الشاشات الأكبر حجمًا
  • يجب ألا يحتوي النص على رابط.

تتوفّر مجموعة فرعية محدودة من Markdown:

  • سطر جديد بمسافة مزدوجة متبوعة بـ \n
  • **bold**
  • *italics*
image Image اختياري الصورة المعروضة في البطاقة يمكن أن تكون الصور بتنسيق JPG وPNG وGIF (متحرّكة. وغير المتحركة).
image_fill ImageFill اختياري الحدود بين البطاقة وحاوية الصورة المطلوب استخدامها عند لا تتوافق نسبة عرض الصورة إلى ارتفاعها مع عرض حاويات الصورة النسبة المئوية.
button Link اختياري زر يربط المستخدم بعنوان URL عند النقر عليه يجب أن يكون للزر السمة name التي تحتوي على نص الزر الموقع الإلكتروني على url الذي يحتوي على عنوان 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 سلسلة مطلوب عنوان 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."
      }
    }
  }
}

بطاقات الطاولة

تسمح لك بطاقات الجدول بعرض بيانات مجدولة في ردك (على سبيل المثال، ترتيبات المباريات الرياضية ونتائج الانتخابات والرحلات الجوية). يمكنك تحديد الأعمدة صف (ما يصل إلى 3 صفوف) يعرضها "مساعد Google" في بطاقة الجدول. يمكنك أيضًا تحديد أعمدة وصفوف إضافية، إلى جانب تحديد أولوياتها.

مثال على بطاقة طاولة على شاشة ذكية

تعرض الجداول بيانات ثابتة ولا يمكن التفاعل معها. للاختيار التفاعلي يمكنك استخدام رد للاختيار المرئي بدلاً من ذلك.

أماكن إقامة

يحتوي نوع استجابة بطاقة الجدول على السمات التالية:

الموقع النوع المطلوب للحصول على الشارة الوصف
title سلسلة الجملة الشرطية عنوان بنص عادي للجدول. يجب استخدام هذه السمة في حال تم ضبط subtitle.
subtitle سلسلة اختياري عنوان فرعي للنص العادي للجدول. الترجمات في بطاقات الجدول غير ظاهرة بتخصيص المظاهر.
columns مصفوفة TableColumn مطلوب عناوين الأعمدة ومحاذاة الأعمدة كل كائن TableColumn تصف رأس ومحاذاة عمود مختلف بنفس المؤقت.
rows مصفوفة TableRow مطلوب

بيانات الصف في الجدول نضمن ظهور أول 3 صفوف، ولكن وقد لا يظهر بعضها الآخر على مساحات عرض معيّنة. يمكنك الاختبار باستخدام المحاكي لمعرفة الصفوف التي تظهر لسطح معين.

ويصف كل عنصر TableRow خلايا صف واحد في نفس الجدول.

image Image اختياري صورة مرتبطة بالجدول
button Link اختياري زر يربط المستخدم بعنوان URL عند النقر عليه يجب أن يحتوي الزر على السمة name التي تحتوي على نص الزر الموقع الإلكتروني على url الذي يحتوي على عنوان 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."
      }
    }
  }
}

تخصيص الردود

يمكنك تغيير مظهر الردود المنسّقة من خلال إنشاء مظهر مخصص لمشروع المهام لديك. يمكن أن يكون هذا التخصيص مفيدًا لتحديد نوع المظهر والأسلوب في المحادثة عندما يستدعي المستخدمون إجراءاتك بشكل ظاهر بشاشة.

لضبط موضوع رد مخصّص، اتّبِع الخطوات التالية:

  1. في وحدة تحكّم الإجراءات، انتقِل إلى تطوير >. تخصيص المظهر:
  2. اضبط أيًا من الإجراءات التالية أو جميعها:
    • لون الخلفية: يُستخدم كخلفية لبطاقاتك. بشكل عام، استخدام لون فاتح للخلفية من أجل تسهيل عرض محتوى البطاقة تَقْرَأ
    • اللون الأساسي: اللون الرئيسي لبطاقاتك نصوص العناوين والواجهة عناصر. بشكل عام، استخدم لونًا أساسيًا أغمقًا للتباين بشكل أفضل مع لون الخلفية.
    • مجموعة الخطوط: تصف نوع الخط المستخدَم للعناوين عناصر النص البارزة.
    • نمط زاوية الصورة: تغيير مظهر بطاقاتك زوايا.
    • صورة الخلفية: صورة مخصصة لاستخدامها بدلاً من الخلفية اللون. تقديم صورتين مختلفتين عند تثبيت الجهاز السطحي الوضع الأفقي أو العمودي. إذا كنت تستخدم صورة خلفية، فإن العنصر الأساسي على اللون الأبيض.
  3. انقر على حفظ.
تخصيص المظهر في وحدة تحكّم "الإجراءات"