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

Przewodnik po stylach interfejsu dla dodatków do Edytora

Dodatki do edytora tworzyć interfejsy użytkownika (menu, paski boczne i okna dialogowe) za pomocą języka Apps Script Usługa HTML. Ponieważ interfejsy są tworzone w językach HTML i CSS, można je więc mocno dostosować. Jednak gdy podczas tworzenia interfejsu dodatku, zaprojektuj go w taki sposób, aby zapewnić użytkownikom z myślą o użytkownikach.

Najlepsze dodatki rozszerzają każdy edytor w naturalny sposób dzięki dobrze znanym elementom sterującym i zachowań. Podczas tworzenia nowego dodatku:

Użyj pakietu CSS dodatków w strony usługi HTML.
W razie wątpliwości co do projektu poszukaj podobnego okna lub paska bocznego w edytorze i go pasują lub odnoszą się do dodatku.
Postępuj zgodnie ze wskazówkami zawartymi w tym poradniku stylistycznym, aby zapewnić sobie pełną wygodę.

Tekst

Nazwa dodatku

Nazwę dodatku musisz podać podczas publikowania . Nazwa wyświetla się w wielu miejscach, na przykład w sklepie z dodatkami i w menu.

Jak nazwy własne.
Unikaj znaków interpunkcyjnych, zwłaszcza nawiasów, jeśli nie są one częścią Twojej marki.
Zadbaj o to, aby była krótka – najlepiej użyć maksymalnie 30 znaków. Długie nazwy mogą być automatycznie obcięte.
Nie podawaj nazwy usługi Google, do której jest przeznaczony dodatek (lub użyj słowo „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.

Przeciwwskazania	Należy

Styl pisania

Nie musisz pisać zbyt wiele. Większość działań powinna być jasno przedstawiona przez ikony, układ i krótkie etykiety. Jeśli zauważysz, że część dodatku wymaga bardziej obszernego wyjaśnienia niż krótkie etykiety, dlatego najlepiej możesz utworzyć osobną stronę internetową z opisem swojego dodatku i umieścić na niej link.

Podczas wpisywania tekstu interfejsu:

Stosuj wielkość liter jak w zdaniu (zwłaszcza w przypadku przycisków, etykiet i pozycji menu).
Wolę krótki, prosty tekst bez żargonu i akronimów.

Przeciwwskazania	Należy

Wskazówka po instalacji

Gdy ktoś zainstaluje Twój dodatek, wyświetli się wskazówka po jego zainstalowaniu. pojawi się w Pomocy. Masz kilka zdań, które mają pomóc użytkownikom w szybkim rozpoczęciu.

Zacznij od słowa działającego.
Opisz pierwszy krok podczas korzystania z dodatku.
Jeśli masz główny interfejs, np. pasek boczny, wyjaśnij, jak go otworzyć.
Nie promuj tu swojego dodatku – jest już zainstalowany.

Przeciwwskazania	Należy

Pozycje menu

W przeciwieństwie do zwykłych projektów Apps Script dodatki nie pojawiają się w edytorze skryptów lub menedżer skryptów; użytkownicy nie mogą bezpośrednio uruchamiać skryptów dodatkowych. Zamiast tego każdy tag pojawi się w menu dodatków. Menu (oraz ewentualnie okno lub pasek boczny) pozwala użytkownicy korzystają z dodatku.

Menu jest kluczowym elementem sposobu kontrolowania dodatku, dlatego zaprojektuj go urozmaicić ich strukturę i sformułowania.
Unikaj elementów menu, które zawierają tylko nazwę dodatku. Zamiast tego zacznij od działanie.
Jeśli element menu głównego rozpoczyna przepływ pracy i nie ma żadnego czasownika, którego opisuje działanie, nazywając je „Start”. Ten wzorzec jest używany w atrybutach Krótkie wprowadzenie do dodatku do Dokumentów
Jeśli w menu nie jest więcej niż 6 pozycji, staraj się nie używać menu podrzędnych. Mogą są ograniczone i trudne do wyboru.
Opisz zadanie, a nie komponent interfejsu wyświetlany w menu.

Przeciwwskazania	Należy

Komunikaty o błędach

Gdy coś pójdzie nie tak, należy pisać prostym językiem. Wyjaśnij: z perspektywy użytkownika i podpowiedz, jak go rozwiązać.

Nie zezwalaj użytkownikowi na wyświetlanie żadnych wyjątków zgłoszonych przez Twój kod. Zamiast tego użyj try...catch instrukcje przechwytywania wyjątków, a następnie wyświetlanie przyjaznego dla użytkownika komunikatu o błędzie z tekstem w tekście umieszczonym w stylu error zajęcia z CSS dodatków pakietu usług lub okna alertu.
Przed opublikowaniem sprawdź, czy dodatek nie rejestruje informacji debugowania w konsoli JavaScript, należy użyć funkcji Logowanie usługi Stackdriver .

Przeciwwskazania	Należy

Materiały edukacyjne

Menu każdego dodatku zawiera automatyczne okno Pomoc. Jeśli podasz adres URL pomocy podczas publikowania pojawi się link „Więcej informacji”, który prowadzi do tej strony. O ile jest niewymagający wyjaśnień, podaj stronę z wyjaśnieniem, jak z niego korzystać.

Jeśli to możliwe, pokazuj instrukcje w formie listy punktowanej lub numerowanej. Użytkownicy pieszo z wyraźnymi odwołaniami do nazwanych elementów interfejsu.
Dopilnuj, aby instrukcje zawierały jasne informacje o wymaganiach, takich jak konfiguracja arkusza kalkulacyjnego w określony sposób.
Możesz także podać linki do materiałów pomocy w głównym interfejsie użytkownika. Jeśli dodatek tworzy nowy dokument, możesz też wyświetlić instrukcje w treść dokumentu.

Niestandardowe interfejsy użytkownika

Niektóre proste dodatki edytora można w całości kontrolować za pomocą ich menu, ale większość z nich wyświetlać pasek boczny lub okno z własnym treści.

Paski boczne najlepiej sprawdzają się w przypadku trwałych narzędzi, z których użytkownicy mogą korzystać wiele razy, 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łóż, że użytkownicy czytają tylko tytuł i etykiety przycisku. Czy nadal wiedzą, do czego służy Twój interfejs i czy mogą dokonać właściwego wyboru?

Używaj etykiet tytułu i przycisków, które są niezależne od siebie.
Unikaj długich bloków tekstu opisowego.

Okna

Okna świetnie sprawdzają się w przypadku narzędzi, z których użytkownicy korzystają raz, a potem przejdą dalej. Jeśli na przykład plik umożliwia wstawianie grafiki, można wyświetlić okno z opcjami co wstawić, a następnie zamknąć okno po wstawieniu grafiki. Okna: może być również pomocna przy wyświetlaniu ustawień dodatku ważnej wiadomości.

Nie otwieraj okna (w tym alertu lub promptu) z innego okna – tylko wyświetlają się pojedynczo.
Jako tytuł okna dialogowego użyj słowa lub krótkiego wyrażenia, zaczynając od największej słowo kluczowe.
Etykiety przycisków powinny być powiązane z tytułem okna.
Preferuj 2 przyciski, zwykle jako działanie główne i „Anuluj”. Przypadki szczególne jeśli potrzebujesz trzeciego przycisku, wybierz prawy dolny róg.
Umieść przyciski w lewym dolnym rogu okna. Niebieski przycisk główny powinien znajdować się po lewej stronie, a wszystkie szare przyciski dodatkowe – po prawej.

Przeciwwskazania	Należy

Paski boczne

Paski boczne umożliwiają powrót do dokumentu, arkusza kalkulacyjnego, prezentacji podczas dokonywania wyborów. Umożliwiają też innym korzystanie z Twojego dodatku. Po otwarciu nowego paska bocznego każdy poprzedni zamyka się automatycznie. Najlepiej sprawdzają się w trybach tymczasowych, z których użytkownik może wyjść, gdy są gotowe.

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

Elementy sterujące

Świetne interfejsy dodatków dają im spokojną kontrolę. Odpowiednie marże dopełnienie można wykorzystać w dużym stopniu, natomiast precyzyjne ustawienia mogą wydawać się przytłaczające. Kiedy w domu w wątpliwość, pożyczyć układ od samego edytora. Możesz na przykład przejrzeć istniejące w Dokumentach Google, takich jak Plik > Ustawienia strony, podczas tworzenia własnej.

Dokumentacja pakietu CSS dodatków. zawiera przykładowe znaczniki dla każdego z poniższych typów ustawień.

Przyciski

Zamiast używać zwykłych przycisków, możesz sterować głównymi działaniami interfejsu linki i inne elementy.

Unikaj wyświetlania więcej niż jednego niebieskiego, czerwonego lub zielonego przycisku naraz. Szary mogą pojawiać się wielokrotnie.
Większość etykiet przycisków powinna mieć wielkość liter jak w zdaniu i zaczynać się od czasownika. Czerwony (zwykle do tworzenia działań) powinny być wpisywane wielkimi literami.

Przeciwwskazania	Należy

Pola wyboru i opcje

Użyj pól wyboru, gdy użytkownicy mogą wybrać wiele opcji lub nie mogą wybrać żadnej opcji. Używaj (lub menu wyboru), kiedy należy zaznaczyć dokładnie jedną opcję.

Nie zmieniaj pól wyboru w celu naśladowania przycisków opcji.
Nie podejmuj żadnych działań od razu po sprawdzeniu. Ludzie popełniają błędy. Czekaj dopóki użytkownik nie kliknie przycisku potwierdzającego wybór.

Wybierz menu

Propozycje to świetny sposób na przedstawienie krótkiej listy alternatywnych rozwiązań.

Posortuj opcje alfabetycznie lub według schematu logicznego, który wszyscy użytkownicy mogą zrozumieć (np. dni tygodnia, zaczynając od niedzieli).
Jeśli lista okaże się zbyt długa, rozważ użycie innego elementu sterującego. Przykład: możesz wyświetlić przewijaną listę, aby dodać więcej miejsca w menu łatwiejsza w nawigacji.

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, aby były łatwiejsze w użyciu wyglądają jak pola tekstowe.
Umieść etykiety na górze.

Pola tekstowe

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

Szerokość pola tekstowego powinna wskazywać, co użytkownicy mogą w nim wpisać.
Unikaj używania tekstu zastępczego jako etykiety, bo znika on po zaznaczeniu. Tekst zastępczy przydaje się do podawania przykładów lub dodatkowych szczegółów.
Umieść etykiety na górze, ale możesz też rozłożyć krótkie pola tekstowe obok siebie.

Promowanie marki

W dodatku

Jeśli chcesz zamieścić markę, powinna być zwięzła i zwięzła. To pomaga użytkownicy koncentrują się na Twoim interfejsie, dzięki czemu Twój dodatek ma wrażenie, że jest częścią edytora.

Wszystkie aspekty dodatku muszą być zgodne z wskazówkami dotyczącymi promowania marki.
Nie używaj słowa „Google” ani nie używaj ikon usług Google.
Tekst powinien składać się z maksymalnie kilku słów i mieć styl gray klasa z CSS dodatków pakietu SDK.
Grafika powinna mieć białe tło i nie może być większa niż 200 × 60 pikseli.
W przypadku okien elementy marki powinny znajdować się w prawym dolnym rogu.
W przypadku pasków bocznych oznaczenia marki mogą znajdować się u góry lub u dołu.

W sklepie

Aby opublikować dodatek do Edytora, musisz mieć komponentów z obrazem. Te zasoby służą do tworzenia informacji o dodatku.

Wszystkie elementy strony aplikacji muszą być zgodne z wskazówkami dotyczącymi promowania marki.
Więcej informacji o obrazach, które należy przesłać, znajdziesz tutaj wytycznych dotyczących obrazów.

Ułatwienia dostępu

Każdy powinien mieć możliwość korzystania z Twojego dodatku, bez względu na to, czy widzą kolory korzystają z czytnika ekranu lub mają inne potrzeby. Ułatwienia dostępu to bardzo szeroki zagadnieniu, którego nie da się w pełni omówić w tym poradniku stylistycznym. Przydatne materiały znajdziesz na stronie Ułatwienia dostępu w Google. Ale tutaj kilka wskazówek:

Upewnij się, że możesz przechodzić do wszystkich elementów interfejsu za pomocą klawiatury. Dodaj tabindex=0 do niestandardowych ustawień (np. tych utworzonych przy użyciu <div>), aby użytkownicy mogli kliknij przycisk Tab. Zastanów się, czy inne klawisze, np. strzałki, powinny być obsługiwane. .
Niektóre osoby mogą używać czytnika ekranu z Twoim dodatkiem. Obrazy powinny więc być mieć alt, a ustawienia niestandardowe – Atrybuty ARIA opisujące ich zastosowanie.
Nie polegaj wyłącznie na kolorach, aby informować o stanie. Używaj też ikon i tekstu.

Jeśli używasz standardowych elementów sterujących, opisanych wcześniej w tym przewodniku, ułatwienia dostępu do dodatku.