دليل نمط واجهة المستخدم لإضافات المحرر

إضافات أدوات التحرير تنشئ واجهات مستخدم (القوائم والأشرطة الجانبية ومربعات الحوار) باستخدام خدمة HTML في "برمجة التطبيقات". نظرًا لأنه يتم تطوير الواجهات في HTML وCSS، فهي قابلة للتخصيص بدرجة عالية. ومع ذلك، عند إنشاء واجهة الإضافة الخاصة بك، يجب عليك تصميمها لتوفر تجربة مستخدم رائعة.

وتعمل أفضل الإضافات على توسيع كل محرر بشكل طبيعي باستخدام عناصر التحكم والسلوكيات المألوفة. عند إنشاء إضافة جديدة:

  • استخدِم حزمة CSS للإضافات في صفحات خدمة HTML.
  • إذا كانت لديك شكوك بشأن التصميم، يمكنك البحث عن مربّع حوار أو شريط جانبي مشابه في المحرّر ومطابقته، أو يمكنك الرجوع إلى مقالة البدء السريع للإضافة.
  • اتبع دليل الأسلوب هذا لإنشاء تجربة سلسة.

النص

اسم الإضافة

يجب تحديد اسم الإضافة عند نشرها. ويظهر الاسم في عدة أماكن، مثل متجر الإضافات وضمن القوائم.

  • استخدِم حالة أحرف العنوان.
  • تجنَّب علامات الترقيم، وخاصةً الأقواس، ما لم تكن جزءًا من علامتك التجارية.
  • يجب أن يكون العنوان قصيرًا، الأفضل هو 30 حرفًا أو أقل. قد يتم اقتطاع الأسماء الطويلة تلقائيًا.
  • لا تُدرِج اسم منتج Google الذي تؤدي الإضافة إليه (أو استخدِم الكلمة Google).
  • ترك معلومات الإصدار.
  • تأكَّد من أنّ الاسم المنشور للإضافة هو نفسه اسم ملف مشروع النصوص البرمجية. سيظهر اسم المشروع في مربّع حوار التفويض.
الإجراءات غير المقترَحة الإجراءات المقترَحة
أسماء الإضافات غير الصالحة الأسماء الجيدة للإضافات

أسلوب الكتابة

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

عند كتابة نص واجهة المستخدم:

  • استخدم حالة أحرف الجملة (خاصة بالنسبة إلى الأزرار والتسميات وعناصر القائمة).
  • تفضيل نص قصير وبسيط بدون لغة اصطلاحية أو اختصارات.
الإجراءات غير المقترَحة الإجراءات المقترَحة

نصيحة ما بعد التثبيت

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

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

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

  • تُعدّ القائمة جزءًا أساسيًا من كيفية تحكم المستخدمين في الإضافة، لذا صمِّم هيكلها وصياغتها بعناية.
  • تجنَّب استخدام عناصر القائمة التي تكرِّر اسم الإضافة ببساطة. بدلاً من ذلك، ابدأ بكلمة إجراء.
  • إذا بدأ عنصر القائمة الرئيسي سير العمل ولم يكن هناك فعل واحد يصف ما يفعله، أطلق عليه اسم "Start" (بدء). يُستخدم هذا النمط في البدء السريع لإضافة "مستندات Google".
  • ما لم تكن قائمتك تحتوي على أكثر من ستة عناصر، حاول عدم استخدام القوائم الفرعية. يمكن أن تكون صعبة ويصعب اختيارها.
  • صِف المهمة، وليس مكون واجهة المستخدم الذي يعرضه عنصر القائمة.
الإجراءات غير المقترَحة الإجراءات المقترَحة
تصنيفات عناصر القائمة غير صالحة تصنيفات عناصر القائمة الجيدة

رسائل الخطأ

