Przewodnik po stylach interfejsu dla dodatków do Google Workspace

Google Workspace Dodatki powinny być zgodne ze stylem i układem aplikacji hosta, którą rozszerzają. Interfejs użytkownika powinien w naturalny sposób rozbudować się w jego obrębie, używając dobrze znanych elementów sterujących i zachowań. Przedstawione tu wskazówki opisują sposoby obsługi tekstu, obrazów, elementów sterujących i elementów marki, które mają zapewnić wysoką jakość.

Jeśli dodatek uruchamia osobne strony internetowe, które stanowią integralną część działania dodatku (na przykład stronę ustawień dodatku), upewnij się, że te strony także są zgodne z tymi wskazówkami.

Użyj Google Workspace zestawu dodatków

Aby zapewnić użytkownikom większą wygodę, projektanci mogą skorzystać z Google Workspace zestawu dodatków w interfejsie dostępnego na Figmie. Możesz utworzyć bezpłatne konto Figma lub poprosić o licencję administratora organizacji.

Przeglądaj komponenty interfejsu opartego na kartach i korzystaj z wbudowanych szablonów, aby tworzyć i wizualizować dodatki.

Pobierz zestaw projektowy

Tekst i obrazy

Z tej sekcji dowiesz się, jak prawidłowo używać tekstu i obrazów w dodatku.

Nazwa dodatku

Musisz wpisać nazwę dodatku w pliku manifestu projektu i skonfigurować dodatek do publikacji. Nazwy te pojawiają się w wielu miejscach, np. w Google Workspace Marketplace i w menu. Podczas wybierania nazwy:

  • Używaj wielkich liter.
  • Unikaj znaków interpunkcyjnych, zwłaszcza w nawiasach, chyba że stanowią część marki.
  • Zachowaj zwięzłość – najlepiej nie więcej niż 15 znaków. Długie nazwy mogą być automatycznie skracane na Google Workspaceliście miejsc i w innych miejscach.
  • Nie używaj w nazwie dodatku słów „Google”, „Gmail” ani innych nazw usług Google.
  • Nie umieszczaj w nazwie dodatku słowa „Dodatek”.
  • Nie podawaj informacji o wersji.

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 działań kart).
  • Wybieraj krótki, prosty tekst bez żargonu lub akronimów.

Działania uniwersalne i działania związane z kartami

Jeśli w dodatku korzystasz z działań uniwersalnych lub kart, wyświetlają się one jako elementy menu w zdefiniowanych przez Ciebie kartach. Możesz wybrać tekst, który będzie używany w tych menu. Podczas wybierania tekstu do użycia:

  • Unikaj tekstów menu, które powtarzają nazwę dodatku.
  • Rozpocznij każdy element menu od działania, takiego jak „Uruchom”, „Skonfiguruj” lub „Utwórz”.
  • Opisz zadanie, a nie komponent interfejsu, który wyświetla działanie.
  • Jeśli akcja rozpoczyna przepływ pracy i nie ma pojedynczego słowa opisującego jej działanie, nazwij ją „Start”.
  • Ogranicz liczbę elementów menu do minimum, aby użytkownik nie musiał przewijać dużej listy. Jeśli chcesz wdrożyć więcej działań, rozważ użycie kilku kart z różnymi działaniami na każdej z nich.

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 instrukcji try...catch, aby przechwycić wyjątki, a następnie wyświetl przyjazny dla użytkowników komunikat o błędzie.
  • Zanim opublikujesz dodatek, sprawdź, czy Twój dodatek nie wyświetla informacji o debugowaniu w interfejsie.

Materiały edukacyjne

Możesz projektować karty z informacjami o pomocy lub wyjaśniać działanie dodatku. Jeśli tworzysz pomoc dla swojego dodatku, pamiętaj, że:

  • 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 podać linki do zewnętrznych materiałów pomocy, takich jak obsługa stron internetowych.

zdjęcia;

