راهنمای سبک UI برای افزونه‌های Google Workspace

افزونه‌های Google Workspace باید با سبک و طرح‌بندی برنامه میزبانی که گسترش می‌دهند سازگار باشد. آنها باید UI را به طور طبیعی با استفاده از کنترل ها و رفتارهای آشنا گسترش دهند. دستورالعمل‌های ارائه‌شده در اینجا روش‌های مدیریت متن، تصاویر، کنترل‌ها، و نام تجاری را توضیح می‌دهند که یک تجربه کاربری با کیفیت بالا را ارتقا می‌دهند.

اگر افزونه شما صفحات وب جداگانه‌ای را باز می‌کند که بخشی جدایی ناپذیر از عملکرد برافزا هستند (مانند صفحه تنظیمات افزونه)، مطمئن شوید که آن صفحات وب نیز از این دستورالعمل‌های سبک پیروی می‌کنند.

متن و تصاویر

این بخش به شما می گوید که چگونه از متن و تصاویر به درستی در افزونه خود استفاده کنید.

نام افزونه

باید نام افزونه خود را در مانیفست پروژه و زمانی که افزونه خود را برای انتشار پیکربندی می کنید، تنظیم کنید. این نام در بسیاری از مکان‌ها، مانند فهرست Google Workspace Marketplace و در منوها ظاهر می‌شود. هنگام انتخاب نام:

  • از حروف عنوان استفاده کنید
  • از علائم نگارشی به خصوص پرانتز اجتناب کنید، مگر اینکه بخشی از برند شما باشد.
  • آن را کوتاه نگه دارید - 15 کاراکتر یا کمتر بهترین است. نام‌های طولانی ممکن است به‌طور خودکار در فهرست Google Workspace Marketplace و جاهای دیگر کوتاه شوند.
  • کلمات «Google»، «Gmail» یا نام‌های دیگر محصولات Google را در نام افزونه خود وارد نکنید.
  • کلمه "افزونه" را در نام افزونه خود وارد نکنید.
  • اطلاعات نسخه را کنار بگذارید.

سبک نوشتن

شما نباید زیاد بنویسید. بیشتر اقدامات باید از طریق نماد نگاری، طرح‌بندی و برچسب‌های کوتاه مشخص شوند. اگر متوجه شدید که بخشی از افزونه شما به توضیحات گسترده تری نسبت به برچسب های کوتاه نیاز دارد، بهترین روش ایجاد یک صفحه وب جداگانه برای توصیف افزونه و پیوند به آن است.

هنگام نوشتن متن UI:

  • از حروف جمله استفاده کنید (مخصوصاً برای دکمه‌ها، برچسب‌ها و عملکردهای کارت).
  • متن کوتاه و ساده را بدون اصطلاحات یا کلمات اختصاری ترجیح دهید.

اقدامات جهانی و کارت

اگر از کنش‌های جهانی یا کنش‌های کارتی در برافزای خود استفاده می‌کنید، به عنوان آیتم‌های منو در کارت‌هایی که تعریف می‌کنید ظاهر می‌شوند. می توانید متنی را که در این منوها برای این اعمال استفاده می شود انتخاب کنید. هنگام انتخاب متن مورد استفاده:

  • از متن منو که به سادگی نام افزونه شما را تکرار می کند خودداری کنید.
  • هر آیتم منو را با یک کلمه عملی مانند "Run"، "Configure" یا "Create" شروع کنید.
  • وظیفه را توصیف کنید، نه مؤلفه رابط کاربری را که اکشن نمایش می دهد.
  • اگر اقدام شما یک گردش کار را شروع می کند و هیچ فعل واحدی وجود ندارد که کار آن را توصیف کند، آن را "شروع" نامید.
  • تعداد آیتم های منو را کم نگه دارید تا از مجبور کردن کاربر به پیمایش در لیست بزرگ جلوگیری کنید. اگر اقدامات بیشتری برای اجرا دارید، استفاده از چند کارت با عملکردهای مختلف روی هر کدام را در نظر بگیرید.

پیغام خطا

