دليل أسلوب واجهة المستخدم لإضافات Google Workspace
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يجب أن تكون إضافات Google Workspace متوافقة مع
نمط وتنسيق
التطبيق المضيف
الذي تضيف إليه ميزات. يجب أن توسّع هذه العناصر واجهة المستخدم
بشكل طبيعي باستخدام عناصر التحكّم والسلوكيات المألوفة. توضّح الإرشادات الواردة
هنا طرق التعامل مع النصوص والصور وعناصر التحكّم والعلامات التجارية التي تساهم في تحسين
تجربة المستخدم العالية الجودة.
إذا كانت الإضافة تفتح صفحات ويب منفصلة تشكّل جزءًا لا يتجزأ من
عمل الإضافة (مثل صفحة الإعدادات للإضافة)، تأكَّد من أنّ صفحات الويب هذه
تلتزم أيضًا بإرشادات التصميم هذه.
النصوص والصور
يوضّح لك هذا القسم كيفية استخدام النصوص والصور بشكلٍ صحيح في الإضافة.
تجنَّب علامات الترقيم، خاصةً الأقواس، ما لم تكن جزءًا من علامتك التجارية.
احرص على أن يكون العنوان قصيرًا، ويُفضّل أن يتألّف من 15 حرفًا أو أقل. قد يتم اقتطاع الأسماء الطويلة
تلقائيًا في بطاقة بيانات Google Workspace Marketplace وفي أماكن أخرى.
لا تُدرِج الكلمات "Google" أو "Gmail" أو أسماء منتجات Google الأخرى
في اسم الإضافة.
لا تُدرِج كلمة "إضافة" في اسم الإضافة.
تجنَّب تضمين معلومات الإصدار.
أسلوب الكتابة
من المفترض ألا تحتاج إلى كتابة الكثير من المحتوى. يجب توضيح معظم الإجراءات من خلال
الرموز والتصميم والعناوين القصيرة. إذا لاحظت أنّ جزءًا من الإضافة يحتاج إلى شرح أكثر تفصيلاً مما يمكن أن تقدّمه التصنيفات القصيرة، من أفضل الممارسات إنشاء صفحة ويب منفصلة تصف الإضافة وتضمّ رابطًا يؤدي إليها.
عند كتابة نص واجهة المستخدم:
استخدِم أسلوب الجملة (خاصةً للأزرار والتصنيفات وإجراءات البطاقات).
يُفضَّل استخدام نص قصير وبسيط بدون مصطلحات أو اختصارات.
الإجراءات العامة وإجراءات البطاقات
إذا كنت تستخدم الإجراءات الشاملة
أو إجراءات البطاقات في
إضافة، ستظهر كعناصر قائمة في البطاقات
التي تحدّدها. يمكنك اختيار النص المستخدَم في هذه القوائم لهذه
الإجراءات. عند اختيار النص الذي تريد استخدامه:
تجنَّب استخدام نص في القائمة يكرر اسم الإضافة ببساطة.
ابدأ كل عنصر من عناصر القائمة بكلمة إجراء، مثل "تشغيل" أو "ضبط" أو
"إنشاء".
يجب وصف المهمة، وليس عنصر واجهة المستخدم الذي يعرض الإجراء.
إذا كان الإجراء يبدأ سير عمل ولا يتوفّر فعل واحد يصف
ما يفعله، يمكنك تسميته "بدء".
يجب إبقاء عدد عناصر القائمة صغيرًا لتجنُّب إجبار المستخدم على التمرير
أعلى أو أسفل قائمة كبيرة. إذا كان لديك المزيد من الإجراءات لتنفيذها، ننصحك باستخدام
بطاقات متعدّدة تتضمّن إجراءات مختلفة في كلّ منها.
رسائل الخطأ
عند حدوث مشكلة، من المهم استخدام لغة بسيطة. شرح
المشكلة من وجهة نظر المستخدم، واقتراح كيفية حلّها
لا تسمح للمستخدم برؤية أي استثناءات يُرسِلها الرمز البرمجي. بدلاً من ذلك،
استخدِم عبارات try...catch لرصد الاستثناءات، ثم عرض
رسالة خطأ سهلة الاستخدام.
قبل نشر الإضافة، تأكَّد من أنّها لا تعرض معلومات تصحيح الأخطاء
في واجهة المستخدم.
محتوى المساعدة
يمكنك تصميم بطاقات تعرض معلومات مساعدة أو توضّح للمستخدم كيفية استخدام الإضافة. إذا أنشأت محتوى مساعدة لإضافة
، احرص على ما يلي:
اعرض التعليمات في قائمة نقطية أو ذات تعداد رقمي كلما أمكن ذلك. وضِّح للمستخدمين الخطوات التي يجب اتّباعها للوصول إلى النتيجة النهائية، مع تضمين إشارات واضحة إلى عناصر واجهة المستخدم المُسمّاة.
احرص على أن توضّح تعليماتك بوضوح أي متطلبات، مثل إعداد جدول بيانات بطريقة معيّنة.
يمكنك إضافة روابط إلى محتوى مساعدة خارجي، مثل صفحات الويب الداعمة.
الصور
الصور المستخدَمة في الإضافة هي إما أحد
أنواع الرموز المضمّنة
أو صورة مستضافة بشكل علني يتم تحديدها من خلال عنوان URL. عند استخدام صور مستضافة،
تأكّد من أنّها متاحة لجميع المستخدمين الذين قد يستخدمون الإضافة.
يتم اقتطاع نص أداة DecoratedText إذا تعذّر وضعه في
المساحة المتوفّرة. لهذا السبب، ننصحك دائمًا بمحاولة إبقاء محتوى النص قصيرًا بقدر الإمكان.
مدخلات الاختيار
يمكنك استخدام مجموعة متنوعة من
تطبيقات مصغّرة لإدخال خيارات
في الإضافة: مربّعات اختيار منسدلة ومربّعات اختيار وأزرار اختيار.
استخدِم مربّعات الاختيار عندما يمكن للمستخدمين اختيار خيارات متعددة أو عدم اختيار أي خيار على الإطلاق.
استخدِم أزرار الاختيار (أو قائمة اختيار) عندما يكون عليك تحديد خيار واحد بالضبط.
استخدِم القوائم المنسدلة عند تقديم قائمة قصيرة بالبدائل أثناء محاولة
توفير مساحة في واجهة المستخدم.
استخدِم حالة أحرف الجملة للنص الذي تمّ تعيينه لكل خيار.
تجنَّب استخدام تغييرات الاختيار لبدء إجراءات كبيرة يصعب التراجع عنها،
لأنّ المستخدمين غالبًا ما يرتكبون أخطاء عند إجراء الاختيارات. بدلاً من ذلك، ننصحك
بإضافة زر يقرأ قيم الاختيار الحالية ثم يشغِّل
الإجراء.
بالنسبة إلى القوائم المنسدلة، يجب ترتيب الخيارات أبجديًا أو وفقًا لترتيب منطقي
يمكن لجميع المستخدمين فهمه (مثل عرض أيام الأسبوع
بالترتيب، بدءًا من الأحد أو الاثنين).
حصر عدد الخيارات في مربّع اختيار معيّن
بعدد معقول إذا كان هناك عدد كبير جدًا من الخيارات، قد يجد المستخدمون صعوبة في استخدام التطبيق المصغّر. في هذه الحالات، ننصحك بتقسيم الخيار
إلى فئات مختلفة وتطبيقات مصغّرة متعددة.
إدخالات النصوص
توفّر مدخلات النصوص مكانًا للمستخدمين لإدخال بيانات السلاسل.
لا تستخدِم حقل إدخال نصيًا لجعل المستخدم يكتب أحد مجموعة محدّدة من
الإدخالات المحتملة. استخدِم قائمة منسدلة بدلاً من ذلك.
استخدِم التلميحات والاقتراحات لمساعدة المستخدم في إدخال النص بالشكل والمحتوى الصحيحَين.
استخدِم مدخلات النصوص المتعدّدة الأسطر إذا كان النص المطلوب إدخاله يتجاوز بضع
كلمات.
العلامة التجارية
يوفّر هذا القسم إرشادات حول تجربة المستخدم لإضافة عناصر العلامة التجارية
إلى واجهة الإضافة.
في الإضافة
إذا أردت تضمين العلامة التجارية في واجهة المستخدم للإضافة، احرص على أن تكون موجزة وخفيفة.
يساعد ذلك المستخدمين في التركيز على وظائف الإضافة.
تاريخ التعديل الأخير: 2024-12-22 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2024-12-22 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eGoogle Workspace add-ons should seamlessly integrate with the host application's style and layout using familiar controls and behaviors.\u003c/p\u003e\n"],["\u003cp\u003eAdd-on names should be concise, using title case, avoiding punctuation and Google product names, and kept to 15 characters or less.\u003c/p\u003e\n"],["\u003cp\u003eUI text should be minimal, using sentence case, simple language, and clear action verbs in menus and buttons.\u003c/p\u003e\n"],["\u003cp\u003eBranding should be subtle within the add-on, adhering to Google's branding guidelines, and avoiding Google product names or icons.\u003c/p\u003e\n"],["\u003cp\u003eError messages should be user-friendly, providing clear explanations and solutions instead of technical jargon or exceptions.\u003c/p\u003e\n"]]],["Add-ons must match the host application's style and extend the UI naturally. Key actions include: using title case for the add-on's name (15 characters or less), and avoiding punctuation, Google product names, \"add-on\", and version info. UI text should be in sentence case, short, and jargon-free, with menu items starting with action words. Error messages should use plain language. Images should be accessible, buttons should primarily use verbs, and text inputs should employ hints. Branding must be brief, adhering to specific guidelines.\n"],null,["# UI style guide for Google Workspace add-ons\n\nGoogle Workspace add-ons should be consistent with the\nstyle and layout of the\n[host application](/workspace/add-ons/guides/glossary#host_or_host_application)\nthey extend. They should extend the UI\nnaturally by using familiar controls and behaviors. The guidelines presented\nhere describe ways of handling text, images, controls, and branding that promote\na high-quality user experience.\n\nIf your add-on opens separate web pages that are an integral part of the add-on's\noperation (such as a settings page for the add-on), make sure those web pages\nalso follow these style guidelines.\n\nText and images\n---------------\n\nThis section tells you how to properly use text and images in your add-on.\n\n### Add-on name\n\nYou must set your add-on's name in its project\n[manifest](/workspace/add-ons/concepts/workspace-manifests) and when you\n[configure your add-on for publication](/workspace/marketplace/sdk#text_assets).\nThe name appears in many places, such as the [Google Workspace Marketplace](https://workspace.google.com/marketplace/)\nlisting and within menus. When choosing a name:\n\n- Use title case.\n- Avoid punctuation, especially parentheses, unless part of your brand.\n- Keep it short---15 or fewer characters is best. Long names may be automatically truncated in the Google Workspace Marketplace listing and elsewhere.\n- Don't include the words \"Google\", \"Gmail\", or other Google product names in your add-on name.\n- Don't include the word \"add-on\" in your add-on name.\n- Leave out version information.\n\n### Writing style\n\nYou shouldn't need to write much. Most actions should be made clear through\niconography, layout, and short labels. If you find a portion of your add-on\nneeds more extensive explanation than short labels can provide, it's a best\npractice to create a separate web page describing your add-on and link to it.\n\nWhen writing UI text:\n\n- Use sentence case (especially for buttons, labels, and card actions).\n- Prefer short, simple text without jargon or acronyms.\n\n### Universal and card actions\n\nIf you use [universal actions](/workspace/add-ons/how-tos/universal-actions)\nor [card actions](/apps-script/reference/card-service/card-action) in your\nadd-on, they appear as menu items in the [cards](/workspace/add-ons/concepts/cards)\nyou define. You can choose the text that is used in these menus for these\nactions. When choosing the text to use:\n\n- Avoid menu text that simply repeats your add-on's name.\n- Start each menu item with an action word such as \"Run\", \"Configure\", or \"Create\".\n- Describe the task, not the UI component that the action displays.\n- If your action begins a workflow and there's no single verb that describes what it does, call it \"Start\".\n- Keep the number of menu items small to avoid forcing the user to scroll through a large list. If you have more actions to implement, consider using multiple cards with different actions on each.\n\n### Error messages\n\nWhen something goes wrong, it's important to use plain language. Explain the\nproblem from the user's standpoint, and suggest how to fix it.\n\n- Don't allow the user to see any exceptions your code throws. Instead, use `try...catch` statements to intercept exceptions, then display a user-friendly error message.\n- Before you publish, check that your add-on doesn't display debug information in the UI.\n\n### Help content\n\nYou may wish to design cards that display help information or explain the\noperation of the add-on to the user. If you do build help content for your\nadd-on, remember to:\n\n- When possible, show instructions in a bulleted or numbered list. Walk users through to the end result, with clear references to named UI elements.\n- Make sure your instructions clearly explain any requirements, like setting up a spreadsheet in a certain way.\n- Feel free to link to external help content, such as supporting web pages.\n\n### Images\n\nImages used in your add-on are either one of the\n[built-in icon types](/apps-script/reference/card-service/icon)\nor a publicly hosted image specified by a URL. When using hosted images,\nbe sure that they are accessible by everyone who may use your add-on.\n\nControls\n--------\n\nThis section provide user experience guidelines for\n[interactive widgets](/workspace/add-ons/concepts/widgets#user_interaction_widgets).\n\n### Buttons\n\nUse buttons to control your user interface's main actions rather than\nother widgets.\n\n- Most text button labels should start with a verb.\n- Button rows should be limited to three or fewer buttons in most cases.\n\n### DecoratedText\n\n[DecoratedText widgets](/workspace/add-ons/concepts/widgets#informational_widgets)\nlet you present text content with icons, buttons or switches.\n\n- Use sentence case for the text content.\n- The text of a DecoratedText widget is truncated if it cannot fit into the available space. For this reason, always try to keep the text content as short as you can.\n\n### Selection inputs\n\nYou can use a variety of\n[selection input widgets](/workspace/add-ons/concepts/widgets#user_interaction_widgets)\nin your add-on: drop-down selection boxes, checkboxes, and radio buttons.\n\n- Use checkboxes when people can select multiple options, or no option at all. Use radio buttons (or a select menu) when exactly one option must be selected. Use dropdowns when providing a short list of alternatives while trying to save space in the UI.\n- Use sentence case for the text that is assigned to each option.\n- Avoid using selection changes to trigger major, hard-to-reverse actions, because people often make mistakes when making selections. Instead, consider adding a button that reads the current selection values and then triggers the action.\n- For dropdowns, sort the options alphabetically or by a logical scheme that all users can understand (such as presenting the days of the week in order, starting from Sunday or Monday).\n- Restrict the number of options in a given selection input widget to a reasonable number. If there are too many options, users may find it hard to use the widget. In those cases, consider breaking the option into different categories and multiple widgets.\n\n### Text inputs\n\nText inputs provide a place for users to enter string data.\n\n- Don't use a text input to make the user type one of a specific set of possible entries. Use a dropdown select instead.\n- Use hints and suggestions to help the user enter text with the correct format and content.\n- Use multiline text inputs if the text to be entered is more than a few words.\n\nBranding\n--------\n\nThis section provide user experience guidelines for adding branding elements\nto your add-on interface.\n\n### In your add-on\n\nIf you'd like to include branding in your add-on UI, keep it brief and light.\nThis helps people focus on your add-on functionality.\n\n- All aspects of your add-on must follow the [branding guidelines](https://developer.chrome.com/webstore/branding).\n- Don't include the word \"Google\", \"Gmail\", or other Google product names.\n- Don't include Google product icons, even if they are altered.\n- Don't include the word \"add-on\" in your branding text.\n- Branding text should be no more than a few words.\n\n### In the Google Workspace Marketplace\n\nWhen you configure your add-on for publication,\nyou provide a number of graphical and text assets to build the\nGoogle Workspace Marketplace listing.\n\nAll aspects of your store listing and these assets must follow the\n[branding guidelines](https://developer.chrome.com/webstore/branding)."]]
