Dodatki do edytora tworzą interfejsy użytkownika (menu, paski boczne i okna dialogowe) za pomocą usługi HTML Apps Script. Interfejsy programowania są oparte na językach HTML i CSS, więc można je łatwo dostosowywać. Podczas tworzenia interfejsu dodatku warto jednak zaprojektować go w taki sposób, aby zapewnić użytkownikom maksymalną wygodę.
Najlepsze dodatki rozszerzają każdy edytor w naturalny sposób, korzystając ze znanych sobie elementów sterujących i zachowań. Podczas tworzenia nowego dodatku:
- Użyj pakietu dodatków CSS na stronach usługi HTML.
- Jeśli masz wątpliwości co do projektu, znajdź podobne okno lub pasek boczny w edytorze i dopasuj je lub zapoznaj się z krótkim wprowadzeniem.
- Skorzystaj z tego przewodnika, aby wygodnie korzystać ze strony.
Tekst
Nazwa dodatku
Musisz ustawić nazwę dodatku, gdy go opublikujesz. Nazwa pojawia się w wielu miejscach, takich jak sklep z dodatkami i menu.
- Używaj wielkich liter.
- Unikaj znaków interpunkcyjnych, zwłaszcza w nawiasach, chyba że stanowią część marki.
- Zachowaj zwięzłość – do 30 znaków. Długie nazwy mogą być automatycznie skracane.
- Nie podawaj nazwy usługi Google, której dotyczy dodatek (lub użyj słowa „Google”).
- Nie podawaj informacji o wersji.
- Sprawdź, czy nazwa opublikowana dodatku jest taka sama jak nazwa pliku projektu skryptu. Nazwa projektu pojawi się w oknie autoryzacji.
| Nie należy | Należy |
|---|---|
 |
 |
Styl pisania
Nie musisz nic pisać. Większość działań należy przekazać w formie ikon, układu i krótkich etykiet. Jeśli uznasz, że część dodatku wymaga bardziej szczegółowego wyjaśnienia, niż krótkie etykiety, możesz utworzyć osobną stronę internetową z opisem dodatku i linkiem do niego.
Podczas pisania tekstu interfejsu:
- Używaj wielkości liter jak w zdaniu (zwłaszcza w przypadku przycisków, etykiet i pozycji w menu).
- Wybieraj krótki, prosty tekst bez żargonu lub akronimów.
| Nie należy | Należy |
|---|---|
|
|
|
Wskazówka po instalacji
Wskazówka po instalacji pojawi się natychmiast po zainstalowaniu dodatku, a także w Pomocy. Masz kilka zdań, które ułatwią użytkownikom szybkie rozpoczęcie pracy.
- Zacznij od słowa czynności.
- Opisz pierwszy krok korzystania z dodatku.
- Jeśli masz główny interfejs użytkownika, na przykład pasek boczny, dowiedz się, jak go otworzyć.
- Nie promuj tutaj dodatku, ponieważ jest już zainstalowany.
| Nie należy | Należy |
|---|---|
 |
 |
Pozycje menu
W przeciwieństwie do zwykłych projektów Apps Script dodatki nie są widoczne w edytorze skryptów ani w menedżerze skryptów. Użytkownicy nie mogą bezpośrednio uruchamiać skryptów dodatków. Zamiast tego każdy dodatek jest widoczny w menu dodatków. Menu (i opcjonalnie okno lub pasek boczny) umożliwia użytkownikom korzystanie z dodatku.
- Menu to kluczowy element kontroli dodatku, dlatego uważnie dobierz jego strukturę i treść.
- Unikaj dań z menu, które powtarzają nazwę dodatku. Zamiast tego zacznij od słowa kluczowego.
- Jeśli główny element menu uruchamia przepływ pracy, a nie ma pojedynczego słowa opisującego jego działanie, użyj jego nazwy „Start”. Ten wzorzec jest używany w krótkim wprowadzeniu do Dokumentów.
- Jeśli menu nie zawiera więcej niż 6 elementów, staraj się nie korzystać z podmenu. Mogą one być bardzo szczegółowe i trudne do wyboru.
- Opisz zadanie, a nie komponent interfejsu, który wyświetla element menu.
| Nie należy | Należy |
|---|---|
 |
 |
Komunikaty o błędach
Gdy coś pójdzie nie tak, język powinien być prosty. Wyjaśnij, na czym polega problem, i zaproponuj jego rozwiązanie.
- Nie zezwalaj użytkownikowi na wyświetlanie żadnych wyjątków wywoływanych przez Twój kod. Zamiast tego użyj wystąpień
try...catch, aby przechwytywać wyjątki, a następnie wyświetlać komunikat o błędzie ze stylem w tekście w klasieerrorz pakietu CSS dodatków lub w oknie alert. - Zanim opublikujesz dodatek, sprawdź, czy dodatek nie rejestruje informacji o debugowaniu w konsoli JavaScriptu. Zamiast tego użyj Stackdriver Logging.
| Nie należy | Należy |
|---|---|
 |
 |