عندما يحدث خطأ ما، من المهم استخدام لغة بسيطة. اشرح المشكلة من وجهة نظر المستخدم، واقترح كيفية حلها.

  • لا تسمح للمستخدم بالاطّلاع على أي استثناءات تُطرحها الرمز البرمجي. بدلاً من ذلك، يمكنك استخدام عبارات try...catch لاعتراض الاستثناءات، ثم عرض رسالة خطأ للمستخدم تتضمن نصًا مضمّنًا تم تصميمه في فئة error من حزمة CSS للإضافات أو مربّع حوار التنبيه.
  • قبل نشر الإضافة، تأكَّد من أنّها لا تسجّل معلومات تصحيح الأخطاء في وحدة تحكّم JavaScript، لذا استخدِم تسجيل Stackdriver بدلاً من ذلك.
الإجراءات غير المقترَحة الإجراءات المقترَحة
رسالة خطأ غير صالحة رسالة خطأ جيدة

محتوى المساعدة

تتضمن كل قائمة للإضافات مربع حوار مساعدة تلقائي. إذا قدمت عنوان URL للمساعدة عند النشر، فإن زر "مزيد من المعلومات" يؤدي إلى تلك الصفحة. ما لم تكن الوظيفة الإضافية واضحة، يُرجى تقديم صفحة تشرح كيفية استخدامها.

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

واجهات المستخدم المخصّصة

يمكن التحكّم بشكل كامل في بعض إضافات المحرِّر البسيطة من خلال القائمة الخاصة بها، إلا أنّ معظمها يعرض شريطًا جانبيًا أو مربّع حوار يتضمّن محتوى مخصصًا.

  • الأشرطة الجانبية هي الأفضل للأدوات الدائمة التي من المرجح أن يستخدمها الأشخاص بشكل متكرر أثناء الإشارة إلى محتوى المستند أو جدول البيانات الخاص بهم.
  • تناسب مربّعات الحوار الأدوات التي تُستخدم لمرة واحدة وصفحات الإعدادات والرسائل المهمة.

نص واجهة المستخدم

في أي مربّع حوار أو شريط جانبي، افترض أنّ المستخدمين يقرأون تصنيفات العناوين والأزرار فقط. هل لا يزال بإمكانهم اكتشاف ما تفعله واجهتك واتخاذ خيار جيد؟

  • استخدم تسميات العنوان والأزرار التي تكون مستقلة.
  • تجنب الكتل الطويلة من النص الوصفي.

مربّعات حوار

تعد مربعات الحوار رائعة للأدوات التي يستخدمها الأشخاص لمرة واحدة ثم المضي قدمًا. على سبيل المثال، إذا كانت الوظيفة الإضافية تتيح للأشخاص إدراج رسم، فيمكنك عرض مربع حوار يحتوي على خيارات يمكن إدراجه* ثم إغلاق مربع الحوار عند إدراج الرسم. تُفيد مربعات الحوار أيضًا في عرض إعدادات الإضافة أو لتوصيل رسالة مهمة.

  • لا تفتح مربع حوار (بما في ذلك تنبيه أو مطالبة) من مربع حوار آخر، اعرض واحدًا تلو الآخر فقط.
  • بالنسبة لعنوان مربع الحوار، استخدم كلمة أو عبارة قصيرة، تسبق الكلمة الأكثر أهمية.
  • يجب أن تكون تسميات الأزرار مرتبطة بعنوان مربع الحوار.
  • أفضّل زرَّين، عادةً إجراء أساسي و "إلغاء". بالنسبة للحالات الخاصة التي تتطلب زرًا ثالثًا، ضع في اعتبارك أسفل الجانب الأيمن.
  • ضع الأزرار في أسفل الجانب الأيمن من مربع الحوار. يجب أن يكون الزر الأساسي الأزرق على اليسار، مع أي أزرار ثانوية رمادية على اليمين.
الإجراءات غير المقترَحة الإجراءات المقترَحة
عنوان مربّع الحوار غير صالح. عنوان مربع حوار جيد

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

  • قد يكون لدى المستخدمين إضافات أخرى بأشرطة جانبية خاصة بهم. إذا حاولت إضافتان فتح الأشرطة الجانبية في وقت واحد، فسيتم عرض واحدة فقط.
  • لا تعرض شريطًا جانبيًا أو مربّع حوار عند فتح مستند لأول مرة.
  • لا يمكن فتح الأشرطة الجانبية أو مربعات الحوار إلا للإضافات التي تعمل في AuthMode.FULL. يمكنك استخدام عنصر قائمة لفتح شريط جانبي لأن هذا يطالب المستخدم بتقديم التفويض الكامل.

