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

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

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

النص

اسم الإضافة

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

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

نمط الكتابة

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

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

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

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

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

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

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

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

رسائل الخطأ

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

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

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

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

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

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

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

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

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

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

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

مربّعات حوار

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

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

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

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

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

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

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

الأزرار

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

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

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

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

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

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

تُعدّ الاختيارات طريقة رائعة لتقديم قائمة قصيرة بالبدائل.

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

مناطق النص

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

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

حقول النص

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

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

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

في الإضافة

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

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

في المتجر

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

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

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

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

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