Powiadomienie: Dwie kolumny — Zasady i przykłady

Powiadomienie dwukolumnowe umieszcza dwa krótkie, oznaczone etykietami komunikaty pod jednym wspólnym tematem. Komunikaty mogą kontrastować działania, wyjaśniać dwa warunki lub rozróżniać powiązane stany, ale każdy musi pozostać dokładny i użyteczny czytany samodzielnie.

Ten renderowany element działa, ponieważ „Strona wersji roboczej" i „Opublikowana strona" to rzeczywiste warunki, a nie ozdobne nagłówki. Wspólny tytuł określa decyzję, każde powiadomienie dostarcza pełnej instrukcji, a żadne nie wymaga od czytelnika wywnioskowania znaczenia z koloru lub poziomej pozycji.

Dlaczego ten element jest ważny

Czytelnicy często napotykają wskazówki podczas skanowania treści w poszukiwaniu warunku, który ich dotyczy. Długi akapit mówiący „wersje robocze mogą zawierać oznaczone przykłady, podczas gdy opublikowane strony wymagają zweryfikowanych wartości" zmusza czytelnika do trzymania jednej klauzuli w pamięci podczas sprawdzania drugiej. Dwa ograniczone komunikaty zmniejszają tę pracę. Etykiety najpierw ujawniają rozgałęzienie, dzięki czemu czytelnik może zidentyfikować odpowiedni warunek, a następnie przeczytać jego instrukcję.

Korzyść psychologiczna to selektywna uwaga. Ludzie nie zawsze potrzebują obu komunikatów w równym stopniu — potrzebują pewności, że zauważyli ten właściwy. Wspólny tytuł stawia pytanie, a wyraźne etykiety uwidaczniają dostępne stany. Prezentacja obok siebie sprawia również, że znaczący kontrast jest oczywisty bez wyolbrzymiania go jako sytuacji zwycięzcy i przegranego.

Ta korzyść znika, gdy autor wymusza fałszywą symetrię. Fałszywa symetria występuje, gdy układ sugeruje, że dwie idee mają równy zakres, wagę lub ważność, mimo że treść na to nie wskazuje. Jednozdaniowe przypomnienie obok sześcioetapowej procedury bezpieczeństwa to nie jest para. Nie jest nią również wymagane ograniczenie prawne obok opcjonalnej porady produktywności. Kolumny o równej szerokości mogą sprawić, że nierówne komunikaty będą wyglądać na wymienne, co jest dokładnie złym sygnałem.

Wyodrębnialność maszynowa to zdolność oprogramowania do izolowania treści przy zachowaniu relacji, które czynią ją dokładną. Typowane powiadomienie dwukolumnowe ujawnia jeden nadrzędny temat i dwa oznaczone etykietami komunikaty podrzędne. Systemy wyszukiwania i agenty AI mogą odzyskać „Dla opublikowanej strony użyj zweryfikowanych wartości wraz ze źródłem i datą sprawdzenia" bez zgadywania, który nagłówek rządzi którym zdaniem. Wyraźne etykiety, kolejność źródłowa i samodzielne treści działają poprawnie po responsywnym układaniu i ekstrakcji tylko tekstu.

Postępuj zgodnie z zasadami pisania elementów przed wyborem tego komponentu. Cel ma pierwszeństwo przed wyglądem. Poważne ryzyko pozostaje polem ostrzegawczym , korekta zachowanie po zachowaniu pozostaje blokiem „zrób i nie rób" , a dwa fakty nie stają się powiadomieniami tylko dlatego, że projekt może umieścić je w kolumnach.

Kiedy go używać

Użyj tego elementu, gdy jeden wspólny temat ma dokładnie dwa krótkie komunikaty, a zobaczenie obu naraz pomaga czytelnikowi zaklasyfikować, porównać lub uniknąć nieporozumień. Odpowiednie relacje obejmują:

• Dwa warunki: zalogowany versus wylogowany, wersja robocza versus opublikowana, przed migracją versus po migracji.
• Dwie grupy odbiorców: właściciel konta versus zaproszony użytkownik, pod warunkiem że oboje otrzymują wskazówki dotyczące tego samego zdarzenia.
• Zachowanie zalecane i odradzane: tylko wtedy, gdy każda strona jest krótkim komunikatem, a nie listą dopasowanych zachowań.
• Stany dostępne i niedostępne: gdy etykiety określają warunki prowadzące do każdego stanu.
• Zachowanie bieżące i przyszłe: gdy daty lub granice wersji są wyraźnie podane.

Wszystkie te testy muszą być zaliczone:

1. Jeden nagłówek może dokładnie wprowadzić oba komunikaty.
2. Istnieją dokładnie dwa warunki lub komunikaty; źródło nie ukrywa trzeciego przypadku.
3. Każdy komunikat ma konkretną etykietę oraz pełną konsekwencję lub działanie.
4. Parę można zrozumieć w kolejności źródłowej na wąskim ekranie.
5. Żaden komunikat nie wymaga zagnieżdżonej procedury, tabeli, formularza ani długiego zastrzeżenia.

Bliskie chybienia ujawniają niewłaściwe użycie. Użyj zwykłej prozy, gdy drugie stwierdzenie jedynie kontynuuje pierwsze. Użyj tabeli porównawczej, gdy czytelnicy muszą ocenić kilka kryteriów. Użyj drzewa decyzyjnego, gdy rozgałęzia się więcej niż dwa warunki lub gdy jedna odpowiedź prowadzi do kolejnego pytania. Użyj samodzielnego ostrzeżenia, gdy przeoczenie komunikatu może spowodować szkodę, utratę danych, narażenie prawne lub nieodwracalne działanie. Użyj bloku „zrób i nie rób", gdy kilka błędnych zachowań wymaga odpowiednich korekt.

Nie twórz sztucznego przeciwwagi. Jeśli uczciwa instrukcja brzmi „Wykonaj kopię zapasową bazy danych przed migracją", dodanie „Po migracji: kontynuuj pracę" tworzy symetrię, ale nie wnosi wartości. Podobnie nie dziel jednego powiadomienia na „Ważne" i „Również ważne". Etykiety muszą nazywać rzeczywiste warunki, stany, grupy odbiorców lub pozycje.

Gdzie go umieścić

Umieść element bezpośrednio po akapicie, który definiuje wspólną sytuację. Czytelnicy muszą wiedzieć, jaką decyzję lub stan kwalifikują komunikaty, zanim napotkają rozgałęzienia. Gdy para poprzedza działanie, umieść ją przed pierwszym krokiem, który zmienia dane lub zobowiązuje czytelnika do wyboru.

Dokładne zasady pozycjonowania to:

• Umieść parę dwóch warunków po wymaganiach wstępnych, a przed instrukcjami specyficznymi dla warunku.
• Umieść kontrast przed działaniem przed kontrolką, poleceniem, pobraniem lub krokiem, który kwalifikuje.
• Umieść parę stanów wynikowych po zdefiniowaniu wyniku, a przed szczegółami rozwiązywania problemów.
• Umieść dowód lub źródło wewnątrz odpowiedniego powiadomienia, gdy wspiera tylko to powiadomienie; umieść wspólny dowód bezpośrednio po całej parze.
• W powtarzających się sekcjach dokumentacji używaj tej samej kolejności źródłowej, aby powtarzające się stany nie zmieniały pozycji.

Element nie może znajdować się obok innego komponentu dwukolumnowego, tabeli porównawczej, kontrolki zakładek, siatki cenowej lub podzielonego wezwania do działania. Sąsiednie siatki powodują niejednoznaczność granic i mogą sugerować czterokierunkowy wybór. Nie może oddzielać twierdzenia od cytatu, kroku od wymaganego ostrzeżenia ani kontrolki formularza od jej etykiety. Nie umieszczaj go wewnątrz numerowanego kroku: zagnieżdżone rozgałęzienia mogą zaciemnić sekwencję i odpowiedzialność.

Nigdy nie umieszczaj poważnego ostrzeżenia w jednej kolumnie obok rutynowej porady w drugiej. Równa geometria zmniejsza dominację ostrzeżenia i sugeruje, że czytelnicy mogą wybierać między nimi. Przenieś ryzyko do samodzielnego ostrzeżenia przed odpowiednim działaniem, a następnie użyj tego elementu później tylko wtedy, gdy dwa bezpieczne warunki nadal wymagają wyjaśnienia.