Materiały edukacyjne
Menu każdego dodatku zawiera automatyczne okno pomocy. Jeśli podasz URL do publikacji, na stronie, na której się znajduje, kliknij przycisk „Więcej informacji”. Jeśli Twój dodatek nie jest objaśniony, prześlij stronę z informacjami, jak z niego korzystać.
- Gdy to możliwe, pokazuj instrukcje na liście punktowanej lub numerowanej. Pokazywanie użytkownikom, jak wyglądają końcowe wyniki wyszukiwania, z wyraźnymi odwołaniami do nazwanych elementów interfejsu.
- Upewnij się, że Twoje instrukcje jasno wyjaśniają wszelkie wymagania, takie jak konfiguracja arkusza kalkulacyjnego w określony sposób.
- Możesz też umieścić w głównym interfejsie użytkownika link do treści pomocy. Jeśli dodatek tworzy nowy dokument, możesz też wyświetlić instrukcje w jego treści.
Niestandardowe interfejsy użytkownika
Niektóre proste dodatki do Edytora można kontrolować w całym menu, ale większość wyświetla pasek boczny lub okno z niestandardową treścią.
- Paski boczne najlepiej sprawdzają się w przypadku trwałych narzędzi, których użytkownicy często używają w odniesieniu do treści ich dokumentów lub arkuszy kalkulacyjnych.
- Okna najlepiej sprawdzają się w przypadku narzędzi jednorazowych, stron ustawień i ważnych wiadomości.
Tekst interfejsu
W dowolnym oknie lub na pasku bocznym użytkownicy mogą zakładać tylko etykiety tytułu i przycisku. Czy nadal będą potrafili określić, do czego służy Twój interfejs, i dokonać odpowiedniego wyboru?
- Używaj własnych etykiet tytułów i przycisków.
- Unikaj długich bloków tekstu opisu.
Okna
Okna świetnie nadają się do użycia narzędzi, z których użytkownicy korzystają raz, a potem mogą przejść dalej. Jeśli na przykład dodatek umożliwia wstawianie grafiki, możesz zobaczyć okno dialogowe z opcjami do wstawienia, a potem zamknąć okno po wstawieniu grafiki. Okna umożliwiają też wyświetlenie ustawień dodatku lub przekazanie ważnej wiadomości.
- Nie otwieraj okna z osobnego okna (w tym alertu lub alertu) z innego okna. Wyświetlaj pojedynczo.
- W tytule okna użyj słowa lub krótkiego wyrażenia z najważniejszym słowem.
- Etykiety przycisków powinny być związane z tytułem okna.
- Preferuj 2 przyciski, zazwyczaj podstawowe i „Anuluj”. W specjalnych przypadkach, gdy potrzebujesz trzeciego przycisku, spójrz na prawy dolny róg.
- Umieść przyciski w lewym dolnym rogu okna. Niebieski przycisk główny powinien być po lewej stronie, a pozostałe szare przyciski dodatkowe po prawej.
| Nie należy | Należy |
|---|---|
 |
 |
