افزونه‌های ویرایشگر با استفاده از سرویس HTML Apps Script، رابط‌های کاربری (منوها، نوارهای کناری و گفتگوها) را ایجاد می‌کنند. از آنجایی که رابط ها در HTML و CSS توسعه یافته اند، بسیار قابل تنظیم هستند. با این حال، هنگام ساخت رابط افزودنی خود، باید آن را طوری طراحی کنید که یک تجربه کاربری عالی ارائه دهد.
بهترین افزونه ها با استفاده از کنترل ها و رفتارهای آشنا، هر ویرایشگر را به طور طبیعی گسترش می دهند. هنگام ساخت یک افزونه جدید:
- از بسته CSS افزودنی در صفحات خدمات HTML خود استفاده کنید.
- هنگامی که در مورد طراحی شک دارید، یک گفتگو یا نوار کناری مشابه را در ویرایشگر پیدا کنید و آن را مطابقت دهید، یا به یک شروع سریع افزودنی مراجعه کنید.
- این راهنمای سبک را دنبال کنید تا یک تجربه بدون درز ایجاد کنید.
متن
نام افزونه
هنگام انتشار باید نام افزونه خود را تنظیم کنید. این نام در بسیاری از مکان‌ها مانند فروشگاه افزونه‌ها و درون منوها ظاهر می‌شود.
- از حروف عنوان استفاده کنید
- از علائم نگارشی به خصوص پرانتز اجتناب کنید، مگر اینکه بخشی از برند شما باشد.
- کوتاه نگه دارید - 30 کاراکتر یا کمتر بهترین است. نام های طولانی ممکن است به طور خودکار کوتاه شوند.
- نام محصول Google را که افزونه برای آن است وارد نکنید (یا از کلمه Google استفاده کنید).
- اطلاعات نسخه را کنار بگذارید.
- مطمئن شوید که نام منتشر شده افزونه با نام فایل پروژه اسکریپت یکسان باشد. نام پروژه در گفتگوی مجوز ظاهر می شود.
| نکن | انجام دادن |
|---|---|
 |  |
سبک نوشتن
شما نباید زیاد بنویسید. بیشتر اقدامات باید از طریق نماد نگاری، طرح‌بندی و برچسب‌های کوتاه مشخص شوند. اگر متوجه شدید که بخشی از افزونه شما به توضیحات گسترده تری نسبت به برچسب های کوتاه نیاز دارد، بهترین روش ایجاد یک صفحه وب جداگانه برای توصیف افزونه و پیوند به آن است.
هنگام نوشتن متن UI:
- از حروف جمله استفاده کنید (مخصوصا برای دکمه ها، برچسب ها و آیتم های منو).
- متن کوتاه و ساده را بدون اصطلاحات یا کلمات اختصاری ترجیح دهید.
| نکن | انجام دادن |
|---|---|
نکته بعد از نصب
نکته بعد از نصب شما بلافاصله پس از نصب افزونه شما ظاهر می شود و همچنین در راهنما نشان داده می شود. چند جمله برای کمک به کاربران برای شروع سریع دارید.
- با یک کلمه عملی شروع کنید.
- اولین مرحله برای استفاده از افزونه خود را شرح دهید.
- اگر یک رابط کاربری اصلی مانند نوار کناری دارید، نحوه باز کردن آن را توضیح دهید.
- افزونه خود را در اینجا تبلیغ نکنید - قبلاً نصب شده است.
| نکن | انجام دادن |
|---|---|
 |  |
آیتم های منو
برخلاف پروژه‌های معمولی Apps Script، افزونه‌ها در ویرایشگر اسکریپت یا مدیر اسکریپت ظاهر نمی‌شوند. کاربران نمی توانند اسکریپت های افزودنی را مستقیماً اجرا کنند. در عوض، هر افزونه‌ای در منوی افزونه‌ها جای می‌گیرد. منو (و احتمالاً یک گفتگو یا نوار کناری ) به کاربران امکان می دهد با افزونه تعامل داشته باشند.
- منو بخش مهمی از نحوه کنترل افزونه شما توسط کاربران است، بنابراین ساختار و جمله بندی آن را با دقت طراحی کنید.
- از آیتم های منو که به سادگی نام افزونه شما را تکرار می کنند خودداری کنید. در عوض، با یک کلمه عملی شروع کنید.
- اگر آیتم منوی اصلی شما یک گردش کار را شروع می کند و هیچ فعل واحدی وجود ندارد که کار آن را توصیف کند، آن را "شروع" بنامید. این الگو در راه اندازی سریع افزونه Docs استفاده می شود.
- مگر اینکه منوی شما بیش از شش مورد داشته باشد، سعی کنید از منوهای فرعی استفاده نکنید. انتخاب آنها ممکن است سخت و دشوار باشد.
- وظیفه را توصیف کنید، نه مؤلفه رابط کاربری را که آیتم منو نمایش می دهد.
| نکن | انجام دادن |
|---|---|
 |  |
