Przewodnik po stylach interfejsu dla dodatków do edytora

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Dodatki do edytora Twórz interfejsy (menu, paski boczne i okna) za pomocą usługi HTML Apps Script. Interfejsy zostały opracowane w językach HTML i CSS, więc można je łatwo dostosować. Jednak gdy tworzysz interfejs dodatku, zaprojektuj go tak, aby był wygodny dla użytkowników.

Najlepsze dodatki rozszerzają naturalnie wszystkie edytory, korzystając ze znajomych ustawień i zachowań. Podczas tworzenia nowego dodatku:

  • Na stronach usługi HTML użyj pakietu CSS dodatków.
  • Jeśli nie masz pewności co do projektowania, znajdź podobne okno lub pasek boczny w edytorze i dopasuj je albo zapoznaj się z krótkim wprowadzeniem.
  • Skorzystaj z tego przewodnika, aby zadbać o wygodę użytkowników.

Tekst

Nazwa dodatku

Podczas publikowania musisz ustawić nazwę dodatku. Nazwa ta pojawia się w wielu miejscach, takich jak sklep dodatków i menu.

  • Użyj wielkich liter.
  • Unikaj interpunkcji, zwłaszcza w nawiasach, chyba że stanowią część Twojej marki.
  • Zachowaj zwięzłość – najlepiej użyć maksymalnie 30 znaków. Długie nazwy mogą być automatycznie skracane.
  • Nie podawaj nazwy usługi Google, której dotyczy dodatek (lub wpisz słowo Google).
  • Nie podawaj informacji o wersji.
  • Upewnij się, że nazwa opublikowanego dodatku jest taka sama jak nazwa pliku projektu skryptu. W oknie autoryzacji pojawi się nazwa projektu.
Nie Należy
Nieprawidłowe nazwy dodatków Dobre nazwy dodatków

Styl pisania

Nie musisz wiele pisać. Większość działań powinna być jasno przedstawiona za pomocą ikony, układu i krótkich etykiet. Jeśli uznasz, że Twój dodatek wymaga bardziej szczegółowych informacji, niż są dostępne w przypadku krótkich etykiet, warto utworzyć osobną stronę internetową z opisem dodatku i dodać do niego link.

Podczas pisania tekstu interfejsu:

  • Stosuje się w nim wielkość liter (zwłaszcza w przypadku przycisków, etykiet i pozycji menu).
  • Wybieraj krótki, prosty tekst bez żargonu czy akronimów.
Nie Należy

Wskazówka po instalacji

Wskazówka po instalacji pojawi się natychmiast po zainstalowaniu dodatku, a także w Centrum pomocy. Masz kilka zdań, które mogą ułatwić użytkownikom szybkie rozpoczęcie pracy.

  • Zacznij od słowa działania.
  • Opisz pierwszy etap korzystania z dodatku.
  • Jeśli masz główny interfejs, np. pasek boczny, wyjaśnij, jak go otworzyć.
  • Nie promuj tutaj dodatku, ponieważ jest już zainstalowany.
Nie Należy
Nieprawidłowa wskazówka dotycząca instalacji Dobra wskazówka po instalacji

Dodatki nie wyświetlają się w edytorze skryptów ani w menedżerze skryptów, bo w przeciwieństwie do zwykłych projektów Apps Script; użytkownicy nie mogą bezpośrednio uruchamiać dodatków. Zamiast tego każdy dodatek pojawi się w menu Dodatki. Menu (lub okno lub pasek boczny) umożliwia użytkownikom interakcję z dodatkiem.

  • Menu odgrywa kluczową rolę w kontrolowaniu dodatku, dlatego warto zadbać o jego strukturę i treści.
  • Unikaj pozycji w menu, w których powtarza się nazwa dodatku. Zamiast tego zacznij od słowa kluczowego.
  • Jeśli główny element menu rozpoczyna przepływ pracy, a nie ma pojedynczego czasownika, który opisujełby jego działanie, wywołaj go &"Start". Ten wzorzec jest używany w krótkim wprowadzeniu do Dokumentów.
  • Jeśli w menu nie ma więcej niż 6 elementów, nie korzystaj z menu podrzędnych. Mogą być trudne do wyboru i trudne do wyboru.
  • Opisz zadanie, a nie komponent interfejsu, który wyświetla element menu.
Nie Należy
Nieprawidłowe etykiety pozycji menu Dobre etykiety pozycji menu

Komunikaty o błędach

