Notificare: Două Coloane — Reguli și Exemple

O notificare cu două coloane plasează două notificări scurte, etichetate, sub un singur subiect comun. Notificările pot contrasta acțiuni, explica două condiții sau distinge stări înrudite, dar fiecare trebuie să rămână corectă și utilă atunci când este citită independent.

Acest element redat funcționează deoarece „Pagină în lucru" și „Pagină publicată" sunt condiții reale, nu titluri cosmetice. Titlul comun definește decizia, fiecare notificare oferă o instrucțiune completă, iar niciuna nu solicită cititorului să deducă sensul din culoare sau poziție orizontală.

De ce contează acest element

Cititorii întâlnesc adesea orientări în timp ce scanează pentru condiția care li se aplică. Un paragraf lung care spune „proiectele pot conține exemple etichetate, în timp ce paginile publicate necesită valori verificate" obligă cititorul să rețină o clauză în memorie în timp ce testează cealaltă. Două notificări delimitate reduc acest efort. Etichetele expun mai întâi ramura, astfel încât cititorul poate identifica condiția relevantă și apoi poate citi instrucțiunea acesteia.

Beneficiul psihologic este atenția selectivă. Oamenii nu au întotdeauna nevoie de ambele mesaje în mod egal; au nevoie de încrederea că l-au observat pe cel potrivit. Un titlu comun stabilește întrebarea, în timp ce etichetele distincte fac vizibile stările disponibile. Prezentarea față în față face, de asemenea, un contrast semnificativ evident, fără a-l exagera ca pe un câștigător și un învins.

Acest beneficiu dispare atunci când autorul forțează o simetrie falsă. Simetria falsă apare atunci când aspectul sugerează că două idei au același domeniu, importanță sau validitate, chiar dacă conținutul nu o susține. Un memento de o propoziție lângă o procedură de siguranță în șase pași nu este o pereche. Nici o restricție legală obligatorie lângă un sfat opțional de productivitate. Coloanele de lățime egală pot face ca mesajele inegale să pară interschimbabile, ceea ce este exact semnalul greșit.

Extractibilitatea automată este capacitatea software-ului de a izola conținutul păstrând în același timp relațiile care îl fac corect. O notificare tipizată cu două coloane expune un subiect părinte și două notificări copil etichetate. Sistemele de căutare și agenții AI pot recupera „Pentru o pagină publicată, folosește valori verificate cu o sursă și o dată verificată" fără a ghici ce titlu guvernează care propoziție. Etichetele explicite, ordinea sursei și corpurile autoconținute supraviețuiesc stivuirii responsive și extracției doar text.

Urmează regulile de redactare a elementelor înainte de a alege această componentă. Scopul are prioritate față de aspect. Un risc sever rămâne o casetă de avertizare , o corectare comportament cu comportament rămâne un bloc de recomandări și interdicții , iar două fapte nu devin notificări doar pentru că un design le poate pune în coloane.

Când să îl folosești

Folosește acest element atunci când un singur subiect comun are exact două notificări scurte și a le vedea pe ambele simultan îl ajută pe cititor să clasifice, să compare sau să evite confuzia. Relațiile adecvate includ:

• Două condiții: autentificat versus deconectat, ciornă versus publicat, înainte de migrare versus după migrare.
• Două audiențe: proprietarul contului versus utilizatorul invitat, cu condiția ca ambii să primească orientări despre același eveniment.
• Comportament recomandat și nerecomandat: doar atunci când fiecare parte este o notificare scurtă, nu o listă de comportamente pereche.
• Stări disponibile și indisponibile: atunci când etichetele menționează condițiile care produc fiecare stare.
• Comportament curent și viitor: atunci când datele sau limitele de versiune sunt explicite.

Toate aceste teste trebuie să fie îndeplinite:

1. Un singur titlu poate introduce corect ambele notificări.
2. Există exact două condiții sau mesaje; sursa nu ascunde un al treilea caz.
3. Fiecare notificare are o etichetă specifică și o consecință sau acțiune completă.
4. Perechea poate fi înțeleasă în ordinea sursei pe un ecran îngust.
5. Nicio notificare nu necesită o procedură imbricată, tabel, formular sau calificare lungă.