Anatomia

1. Wspólny nagłówek: nazywa jedną sytuację lub decyzję, którą rządzą oba powiadomienia.
2. Kontener powiadomienia: grupuje parę jako jeden element redakcyjny bez sugerowania, że jest to pojedynczy alert.
3. Etykieta powiadomienia: nazywa warunek, stan, grupę odbiorców lub zachowanie w 2–6 słowach.
4. Treść powiadomienia: określa istotny fakt, konsekwencję i następne działanie w tej kolejności, gdy wszystkie trzy są potrzebne.
5. Opcjonalna ikona: wzmacnia widoczną etykietę tekstową; nigdy nie przenosi rozróżnienia samodzielnie.
6. Opcjonalna notatka źródłowa: wspiera zmieniające się, regulowane lub zewnętrznie zdefiniowane twierdzenie w ramach powiadomienia, które kwalifikuje.
7. Kolejność źródłowa: określa kolejność dla czytników ekranu, kopiowania i urządzeń mobilnych; styl wizualny nie może jej odwracać.

Autor dostarcza wspólny nagłówek, dwie etykiety, dwie treści, ton i ewentualne źródła. Renderer dostarcza responsywną siatkę, odstępy, akcent wizualny, semantyczny kontener i dekoracyjne traktowanie ikon.

Przykłady projektowe

Są to wszystkie obsługiwane warianty. Warianty zmieniają etykiety i akcent, a nie model danych dwóch powiadomień.

Kontrastujące działania

Używaj dla jednego zalecanego i jednego odradzanego działania, gdy po każdej stronie jest tylko jeden komunikat. Określ działanie i jego powód; nie rozszerzaj tego wariantu na dopasowane listy.

Stany warunkowe

Używaj, gdy poprawna instrukcja zależy od wzajemnie wykluczającego się warunku, takiego jak „Istniejące konto" i „Nowe konto". Nazwij warunek w każdej etykiecie i umieść najczęstszy lub wymagany wstępnie stan jako pierwszy.

Sparowane wyjaśnienia

Używaj, gdy dwa powiązane fakty zapobiegają różnym nieporozumieniom, ale nie są przeciwieństwami. Zastosuj neutralny styl do obu, aby projekt nie sugerował aprobaty, powagi ani preferencji.

Zwarta para statusów

Używaj dla krótkich konsekwencji statusowych po wyjaśnieniu stanów. Każda treść to jedno zdanie. Nie usuwaj etykiet ani nie redukuj treści do niewyjaśnionych wartości.

Ułożona para mobilna

Wszystkie warianty układają się przy wąskich szerokościach. Zachowaj pierwsze powiadomienie bezpośrednio przed drugim i zachowaj wspólny nagłówek. Nie twórz interakcji przesuwania ani zakładek, ponieważ ukrycie jednego powiadomienia niweczy cel elementu.

Parametry

„Źródło" określa, skąd adapter pobiera każdą wartość. Mapowanie treści celowo przechowuje dwa kompletne rekordy powiadomień, a nie dwie wizualnie pozycjonowane kolumny.

Pierwszy nagłówek treści nadrzędnej mapuje się na title. Każdy zagnieżdżony element mapuje swój pierwszy nagłówek na label, a wszystko po nim na content; atrybuty powiadomienia przechowują tone i icon. Renderer musi odrzucić jeden, trzy lub puste elementy powiadomienia, zamiast po cichu wypełniać lub pomijać kolumnę.

Składnia i przykłady kodu

Wszystkie formaty zachowują ten sam tytuł, kolejność powiadomień, etykiety, treści, tony i źródła. „Kolumna pierwsza" i „kolumna druga" to terminy prezentacyjne, a nie nazwy pól.

Przenośna dyrektywa Markdown

:::notification-two-column{variant=conditional}
## Wybierz instrukcję dla swojego stanu publikacji

::notice{tone=neutral icon="draft"}
### Strona wersji roboczej

Używaj przykładowych wartości tylko wtedy, gdy są wyraźnie oznaczone jako przykłady. Usuń lub zastąp każdy przykład przed publikacją.
::