عناصر التحكّم

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

توفر وثائق حزمة CSS للإضافات نموذجًا للترميز لكل نوع من أنواع عناصر التحكم أدناه.

الأزرار

استخدِم الأزرار للتحكّم في الإجراءات الرئيسية لواجهة المستخدم بدلاً من الروابط العادية أو العناصر الأخرى.

  • تجنب عرض أكثر من زر واحد باللون الأزرق أو الأحمر أو الأخضر في كل مرة. قد تظهر الأزرار الرمادية بشكل متكرر.
  • يجب أن تكون معظم تسميات الأزرار في حالة جملة وتبدأ بفعل. يجب أن تستخدم الأزرار الحمراء، عادةً لإنشاء الإجراءات، أحرفًا كبيرة.
الإجراءات غير المقترَحة الإجراءات المقترَحة

مربّعات الاختيار وأزرار الاختيار

يمكنك استخدام مربّعات الاختيار عندما يتمكّن المستخدمون من تحديد خيارات متعددة أو عدم تحديد أي خيار على الإطلاق. استخدم أزرار الاختيار (أو قائمة تحديد) عندما يجب تحديد خيار واحد بالضبط.

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

اختيار القوائم

تعد التحديدات طريقة رائعة لتقديم قائمة قصيرة من البدائل.

  • فرز الخيارات أبجديًا أو حسب مخطط منطقي يمكن لجميع المستخدمين فهمه (مثل أيام الأسبوع، بدءًا من الأحد).
  • إذا كانت القائمة طويلة جدًا، يمكنك استخدام عنصر تحكُّم مختلف. على سبيل المثال، يمكنك عرض قائمة قابلة للتمرير لمنح القائمة مساحة أكبر وتسهيل التنقل.

مناطق النص

إذا احتاج المستخدمون إلى كتابة أكثر من بضع كلمات، استخدِم منطقة نص.

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

حقول نصية

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

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

العلامة التجارية

في إضافتك

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

  • يجب أن تتّبع جميع جوانب الإضافة إرشادات العلامة التجارية.
  • لا تُدرِج كلمة "Google" أو تستخدم رموز منتجات Google.
  • يجب ألا يزيد النص عن بضع كلمات وأن يكون نمطًا في فئة gray من حزمة CSS للإضافات.
  • يجب أن تكون الرسومات على خلفية بيضاء وبحجم لا يزيد عن 200 بكسل × 60 بكسل.
  • بالنسبة إلى مربّعات الحوار، يجب أن تكون العلامة التجارية في الزاوية السفلية اليسرى.
  • بالنسبة للأشرطة الجانبية، يمكن أن تظهر العلامة التجارية في الأعلى أو الأسفل.

في المتجر

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

تسهيل الاستخدام

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

  • تأكّد من إمكانية الانتقال إلى جميع عناصر التحكّم في واجهة المستخدم باستخدام لوحة المفاتيح. يمكنك إضافة tabindex=0 إلى عناصر التحكم المخصصة (مثل تلك التي تم إنشاؤها باستخدام <div>) حتى يتمكن الأشخاص من النقر عليها. ضع في اعتبارك ما إذا كان يجب دعم مفاتيح أخرى أيضًا، مثل الأسهم الخاصة بالقائمة.
  • قد يستخدم بعض المستخدمين قارئ شاشة مع الإضافة. وبالتالي، يجب أن تتضمن الصور سمة alt، ويجب أن تشتمل عناصر التحكّم المخصّصة على سمات ARIA لوصف استخدامها.
  • لا تعتمد فقط على اللون للتعبير عن الحالة. استخدم الأيقونات والنص أيضًا.

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