Jeśli coś pójdzie nie tak, zadbaj o prosty język. Wyjaśnij problem z punktu widzenia użytkownika i zaproponuj jego rozwiązanie.

  • Nie zezwalaj użytkownikowi na wyświetlanie wszelkich wyjątków wskazywanych przez kod. Zamiast tego użyj instrukcji try...catch, aby przechwytywać wyjątki, a następnie wyświetlaj komunikat o błędzie ze stroną w tekście w klasie error z pakietu CSS dodatków lub z okna alertu.
  • Zanim opublikujesz dodatek, sprawdź, czy Twój dodatek nie zapisuje informacji o debugowaniu w konsoli JavaScript. Zamiast tego użyj dziennika Stackdriver.
Nie Należy
Błąd komunikatu o błędzie Dobry komunikat o błędzie

Materiały edukacyjne

Każde menu dodatku ma automatyczne okno pomocy. Jeśli podczas publikowania podajesz URL do pomocy, przycisk „Więcej informacji” zawiera link do tej strony. Jeśli Twój dodatek nie jest wyjaśniony, dołącz stronę z opisem jego używania.

  • Gdy to możliwe, wyświetlaj instrukcje na liście punktowanej lub numerowanej. Kieruj użytkowników do wyniku końcowego z wyraźnymi odwołaniami do nazwanych elementów interfejsu.
  • Upewnij się, że instrukcje wyraźnie wyjaśniają wszelkie wymagania, na przykład konfigurowanie arkusza kalkulacyjnego w określony sposób.
  • Możesz też podać link do materiałów pomocy w głównym interfejsie. Jeśli dodatek tworzy nowy dokument, możesz także wyświetlić instrukcje w jego treści.

Niestandardowe interfejsy

Niektóre proste dodatki do edytora można kontrolować w 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 swoich treściach lub arkuszach kalkulacyjnych.
  • Okna najlepiej sprawdzają się w przypadku jednorazowych narzędzi, stron ustawień i ważnych wiadomości.

Tekst interfejsu

W dowolnym oknie lub na pasku bocznym zakładaj, że użytkownicy czytają tylko etykiety tytułu i przycisku. Czy wciąż będą mogli się dowiedzieć, co działa w Twoim interfejsie i dokonać właściwego wyboru?

  • Użyj własnych tytułów i etykiet przycisków.
  • Unikaj długich bloków tekstu opisowego.

Okna

Okna są przydatne w przypadku narzędzi, których użytkownicy używają raz, a potem kontynuują. Jeśli na przykład Twój dodatek pozwala na wstawienie grafiki, możesz wyświetlić okno z opcjami wstawiania elementów, a następnie zamknąć to okno po wstawieniu grafiki. Okna są też przydatne przy wyświetlaniu ustawień dodatku lub przekazywaniu ważnej wiadomości.

  • Nie otwieraj okien (w tym alertów i potwierdzeń) z innego okna, tylko wyświetlane pojedynczo.
  • W tytule okna użyj słowa lub krótkiego wyrażenia, które poprzedza najważniejsze słowo.
  • Etykiety przycisków powinny być powiązane z tytułem okna dialogowego.
  • Preferuj 2 przyciski – zwykle są to czynności główne i &Anuluj; W szczególnych przypadkach, które wymagają trzeciego przycisku, spójrz na prawy dolny róg.
  • Umieść przyciski w lewym dolnym rogu okna dialogowego. Niebieski przycisk główny powinien być po lewej stronie, a szare przyciski dodatkowe po prawej.
Nie Należy
Nieprawidłowy tytuł okna Dobry tytuł okna

Paski boczne umożliwiają odwołanie się do dokumentu, arkusza kalkulacyjnego, prezentacji lub formularza podczas dokonywania wyboru. Umożliwiają też wielokrotne używanie dodatku. Za każdym razem, gdy otwiera się nowy pasek boczny, poprzedni pasek jest zamykany automatycznie. Najlepiej sprawdzają się w przypadku trybów tymczasowych, które użytkownik zamyka po zakończeniu pracy.

  • Użytkownicy mogą mieć inne dodatki z własnymi paskami bocznymi. Jeśli 2 dodatki próbują otworzyć jednocześnie paski boczne, wyświetli się tylko jeden.
  • Nie pokazuj paska bocznego ani okna dialogowego po pierwszym otwarciu dokumentu.
  • Paski boczne i okna dialogowe mogą otwierać tylko dodatki uruchomione w AuthMode.FULL. Aby otworzyć pasek boczny, możesz użyć elementu menu, ponieważ użytkownik poprosi o pełną autoryzację.

Opcje