::notice{tone=caution icon="publish"}
### Opublikowana strona

Używaj zweryfikowanych wartości wraz ze źródłem i datą sprawdzenia. Jeśli weryfikacja jest niekompletna, wstrzymaj się z twierdzeniem.
::
:::

Ten element nadpisuje ogólną nazwę zagnieżdżonego elementu na notice, ponieważ rekordy mają specyficzne dla powiadomień zachowanie tonu. Pierwszy nadrzędny nagłówek dostarcza wspólny tytuł; pierwszy nagłówek każdego powiadomienia dostarcza jego etykietę.

Shortcode Hugo

Żaden obecny produkcyjny shortcode nie implementuje tego dokładnego kontraktu sparowanych powiadomień. Dopóki adapter nie istnieje, używaj semantycznego HTML, jak w renderowanym przykładzie. Zamierzona notacja Hugo jest udokumentowana jako:

{{< notification-two-column variant="conditional" >}}
## Wybierz instrukcję dla swojego stanu publikacji

{{< notification tone="neutral" icon="draft" >}}
### Strona wersji roboczej
Używaj oznaczonych przykładowych wartości tylko i usuń je przed publikacją.
{{< /notification >}}

{{< notification tone="caution" icon="publish" >}}
### Opublikowana strona
Używaj zweryfikowanych wartości wraz ze źródłem i datą sprawdzenia.
{{< /notification >}}
{{< /notification-two-column >}}

Forma z komentarzem ukośnikowym zapobiega wywołaniu shortcode’a, który nie istnieje w tym przykładzie specyfikacji. Przyszły adapter musi walidować dokładnie dwa podrzędne powiadomienia i renderować je w kolejności źródłowej.

Blok WordPress

<!-- wp:amicited/notification-two-column {"variant":"conditional"} -->
<h2>Wybierz instrukcję dla swojego stanu publikacji</h2>
<!-- wp:amicited/notification {"tone":"neutral","icon":"draft"} -->
<h3>Strona wersji roboczej</h3>
<p>Używaj oznaczonych przykładowych wartości tylko i usuń je przed publikacją.</p>
<!-- /wp:amicited/notification -->
<!-- wp:amicited/notification {"tone":"caution","icon":"publish"} -->
<h3>Opublikowana strona</h3>
<p>Używaj zweryfikowanych wartości wraz ze źródłem i datą sprawdzenia.</p>
<!-- /wp:amicited/notification -->
<!-- /wp:amicited/notification-two-column -->

Edytor WordPress powinien prezentować dwa stałe sloty powiadomień, umożliwiać zmianę kolejności i zapobiegać publikacji, gdy etykieta lub treść jest pusta. Nie może pozwolić autorom na dodanie trzeciego powiadomienia tylko dlatego, że blok siatki obsługuje więcej kolumn.

Przykłady

Dobry: dwa rzeczywiste warunki z pełnymi działaniami

Przed importem
Pobierz bieżące rekordy i zanotuj czas eksportu. Kopia daje punkt odzyskiwania, jeśli mapowanie pól przyniesie nieoczekiwany wynik.

Po imporcie
Porównaj liczbę zaimportowanych rekordów z liczbą źródłową, a następnie sprawdź co najmniej jeden rekord zawierający każde mapowane pole. Liczby wykrywają pominięcia; pełny rekord wykrywa przesunięte wartości.

Ta para ma jeden temat — bezpieczną weryfikację importu — i rzeczywistą granicę czasową. Każdy komunikat nazywa działanie i wyjaśnia, jaką awarię wychwytuje. Drugi jest dłuższy, ponieważ zawiera dwie powiązane kontrole, ale obie strony niosą porównywalną odpowiedzialność i pozostają zrozumiałe po ułożeniu.

Zły: fałszywa symetria degradująca ryzyko

Pomocna wskazówka
Zmień nazwę eksportu, aby łatwiej go było później znaleźć.

Ważne
Importowanie z opcją „Zastąp wszystko" trwale usuwa istniejące rekordy i jest nieodwracalne. Wykonaj kopię zapasową bazy danych, potwierdź cel, uzyskaj zgodę i zaplanuj przestój przed kontynuacją.