وقتی مشکلی پیش می‌آید، مهم است که از زبان ساده استفاده کنید. مشکل را از نقطه نظر کاربر توضیح دهید و نحوه رفع آن را پیشنهاد دهید.

  • به کاربر اجازه ندهید استثناهایی را که کد شما ایجاد می کند ببیند. در عوض، از دستورات try...catch برای رهگیری استثناها استفاده کنید، سپس یک پیام خطای کاربرپسند نمایش دهید.
  • قبل از انتشار، بررسی کنید که افزونه شما اطلاعات اشکال زدایی را در رابط کاربری نمایش نمی دهد.

محتوای راهنما

ممکن است بخواهید کارت هایی طراحی کنید که اطلاعات راهنما را نمایش دهند یا عملکرد افزونه را برای کاربر توضیح دهند. اگر محتوای کمکی برای افزونه خود می سازید، به یاد داشته باشید:

  • در صورت امکان، دستورالعمل‌ها را در یک لیست گلوله‌دار یا شماره‌دار نشان دهید. با ارجاع واضح به عناصر نام‌گذاری شده UI، کاربران را به سمت نتیجه نهایی هدایت کنید.
  • اطمینان حاصل کنید که دستورالعمل‌های شما به وضوح همه الزامات را توضیح می‌دهند، مانند تنظیم یک صفحه گسترده به روشی خاص.
  • به راحتی به محتوای کمکی خارجی مانند پشتیبانی از صفحات وب پیوند دهید.

تصاویر

تصاویر استفاده شده در افزونه شما یا یکی از انواع نمادهای داخلی هستند یا یک تصویر میزبان عمومی است که توسط URL مشخص شده است. هنگام استفاده از تصاویر میزبانی شده، مطمئن شوید که برای همه افرادی که ممکن است از افزونه شما استفاده کنند در دسترس باشد.

کنترل ها

این بخش دستورالعمل‌های تجربه کاربری را برای ویجت‌های تعاملی ارائه می‌کند.

دکمه ها

از دکمه ها برای کنترل اقدامات اصلی رابط کاربری خود به جای سایر ویجت ها استفاده کنید.

  • اکثر برچسب های دکمه متنی باید با یک فعل شروع شوند.
  • ردیف دکمه ها در بیشتر موارد باید به سه دکمه یا کمتر محدود شود.

متن تزئین شده

ابزارک های DecoratedText به شما امکان می دهند محتوای متنی را با نمادها، دکمه ها یا سوئیچ ها ارائه دهید.

  • از حروف جمله برای محتوای متن استفاده کنید.
  • متن ویجت DecoratedText در صورتی که در فضای موجود قرار نگیرد کوتاه می شود. به همین دلیل همیشه سعی کنید محتوای متن را تا جایی که می توانید کوتاه نگه دارید.

ورودی های انتخاب

می‌توانید از انواع ویجت‌های ورودی انتخابی در برافزای خود استفاده کنید: جعبه‌های انتخاب کشویی، کادرهای انتخاب، و دکمه‌های رادیویی.

  • زمانی که افراد می توانند چندین گزینه یا هیچ گزینه ای را انتخاب نکنند، از کادرهای انتخاب استفاده کنید. زمانی که دقیقاً یک گزینه باید انتخاب شود از دکمه های رادیویی (یا منوی انتخاب) استفاده کنید. هنگام ارائه فهرست کوتاهی از گزینه‌های جایگزین هنگام تلاش برای صرفه‌جویی در فضا در رابط کاربری، از فهرست‌های کشویی استفاده کنید.
  • از حروف جمله برای متنی که به هر گزینه اختصاص داده شده است استفاده کنید.
  • از استفاده از تغییرات انتخابی برای راه اندازی اقدامات بزرگ و معکوس کردن آن ها اجتناب کنید، زیرا افراد اغلب هنگام انتخاب اشتباه می کنند. در عوض، اضافه کردن دکمه ای را در نظر بگیرید که مقادیر انتخاب فعلی را می خواند و سپس اقدام را فعال می کند.
  • برای کشویی، گزینه ها را بر اساس حروف الفبا یا بر اساس یک طرح منطقی که همه کاربران می توانند درک کنند (مانند ارائه روزهای هفته به ترتیب، از یکشنبه یا دوشنبه) مرتب کنید.
  • تعداد گزینه‌های موجود در ویجت ورودی انتخاب معین را به تعداد معقولی محدود کنید. اگر گزینه های زیادی وجود داشته باشد، ممکن است استفاده از ویجت برای کاربران سخت باشد. در این موارد، گزینه را به دسته های مختلف و ویجت های متعدد تقسیم کنید.