Paski boczne
Paski boczne umożliwiają użytkownikom odwołanie się do dokumentu, arkusza kalkulacyjnego, prezentacji lub formularza podczas dokonywania wyboru. Umożliwiają też wielu osobom korzystanie z dodatku. Po otwarciu nowego paska bocznego każdy poprzedni pasek boczny zamyka się automatycznie. Najlepiej sprawdzają się w przypadku trybów tymczasowych, z których użytkownik wyjdzie po zakończeniu pracy.
- Użytkownicy mogą mieć inne dodatki z własnymi paskami bocznymi. Jeśli dwa dodatki próbują otwierać paski boczne jednocześnie, wyświetlany jest tylko jeden.
- Nie pokazuj paska bocznego ani okna dialogowego po pierwszym otwarciu dokumentu.
- Pasek boczny lub okno może otwierać tylko dodatek działający w
AuthMode.FULL. Aby otworzyć pasek boczny, możesz użyć pozycji menu, ponieważ w takim przypadku użytkownik musi podać pełną autoryzację.
Opcje
Świetne interfejsy użytkownika pomagają zachować kontrolę nad ustawieniami. Odpowiednie marginesy i dopełnienie mają duży zasięg, a gęste ustawienia mogą być przytłaczające. W razie wątpliwości pożycz go od samego edytora. Na przykład przy tworzeniu własnych plików sprawdź w Dokumentach Google dotychczasowe okna dialogowe, na przykład Plik > Konfiguracja strony.
Dokumentacja pakietu CSS dodatków zawiera przykładowe znaczniki każdego z nich poniżej.
Przyciski
Za pomocą przycisków możesz kontrolować główne działania interfejsu, a nie zwykłe linki czy inne elementy.
- Unikaj wyświetlania więcej niż jednego niebieskiego, czerwonego lub zielonego przycisku jednocześnie. Szare przyciski mogą się powtarzać.
- Większość etykiet przycisków powinna być tworzona jak w zdaniu i musi zaczynać się od czasownika. Czerwone przyciski, zwykle dla czynności tworzenia, powinny zawierać wszystkie wielkie litery.
| Nie należy | Należy |
|---|---|
|
|
|
Pola wyboru i przyciski
Użyj pól wyboru, jeśli użytkownicy mogą wybrać wiele opcji lub nie zaznaczyć żadnej. Użyj przycisków opcji (lub menu wyboru), jeśli musisz wybrać dokładnie jedną opcję.
- Nie zmieniaj działania pól wyboru, aby naśladowały one opcje.
- Nie podejmuj żadnych działań natychmiast po sprawdzeniu. Ludzie popełniają błędy. Zaczekaj, aż użytkownik kliknie przycisk, aby potwierdzić wybór.
Wybierz menu
Wybór to doskonały sposób na stworzenie krótkiej alternatywy.
- Posortuj opcje alfabetycznie lub według logicznego schematu, tak aby były zrozumiałe dla wszystkich użytkowników (np. dni tygodnia, począwszy od niedzieli).
- Jeśli lista jest za długa, rozważ użycie innego ustawienia. Możesz na przykład wyświetlić listę przewijaną, aby zwolnić miejsce i ułatwić poruszanie się.
Obszary tekstowe
Jeśli chcesz wpisać więcej niż kilka słów, użyj obszaru tekstowego.
- Postaraj się, aby obszary tekstowe miały co najmniej 2 wiersze wysokości, aby były łatwiejsze w użyciu i nie wyglądały jak pola tekstowe.
- Umieść etykiety u góry.
Pola tekstowe
Użyj pól tekstowych, jeśli użytkownicy muszą wpisać tylko jedno lub dwa słowa.
- Szerokość pola tekstowego powinna wskazywać, czego można od niego oczekiwać.
- Unikaj używania tekstu zastępczego jako etykiety, ponieważ pojawia się on na ekranie. Tekst zastępczy przydaje przykłady lub dodatkowe informacje.
- Umieść etykiety na wierzchu, ale możesz rozmieścić krótkie pola tekstowe obok siebie.
Marka
W dodatku
Jeśli chcesz uwzględnić markę, zadbaj o to, by była krótka i jasna. Pomoże to skupić się na interfejsie użytkownika, dzięki czemu Twój dodatek poczuje się jak część edytora.
- Wszystkie aspekty dodatku muszą być zgodne ze wskazówkami dotyczącymi promowania marki.
- Nie używaj słowa „Google” ani nie używaj ikon usług Google.
- Tekst nie może mieć więcej niż kilku słów i mieć klasę w stylu
grayz pakietu CSS dodatków. - Grafika powinna być na białym tle i mieć maksymalnie 200 × 60 pikseli.
- Okna marki powinny być widoczne w prawym dolnym rogu.
- W przypadku pasków bocznych elementy marki mogą znajdować się u góry lub u dołu.
W sklepie
Aby opublikować dodatek do Edytora, potrzebujesz wielu zasobów graficznych. Zasoby służą do tworzenia dodatkowych informacji o aplikacji.
- Wszystkie aspekty informacji o aplikacji muszą być zgodne ze wskazówkami dotyczącymi promowania marki.
- Więcej informacji o obrazach, które musisz dostarczyć, znajdziesz w wytycznych dotyczących obrazów.
Ułatwienia dostępu
Wszyscy użytkownicy powinni mieć możliwość korzystania z dodatku niezależnie od tego, czy używają innych kolorów, używają czytnika ekranu czy mają inne potrzeby. Ułatwienia dostępu to szeroki temat, którego nie można w pełni omówić w tym przewodniku. Jednym z przydatnych materiałów jest witryna Ułatwienia dostępu Google. Oto kilka wskazówek, od których możesz zacząć:
- Sprawdź, czy masz możliwość przejścia do wszystkich elementów interfejsu za pomocą klawiatury. Dodaj
tabindex=0do ustawień niestandardowych (takich jak<div>), aby użytkownicy mogli z nich korzystać. Zastanów się, czy obsługiwane są też inne klawisze, np. strzałki. - Niektóre osoby mogą korzystać z dodatku do czytnika ekranu. W związku z tym obrazy powinny mieć atrybut
alt, a elementy niestandardowe powinny mieć atrybuty ARIA do opisywania ich wykorzystania. - Podczas komunikacji nie używaj wyłącznie koloru. Używaj też ikon i tekstu.
Jeśli korzystasz ze standardowych elementów sterujących sieci, np. opisanych wcześniej w tym przewodniku, ułatwienie dostępu do dodatku będzie łatwiejsze.