Komunikaty | Skribly UI

Cztery tonyLink do sekcji Cztery tony

Sukces
Udało się, a wynik jest taki, o jaki prosił czytelnik.
Sukces: Invitation sent to ada@example.com
Odczytywany
Polite
Zostaje
Toast może zniknąć po 5 s lub później
Informacja
Neutralny fakt, który pomaga, bez niczego do naprawienia.
Informacja: Imports run at night
Odczytywany
Polite
Zostaje
Toast może zniknąć po 5 s lub później
Ostrzeżenie
Coś może pójść nie tak albo wkrótce wymaga decyzji. Nic jeszcze nie jest zablokowane.
Ostrzeżenie: Your draft is kept for 7 more days
Odczytywany
Polite
Zostaje
Do zamknięcia
Błąd
Nie udało się albo coś jest zablokowane. Powiedz, co się stało i jak to naprawić.
Błąd: Could not publish. The server did not answer.
Odczytywany
Assertive
Zostaje
Do zamknięcia albo naprawienia

Każdy ton ma kolor, ikonę o własnym kształcie i słowo. Słowo, takie jak „Błąd”, jest propem toneLabel, odczytywanym przed komunikatem, aby znaczenie nigdy nie opierało się na kolorze. Przekazuj go za każdym razem.

Wybierz odpowiedni komponentLink do sekcji Wybierz odpowiedni komponent

Komponenty komunikatów: gdzie się pokazują, jak długo zostają, jak są odczytywane i do czego służą
Komponent	Gdzie	Jak długo	Jak jest odczytywany	Użyj go do
Błąd przy polu	Pod polem, którego dotyczy	Dopóki wartość nie zostanie poprawiona	Razem z polem, przez aria-describedby	Jedno pole, które wymaga zmiany
FormErrorSummary	Na górze formularza	Do następnego wysłania	Typu assertive i przejmuje fokus	Wysłanie, które nie powiodło się na jednym lub kilku polach
Alert	W treści, obok tego, czego dotyczy	Do zamknięcia albo dopóki trwa stan	Statyczny albo typu polite lub assertive z live	Wynik lub stan jednej części strony
Banner	Na pełną szerokość u góry strony albo panelu	Dopóki trwa stan	Nazwany region; live, gdy pojawia się później	Stan całej aplikacji, taki jak tryb offline albo tylko do odczytu
Toast	Na brzegu ekranu	Sukces i informacja co najmniej 5 s; ostrzeżenia i błędy do zamknięcia	Typu polite, a dla błędów assertive	Wynik właśnie wykonanej akcji, gdy nie widać go gdzie indziej
FlashMessages	Na górze następnej strony	Do zamknięcia	Wpisywany do regionu na żywo po załadowaniu strony	Wynik z serwera po przekierowaniu, taki jak „Zapisano”
Status w FormActions	Obok przycisków wysyłania	Do następnego wysłania	Typu polite, a dla błędów assertive	Wynik zapisu krótkiego formularza

Prosta zasada: im bliżej przyczyny jest komunikat, tym lepiej. Błąd przy polu wygrywa z podsumowaniem, podsumowanie z banerem, a toast jest dla wyników, których czytelnik inaczej by nie zobaczył.

Przykłady na żywoLink do sekcji Przykłady na żywo

Alert z wynikiem na żywo

Region na żywo jest na stronie, zanim pojawi się wynik, więc wynik jest odczytywany, gdy się pojawi.

Alert

tsx

<div aria-live="polite">
  {result && <Alert tone="ok" toneLabel={t('tone.ok')} title={t('tracker.connected')} />}
</div>

Banner dla stanu całej aplikacji

Banner

Error: You are offline

Changes are kept on this device and sent when the connection returns.

Warning: Read-only mode

The plan has ended, so changes are not saved until it is renewed.

Page content

tsx