پیغام خطا
وقتی مشکلی پیش می‌آید، مهم است که از زبان ساده استفاده کنید. مشکل را از نقطه نظر کاربر توضیح دهید و نحوه رفع آن را پیشنهاد دهید.
- به کاربر اجازه ندهید استثناهایی را که کد شما ایجاد می کند ببیند. درعوض، از دستورات
try...catchبرای رهگیری استثناها استفاده کنید، سپس یک پیام خطای کاربرپسند با متن درون خطی استایل شده در کلاسerrorاز بسته CSS افزودنی یا یک گفتگوی هشدار نمایش دهید. - قبل از انتشار، بررسی کنید که افزونه شما اطلاعات اشکال زدایی را به کنسول جاوا اسکریپت وارد نکند. به جای آن از Stackdriver logging استفاده کنید.
| نکن | انجام دادن |
|---|---|
 |  |
محتوای راهنما
منوی هر افزونه شامل یک گفتگوی راهنمای خودکار است. اگر هنگام انتشار یک URL راهنما ارائه کنید، دکمه «بیشتر بدانید» به آن صفحه پیوند می‌خورد. لطفاً صفحه‌ای ارائه کنید که نحوه استفاده از آن را توضیح دهد، مگر اینکه افزونه شما توضیحی باشد.
- در صورت امکان، دستورالعمل‌ها را در یک لیست گلوله‌دار یا شماره‌دار نشان دهید. با ارجاع واضح به عناصر نام‌گذاری شده UI، کاربران را به سمت نتیجه نهایی هدایت کنید.
- اطمینان حاصل کنید که دستورالعمل‌های شما به وضوح همه الزامات را توضیح می‌دهند، مانند تنظیم یک صفحه گسترده به روشی خاص.
- به راحتی می توانید از رابط کاربری اصلی خود به محتوای کمکی خود پیوند دهید. اگر افزونه شما یک سند تازه ایجاد می کند، می توانید دستورالعمل ها را در بدنه سند نیز نمایش دهید.
رابط های کاربری سفارشی
برخی از افزودنی های ویرایشگر ساده را می توان به طور کامل توسط منوی آنها کنترل کرد، اما اکثر آنها یک نوار کناری یا گفتگو را با محتوای سفارشی نمایش می دهند.
- نوارهای کناری برای ابزارهای مداومی هستند که افراد احتمالاً در حین مراجعه به محتوای سند یا صفحه گسترده خود مکرراً از آنها استفاده می کنند.
- دیالوگ ها برای ابزارهای یکبار مصرف، صفحات تنظیمات و پیام های مهم بهترین هستند.
متن رابط کاربری
در هر دیالوگ یا نوار کناری، فرض کنید افراد فقط برچسب عنوان و دکمه را می خوانند. آیا آنها هنوز می توانند بفهمند که رابط شما چه کار می کند و انتخاب خوبی داشته باشند؟
- از برچسب‌های عنوان و دکمه‌ای استفاده کنید که به تنهایی وجود دارند.
- از بلوک های طولانی متن توصیفی خودداری کنید.
دیالوگ ها
دیالوگ ها برای ابزارهایی عالی هستند که مردم یک بار از آن استفاده می کنند و سپس ادامه می دهند. برای مثال، اگر برافزای شما به افراد اجازه می‌دهد یک گرافیک را وارد کنند، می‌توانید گفتگویی را با گزینه‌هایی که چه چیزی را درج کنید نمایش دهید¸ سپس وقتی گرافیک درج شد، گفتگو را ببندید. دیالوگ ها همچنین برای نمایش تنظیمات افزونه شما یا برای برقراری ارتباط یک پیام مهم مفید هستند.
- یک گفتگو (شامل هشدار یا درخواست ) را از گفتگوی دیگر باز نکنید — هر بار فقط یکی را نمایش دهید.
- برای عنوان دیالوگ، از یک کلمه یا عبارت کوتاه استفاده کنید که با مهم ترین کلمه پیشروی می کند.
- برچسب های دکمه باید به عنوان گفتگو مربوط باشد.
- دو دکمه را ترجیح دهید، معمولاً یک عملکرد اصلی و «لغو». برای موارد خاص که نیاز به دکمه سوم دارند، گوشه پایین سمت راست را در نظر بگیرید.
- دکمه ها را در گوشه سمت چپ پایین دیالوگ قرار دهید. دکمه اصلی آبی باید در سمت چپ باشد و هر دکمه ثانویه خاکستری در سمت راست باشد.
| نکن | انجام دادن |
|---|---|
 |  |
