Ta strona została przetłumaczona przez Cloud Translation API.

Poradnik dotyczący stylu interfejsu dla dodatków do edytora

Dodatki do edytora: tworzenie interfejsów użytkownika (menu, pasków bocznych i dialogów) za pomocą usługi HTML w Apps Script. Interfejsy są tworzone w językach HTML i CSS, dzięki czemu można je łatwo dostosowywać. Podczas tworzenia interfejsu dodatku należy jednak zadbać o to, aby korzystanie z niego było wygodne dla użytkowników.

Najlepsze dodatki rozszerzają możliwości każdego edytora, wykorzystując znane elementy sterujące i zachowania. Podczas tworzenia nowego dodatku:

Użyj pakietu CSS dodatków na stronach usługi HTML.
W razie wątpliwości dotyczących projektu znajdź w edytorze podobne okno dialogowe lub pasek boczny i spróbuj je dopasować. Możesz też skorzystać z samouczka dotyczącego dodatku.
Aby zapewnić płynne działanie, postępuj zgodnie z tym stylem.

Tekst

Nazwa dodatku

Musisz ustawić nazwę dodatku podczas jego publikowania. Nazwa pojawia się w wielu miejscach, np. w sklepie z dodatkami i w menu.

Stosuj wielkość liter jak w nazwach własnych.
Unikaj znaków interpunkcyjnych, zwłaszcza nawiasów, chyba że stanowią część nazwy marki.
Niech będzie krótki – najlepiej 30 znaków lub mniej. Długie nazwy mogą zostać automatycznie obcięte.
Nie używaj nazwy usługi Google, dla której przeznaczony jest dodatek (ani słowa „Google”).
Nie podawaj informacji o wersji.
Upewnij się, że opublikowana nazwa dodatku jest taka sama jak nazwa pliku projektu skryptu. Nazwa projektu pojawi się w oknie autoryzacji.

Nie	Należy

Styl pisania

Nie musisz pisać dużo. Większość działań powinna być jasna dzięki ikonografii, układowi i krótkim etykietkom. Jeśli okaże się, że część Twojego dodatku wymaga bardziej obszernego wyjaśnienia niż krótkie etykiety, najlepiej utworzyć osobną stronę internetową z opisem dodatku i umieścić do niej link.

Podczas pisania tekstu interfejsu:

Stosuj wielkość liter jak w zdaniu (zwłaszcza w przypadku przycisków, etykiet i elementów menu).
Korzystaj z krótkich, prostych tekstów bez fachowych sformułowań ani skrótów.

Nie	Należy

Wskazówka po instalacji

Wskazówka po instalacji pojawia się zaraz po zainstalowaniu dodatku przez użytkownika i jest też widoczna w sekcji Pomoc. Użytkownikom wyświetla się kilka zdań, które pomagają im szybko rozpocząć korzystanie z aplikacji.

Zacznij od słowa określającego działanie.
Opisz pierwszy krok do użycia dodatku.
Jeśli masz interfejs główny, np. pasek boczny, wyjaśnij, jak go otworzyć.
Nie promuj tutaj dodatku – jest on już zainstalowany.

Nie	Należy

Elementy menu

W przeciwieństwie do zwykłych projektów Apps Script, dodatki nie pojawiają się w edytorze skryptów ani w menedżerze skryptów. Użytkownicy nie mogą też bezpośrednio uruchamiać skryptów dodatków. Zamiast tego każdy dodatek ma swoje miejsce w menu dodatków. Menu (oraz ewentualnie okno) umożliwia użytkownikom interakcję z dodatkiem.

Menu jest kluczowym elementem umożliwiającym użytkownikom kontrolowanie dodatku, dlatego dokładnie zaprojektuj jego strukturę i tekst.
Unikaj pozycji menu, które po prostu powtarzają nazwę dodatku. Zamiast tego zacznij od słowa określającego działanie.
Jeśli element głównego menu rozpoczyna przepływ pracy i nie ma jednego czasownika, który opisuje jego działanie, nazwij go „Start”. Ten wzór jest używany w krótkim wprowadzeniu do dodatku Dokumenty.
Jeśli menu nie zawiera więcej niż 6 pozycji, nie używaj menu podrzędnych. Mogą być trudne do wybrania.
Opisz zadanie, a nie element interfejsu użytkownika wyświetlany przez pozycję menu.

Nie	Należy

Komunikaty o błędach

Gdy coś pójdzie nie tak, ważne jest, aby używać prostego języka. Wyjaśnij problem z perspektywy użytkownika i wskaż sposób jego rozwiązania.

Nie zezwalaj użytkownikowi na wyświetlanie wyjątków wywołanych przez Twój kod. Zamiast tego używaj instrukcji try...catch, aby przechwytywać wyjątki, a następnie wyświetlać przyjazny dla użytkownika komunikat o błędzie z tekstem wstawianym w ramach klasy error z pakietu CSS dodatków lub w oknie alertu.
Przed opublikowaniem sprawdź, czy w konsoli JavaScriptu nie są rejestrowane informacje debugowania. Zamiast tego użyj zapisywania w Stackdriverze.