Obrazy używane w dodatku to jeden z wbudowanych typów ikon lub obrazów hostowanych publicznie, które określone są przy użyciu adresu URL. Jeśli używasz hostowanych obrazów, upewnij się, że są one dostępne dla wszystkich osób, które mogą używać Twojego dodatku.

Opcje

W tej sekcji znajdziesz wskazówki dotyczące interaktywnych widżetów dla użytkowników.

Przyciski

Za pomocą przycisków możesz kontrolować główne działania interfejsu, a nie inne widżety.

  • Większość etykiet z przyciskiem tekstowym powinna zaczynać się od czasowników.
  • W większości przypadków wiersze przycisków mogą mieć maksymalnie 3 przyciski.

Dekorowany tekst

Widżety Dekorowany tekst pozwalają prezentować treść za pomocą ikon, przycisków lub przełączników.

  • W treści tekstowej używaj wielkich liter.
  • Jeśli widżet nie mieści się w dostępnym miejscu, tekst widżetu „Dekorowany tekst” jest obcięty. Z tego powodu zawsze staraj się utrzymywać jak najkrótszy tekst.

Opcje wyboru

W dodatku mogą znajdować się różne widżety do zaznaczania: pola wyboru, 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ę. Aby zaoszczędzić miejsce w interfejsie, podczas tworzenia listy rozwijanej użyj krótkiej listy alternatywnych opcji.
  • W tekście przypisanym do każdej opcji używaj wielkich liter.
  • Unikaj wprowadzania zmian w procesie podejmowania głównych działań o trudnym odwróceniu, ponieważ często zdarzają się pomyłki podczas dokonywania wyboru. Zamiast tego rozważ dodanie przycisku, który odczytuje bieżące wartości wyboru, a następnie aktywuje działanie.
  • W przypadku menu sortuj opcje alfabetycznie lub według logicznego schematu, tak aby były zrozumiałe dla wszystkich użytkowników (np. wyświetlanie dni tygodnia w kolejności od niedzieli lub poniedziałku).
  • Ogranicz liczbę opcji w widżecie do wyboru. Jeśli jest ich zbyt wiele, użytkownicy mogą mieć problem z korzystaniem z tego widżetu. W takich przypadkach warto podzielić opcję na różne kategorie i różne widżety.

Dane tekstowe

Dane wejściowe umożliwiają użytkownikom wprowadzanie danych w postaci ciągów znaków.

  • Nie wpisuj tekstu, aby użytkownik wpisał jeden z możliwych zestawów wpisów. Użyj menu.
  • Dzięki wskazówkom i sugestiom możesz ułatwić użytkownikowi wpisanie tekstu we właściwym formacie i treści.
  • Jeśli wielowierszowy tekst wpisu ma więcej niż kilka słów, użyj kilku wierszy.

Marka

W tej sekcji znajdziesz wskazówki dotyczące dodawania elementów marki do interfejsu dodatku.

W dodatku

Jeśli chcesz umieścić elementy marki w interfejsie dodatku, zadbaj o to, by były zwięzłe i lekkie. Pomoże to użytkownikom skupić się na funkcji dodatku.

  • Wszystkie aspekty dodatku muszą być zgodne ze wskazówkami dotyczącymi promowania marki.
  • Nie używaj słów „Google”, „Gmail” ani innych nazw usług Google.
  • Nie dodawaj ikon produktów Google, nawet jeśli zostały zmienione.
  • W tekście marki nie umieszczaj słowa „Dodatek”.
  • Tekst dotyczący marki nie powinien przekraczać kilku słów.

W Google Workspace Marketplace

Podczas konfigurowania dodatku na potrzeby publikacji musisz dostarczyć wiele zasobów graficznych i tekstowych, by stworzyć listęGoogle Workspace rynków.

Wszystkie aspekty informacji o aplikacji i tych zasobów muszą być zgodne ze wskazówkami dotyczącymi promowania marki.