Aproape de țintă dezvăluie utilizarea greșită. Folosește proză obișnuită atunci când a doua afirmație continuă doar pe prima. Folosește un tabel de comparație atunci când cititorii trebuie să evalueze mai multe criterii. Folosește un arbore decizional atunci când mai mult de două condiții se ramifică sau când un răspuns duce la o altă întrebare. Folosește o avertizare independentă atunci când pierderea mesajului ar putea cauza daune, pierderi de date, expunere legală sau o acțiune ireversibilă. Folosește recomandări și interdicții atunci când mai multe comportamente greșite au nevoie fiecare de o corectare corespunzătoare.

Nu inventa o contrapondere. Dacă instrucțiunea onestă este „Fă o copie de rezervă a bazei de date înainte de migrare", adăugarea „După migrare: continuă să lucrezi" creează simetrie, dar nicio valoare. De asemenea, nu împărți o notificare în „Important" și „De asemenea important". Etichetele trebuie să numească condiții reale, stări, audiențe sau poziții.

Unde să îl plasezi

Plasează elementul imediat după paragraful care definește situația comună. Cititorii trebuie să știe ce decizie sau stare califică notificările înainte de a întâlni ramurile. Când perechea precede o acțiune, plasează-o înaintea primului pas care modifică date sau angajează cititorul într-o alegere.

Regulile exacte de poziționare sunt:

• Plasează o pereche de condiții după cerințele preliminare și înaintea instrucțiunilor specifice condiției.
• Plasează un contrast pre-acțiune înaintea comenzii, controlului, descărcării sau pasului pe care îl califică.
• Plasează o pereche stare-rezultat după ce rezultatul a fost definit și înaintea detaliilor de depanare.
• Păstrează dovezile sau o sursă în interiorul notificării relevante atunci când susțin doar acea notificare; plasează dovezile comune imediat după perechea completă.
• În secțiuni de documentare repetate, folosește aceeași ordine a sursei, astfel încât stările recurente să nu schimbe pozițiile.

Elementul nu poate sta lângă o altă componentă cu două coloane, un tabel de comparație, un control cu file, un grid de prețuri sau un îndemn la acțiune divizat. Gridurile adiacente fac limitele ambigue și pot sugera o alegere în patru direcții. Nu poate separa o afirmație de citarea sa, un pas de avertizarea necesară sau un control de formular de eticheta sa. Nu îl plasa în interiorul unui pas numerotat: ramurile imbricate pot face secvența și responsabilitatea neclare.

Nu pune niciodată o avertizare severă într-o coloană lângă un sfat de rutină în cealaltă. Geometria egală reduce dominanța avertismentului și sugerează că cititorii pot alege între cele două. Promovează riscul la o avertizare independentă înaintea acțiunii relevante, apoi folosește acest element mai târziu doar dacă două condiții sigure mai au nevoie de clarificare.

Anatomie

1. Titlu comun: denumește singura situație sau decizie guvernată de ambele notificări.
2. Containerul notificării: grupează perechea ca un singur element editorial, fără a sugera că este o alertă unică.
3. Eticheta notificării: denumește o condiție, stare, audiență sau comportament în 2–6 cuvinte.
4. Corpul notificării: enunță faptul relevant, consecința și acțiunea următoare, în această ordine, atunci când toate trei sunt necesare.
5. Icoană opțională: întărește o etichetă text vizibilă; nu poartă niciodată distincția singură.
6. Notă sursă opțională: susține o afirmație în schimbare, reglementată sau definită extern, în cadrul notificării pe care o califică.
7. Ordinea sursei: determină ordinea pentru cititorul de ecran, copiere și mobil; stilizarea vizuală nu trebuie să o inverseze.

Autorul furnizează titlul comun, două etichete, două corpuri, tonul și orice surse. Motorul de redare furnizează gridul responsive, spațierea, accentul vizual, containerul semantic și tratamentul decorativ al icoanelor.

Exemple de design

Acestea sunt variantele complete suportate. Variantele schimbă etichetele și accentul, nu modelul de date cu două notificări.

Acțiuni contrastante

Folosește pentru o acțiune recomandată și una nerecomandată atunci când există un singur mesaj de fiecare parte. Enunță acțiunea și motivul său; nu extinde această variantă în liste pereche.

Stări condiționale