Pierwszy komunikat to opcjonalna czynność porządkowa; drugi opisuje nieodwracalną utratę danych i kilka wymagań wstępnych. Umieszczenie ich w równych kolumnach sugeruje równą wagę i sprawia, że krytyczny komunikat wygląda jak jedna z dwóch alternatyw. Przenieś komunikat o utracie danych do samodzielnego ostrzeżenia przed kontrolką. Zachowaj sugestię nazwy pliku jako zwykłą prozę wspierającą.

Znaczniki schema i dostępność

Powiadomienie dwukolumnowe nie ma dedykowanego typu Schema.org. Jego treść pozostaje w obrębie otaczającego Article, TechArticle lub WebPage. Nie emituj ItemList, HowToStep, Question ani Answer tylko dlatego, że istnieją dwa ograniczone rekordy. Jeśli powiadomienie zawiera treść, która samodzielnie kwalifikuje się do danych strukturalnych, reguły schema otaczającego typu postu decydują o mapowaniu; ten element nie dodaje żadnych samodzielnie.

Użyj jednego oznaczonego section, gdy para należy do głównego wyjaśnienia, lub oznaczonego aside, gdy oba powiadomienia są uzupełniające. Każde dziecko może być aside lub section z rzeczywistym nagłówkiem na odpowiednim poziomie dokumentu. Nie używaj ARIA alert ani alertdialog: te role ogłaszają dynamiczne, czasowe zmiany i są nieodpowiednie dla statycznych wskazówek redakcyjnych.

Dostępna nazwa pochodzi z widocznego wspólnego nagłówka poprzez natywną strukturę nagłówków lub aria-labelledby. Każda etykieta powiadomienia musi być tekstem. Kolor, styl obramowania, pozycja i ikony mogą wzmacniać ton, ale nie mogą go definiować. Jeśli ikona jest dekoracyjna, ukryj ją przed technologią asystującą; jeśli przekazuje informacje nieobecne w etykiecie, przepisz etykietę zamiast polegać na tekście alternatywnym w celu naprawy projektu.

Kolejność DOM kontroluje znaczenie. Czytniki ekranu i układy mobilne muszą napotkać pierwsze powiadomienie, a następnie drugie. Nie odwracaj kolejności wizualnej za pomocą CSS. Przy 200% powiększeniu tekstu i wąskich szerokościach powiadomienia muszą się układać bez przycinania lub poziomego przewijania strony. Linki potrzebują opisowych etykiet, a wiele linków nie może być skompresowanych w nieoznaczony wiersz ikon.

Zasady pisania

Napisz relację przed napisaniem powiadomień: „Czytelnik potrzebuje dwóch komunikatów, ponieważ poprawna wskazówka zmienia się w zależności od _____." Jeśli luki nie można wypełnić konkretnym warunkiem, stanem, grupą odbiorców, czasem lub kontrastem behawioralnym, użyj prozy.

• Używaj dokładnie dwóch powiadomień pod jednym wspólnym tytułem.
• Utrzymuj tytuł w zakresie 3–12 słów, a każdą etykietę w zakresie 2–6 słów.
• Celuj w 25–80 słów na treść; 120 słów to absolutne maksimum.
• Używaj jednego lub dwóch krótkich akapitów na powiadomienie i nie więcej niż jednego krótkiego linku w tekście.
• Umieść fakt lub warunek jako pierwszy, jego konsekwencję jako drugą, a działanie na końcu, gdy wszystkie są obecne.
• Używaj równoległej gramatyki etykiet: „Przed uruchomieniem / Po uruchomieniu", a nie „Przed uruchomieniem / Co administratorzy powinni zrobić później".
• Nazywaj warunki bezpośrednio. Nigdy nie pisz „lewa", „prawa", „inna opcja" ani „powyższe pole".
• Dopasuj ton do dowodów. Neutralne sparowane fakty nie powinny dziedziczyć zielonego i czerwonego traktowania.
• Opracowuj zmieniające się twierdzenia z datą, wersją, planem, jurysdykcją lub źródłem, stosownie do sytuacji.