Świetne interfejsy użytkownika dodatków dają kontrolę nad miejscem oddechu. Odpowiednie marginesy i dopełnienie mają wiele zalet, a gęste elementy sterujące mogą wydawać się przytłaczające. W razie wątpliwości pożyczysz układ od samego edytora. Na przykład przy tworzeniu własnych możesz przejrzeć istniejące okna dialogowe w Dokumentach Google, takie jak Plik i konfiguracja strony.

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

Przyciski

Za pomocą przycisków możesz zarządzać głównymi działaniami w interfejsie użytkownika zamiast prostych linków i innych elementów.

  • Unikaj wyświetlania więcej niż jednego niebieskiego, czerwonego lub zielonego przycisku naraz. Szare przyciski mogą być wyświetlane wielokrotnie.
  • Większość etykiet przycisków powinna być zapisana wielkimi literami i zaczynać się od czasownika. Czerwone przyciski, zwykle służące do tworzenia działań, powinny zawierać tylko wielkie litery.
Nie Należy

pola wyboru i przyciski;

Używaj pól wyboru, gdy użytkownicy mogą zaznaczyć wiele opcji lub nie zaznaczyć żadnej. Jeśli chcesz wybrać tylko jedną opcję, użyj opcji (lub menu wyboru).

  • Nie zmieniaj pól wyboru ani naśladowania opcji.
  • Niepodejmuj żadnych działań natychmiast po sprawdzeniu. Ludzie popełniają błędy. Poczekaj, aż użytkownicy klikną przycisk, aby potwierdzić wybór.

Wybierz menu

Selektory to świetny sposób na skrócenie listy alternatywnych opcji.

  • Opcje należy sortować alfabetycznie lub według logicznego schematu, który jest zrozumiały dla wszystkich użytkowników (np. dni tygodnia, od niedzieli).
  • Jeśli lista jest za długa, możesz użyć innej opcji. Możesz na przykład wyświetlić listę, którą można przewijać, aby zrobić w menu więcej miejsca i ułatwić poruszanie się.

Obszary tekstowe

Jeśli chcesz wpisać więcej niż kilka słów, użyj obszaru tekstowego.

  • Dodaj co najmniej 2 wiersze tekstu, aby łatwiej było z nich korzystać 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 1 lub 2 słowa.

  • Szerokość pola tekstowego powinna sugerować, co użytkownik powinien wpisać.
  • Unikaj używania tekstu zastępczego jako etykiety, ponieważ znika on po wybraniu. Tekst zastępczy jest przydatny, gdy chcesz podać przykłady lub dodatkowe informacje.
  • Umieść etykiety na górze, ale możesz układać krótkie pola tekstowe obok siebie.

Marka

W dodatku

Jeśli chcesz dodać elementy marki, zadbaj o to, aby były zwięzłe i jasne. Dzięki temu skupisz się na interfejsie użytkownika, a Twój dodatek stanie się częścią 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 powinien mieć więcej niż kilka słów i nie powinien być stylowany w klasie gray z pakietu CSS dodatków.
  • Grafika powinna być na białym tle, a jej rozmiar nie może przekraczać 200 × 60 pikseli.
  • W przypadku dialogów marka powinna być widoczna w prawym dolnym rogu.
  • W przypadku pasków bocznych marka może się znajdować na górze lub na dole.

W sklepie

Aby opublikować dodatek do edytora, musisz mieć liczbę zasobów graficznych. Zasoby te służą do tworzenia dodatkowych informacji o aplikacji.

Ułatwienia dostępu

Każdy powinien mieć możliwość korzystania z dodatku, niezależnie od tego, czy jest on inaczej postrzegany, czy z czytnika ekranu. Ułatwienia dostępu to szeroki temat, którego nie można w pełni uwzględnić w tym przewodniku. Jednym z przydatnych materiałów jest witryna Ułatwienia dostępu Google. Oto kilka wskazówek na początek:

  • Upewnij się, że za pomocą klawiatury możesz przejść do wszystkich elementów interfejsu. Dodaj użytkownika tabindex=0 do ustawień niestandardowych (takich jak te utworzone za pomocą <div>), aby użytkownicy mogli z nich korzystać. Zastanów się, czy inne klucze, np. strzałki, też powinny być obsługiwane.
  • Niektóre osoby mogą używać czytnika ekranu z dodatkiem. Obrazy powinny więc mieć atrybut alt, a elementy niestandardowe powinny mieć atrybuty ARIA, które opisują ich użycie.
  • Nie wolno polegać wyłącznie na kolorze, jeśli chcesz przekazać informacje o stanie. Używaj też ikon i tekstu.

Jeśli korzystasz ze standardowych elementów sterujących sieci, takich jak te opisane w tym przewodniku, ułatwienie dostępu stanie się łatwiejsze.