Folosește atunci când instrucțiunea corectă depinde de o condiție mutual exclusivă, cum ar fi „Cont existent" și „Cont nou". Denumește condiția în fiecare etichetă și pune prima starea cea mai comună sau cea necesară ca prerequisite.

Clarificări pereche

Folosește atunci când două fapte înrudite previn diferite neînțelegeri, dar nu sunt opuse. Aplică stilizare neutră pentru ambele, astfel încât designul să nu inventeze aprobare, severitate sau preferință.

Pereche compactă de stare

Folosește pentru consecințe scurte de stare după ce stările au fost deja explicate. Fiecare corp are o singură propoziție. Nu elimina etichetele și nu reduce corpurile la valori neexplicate.

Pereche stivuită pe mobil

Toate variantele se stivuiesc la lățimi înguste. Păstrează prima notificare imediat înaintea celei de-a doua și menține titlul comun. Nu crea o interacțiune de glisare sau file, deoarece ascunderea unei notificări contrazice scopul elementului.

Parametri

„Sursa" identifică de unde obține fiecare valoare adaptorul. Maparea corpului stochează intenționat două înregistrări complete de notificare, nu două coloane poziționate vizual.

Primul titlu al corpului părinte se mapează la title. Fiecare element imbricat își mapează primul titlu la label și tot ce urmează după acesta la content; atributele notificării conțin tone și icon. Motorul de redare trebuie să respingă elemente de notificare unice, triple sau goale, în loc să completeze sau să elimine o coloană în tăcere.

Sintaxă și exemple de cod

Toate formatele păstrează același titlu, ordinea notificărilor, etichetele, corpurile, tonurile și sursele. „Coloana unu" și „coloana doi" sunt termeni de prezentare, nu nume de câmpuri.

Directivă Markdown portabilă

:::notification-two-column{variant=conditional}
## Alege instrucțiunea în funcție de starea de publicare

::notice{tone=neutral icon="draft"}
### Pagină în lucru

Folosește valori eșantion doar atunci când sunt etichetate vizibil ca exemple. Elimină sau înlocuiește fiecare eșantion înainte de publicare.
::

::notice{tone=caution icon="publish"}
### Pagină publicată

Folosește valori verificate cu o sursă și o dată verificată. Dacă verificarea este incompletă, reține afirmația.
::
:::

Acest element suprascrie numele generic de element imbricat cu notice, deoarece înregistrările au un comportament de ton specific notificării. Primul titlu părinte furnizează titlul comun; primul titlu al fiecărei notificări furnizează eticheta sa.

Shortcode Hugo

Niciun shortcode de producție curent nu implementează acest contract exact de notificări pereche. Până când există un adaptor, folosește HTML semantic ca în exemplul redat. Notația Hugo intenționată este documentată astfel:

{{< notification-two-column variant="conditional" >}}
## Alege instrucțiunea în funcție de starea de publicare

{{< notification tone="neutral" icon="draft" >}}
### Pagină în lucru
Folosește doar valori eșantion etichetate și elimină-le înainte de publicare.
{{< /notification >}}

{{< notification tone="caution" icon="publish" >}}
### Pagină publicată
Folosește valori verificate cu o sursă și o dată verificată.
{{< /notification >}}
{{< /notification-two-column >}}

Forma cu comentariu cu slash împiedică acest exemplu de specificație să invoce un shortcode care nu există. Un adaptor viitor trebuie să valideze exact două notificări copil și să le redea în ordinea sursei.

Bloc WordPress

<!-- wp:amicited/notification-two-column {"variant":"conditional"} -->
<h2>Alege instrucțiunea în funcție de starea de publicare</h2>
<!-- wp:amicited/notification {"tone":"neutral","icon":"draft"} -->
<h3>Pagină în lucru</h3>
<p>Folosește doar valori eșantion etichetate și elimină-le înainte de publicare.</p>
<!-- /wp:amicited/notification -->
<!-- wp:amicited/notification {"tone":"caution","icon":"publish"} -->
<h3>Pagină publicată</h3>
<p>Folosește valori verificate cu o sursă și o dată verificată.</p>
<!-- /wp:amicited/notification -->
<!-- /wp:amicited/notification-two-column -->

Un editor WordPress ar trebui să prezinte două sloturi fixe de notificare, să permită reordonarea și să împiedice publicarea atunci când eticheta sau corpul sunt goale. Nu trebuie să permită autorilor să adauge o a treia notificare doar pentru că blocul grid suportă mai multe coloane.