Nie	Należy

Materiały edukacyjne

Menu każdego dodatku zawiera automatyczne okno pomocy. Jeśli podczas publikowania podasz adres URL strony pomocy, przycisk „Więcej informacji” będzie prowadził do tej strony. Jeśli tylko w przypadku dodatku, który jest oczywisty, dodaj stronę z instrukcjami jego używania.

W miarę możliwości wyświetlaj instrukcje w postaci listy punktowanej lub numerowanej. Przeprowadź użytkowników do końcowego wyniku, wyraźnie odwołując się do nazwanych elementów interfejsu.
Upewnij się, że instrukcje jasno określają wymagania, np. sposób konfiguracji arkusza kalkulacyjnego.
Możesz też umieścić link do treści pomocy w głównym interfejsie użytkownika. Jeśli Twój dodatek tworzy nowy dokument, możesz też wyświetlić instrukcje w treści dokumentu.

Niestandardowe interfejsy

Niektóre proste dodatki do edytora można kontrolować wyłącznie za pomocą menu, ale większość z nich wyświetla pasek boczny lub okno z treściami niestandardowymi.

Paski boczne są najlepsze do trwałych narzędzi, których użytkownicy prawdopodobnie będą używać wielokrotnie, odwołując się do treści dokumentu lub arkusza kalkulacyjnego.
Dialogi najlepiej sprawdzają się w przypadku narzędzi jednorazowego użytku, stron ustawień i ważnych komunikatów.

Tekst w interfejsie

W dowolnym oknie dialogowym lub panelu bocznym załóż, że użytkownicy czytają tylko tytuł i nazwy przycisków. Czy użytkownicy nadal mogą dowiedzieć się, do czego służy Twój interfejs, i dokonać właściwego wyboru?

Używaj etykiet tytułu i przycisków, które są zrozumiałe same z siebie.
Unikaj długich bloków tekstu opisowego.

Okna

Dialogi są świetne w przypadku narzędzi, których użytkownicy używają tylko raz. Jeśli na przykład Twój dodatek umożliwia użytkownikom wstawianie grafiki, możesz wyświetlić okno z opcjami wstawiania, a następnie zamknąć je po wstawieniu grafiki. Dialogi są też przydatne do wyświetlania ustawień dodatku lub przekazywania ważnych informacji.

Nie otwieraj okna dialogowego (w tym alertu lub prompta) z innego okna dialogowego – wyświetlaj tylko jedno naraz.
W tytule dialogu użyj słowa lub krótkiego wyrażenia, zaczynając od najważniejszego słowa.
Etykiety przycisków powinny być powiązane z tytułem okna dialogowego.
Używaj 2 przycisków, zwykle głównego działania i „Anuluj”. W szczególnych przypadkach, gdy wymagany jest trzeci przycisk, rozważ umieszczenie go w prawym dolnym rogu.
Umieszczaj przyciski w lewym dolnym rogu okna. Niebieski przycisk główny powinien znajdować się po lewej stronie, a szare przyciski dodatkowe po prawej.

Nie	Należy

Paski boczne

Dzięki bocznym panelom użytkownicy mogą wracać do dokumentu, arkusza kalkulacyjnego, prezentacji lub formularza podczas dokonywania wyborów. Pozwalają też użytkownikom wielokrotnie korzystać z Twojego dodatku. Gdy otwierasz nowy pasek boczny, poprzedni zamyka się automatycznie. Najlepiej nadają się do tymczasowych trybów, z których użytkownik może się wylogować.

Użytkownicy mogą mieć inne dodatki z własnymi paskami bocznymi. Jeśli 2 dodatki próbują otworzyć paski boczne jednocześnie, wyświetlany jest tylko jeden z nich.
Nie wyświetlaj paska bocznego ani okna podczas otwierania dokumentu.
Tylko dodatki działające w AuthMode.FULL mogą otwierać paski boczne lub okna dialogowe. Możesz użyć elementu menu, aby otworzyć pasek boczny, ponieważ spowoduje to wyświetlenie użytkownikowi prośby o pełną autoryzację.

Elementy sterujące

Dobre interfejsy dodatków pozostawiają trochę miejsca na elementy sterujące. Odpowiednie marginesy i odstępy mają duże znaczenie, podczas gdy gęste elementy sterujące mogą przytłoczyć. W razie wątpliwości użyj układu z samego edytora. Podczas tworzenia własnych dialogów zapoznaj się na przykład z istniejącymi oknami dialogowymi w Dokumentach Google, takim jak Plik > Ustawienia strony.

Dokumentacja pakietu CSS dodatków zawiera przykładowe oznaczenia dla każdego z typów elementów sterujących wymienionych poniżej.

Przyciski

