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

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

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

متن و تصاویر

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

نام افزونه

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

  • از حروف بزرگ و کوچک استفاده کنید.
  • از علائم نگارشی، به خصوص پرانتز، مگر اینکه بخشی از برند شما باشند، خودداری کنید.
  • کوتاه بنویسید—۱۵ کاراکتر یا کمتر بهترین حالت است. نام‌های طولانی ممکن است به طور خودکار در فهرست بازار Google Workspace و جاهای دیگر کوتاه شوند.
  • کلمات «گوگل»، «جیمیل» یا سایر نام‌های محصولات گوگل را در نام افزونه خود وارد نکنید.
  • کلمه «افزونه» را در نام افزونه خود وارد نکنید.
  • اطلاعات نسخه را حذف کنید.

سبک نگارش

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

هنگام نوشتن متن رابط کاربری:

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

اکشن‌های جهانی و کارتی

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

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

پیام‌های خطا

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

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

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

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

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

تصاویر

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

کنترل‌ها

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

دکمه‌ها

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

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

متن تزئین‌شده

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

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

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

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

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

ورودی‌های متنی

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

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

برندسازی

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

در افزونه شما

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

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

در بازار کار گوگل

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

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