Dodatki do edytora pozwalają tworzyć interfejsy użytkownika (menu, paski boczne i okna), korzystając z usługi HTML Apps Script. Ponieważ interfejsy są opracowywane w językach HTML i CSS, można je bardzo łatwo dostosowywać. Jednak tworząc interfejs dodatków, zadbaj o to, by był wygodny dla użytkowników.
Najlepsze dodatki rozszerzają każdy edytor w naturalny sposób, korzystając ze znajomych elementów sterujących i funkcji. Podczas tworzenia nowego dodatku:
- Na stronach usługi HTML użyj pakietu dodatków CSS.
- W razie wątpliwości co do projektu znajdź w edytorze podobne okno lub pasek boczny i dopasuj je do niego albo zapoznaj się z krótkim wprowadzeniem do dodatków.
- Postępuj zgodnie z tym przewodnikiem stylu, aby zadbać o spójny wygląd.
Tekst
Nazwa dodatku
Nazwę dodatku musisz określić podczas publikowania. Nazwa będzie widoczna w wielu miejscach, np. w sklepie z dodatkami czy w menu.
- Stosuj wielkość liter jak w nazwach własnych.
- Unikaj znaków interpunkcyjnych, zwłaszcza nawiasów, chyba że stanowią część Twojej marki.
- Niech będzie krótki – najlepiej nie więcej niż 30 znaków. Długie nazwy mogą być automatycznie obcinane.
- Nie podawaj nazwy usługi Google, do której on służy, ani nie używaj słowa „Google”.
- Pomiń informacje o wersji.
- Upewnij się, że nazwa opublikowanego 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 dużo pisać. Większość działań powinna być wyraźnie widoczna za pomocą ikon, układu i krótkich etykiet. Jeśli uważasz, że część dodatku wymaga bardziej szczegółowego wyjaśnienia niż krótkie etykiety, najlepiej utworzyć osobną stronę internetową z opisem dodatku i umieścić do niego link.
Podczas pisania tekstu interfejsu:
- Stosuj wielkość liter jak w zdaniu (zwłaszcza w przypadku przycisków, etykiet i elementów menu).
- Wybieraj krótki, prosty tekst bez żargonu i akronimów.
Nie należy | Należy |
---|---|
|
|
Wskazówka po instalacji
Twoja wskazówka po instalacji wyświetli się zaraz po zainstalowaniu dodatku przez użytkownika i pojawi się też w Pomocy. Możesz skorzystać z kilku zdań, aby ułatwić użytkownikom szybkie rozpoczęcie pracy.
- Zacznij od słowa zachęcającego do działania.
- Opisz pierwszy krok korzystania z dodatku.
- Jeśli masz główny interfejs użytkownika, na przykład pasek boczny, wyjaśnij, jak go otworzyć.
- Nie promuj tutaj swojego dodatku – jest on już zainstalowany.
Nie należy | Należy |
---|---|
Pozycje menu
W przeciwieństwie do zwykłych projektów Apps Script dodatki nie pojawiają się w edytorze ani w menedżerze skryptów. Użytkownicy nie mogą bezpośrednio uruchamiać takich skryptów. Zamiast tego każdy dodatek ma swoje miejsce w menu dodatków. Menu (oraz okno dialogowe lub pasek boczny) umożliwia użytkownikom korzystanie z dodatku.
- Menu to kluczowy element kontroli dodatku, dlatego zaprojektuj starannie jego strukturę i sformułowanie.
- Unikaj pozycji menu, które zawierają tylko powtarzającą nazwę dodatku. Zamiast tego zacznij od słowa „działanie”.
- Jeśli pozycja menu głównego rozpoczyna przepływ pracy i nie ma jednego czasownika opisującego jej działanie, nazwij ją „Start”. Ten wzorzec jest używany w krótkim wprowadzeniu do dodatku do Dokumentów.
- Jeśli menu zawiera więcej niż sześć pozycji, staraj się nie używać podmenu. Mogą być trudne do wyboru.
- Opisz zadanie, a nie element interfejsu wyświetlany przez element menu.
Nie należy | Należy |
---|---|
Komunikaty o błędach
Gdy coś pójdzie nie tak, używaj prostego języka. Przedstaw problem z punktu widzenia użytkownika i podpowiedz, jak go rozwiązać.
- Nie zezwalaj użytkownikowi na wyświetlanie wyjątków zgłaszanych przez Twój kod. Zamiast tego użyj instrukcji
try...catch
do przechwytywania wyjątków, a następnie wyświetl smażony przez użytkownika komunikat o błędzie z tekstem w tekście przypisanym do klasyerror
z pakietu CSS dodatków lub okna alertu. - Przed opublikowaniem sprawdź, czy dodatek nie rejestruje danych debugowania w konsoli JavaScript. Zamiast tego użyj funkcji Stackdriver Logging.
Nie należy | Należy |
---|---|
Materiały edukacyjne
Menu każdego dodatku zawiera automatyczne okno Pomoc. Jeśli podczas publikowania podasz URL pomocy, prowadzi do niej link „Więcej informacji”. O ile nie musisz wyjaśniać swojego dodatku, podaj stronę z objaśnieniem, jak z niego korzystać.
- Jeśli to możliwe, wyświetlaj instrukcje w formie listy punktowanej lub numerowanej. Pokaż użytkownikom efekt końcowy, używając wyraźnych odwołań do nazwanych elementów interfejsu.
- Upewnij się, że instrukcje jasno wyjaśniają wszelkie wymagania, takie jak konfiguracja arkusza kalkulacyjnego w określony sposób.
- Możesz także dodać linki do materiałów pomocy w głównym interfejsie użytkownika. Jeśli dodatek utworzy nowy dokument, możesz też wyświetlić instrukcje w treści dokumentu.
Niestandardowe interfejsy użytkownika
Niektórymi prostymi dodatkami do Edytora można zarządzać w pełni z poziomu menu, ale większość z nich wyświetla pasek boczny lub okno z niestandardową zawartością.
- Paski boczne najlepiej sprawdzają się w przypadku 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.
- Okna najlepiej sprawdzają się w przypadku narzędzi jednorazowych, stron ustawień i ważnych komunikatów.
Tekst interfejsu
W każdym oknie lub na pasku bocznym załóżmy, że użytkownicy czytają tylko etykietę tytułu i przycisku. Czy mimo to użytkownicy wiedzą, do czego służy Twój interfejs, i mogą dokonać właściwego wyboru?
- Użyj samodzielnych etykiet tytułu i przycisków.
- Unikaj długich bloków tekstu opisowego.
Okna
Okna świetnie sprawdzają się w przypadku narzędzi, których używa się raz, a potem przejdź dalej. Jeśli na przykład dodatek umożliwia użytkownikom wstawienie grafiki, po wstawieniu grafiki możesz wyświetlić okno z opcją wyboru, co ma zostać wstawione. Okna są też pomocne przy wyświetlaniu ustawień dodatku lub do przekazywania ważnych komunikatów.
- Nie otwieraj okna (w tym alertów lub promptów) z innego okna – wyświetlaj je tylko pojedynczo.
- W tytule okna dialogowego użyj słowa lub krótkiego wyrażenia poprzedzonego najważniejszym słowem.
- Etykiety przycisków powinny być powiązane z tytułem okna.
- Wolę 2 przyciski, zwykle główne działanie i przycisk Anuluj. W szczególnych przypadkach, które wymagają trzeciego przycisku, weź pod uwagę prawy dolny róg.
- Umieść przyciski w lewym dolnym rogu okna dialogowego. Niebieski przycisk główny powinien znajdować się po lewej stronie, a po prawej – szare przyciski dodatkowe.
Nie należy | Należy |
---|---|
Paski boczne
Dzięki paskom bocznym użytkownik może wrócić do dokumentu, arkusza kalkulacyjnego, prezentacji lub formularza podczas dokonywania wyborów. Pozwalają też użytkownikom wielokrotnie korzystać z dodatku. Po otwarciu nowego paska bocznego wszystkie wcześniejsze są automatycznie zamykane. Najlepiej sprawdza się on w trybach tymczasowych, które użytkownik wyłącza, gdy jest gotowy.
- Użytkownicy mogą mieć też inne dodatki z własnymi paskami bocznymi. Jeśli dwa dodatki będą próbowały otworzyć paski boczny jednocześnie, wyświetli się tylko jeden.
- Nie wyświetlaj paska bocznego ani okna po pierwszym otwarciu dokumentu.
- Tylko dodatki działające w
AuthMode.FULL
mogą otwierać paski boczne lub okna. Do otwarcia paska bocznego możesz użyć pozycji menu, ponieważ w ten sposób użytkownik prosi o pełną autoryzację.
Opcje
Świetne dodatkowe interfejsy użytkownika nie ograniczają jednak możliwości kontroli. Odpowiednie marginesy i dopełnienie są bardzo przydatne, a złożone elementy sterujące mogą wydawać się przytłaczające. W razie wątpliwości korzystaj z układu z samego edytora. Podczas tworzenia własnych okien możesz na przykład przejrzeć istniejące okna Dokumentów Google, takie jak Plik > Ustawienia strony.
Dokumentacja pakietu CSS dodatków zawiera przykładowe znaczniki dla każdego z podanych niżej rodzajów ustawień.
Przyciski
Nie używaj zwykłych linków ani innych elementów, używając przycisków do sterowania głównymi działaniami w interfejsie.
- Unikaj wyświetlania więcej niż jednego niebieskiego, czerwonego lub zielonego przycisku jednocześnie. Szare przyciski mogą się wielokrotnie wyświetlać.
- Większość etykiet przycisków powinna mieć wielkość liter jak w zdaniu i rozpoczynać się od czasownika. W przypadku czerwonych przycisków, zwykle służących do tworzenia działań, należy używać wielkich liter.
Nie należy | Należy |
---|---|
|
|
Pola wyboru i przyciski opcji
Używaj pól wyboru, jeśli użytkownicy mogą zaznaczyć kilka opcji lub nie mogą ich wybrać wcale. Używaj opcji (lub menu wyboru), gdy trzeba wybrać tylko jedną opcję.
- Nie zmieniaj działania pól wyboru w taki sposób, aby przypominały przyciski opcji.
- Nie rób niczego od razu po sprawdzeniu. Ludzie popełniają błędy. Poczekaj, aż użytkownicy klikną przycisk potwierdzający wybór.
Wybierz menu
Wybór to świetny sposób na zaproponowanie krótkiej listy alternatywnych rozwiązań.
- Posortuj opcje alfabetycznie lub według logicznego schematu, który każdy użytkownik może zrozumieć (np. dni tygodnia, zaczynając od niedzieli).
- Jeśli lista rośnie zbyt długo, rozważ użycie innego elementu sterującego. Możesz na przykład wyświetlić przewijaną listę, aby zrobić w menu więcej miejsca i ułatwić poruszanie się po nim.
Obszary tekstowe
Jeśli użytkownicy muszą wpisać więcej niż kilka słów, użyj obszaru tekstowego.
- Zadbaj o to, 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 na górze.
Pola tekstowe
Używaj pól tekstowych, jeśli użytkownicy muszą wpisać tylko jedno lub dwa słowa.
- Szerokość pola tekstowego powinna wskazywać, czego oczekujesz od użytkowników.
- Unikaj używania tekstu zastępczego jako etykiety, ponieważ zniknie on po zaznaczeniu. Tekst zastępczy przydaje się, gdy można podać przykłady lub podać dodatkowe szczegóły.
- Umieść etykiety na górze. Krótkie pola tekstowe możesz też rozmieszczać obok siebie.
Marka
W Twoim dodatku
Jeśli chcesz zaprezentować markę, postaraj się, aby był zwięzły i zwięzły. Dzięki temu użytkownicy mogą skupić się na interfejsie użytkownika, a dodatek staje się częścią edytora.
- Wszystkie aspekty dodatku muszą być zgodne ze wskazówkami dotyczącymi marki.
- Nie używaj słowa „Google” ani ikon usług Google.
- Tekst nie powinien być dłuższy niż kilka słów i mieć styl ustawiony w klasie
gray
z pakietu CSS dodatków. - Grafika powinna być na białym tle i nie większe niż 200 × 60 pikseli.
- W przypadku okien marka powinna znajdować się w prawym dolnym rogu.
- Na pasku bocznym oznaczenia marki mogą się znajdować u góry lub u dołu.
W sklepie
Aby opublikować dodatek do edytora, musisz mieć szereg komponentów z obrazem. Te zasoby służą do utworzenia informacji o dodatku do aplikacji.
- Wszystkie aspekty informacji o aplikacji muszą być zgodne ze wskazówkami dotyczącymi marki.
- Więcej informacji o wymaganych obrazach znajdziesz w wytycznych dotyczących obrazów.
Ułatwienia dostępu
Każdy powinien móc korzystać z Twojego dodatku, bez względu na to, czy widzi inne kolory, korzysta z czytnika ekranu, czy ma inne potrzeby. Ułatwienia dostępu to obszerny temat, który nie może być w pełni omówiony w tym przewodniku stylistycznym. Przykładem może być strona Ułatwienia dostępu Google. Oto kilka wskazówek, które pomogą Ci zacząć:
- Upewnij się, że możesz przejść do wszystkich elementów interfejsu za pomocą klawiatury. Dodaj element
tabindex=0
do niestandardowych elementów sterujących (np. utworzonych za pomocą<div>
), aby użytkownicy mogli otwierać je za pomocą klawisza Tab. Zastanów się, czy nie powinny być obsługiwane także inne klucze, np. strzałki w przypadku listy. - Niektóre osoby mogą używać czytnika ekranu w połączeniu z dodatkiem. Obrazy powinny mieć atrybut
alt
, a niestandardowe elementy sterujące powinny mieć atrybuty ARIA pozwalające opisać sposób ich użycia. - Nie polegaj wyłącznie na kolorze w odniesieniu do stanu. Używaj też ikon i tekstu.
Jeśli korzystasz ze standardowych ustawień internetowych, takich jak opisane wcześniej w tym przewodniku, ułatwisz sobie dostęp do swojego dodatku.