Porównywalna waga oznacza, że oba komunikaty zasługują na tę samą chwilę w przepływie czytelnika. Nie wymaga identycznej liczby zdań ani znaków. Nie rozciągaj krótkiej prawdy, aby dopasować ją do dłuższej. Jeśli jedna treść przewyższa drugą o ponad mniej więcej dwa do jednego, sprawdź, czy większe powiadomienie nie potrzebuje osobnej sekcji, lub czy mniejsze powiadomienie nie jest fałszywym odpowiednikiem.

Nigdy nie umieszczaj wieloetapowej procedury, tabeli, formularza, karty cenowej, referencji, promocyjnego wezwania do działania, długiego cytatu, próbki kodu, wideo ani zagnieżdżonego komponentu wewnątrz powiadomienia. Nigdy nie używaj pary do łagodzenia wskazówek prawnych, medycznych, finansowych, prywatności, bezpieczeństwa lub niszczących działań. Nie sugeruj, że dwa warunki są wyczerpujące, chyba że właściciel treści zweryfikował, że żaden trzeci stan nie istnieje.

Typy postów, które go używają

Tablica postTypes w metadanych jest źródłem dla tej tabeli. Umieszczenie oznacza, że element jest dostępny dla rzeczywistego przypadku dwóch powiadomień, a nie obowiązkowy na każdej stronie tego typu.

Lista kontrolna QA

• Wspólny temat: Jeden dokładny tytuł rządzi oboma powiadomieniami bez rozciągania zakresu.
• Dokładnie dwa powiadomienia: Źródło zawiera dwa kompletne rekordy i żaden sugerowany trzeci stan.
• Rzeczywista relacja: Etykiety nazywają znaczący kontrast, warunek, grupę odbiorców, status lub granicę czasową.
• Niezależne znaczenie: Każde powiadomienie pozostaje jasne po wyodrębnieniu ze wspólnym tytułem.
• Brak fałszywej symetrii: Oba komunikaty zasługują na porównywalny akcent; żaden nie jest wypełniaczem ani zdegradowanym krytycznym ostrzeżeniem.
• Poprawne umiejscowienie: Para podąża za swoim kontekstem i poprzedza działanie lub szczegół, który kwalifikuje.
• Bezpieczni sąsiedzi: Nie sąsiaduje z innym podzielonym układem, tabelą, kontrolką zakładek ani dwukolumnowym CTA.
• Użyteczne etykiety: Etykiety używają równoległej gramatyki i nigdy nie polegają na pozycji lewa/prawa ani kolorze.
• Kontrola długości: Treści mieszczą się w jednym lub dwóch akapitach i nie więcej niż 120 słowach każde.
• Ograniczenie treści: Żadna zagnieżdżona procedura, tabela, formularz, multimedia, promocja ani złożony komponent nie pojawia się wewnątrz.
• Kolejność responsywna: Kolejność mobilna, klawiaturowa, czytnika ekranu i skopiowanego tekstu odpowiada sekwencji autorskiej.
• Dostępna semantyka: Widoczny nagłówek oznacza element nadrzędny; etykiety dzieci są nagłówkami; treść statyczna nie używa ról alertów.
• Integralność tonu: Stylizacja odzwierciedla rzeczywiste znaczenie i nie zamienia neutralnych faktów w oceny dobre/złe.
• Parzystość notacji: Markdown, Hugo i WordPress zachowują ten sam tytuł, etykiety, treści, atrybuty i kolejność.
• Ograniczenie schema: Element nie tworzy żadnych nieobsługiwanych danych strukturalnych.

Odrzuć element, jeśli testy wspólnego tematu, rzeczywistej relacji lub fałszywej symetrii nie przejdą. Są to defekty redakcyjne, których renderer nie może naprawić. Przepisz treść jako prozę, osobne sekcje, samodzielne ostrzeżenie lub inny element dopasowany do celu przed dostosowaniem prezentacji.

FAQ

Ustrukturyzowane FAQ w metadanych obejmuje decyzje implementacyjne, które najprawdopodobniej mogą być źle zrozumiane: powiadomienia nie muszą być przeciwieństwami ani mieć identycznej długości, kolejność mobilna podąża za kolejnością źródłową, poważne ryzyka pozostają samodzielnymi ostrzeżeniami, a element nie tworzy własnych znaczników schema.