ورودی های متن

ورودی های متن مکانی را برای کاربران فراهم می کند تا داده های رشته ای را وارد کنند.

  • از ورودی متن استفاده نکنید تا کاربر یکی از مجموعه خاصی از ورودی های ممکن را تایپ کند. به جای آن از یک انتخاب کشویی استفاده کنید.
  • از نکات و پیشنهادات برای کمک به کاربر برای وارد کردن متن با قالب و محتوای صحیح استفاده کنید.
  • اگر متنی که باید وارد کنید بیش از چند کلمه باشد از ورودی های متن چند خطی استفاده کنید.

نام تجاری

این بخش دستورالعمل‌های تجربه کاربری را برای افزودن عناصر نام تجاری به رابط افزودنی شما ارائه می‌کند.

در افزونه شما

اگر می‌خواهید نام تجاری را در رابط کاربری افزونه‌تان بگنجانید، آن را مختصر و سبک نگه دارید. این به افراد کمک می کند تا روی عملکرد افزونه شما تمرکز کنند.

  • تمام جنبه های افزونه شما باید از دستورالعمل های برندسازی پیروی کند.
  • کلمه «Google»، «Gmail» یا سایر نام‌های محصول Google را وارد نکنید.
  • نمادهای محصول Google را وارد نکنید، حتی اگر تغییر یافته باشند.
  • کلمه "افزونه" را در متن برند خود وارد نکنید.
  • متن برند نباید بیش از چند کلمه باشد.

در بازار Google Workspace

وقتی افزونه خود را برای انتشار پیکربندی می‌کنید، تعدادی دارایی گرافیکی و متنی برای ایجاد فهرست Google Workspace Marketplace ارائه می‌کنید.

همه جنبه‌های فهرست فروشگاه شما و این دارایی‌ها باید از دستورالعمل‌های برندسازی پیروی کنند.

،

افزونه‌های Google Workspace باید با سبک و طرح‌بندی برنامه میزبانی که گسترش می‌دهند سازگار باشد. آنها باید UI را به طور طبیعی با استفاده از کنترل ها و رفتارهای آشنا گسترش دهند. دستورالعمل‌های ارائه‌شده در اینجا روش‌های مدیریت متن، تصاویر، کنترل‌ها، و نام تجاری را توضیح می‌دهند که یک تجربه کاربری با کیفیت بالا را ارتقا می‌دهند.

اگر افزونه شما صفحات وب جداگانه‌ای را باز می‌کند که بخشی جدایی ناپذیر از عملکرد برافزا هستند (مانند صفحه تنظیمات افزونه)، مطمئن شوید که آن صفحات وب نیز از این دستورالعمل‌های سبک پیروی می‌کنند.

متن و تصاویر

این بخش به شما می گوید که چگونه از متن و تصاویر به درستی در افزونه خود استفاده کنید.

نام افزونه

باید نام افزونه خود را در مانیفست پروژه و زمانی که افزونه خود را برای انتشار پیکربندی می کنید، تنظیم کنید. این نام در بسیاری از مکان‌ها، مانند فهرست Google Workspace Marketplace و در منوها ظاهر می‌شود. هنگام انتخاب نام:

  • از حروف عنوان استفاده کنید
  • از علائم نگارشی به خصوص پرانتز اجتناب کنید، مگر اینکه بخشی از برند شما باشد.
  • آن را کوتاه نگه دارید - 15 کاراکتر یا کمتر بهترین است. نام‌های طولانی ممکن است به‌طور خودکار در فهرست Google Workspace Marketplace و جاهای دیگر کوتاه شوند.
  • کلمات «Google»، «Gmail» یا نام‌های دیگر محصولات Google را در نام افزونه خود وارد نکنید.
  • کلمه "افزونه" را در نام افزونه خود وارد نکنید.
  • اطلاعات نسخه را کنار بگذارید.

سبک نوشتن

