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

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

يمكنك تصميم البطاقات ومعاينتها باستخدام أداة إنشاء البطاقات.

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

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

  • حساب على Google Workspace يمكنه الوصول إلى Google Chat
  • هو تطبيق Chat منشور. لإنشاء تطبيق في Chat، اتّبِع quickstart.

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

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

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

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

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

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

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

    يعرض المثال التالي بطاقة تحتوي على تطبيق "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 عنصرًا وعمودين على 6 صفوف.

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

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

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

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

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

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

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

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

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

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

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

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