نوارهای کناری
نوارهای کناری به افراد اجازه می دهند هنگام انتخاب به سند، صفحه گسترده، ارائه یا فرم خود مراجعه کنند. آنها همچنین به افراد اجازه می‌دهند از افزونه شما مکرراً استفاده کنند. هر زمان که یک نوار کناری جدید باز شود، هر نوار کناری قبلی به طور خودکار بسته می شود. آنها برای حالت های موقتی که کاربر پس از اتمام از آن خارج می شود، بهترین هستند.
- کاربران ممکن است افزونه های دیگری با نوار کناری خود داشته باشند. اگر دو افزونه سعی کنند نوارهای کناری را به طور همزمان باز کنند، تنها یکی نشان داده می شود.
- هنگامی که یک سند برای اولین بار باز می شود، نوار کناری یا گفتگو نمایش داده نشود.
- فقط افزونه‌هایی که در
AuthMode.FULLکار می‌کنند می‌توانند نوارهای کناری یا گفتگوها را باز کنند. می‌توانید از یک آیتم منو برای باز کردن نوار کناری استفاده کنید، زیرا از کاربر می‌خواهد مجوز کامل را ارائه کند.
کنترل ها
رابط‌های کاربری عالی برای کنترل‌هایشان کمی اتاق تنفس می‌گذارند. حاشیه‌ها و بالشتک‌های کافی بسیار تاثیرگذار است، در حالی که کنترل‌های متراکم می‌توانند طاقت‌فرسا به نظر برسند. در صورت شک، یک طرح را از خود ویرایشگر قرض بگیرید. به عنوان مثال، هنگام ایجاد گفتگوهای موجود در Google Docs، مانند File > Page setup را مرور کنید.
مستندات بسته CSS الحاقی، نشانه گذاری نمونه برای هر یک از انواع کنترل های زیر را ارائه می دهد.
دکمه ها
از دکمه ها برای کنترل اقدامات اصلی رابط کاربری خود به جای پیوندهای ساده یا عناصر دیگر استفاده کنید.
- از نمایش بیش از یک دکمه آبی، قرمز یا سبز در یک زمان خودداری کنید. دکمه های خاکستری ممکن است بارها و بارها ظاهر شوند.
- بیشتر برچسب‌های دکمه‌ها باید در حروف جمله باشند و با یک فعل شروع شوند. دکمه‌های قرمز، معمولاً برای اکشن‌های ایجاد، باید از تمام سرپوش‌ها استفاده کنند.
| نکن | انجام دادن |
|---|---|
چک باکس ها و دکمه های رادیویی
زمانی که افراد می توانند چندین گزینه یا هیچ گزینه ای را انتخاب نکنند، از کادرهای انتخاب استفاده کنید. زمانی که دقیقاً یک گزینه باید انتخاب شود از دکمه های رادیویی (یا منوی انتخاب) استفاده کنید.
- رفتار چک باکس ها را به تقلید از دکمه های رادیویی تغییر ندهید.
- وقتی آنها را بررسی کردند بلافاصله کاری انجام ندهید. مردم اشتباه می کنند. منتظر بمانید تا کاربران شما روی دکمه ای کلیک کنند تا انتخاب های خود را تایید کنند.
منوها را انتخاب کنید
انتخاب ها راهی عالی برای ارائه لیست کوتاهی از جایگزین ها هستند.
- گزینه ها را بر اساس حروف الفبا یا بر اساس یک طرح منطقی که همه کاربران می توانند درک کنند (مانند روزهای هفته، از یکشنبه) مرتب کنید.
- اگر فهرست خیلی طولانی شد، از کنترل دیگری استفاده کنید. برای مثال، ممکن است یک لیست قابل پیمایش را نمایش دهید تا به منو فضای بیشتری داده شود و پیمایش آن آسان تر شود.
مناطق متن
اگر افراد نیاز به تایپ بیش از چند کلمه دارند، از قسمت متن استفاده کنید.
- قسمت های متنی را حداقل دو خط بلند کنید تا استفاده از آنها راحت تر باشد و شبیه فیلدهای متنی نباشند.
- برچسب ها را در بالا قرار دهید.
فیلدهای متنی
اگر افراد فقط نیاز به تایپ یک یا دو کلمه دارند، از فیلدهای متنی استفاده کنید.
- عرض یک فیلد متنی باید نشان دهد که انتظار دارید افراد در آن تایپ کنند.
- از استفاده از متن جایگیر به عنوان برچسب خودداری کنید، زیرا در فوکوس ناپدید می شود. متن جای جای برای ارائه مثال یا جزئیات بیشتر مفید است.
- برچسب ها را در بالا قرار دهید، اما با خیال راحت فیلدهای متنی کوتاه را در کنار هم قرار دهید.
نام تجاری
در افزونه شما
اگر می‌خواهید نام تجاری را درج کنید، آن را مختصر و سبک نگه دارید. این به افراد کمک می‌کند تا روی رابط کاربری شما تمرکز کنند و باعث می‌شود که افزونه شما بخشی از ویرایشگر باشد.
- تمام جنبه های افزونه شما باید از دستورالعمل های برندسازی پیروی کند.
- کلمه «Google» را وارد نکنید یا از نمادهای محصول Google استفاده نکنید.
- متن نباید بیش از چند کلمه باشد و در کلاس
grayاز بسته CSS افزودنی استایل بندی شود. - گرافیک ها باید در پس زمینه سفید و حداکثر 200 پیکسل × 60 پیکسل باشد.
- برای گفتگوها، نام تجاری باید در گوشه سمت راست پایین باشد.
- برای نوارهای کناری، نام تجاری می تواند در بالا یا پایین باشد.
در فروشگاه
برای انتشار یک افزونه ویرایشگر، به تعدادی دارایی تصویر نیاز دارید. این دارایی ها برای ایجاد فهرست فروشگاه افزودنی استفاده می شوند.
- همه جنبه‌های فهرست فروشگاه شما باید از دستورالعمل‌های برندسازی پیروی کند.
- برای جزئیات بیشتر در مورد تصاویری که باید ارائه دهید، دستورالعمل های تصویر را ببینید.
دسترسی
همه باید بتوانند از افزونه شما لذت ببرند، چه رنگ‌ها را متفاوت ببینند، چه از صفحه‌خوان استفاده کنند یا نیازهای دیگری داشته باشند. دسترس‌پذیری موضوع گسترده‌ای است که نمی‌توان آن را به طور کامل در این راهنمای سبک پوشش داد. یکی از منابع مفید سایت Google Accessibility است. اما در اینجا چند نکته برای شروع وجود دارد:
- مطمئن شوید که می‌توانید با صفحه‌کلید به تمام کنترل‌های رابط کاربری پیمایش کنید.
tabindex=0به کنترل‌های سفارشی اضافه کنید (مانند کنترل‌هایی که با<div>ساخته شده‌اند) تا افراد بتوانند به آنها تب شوند. در نظر بگیرید که آیا کلیدهای دیگری مانند فلش های فهرست نیز باید پشتیبانی شوند. - برخی از افراد ممکن است از صفحه‌خوان با افزونه شما استفاده کنند. بنابراین، تصاویر باید یک ویژگی
altداشته باشند و کنترل‌های سفارشی باید دارای ویژگی‌های ARIA برای توصیف کاربردشان باشند. - برای برقراری ارتباط فقط به رنگ تکیه نکنید. از آیکون ها و متن نیز استفاده کنید.
اگر از کنترل‌های استاندارد وب استفاده می‌کنید، مانند مواردی که قبلاً در این راهنما توضیح داده شد، دسترسی آسان‌تر به افزونه شما می‌شود.