شما نباید زیاد بنویسید. بیشتر اقدامات باید از طریق نماد نگاری، طرح‌بندی و برچسب‌های کوتاه مشخص شوند. اگر متوجه شدید که بخشی از افزونه شما به توضیحات گسترده تری نسبت به برچسب های کوتاه نیاز دارد، بهترین روش ایجاد یک صفحه وب جداگانه برای توصیف افزونه و پیوند به آن است.

هنگام نوشتن متن UI:

  • از حروف جمله استفاده کنید (مخصوصاً برای دکمه‌ها، برچسب‌ها و عملکردهای کارت).
  • متن کوتاه و ساده را بدون اصطلاحات یا کلمات اختصاری ترجیح دهید.

اقدامات جهانی و کارت

اگر از کنش‌های جهانی یا کنش‌های کارتی در برافزای خود استفاده می‌کنید، به عنوان آیتم‌های منو در کارت‌هایی که تعریف می‌کنید ظاهر می‌شوند. می توانید متنی را که در این منوها برای این اعمال استفاده می شود انتخاب کنید. هنگام انتخاب متن مورد استفاده:

  • از متن منو که به سادگی نام افزونه شما را تکرار می کند خودداری کنید.
  • هر آیتم منو را با یک کلمه عملی مانند "Run"، "Configure" یا "Create" شروع کنید.
  • وظیفه را توصیف کنید، نه مؤلفه رابط کاربری را که اکشن نمایش می دهد.
  • اگر اقدام شما یک گردش کار را شروع می کند و هیچ فعل واحدی وجود ندارد که کار آن را توصیف کند، آن را "شروع" نامید.
  • تعداد آیتم های منو را کم نگه دارید تا از مجبور کردن کاربر به پیمایش در لیست بزرگ جلوگیری کنید. اگر اقدامات بیشتری برای اجرا دارید، استفاده از چند کارت با عملکردهای مختلف روی هر کدام را در نظر بگیرید.

پیغام خطا

وقتی مشکلی پیش می‌آید، مهم است که از زبان ساده استفاده کنید. مشکل را از نقطه نظر کاربر توضیح دهید و نحوه رفع آن را پیشنهاد دهید.

  • به کاربر اجازه ندهید استثناهایی را که کد شما ایجاد می کند ببیند. در عوض، از دستورات try...catch برای رهگیری استثناها استفاده کنید، سپس یک پیام خطای کاربرپسند نمایش دهید.
  • قبل از انتشار، بررسی کنید که افزونه شما اطلاعات اشکال زدایی را در رابط کاربری نمایش نمی دهد.

محتوای راهنما

ممکن است بخواهید کارت هایی طراحی کنید که اطلاعات راهنما را نمایش دهند یا عملکرد افزونه را برای کاربر توضیح دهند. اگر محتوای کمکی برای افزونه خود می سازید، به یاد داشته باشید:

  • در صورت امکان، دستورالعمل‌ها را در یک لیست گلوله‌دار یا شماره‌دار نشان دهید. با ارجاع واضح به عناصر نام‌گذاری شده UI، کاربران را به سمت نتیجه نهایی هدایت کنید.
  • اطمینان حاصل کنید که دستورالعمل‌های شما به وضوح همه الزامات را توضیح می‌دهند، مانند تنظیم یک صفحه گسترده به روشی خاص.
  • با خیال راحت به محتوای کمکی خارجی، مانند پشتیبانی از صفحات وب، پیوند دهید.

تصاویر

تصاویر استفاده شده در افزونه شما یا یکی از انواع نمادهای داخلی هستند یا یک تصویر میزبان عمومی است که توسط URL مشخص شده است. هنگام استفاده از تصاویر میزبانی شده، مطمئن شوید که برای همه کسانی که ممکن است از افزونه شما استفاده کنند در دسترس باشند.

کنترل ها

این بخش دستورالعمل‌های تجربه کاربری را برای ویجت‌های تعاملی ارائه می‌کند.

دکمه ها

از دکمه ها برای کنترل اقدامات اصلی رابط کاربری خود به جای سایر ویجت ها استفاده کنید.

  • اکثر برچسب های دکمه متنی باید با یک فعل شروع شوند.
  • ردیف دکمه ها در بیشتر موارد باید به سه دکمه یا کمتر محدود شود.