Do sterowania głównymi działaniami interfejsu użytkownika używaj przycisków, a nie zwykłych linków ani innych elementów.

Unikaj wyświetlania więcej niż 1 niebieskiego, czerwonego lub zielonego przycisku naraz. Szare przyciski mogą pojawiać się wielokrotnie.
Większość etykiet przycisków powinna być zapisana wielką literą i rozpoczynać się od czasownika. Czerwone przyciski, które zwykle służą do tworzenia działań, powinny być w wielkiej literze.

Nie	Należy

Pola wyboru i przyciski opcji

Używaj pól wyboru, gdy użytkownicy mogą wybrać kilka opcji lub żadną. Użyj przycisków opcji (lub menu wyboru), gdy musi być wybrana dokładnie 1 opcja.

Nie zmieniaj działania pól wyboru, aby naśladować przyciski opcji.
Nie wykonuj żadnych działań po zaznaczeniu tych opcji. Ludzie popełniają błędy. Poczekaj, aż użytkownicy klikną przycisk, aby potwierdzić swój wybór.

Menu wyboru

Selekty to świetny sposób na przedstawienie krótkiej listy alternatyw.

Posortuj opcje alfabetycznie lub według schematu logicznego, który wszyscy użytkownicy będą w stanie zrozumieć (np. dni tygodnia, zaczynając od niedzieli).
Jeśli lista jest zbyt długa, rozważ użycie innego elementu sterującego. Możesz na przykład wyświetlić listę przewijalną, aby menu zajmowało więcej miejsca i było łatwiejsze w nawigacji.

Obszary tekstowe

Jeśli użytkownicy muszą wpisać więcej niż kilka słów, użyj pola tekstowego.

Utwórz obszary tekstowe o wysokości co najmniej 2 wierszy, aby były łatwiejsze w użyciu i nie wyglądały jak pola tekstowe.
umieszczać etykiety na górze.

Pola tekstowe

Użyj pól tekstowych, jeśli użytkownicy muszą wpisać tylko jedno lub dwa słowa.

Szerokość pola tekstowego powinna sugerować, co użytkownicy mają w nim wpisywać.
Unikaj używania tekstu zastępczego jako etykiety, ponieważ znika, gdy użytkownik skupi się na elemencie. Tekst zastępczy jest przydatny do podawania przykładów lub dodatkowych informacji.
Umieść etykiety u góry, ale możesz też ułożyć obok siebie krótkie pola tekstowe.

Promowanie marki

W Twoim dodatku

Jeśli chcesz umieścić elementy marki, postaraj się, aby były zwięzłe i nie przytłaczająco. Dzięki temu użytkownicy mogą skupić się na interfejsie, a twój dodatek będzie wyglądać jak część edytora.

Wszystkie aspekty dodatku muszą być zgodne ze wytycznymi dotyczącymi marki.
Nie używaj słowa „Google” ani ikon produktów Google.
Tekst powinien składać się z kilku słów i być sformatowany w klasie gray z pakietu CSS dodatków.
Grafika powinna mieć białe tło i nie może być większa niż 200 x 60 pikseli.
W przypadku dialogów elementy marki powinny znajdować się w prawym dolnym rogu.
W przypadku pasków bocznych logo może znajdować się u góry lub u dołu.

W sklepie

Aby opublikować dodatek do Edytora, musisz mieć kilka zasobów graficznych. Te zasoby są używane do tworzenia strony aplikacji w sklepie.

Wszystkie aspekty informacji o aplikacji muszą być zgodne ze wskazówkami dotyczącymi marki.
Więcej informacji o obrazach, które musisz przesłać, znajdziesz w wytycznych dotyczących obrazów.

Ułatwienia dostępu

Każdy powinien mieć możliwość korzystania z Twojego dodatku, niezależnie od tego, czy widzi kolory inaczej, używa czytnika ekranu czy ma inne potrzeby. Dostępność to szeroki temat, którego nie da się w pełni omówić w tym przewodniku. Jednym z przydatnych zasobów jest strona Ułatwienia dostępu Google. Oto kilka wskazówek, które pomogą Ci zacząć:

Upewnij się, że możesz poruszać się po wszystkich elementach interfejsu za pomocą klawiatury. Dodaj tabindex=0 do elementów sterujących niestandardowych (takich jak elementy utworzone za pomocą <div>), aby użytkownicy mogli z nich korzystać. Zastanów się, czy inne klawisze powinny być obsługiwane, np. strzałki na liście.
Niektórzy użytkownicy mogą używać czytnika ekranu z Twoim dodatkiem. Dlatego obrazy powinny mieć atrybut alt, a elementy sterujące niestandardowe powinny mieć atrybuty ARIA opisujące ich zastosowanie.

Nie polegaj tylko na kolorze, aby przekazać stan. Używaj też ikon i tekstu.

Jeśli używasz standardowych elementów sterujących w internecie, takich jak te opisane wcześniej w tym przewodniku, udostępnianie dodatku jest łatwiejsze.