Exemple

Bun: două condiții reale cu acțiuni complete

Înainte de importare
Descarcă înregistrările curente și notează ora exportului. Copia îți oferă un punct de recuperare dacă maparea câmpurilor produce un rezultat neașteptat.

După importare
Compară numărul de înregistrări importate cu numărul sursei, apoi inspectează cel puțin o înregistrare care conține fiecare câmp mapat. Numărătoarea detectează omisiunile; înregistrarea completă detectează valori deplasate.

Această pereche are un singur subiect—verificarea sigură a importului—și o limită temporală reală. Fiecare notificare numește o acțiune și explică ce eșec detectează. A doua este mai lungă pentru că conține două verificări înrudite, dar ambele părți poartă o responsabilitate comparabilă și rămân comprehensibile atunci când sunt stivuite.

Rău: simetrie falsă care diminuează un risc

Sfat util
Redenumește exportul pentru a fi mai ușor de găsit mai târziu.

Important
Importarea cu opțiunea „Înlocuiește tot" șterge permanent înregistrările existente și nu poate fi anulată. Fă o copie de rezervă a bazei de date, confirmă ținta, obține aprobarea și programează timpul de nefuncționare înainte de a continua.

Prima notificare este o activitate administrativă opțională; a doua descrie pierdere ireversibilă de date și mai multe cerințe preliminare. Plasarea lor în coloane egale sugerează o pondere egală și face ca mesajul critic să pară una dintre două alternative. Mută notificarea despre pierderea de date într-o avertizare independentă înaintea comenzii de control. Păstrează sugestia privind numele fișierului ca proză obișnuită de susținere.

Markup schema și accesibilitate

O notificare cu două coloane nu are un tip Schema.org dedicat. Conținutul său rămâne în cadrul Article, TechArticle sau WebPage care îl înconjoară. Nu emite ItemList, HowToStep, Question sau Answer doar pentru că există două înregistrări delimitate. Dacă o notificare conține conținut care se califică independent pentru date structurate, regulile de schema ale tipului de postare care o înconjoară decid maparea; acest element nu adaugă nimic de unul singur.

Folosește un section etichetat atunci când perechea aparține explicației principale, sau un aside etichetat atunci când ambele notificări sunt complementare. Fiecare copil poate fi un aside sau section cu un titlu real la nivelul corect al documentului. Nu folosi ARIA alert sau alertdialog: aceste roluri anunță modificări dinamice, sensibile la timp și sunt inadecvate pentru orientări editoriale statice.

Numele accesibil provine din titlul comun vizibil prin structura nativă a titlurilor sau aria-labelledby. Fiecare etichetă de notificare trebuie să fie text. Culoarea, stilul bordurii, poziția și icoanele pot întări tonul, dar nu îl pot defini. Dacă o icoană este decorativă, ascunde-o de tehnologia asistivă; dacă comunică informații care nu sunt prezente în etichetă, rescrie eticheta în loc să te bazezi pe text alternativ pentru a repara designul.

Ordinea DOM controlează sensul. Cititoarele de ecran și aspectele mobile trebuie să întâlnească prima notificare și apoi pe a doua. Nu inversa ordinea vizuală cu CSS. La zoom text de 200% și lățimi înguste, notificările trebuie să se stivuiască fără tăiere sau derulare orizontală a paginii. Linkurile au nevoie de etichete descriptive, iar linkurile multiple nu trebuie comprimate într-un rând neetichetat de icoane.

Reguli de redactare

Scrie relația înainte de a scrie notificările: „Cititorul are nevoie de două mesaje deoarece orientarea corectă se schimbă în funcție de ___." Dacă spațiul liber nu poate fi completat cu o condiție, stare, audiență, timp sau contrast comportamental concret, folosește proză.