متن تزئین شده

ابزارک های DecoratedText به شما امکان می دهند محتوای متنی را با نمادها، دکمه ها یا سوئیچ ها ارائه دهید.

  • از حروف جمله برای محتوای متن استفاده کنید.
  • متن ویجت DecoratedText در صورتی که در فضای موجود قرار نگیرد کوتاه می شود. به همین دلیل همیشه سعی کنید محتوای متن را تا جایی که می توانید کوتاه نگه دارید.

ورودی های انتخاب

می‌توانید از انواع ویجت‌های ورودی انتخابی در برافزای خود استفاده کنید: جعبه‌های انتخاب کشویی، کادرهای انتخاب، و دکمه‌های رادیویی.

  • زمانی که افراد می توانند چندین گزینه را انتخاب کنند یا اصلاً هیچ گزینه ای نداشته باشند، از کادرهای تأیید استفاده کنید. زمانی که دقیقاً یک گزینه باید انتخاب شود، از دکمه های رادیویی (یا منوی انتخاب) استفاده کنید. هنگام ارائه فهرست کوتاهی از گزینه‌های جایگزین هنگام تلاش برای صرفه‌جویی در فضا در رابط کاربری، از فهرست‌های کشویی استفاده کنید.
  • از حروف جمله برای متنی که به هر گزینه اختصاص داده شده است استفاده کنید.
  • از استفاده از تغییرات انتخابی برای راه اندازی اقدامات بزرگ و معکوس کردن آن ها اجتناب کنید، زیرا افراد اغلب هنگام انتخاب اشتباه می کنند. در عوض، اضافه کردن دکمه ای را در نظر بگیرید که مقادیر انتخاب فعلی را می خواند و سپس اقدام را فعال می کند.
  • برای کشویی، گزینه ها را بر اساس حروف الفبا یا بر اساس یک طرح منطقی که همه کاربران می توانند درک کنند (مانند ارائه روزهای هفته به ترتیب، از یکشنبه یا دوشنبه) مرتب کنید.
  • تعداد گزینه‌های موجود در ویجت ورودی انتخاب معین را به تعداد معقولی محدود کنید. اگر گزینه های زیادی وجود داشته باشد، ممکن است استفاده از ویجت برای کاربران سخت باشد. در این موارد، گزینه را به دسته های مختلف و ویجت های متعدد تقسیم کنید.

ورودی های متن

ورودی های متن مکانی را برای کاربران فراهم می کند تا داده های رشته ای را وارد کنند.

  • از ورودی متن استفاده نکنید تا کاربر یکی از مجموعه خاصی از ورودی های ممکن را تایپ کند. به جای آن از یک انتخاب کشویی استفاده کنید.
  • از نکات و پیشنهادات برای کمک به کاربر برای وارد کردن متن با قالب و محتوای صحیح استفاده کنید.
  • اگر متنی که باید وارد کنید بیش از چند کلمه باشد از ورودی های متن چند خطی استفاده کنید.

نام تجاری

این بخش دستورالعمل‌های تجربه کاربری را برای افزودن عناصر نام تجاری به رابط افزودنی شما ارائه می‌کند.

در افزونه شما

اگر می‌خواهید نام تجاری را در رابط کاربری افزونه‌تان بگنجانید، آن را مختصر و سبک نگه دارید. این به افراد کمک می کند تا روی عملکرد افزونه شما تمرکز کنند.

  • تمام جنبه های افزونه شما باید از دستورالعمل های برندسازی پیروی کند.
  • کلمه «Google»، «Gmail» یا سایر نام‌های محصول Google را وارد نکنید.
  • نمادهای محصول Google را وارد نکنید، حتی اگر تغییر یافته باشند.
  • کلمه "افزونه" را در متن برند خود وارد نکنید.
  • متن برند نباید بیش از چند کلمه باشد.

در بازار Google Workspace

وقتی افزونه خود را برای انتشار پیکربندی می‌کنید، تعدادی دارایی گرافیکی و متنی برای ایجاد فهرست Google Workspace Marketplace ارائه می‌کنید.

همه جنبه‌های فهرست فروشگاه شما و این دارایی‌ها باید از دستورالعمل‌های برندسازی پیروی کنند.