<Banner tone="danger" toneLabel={t('tone.error')} title={t('offline.title')} live="assertive">
  {t('offline.text')}
</Banner>

Toasty dla wyniku akcji

Toast

tsx

const toast = useToast()
toast.success(t('saved'))
toast.error(t('publish.failed'), { description: t('publish.retry') })

Komunikaty flash po przekierowaniu

FlashMessages

Success: Profile saved

tsx

<FlashMessages messages={messagesFromServer} toneLabels={toneLabels} onDismiss={remove} dismissLabel={t('close')} />

Błędy przy polach i podsumowanie błędów

Wyślij pusty formularz. Podsumowanie przejmuje fokus i linkuje do każdego pola; każde pole pokazuje własny błąd. Popraw je i wyślij ponownie, aby zobaczyć komunikat o sukcesie.

Komunikaty formularza

tsx

<FormErrorSummary title={t('form.problems', { count })} errors={errors} />
<TextField id="name" label={t('name')} isInvalid={!!nameError} errorMessage={nameError} />

Wskazówki do pisaniaLink do sekcji Wskazówki do pisania

Powiedz, co się stało, a potem, co zrobić. „Nie udało się zapisać. Sprawdź połączenie i spróbuj ponownie.”
Bądź konkretny. Nazwij rzecz i wartość: „Podaj datę po 1 marca”, a nie „Niepoprawna data”.
Używaj prostych słów i nikogo nie obwiniaj. „Ten adres e-mail jest już używany”, a nie „Wpisałeś niepoprawny e-mail”. Żadnych kodów, chyba że potrzebuje ich pomoc techniczna, i wtedy po słowach.
Tytuł niech będzie krótki. Do około ośmiu słów. Szczegóły daj w opisie.
Powtórz czasownik z przycisku. Po „Opublikuj” napisz „Opublikowano”, aby czytelnik połączył jedno z drugim.
Zachowaj spokój. Bez „Ups”, bez wykrzykników, bez żartów w błędach i co najwyżej jedno przeprosiny, gdy winę ponosi Skribly.
Ostrzeżenia mówią o konsekwencji i drodze wyjścia. „Twój plan kończy się za 3 dni. Odnów go, aby dalej edytować.”

Błąd: Nie udało się opublikować strony

Serwer nie odpowiedział. Twoje zmiany są zapisane; spróbuj ponownie za minutę.

Rób tak. Powiedz, co się nie udało, że praca jest bezpieczna i co zrobić.

Błąd: Ups! Coś poszło nie tak

Błąd 503.

Nie rób tak. Ukryj przyczynę za kodem albo zostaw czytelnika bez następnego kroku.

Sukces: Zaproszenie wysłane do ada@example.com

Rób tak. Potwierdź dokładnie to, co się stało.

Sukces: Sukces!

Nie rób tak. Powtórz słowo tonu jako komunikat.

Czas i fokusLink do sekcji Czas i fokus

Błędy i ostrzeżenia nigdy nie zamykają się same. Toasty sukcesu i informacji zostają co najmniej 5 sekund i wstrzymują się, gdy wskaźnik lub fokus jest na nich.
Przenoś fokus tylko dla błędu blokującego po wysłaniu, tak jak robi to FormErrorSummary. Wszystko inne jest ogłaszane i zostawia fokus tam, gdzie jest.
Ogłaszaj każdy komunikat raz. Najpierw wyrenderuj region na żywo pusty, potem go wypełnij; region, który pojawia się razem z tekstem, często nie jest odczytywany.
Umieść akcję toastu także gdzie indziej. Toast może zniknąć, zanim użytkownik klawiatury do niego dotrze, więc Undo potrzebuje drugiej ścieżki, takiej jak menu pozycji.

Ogłaszanie własnego komunikatutsx

import { announce } from '@skribly/ui/theme'

announce(t('results', { count }))          // polite
announce(t('upload.failed'), 'assertive')  // errors only