• Folosește exact două notificări sub un titlu comun.
• Menține titlul la 3–12 cuvinte și fiecare etichetă la 2–6 cuvinte.
• Țintește 25–80 de cuvinte per corp; 120 de cuvinte este maximul absolut.
• Folosește unul sau două paragrafe scurte per notificare și cel mult un link inline scurt.
• Plasează faptul sau condiția prima, consecința a doua, iar acțiunea la sfârșit, atunci când toate sunt prezente.
• Folosește gramatică paralelă pentru etichete: „Înainte de lansare / După lansare," nu „Înainte de lansare / Ce ar trebui să facă administratorii mai târziu."
• Numește condițiile direct. Nu scrie niciodată „stânga," „dreapta," „cealaltă opțiune" sau „casetă de mai sus."
• Potrivește tonul cu dovezile. Faptele neutre pereche nu ar trebui să moștenească tratament verde și roșu.
• Fă ca afirmațiile în schimbare să poarte o dată, versiune, plan, jurisdicție sau sursă, după caz.

Greutatea comparabilă înseamnă că ambele mesaje merită același moment în fluxul cititorului. Nu necesită numere identice de propoziții sau caractere. Nu adăuga text unui adevăr scurt pentru a se potrivi cu unul mai lung. Dacă un corp îl depășește pe celălalt cu mai mult de aproximativ doi la unu, testează dacă notificarea mai mare are nevoie de o secțiune separată sau dacă notificarea mai mică este un contrapartid fals.

Nu plasa niciodată o procedură în mai mulți pași, tabel, formular, card de preț, testimonial, îndemn promoțional la acțiune, citat lung, eșantion de cod, video sau componentă imbricată în interiorul unei notificări. Nu folosi niciodată perechea pentru a diminua orientări legale, medicale, financiare, de confidențialitate, securitate sau acțiuni distructive. Nu sugera că două condiții sunt exhaustive, cu excepția cazului în care proprietarul conținutului a verificat că nu există o a treia stare.

Tipuri de postări care îl folosesc

Matricea postTypes din front matter este sursa acestui tabel. Includerea înseamnă că elementul este disponibil pentru un caz legitim cu două notificări, nu obligatoriu pe fiecare pagină de acel tip.

Lista de verificare QA

• Subiect comun: Un titlu corect guvernează ambele notificări fără a extinde domeniul.
• Exact două notificări: Sursa conține două înregistrări complete și nicio a treia stare implicită.
• Relație reală: Etichetele numesc un contrast semnificativ, o condiție, audiență, stare sau limită temporală.
• Sens independent: Fiecare notificare rămâne clară atunci când este extrasă cu titlul comun.
• Fără simetrie falsă: Ambele mesaje merită o accentuare comparabilă; niciunul nu este umplutură sau o avertizare critică diminuată.
• Plasare corectă: Perechea urmează contextul său și precede acțiunea sau detaliul pe care îl califică.
• Vecinătăți sigure: Nu este adiacentă unui alt aspect divizat, tabel, control cu file sau CTA pe două coloane.
• Etichete utile: Etichetele folosesc gramatică paralelă și nu depind niciodată de poziția stânga/dreapta sau de culoare.
• Controlul lungimii: Corpurile rămân în unul sau două paragrafe și nu depășesc 120 de cuvinte fiecare.
• Restricție de conținut: Nicio procedură imbricată, tabel, formular, media, promoție sau componentă complexă nu apare în interior.
• Ordine responsive: Ordinea pe mobil, tastatură, cititor de ecran și text copiat se potrivește cu secvența autorului.
• Semantică accesibilă: Un titlu vizibil etichetează părintele; etichetele copil sunt titluri; conținutul static nu folosește roluri de alertă.
• Integritatea tonului: Stilizarea reflectă sensul real și nu transformă fapte neutre în judecăți bune/rele.
• Paritate notațională: Markdown, Hugo și WordPress păstrează același titlu, etichete, corpuri, atribute și ordine.
• Restricție schema: Elementul nu creează date structurate nesuportate.

Respinge elementul dacă verificările de subiect comun, relație reală sau simetrie falsă eșuează. Acestea sunt defecte editoriale pe care un motor de redare nu le poate repara. Rescrie conținutul ca proză, secțiuni separate, o avertizare independentă sau un alt element adaptat scopului înainte de a ajusta prezentarea.

Întrebări frecvente

Întrebările frecvente structurate din front matter acoperă deciziile de implementare care cel mai probabil pot fi înțelese greșit: notificările nu trebuie să fie opuse sau de lungimi identice, ordinea pe mobil urmează ordinea sursei, riscurile severe rămân avertizări independente, iar elementul nu creează markup schema propriu.