تنسيق بنية البطاقة أو مربع الحوار

توضّح هذه الصفحة كيفية تنسيق التطبيقات المصغّرة وبنيتها في بطاقة أو مربّع حوار. .

يمكنك استخدام "أداة إنشاء البطاقات" لتصميم رسائل بطاقات JSON ومعاينتها لتطبيقات Chat:

فتح "أداة إنشاء البطاقات"

المتطلبات الأساسية

تطبيق Google Chat مفعَّل للميزات التفاعلية لإنشاء تطبيق دردشة تفاعلي، أكمل إحدى مبادرات البدء السريعة التالية المستندة إلى في بنية التطبيق التي تريد استخدامها:

عرض البطاقات ومربّعات الحوار في الأعمدة

تشير رسالة الأشكال البيانية تطبيق "columns" المصغّر عرض ما يصل إلى عمودين في بطاقة أو مربع حوار. يمكنك إضافة التطبيقات المصغّرة لكل عمود؛ تظهر الأدوات بالترتيب الذي المحددة. لتضمين أكثر من عمودَين أو لاستخدام صفوف، استخدِم التطبيق المصغّر grid.

يتم تحديد ارتفاع كل عمود من خلال العمود الأطول. على سبيل المثال، إذا والعمود الأول أطول من العمود الثاني، وكلا العمودين لهما ارتفاع العمود الأول. نظرًا لأن كل عمود يمكن أن يحتوي على رقم مختلف من الأدوات، لا يمكنك تحديد صفوف أو محاذاة الأدوات بين الأعمدة.

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

تحديد عرض عمود

يتم عرض الأعمدة جنبًا إلى جنب. يمكنك تخصيص عرض كل عمود باستخدام حقل horizontalSizeStyle. إذا كان عرض شاشة المستخدم ضيقًا جدًا، فسيتم التفاف العمود الثاني أسفل الأول:

  • على الويب، يتم التفاف العمود الثاني إذا كان عرض الشاشة أقل من أو يساوي 480 بكسل.
  • في أجهزة iOS، يتم التفاف العمود الثاني إذا كان عرض الشاشة أقل من إلى 300 نقطة.
  • في أجهزة Android، يتم التفاف العمود الثاني إذا كان عرض الشاشة أقل من أو ما يساوي 320 وحدة بكسل مستقلة الكثافة (dp).

يعرض المثال التالي بطاقة مع تطبيق columns المصغّر الذي يعرض عمودين من النص يحتوي على 4 عناصر في الأعمدة. كل عنصر في الأعمدة له تم تطبيق horizontalSizeStyle لمعالجة مقدار مساحة النص يملأ كل عمود:

  • تستخدم الفقرة النصية الأولى FILL_MINIMUM_SPACE لملء ما لا يزيد عن 30% لعرض البطاقات.
  • تستخدم الفقرة النصية الثانية FILL_AVAILABLE_SPACE لملء الخيارات المتاحة مسافة في عرض البطاقة. في هذا المثال، يملأ 70% من مساحة العرض.
  • الفقرة النصية الثالثة لا تحدّد horizontalSizeStyle، لذا يتم ضبطها تلقائيًا. لملء المساحة المتاحة من مساحة البطاقة.
  • تستخدم الفقرة النصية الرابعة FILL_MINIMUM_SPACE لملء ما لا يزيد عن 30% لعرض البطاقات.

تحديد المحاذاة الأفقية لعمود

يمكنك محاذاة الأدوات أفقيًا إلى اليسار أو اليمين أو منتصف العمود من خلال ويحدد حقل horizontalAligment. إذا كانت عملية horizontalAlignment غير محدّدة، ستتم محاذاة الأدوات مع اليسار في العمود.

يعمل المثال التالي على محاذاة النص أفقيًا داخل عمود إلى اليسار:

يعمل المثال التالي على محاذاة النص أفقيًا داخل عمود في المنتصف:

يعمل المثال التالي على محاذاة النص أفقيًا داخل عمود إلى اليمين:

تحديد المحاذاة العمودية لعمود

يمكنك محاذاة الأدوات عموديًا إلى أعلى العمود أو أسفله أو وسطه من خلال ويحدد حقل verticalAlignment. إذا كان الحقل verticalAlignment غير محدّد، تتم محاذاة الأدوات في العمود. إلى الأعلى.

يحاذ المثال التالي النص عموديًا داخل عمود إلى الأعلى:

يعمل المثال التالي على محاذاة النص عموديًا داخل عمود في المنتصف:

يعمل المثال التالي على محاذاة النص عموديًا داخل عمود في الأسفل:

إضافة مُقسّم أفقي بين التطبيقات المصغّرة

تشير رسالة الأشكال البيانية تطبيق "divider" المصغّر خطًا أفقيًا يمتد بعرض بطاقة بين التطبيقات المصغّرة المكدسة عموديًا. الخط هو مُقسّم مرئي يساعد يميّز المستخدمون بين تطبيق مصغّر وآخر، ما يسهِّل قراءة البطاقات والفهم.

في ما يلي بطاقة تتألّف من تطبيق "divider" المصغّر بين أنواع أخرى من التطبيقات المصغّرة:

عرض شبكة بها مجموعة من العناصر

تشير رسالة الأشكال البيانية تطبيق "grid" المصغّر تعرض شبكة بها مجموعة من العناصر. تدعم الشبكة أي عدد من والأعمدة والعناصر. يتم تحديد عدد الصفوف من خلال قسمة العناصر على الأعمدة. الشبكة التي تحتوي على 10 عناصر وعمودين تحتوي على 5 صفوف. شبكة تحتوي على 11 عنصرًا و2 تتكون من 6 صفوف.

تدعم الأداة الاقتراحات التي تساعد المستخدمين على إدخال بيانات موحَّدة إجراءات عند التغيير، وهي Actions يتم تشغيلها عند حدوث تغيير في حقل إدخال النص، مثل إضافة مستخدم أو حذف النص.

المثال التالي هو شبكة من عمودين تحتوي على عنصر واحد:

تحديد مكان ظهور النص مع صورة على شكل شبكة

تشير رسالة الأشكال البيانية الحقل gridItemLayout تحديد ما إذا كان النص سيظهر أعلى أو أسفل في كل gridItem العنصر الموجود في الشبكة. إذا لم يتم تحديد gridItemLayout، يتم تعيين النص التلقائي على أسفل العنصر في الشبكة

المثال التالي هو شبكة مكونة من 3 أعمدة مع نص وصورة في كل شبكة. تحدد الشبكة الأولى النص الذي سيظهر فوق الصورة، والثانية تحدد الشبكة النص الذي يظهر أسفل الصورة، ولا تحدد الشبكة الثالثة موضع النص.

إضافة حد إلى عناصر واجهة المستخدم

بالنسبة إلى العناصر التي تظهر في التطبيق المصغّر column أو grid، يمكنك إضافة حد إلى عناصر واجهة المستخدم هذه من خلال تحديد حقل borderType و borderStyle الحقل. إذا لم يتم تحديد حقل borderStyle، سيتم ضبط القيمة التلقائية على عدم عرض أي حدود. يمكنك تحديد borderType لتطبيقه على جميع العناصر داخل تطبيق مصغّر أو تطبيق النمط لكل عنصر فردي داخل الأداة.

المثال التالي عبارة عن شبكة من عمودين مع صورة في كل شبكة حيث نوع الحد والنمط واللون لتطبيقه على جميع العناصر داخل الشبكة.

المثال التالي عبارة عن شبكة مكونة من 3 أعمدة مع صورة في كل شبكة تم تحديد نمط الحد ونوعه بشكل فردي. الأول تم تحديد حد الصورة على أنّه STROKE. للصورة الثانية حد تم تعريفه على أنه NO_BORDER لم يتم تحديد حدود للصورة الثالثة.

تحديد المشاكل وحلّها

عند تثبيت تطبيق Google Chat أو تعرض card خطأً، تعرض واجهة Chat رسالة مفادها "حدث خطأ". أو "تعذَّرت معالجة طلبك". في بعض الأحيان، لا يمكن واجهة مستخدم Chat لا يعرض أي رسالة خطأ، ولكن يظهر تطبيق Chat أو ينتج عن بطاقة نتيجة غير متوقعة؛ على سبيل المثال، قد لا تظهر رسالة البطاقة موضع الإعلان.

على الرغم من أنه قد لا تظهر رسالة الخطأ في واجهة مستخدم Chat، تتوفر رسائل خطأ وصفية وبيانات السجل لمساعدتك في إصلاح الأخطاء عند تفعيل ميزة تسجيل الأخطاء لتطبيقات Chat للحصول على مساعدة في العرض، وتصحيح الأخطاء وإصلاح الأخطاء، فراجع تحديد مشاكل Google Chat وحلّها.