Oznámenie: Dva stĺpce — pravidlá a príklady

Dvojstĺpcové oznámenie umiestňuje dve krátke, označené oznámenia pod jednu spoločnú tému. Oznámenia môžu kontrastovať akcie, vysvetľovať dve podmienky alebo rozlišovať súvisiace stavy, ale každé musí zostať presné a užitočné, keď sa číta samostatne.

Tento vykreslený prvok funguje, pretože „Koncept stránky“ a „Publikovaná stránka“ sú skutočné podmienky, nie kozmetické nadpisy. Spoločný názov definuje rozhodnutie, každé oznámenie poskytuje úplnú inštrukciu a ani jedno nevyžaduje, aby čitateľ odvodzoval význam z farby alebo horizontálnej polohy.

Prečo na tomto prvku záleží

Čitatelia sa často stretávajú s usmernením pri skenovaní stránky hľadajúc podmienku, ktorá sa na nich vzťahuje. Dlhý odsek, ktorý hovorí „koncepty môžu obsahovať označené príklady, zatiaľ čo publikované stránky vyžadujú overené hodnoty“ núti čitateľa držať jednu časť v pamäti pri overovaní druhej. Dve ohraničené oznámenia túto prácu znižujú. Označenia najprv odhalia vetvu, takže čitateľ môže identifikovať relevantnú podmienku a potom si prečítať jej inštrukciu.

Psychologickým prínosom je selektívna pozornosť. Ľudia nepotrebujú obe správy rovnako; potrebujú istotu, že si všimli tú správnu. Spoločný názov stanovuje otázku, zatiaľ čo samostatné označenia robia dostupné stavy viditeľnými. Súbežné zobrazenie zároveň robí zmysluplný kontrast zrejmým bez toho, aby ho preháňalo ako víťaza a porazeného.

Tento prínos zmizne, keď autor vynúti falošnú symetriu. Falošná symetria nastáva, keď rozloženie naznačuje, že dve myšlienky majú rovnaký rozsah, dôležitosť alebo platnosť, hoci obsah tomu nenasvedčuje. Jednovetná pripomienka vedľa šesťkrokovej bezpečnostnej procedúry nie je pár. Rovnako nie je ani povinné právne obmedzenie vedľa voliteľného tipu na produktivitu. Stĺpce rovnakej šírky môžu spôsobiť, že nerovnaké správy vyzerajú zameniteľne – čo je presne nesprávny signál.

Strojová extrahovateľnosť je schopnosť softvéru izolovať obsah pri zachovaní vzťahov, ktoré ho robia presným. Typové dvojstĺpcové oznámenie odhaľuje jednu rodičovskú tému a dve označené detské oznámenia. Vyhľadávacie systémy a AI agenty dokážu získať „Pre publikovanú stránku používajte overené hodnoty so zdrojom a overeným dátumom“ bez hádania, ktorý nadpis riadi ktorú vetu. Explicitné označenia, poradie v zdroji a sebestačné telá prežijú responzívne skladanie a textovú extrakciu.

Pred výberom tohto komponentu postupujte podľa pravidiel písania prvkov . Účel má prednosť pred vzhľadom. Závažné riziko zostáva varovným boxom , korekcia správania po správaní zostáva blokom áno a nie a dve fakty sa nestanú oznámeniami len preto, že dizajn ich dokáže umiestniť do stĺpcov.

Kedy ho použiť

Použite tento prvok, keď jedna spoločná téma má presne dve krátke oznámenia a videnie oboch naraz pomáha čitateľovi klasifikovať, porovnávať alebo predchádzať zmätku. Vhodné vzťahy zahŕňajú:

• Dve podmienky: prihlásený versus odhlásený, koncept versus publikované, pred migráciou versus po migrácii.
• Dve publikum: vlastník účtu versus pozvaný používateľ, pokiaľ obaja dostávajú usmernenie k rovnakej udalosti.
• Odporúčané a neodporúčané správanie: len keď je každá strana krátkym oznámením, nie zoznamom párovaných správaní.
• Dostupné a nedostupné stavy: keď označenia uvádzajú podmienky, ktoré vytvárajú daný stav.
• Aktuálne a pripravované správanie: keď sú dátumy alebo verzie explicitné.

Všetky tieto testy musia byť splnené:

1. Jeden nadpis môže presne uviesť obe oznámenia.
2. Existujú presne dve podmienky alebo správy; zdroj neskrýva tretí prípad.
3. Každé oznámenie má konkrétne označenie a úplný dôsledok alebo akciu.
4. Dvojica je zrozumiteľná v poradí zdroja na úzkej obrazovke.
5. Ani jedno oznámenie nevyžaduje vnorený postup, tabuľku, formulár ani dlhé spresnenie.

Skoré zlyhania odhaľujú nesprávne použitie. Použite bežnú prózu, keď druhé vyhlásenie len pokračuje v prvom. Použite porovnávaciu tabuľku, keď čitatelia musia posúdiť viacero kritérií. Použite rozhodovací strom, keď sa vetví viac ako dve podmienky alebo keď jedna odpoveď vedie k ďalšej otázke. Použite samostatné varovanie, keď by prehliadnutie správy mohlo spôsobiť škodu, stratu dát, právne riziko alebo nezvratnú akciu. Použite blok áno a nie, keď niekoľko nesprávnych správaní vyžaduje zodpovedajúcu korekciu.

Nevymýšľajte protiváhu. Ak je úprimná inštrukcia „Pred migráciou zálohujte databázu“, pridaním „Po migrácii: pokračujte v práci“ vzniká symetria bez hodnoty. Rovnako nerozdeľujte jedno oznámenie na „Dôležité“ a „Tiež dôležité“. Označenia musia pomenúvať skutočné podmienky, stavy, publiká alebo pozície.

Kam ho umiestniť

Umiestnite prvok ihneď za odsek, ktorý definuje spoločnú situáciu. Čitatelia musia vedieť, aké rozhodnutie alebo stav oznámenia kvalifikujú, skôr než narazia na vetvy. Keď dvojica predchádza akciu, umiestnite ju pred prvý krok, ktorý mení údaje alebo zaväzuje čitateľa k voľbe.

Presné pravidlá umiestnenia sú:

• Umiestnite dvojicu dvoch podmienok po predpokladoch a pred inštrukciami špecifickými pre danú podmienku.
• Umiestnite kontrast pred akciou pred ovládací prvok, príkaz, sťahovanie alebo krok, ktorý kvalifikuje.
• Umiestnite dvojicu výsledných stavov po definovaní výsledku a pred podrobnosti o riešení problémov.
• Dôkaz alebo zdroj ponechajte v príslušnom oznámení, keď podporuje len toto oznámenie; spoločný dôkaz umiestnite ihneď po kompletnej dvojici.
• V opakujúcich sa sekciách dokumentácie používajte rovnaké poradie zdroja, aby sa opakujúce sa stavy neprehadzovali.

Prvok nesmie stáť vedľa iného dvojstĺpcového komponentu, porovnávacej tabuľky, ovládacieho prvku záložiek, cenovej mriežky alebo rozdeleného tlačidla výzvy na akciu. Susedné mriežky spôsobujú nejednoznačné hranice a môžu naznačovať štvorsmernú voľbu. Nesmie oddeliť tvrdenie od jeho citácie, krok od požadovaného varovania alebo ovládací prvok formulára od jeho označenia. Neumiestňujte ho do číslovaného kroku: vnorené vetvy môžu spôsobiť nejasnosť v poradí a zodpovednosti.

Nikdy nedávajte závažné varovanie do jedného stĺpca vedľa bežnej rady v druhom. Rovnaká geometria znižuje dominanciu varovania a naznačuje, že čitatelia si môžu vybrať medzi dvoma možnosťami. Povýšte riziko na samostatné varovanie pred príslušnú akciu a tento prvok použite neskôr, len ak dve bezpečné podmienky stále potrebujú objasnenie.

Anatómia

1. Spoločný nadpis: pomenúva jednu situáciu alebo rozhodnutie, ktoré riadi obe oznámenia.
2. Kontajner oznámenia: zoskupuje dvojicu ako jeden redakčný prvok bez toho, aby naznačoval, že ide o jediné upozornenie.
3. Označenie oznámenia: pomenúva podmienku, stav, publikum alebo správanie v 2–6 slovách.
4. Telo oznámenia: uvádza relevantnú skutočnosť, dôsledok a následnú akciu v tomto poradí, keď sú potrebné všetky tri.
5. Voliteľná ikona: posilňuje viditeľné textové označenie; nikdy nenesie rozlíšenie sama o sebe.
6. Voliteľná poznámka o zdroji: podporuje meniace sa, regulované alebo externe definované tvrdenie v rámci oznámenia, ktoré kvalifikuje.
7. Poradie zdroja: určuje poradie pre čítačku obrazovky, kopírovanie a mobil; vizuálne štylovanie ho nesmie obrátiť.

Autor dodáva spoločný nadpis, dve označenia, dve telá, tón a prípadné zdroje. Renderer dodáva responzívnu mriežku, medzery, vizuálne zvýraznenie, sémantický kontajner a dekoratívne spracovanie ikon.

Príklady dizajnu

Toto sú všetky podporované varianty. Varianty menia označenia a dôraz, nie dvojoznámenový dátový model.

Kontrastné akcie

Použite pre jednu odporúčanú a jednu neodporúčanú akciu, keď je na každej strane len jedna správa. Uveďte akciu a jej dôvod; nerozširujte tento variant na párované zoznamy.

Podmienené stavy

Použite, keď správna inštrukcia závisí od vzájomne sa vylučujúcej podmienky, napríklad „Existujúci účet“ a „Nový účet“. Pomenujte podmienku v každom označení a uveďte najbežnejší alebo predpokladaný stav ako prvý.

Párové objasnenia

Použite, keď dve súvisiace skutočnosti predchádzajú rôznym nedorozumeniam, ale nie sú protikladné. Aplikujte neutrálne štylovanie na obe, aby dizajn nevytváral schválenie, závažnosť alebo preferenciu.

Kompaktná dvojica stavov

Použite pre krátke dôsledky stavov po tom, čo už boli stavy vysvetlené. Každé telo tvorí jedna veta. Neodstraňujte označenia ani neredukujte telá na nevysvetlené hodnoty.

Zoradená mobilná dvojica

Všetky varianty sa pri úzkej šírke skladajú pod seba. Prvé oznámenie ponechajte bezprostredne pred druhým a zachovajte spoločný nadpis. Nevytvárajte swipe interakciu ani záložky, pretože skrytie jedného oznámenia maří účel prvku.

Parametre

„Zdroj“ určuje, odkiaľ adaptér získava každú hodnotu. Mapovanie tiel zámerne ukladá dva kompletné záznamy oznámení, nie dve vizuálne umiestnené stĺpce.

Prvý nadpis rodičovského tela sa mapuje na title. Každá vnorená položka mapuje svoj prvý nadpis na label a všetko za ním na content; atribúty oznámenia obsahujú tone a icon. Renderer musí odmietnuť jednu, tri alebo prázdne položky oznámenia namiesto tichého vyplnenia alebo vynechania stĺpca.

Syntax a príklady kódu

Všetky formáty zachovávajú rovnaký názov, poradie oznámení, označenia, telá, tóny a zdroje. „Stĺpec jedna“ a „stĺpec dva“ sú prezentačné termíny, nie názvy polí.

Prenosná Markdown direktíva

:::notification-two-column{variant=conditional}
## Vyberte inštrukciu pre váš publikačný stav

::notice{tone=neutral icon="draft"}
### Koncept stránky

Príkladové hodnoty používajte len vtedy, keď sú viditeľne označené ako príklady. Pred publikovaním každú vzorku odstráňte alebo nahraďte.
::

::notice{tone=caution icon="publish"}
### Publikovaná stránka

Používajte overené hodnoty so zdrojom a overeným dátumom. Ak je overenie neúplné, tvrdenie neuverejňujte.
::
:::

Tento prvok prepisuje generický názov vnorenej položky na notice, pretože záznamy majú správanie špecifické pre tón oznámenia. Prvý rodičovský nadpis poskytuje spoločný názov; prvý nadpis každého oznámenia poskytuje jeho označenie.

Hugo shortcode

Žiadny aktuálny produkčný shortcode nerealizuje túto presnú dohodu párových oznámení. Kým neexistuje adaptér, použite sémantické HTML ako vo vykreslenom príklade. Zamýšľaná Hugo notácia je zdokumentovaná ako:

{{< notification-two-column variant="conditional" >}}
## Vyberte inštrukciu pre váš publikačný stav

{{< notification tone="neutral" icon="draft" >}}
### Koncept stránky
Označené príkladové hodnoty používajte len vtedy a pred publikovaním ich odstráňte.
{{< /notification >}}

{{< notification tone="caution" icon="publish" >}}
### Publikovaná stránka
Používajte overené hodnoty so zdrojom a overeným dátumom.
{{< /notification >}}
{{< /notification-two-column >}}

Formulár s lomítkovým komentárom zabraňuje tomu, aby tento príklad špecifikácie zavolal shortcode, ktorý neexistuje. Budúci adaptér musí overiť presne dve detské oznámenia a vykresliť ich v poradí zdroja.

WordPress blok

<!-- wp:amicited/notification-two-column {"variant":"conditional"} -->
<h2>Vyberte inštrukciu pre váš publikačný stav</h2>
<!-- wp:amicited/notification {"tone":"neutral","icon":"draft"} -->
<h3>Koncept stránky</h3>
<p>Označené príkladové hodnoty používajte len vtedy a pred publikovaním ich odstráňte.</p>
<!-- /wp:amicited/notification -->
<!-- wp:amicited/notification {"tone":"caution","icon":"publish"} -->
<h3>Publikovaná stránka</h3>
<p>Používajte overené hodnoty so zdrojom a overeným dátumom.</p>
<!-- /wp:amicited/notification -->
<!-- /wp:amicited/notification-two-column -->

WordPress editor by mal ponúkať dve pevne stanovené pozície oznámení, umožniť preusporiadanie a zabrániť publikovaniu, keď je označenie alebo telo prázdne. Nesmie umožniť autorom pridať tretie oznámenie len preto, že mriežkový blok podporuje viac stĺpcov.

Príklady

Dobrý: dve skutočné podmienky s úplnými akciami

Pred importom
Stiahnite aktuálne záznamy a poznačte si čas exportu. Kópia vám poskytne bod obnovy, ak mapovanie polí prinesie neočakávaný výsledok.

Po importe
Porovnajte počet importovaných záznamov so zdrojovým počtom a potom skontrolujte aspoň jeden záznam obsahujúci každé mapované pole. Počty odhalia vynechania; kompletný záznam odhalí posunuté hodnoty.

Táto dvojica má jednu tému – bezpečné overenie importu – a skutočnú časovú hranicu. Každé oznámenie pomenúva akciu a vysvetľuje, aké zlyhanie zachytáva. Druhé je dlhšie, pretože obsahuje dve súvisiace kontroly, ale obe strany nesú porovnateľnú zodpovednosť a zostávajú zrozumiteľné pri zoradení pod seba.

Zlý: falošná symetria, ktorá degraduje riziko

Užitočný tip
Premenujte export tak, aby sa neskôr ľahšie našiel.

Dôležité
Import s voľbou „Nahradiť všetko“ natrvalo vymaže existujúce záznamy a nemožno ho vrátiť späť. Pred pokračovaním zálohujte databázu, potvrďte cieľ, získajte schválenie a naplánujte odstávku.

Prvé oznámenie je voliteľná administratíva; druhé opisuje nezvratnú stratu dát a niekoľko predpokladov. Umiestnenie do rovnakých stĺpcov naznačuje rovnakú váhu a robí kritickú správu jednou z dvoch alternatív. Presuňte oznámenie o strate dát do samostatného varovného boxu pred ovládací prvok. Návrh na premenovanie súboru ponechajte ako bežnú podpornú prózu.

Schema markup a prístupnosť

Dvojstĺpcové oznámenie nemá vyhradený Schema.org typ. Jeho obsah zostáva v rámci obklopujúceho Article, TechArticle alebo WebPage. Nevypúšťajte ItemList, HowToStep, Question ani Answer len preto, že existujú dva ohraničené záznamy. Ak oznámenie obsahuje obsah, ktorý samostatne kvalifikuje štruktúrované dáta, pravidlá schémy obklopujúceho typu príspevku rozhodujú o mapovaní; tento prvok sám o sebe nepridáva žiadne.

Použite jeden označený section, keď dvojica patrí k hlavnému vysvetleniu, alebo označený aside, keď sú obe oznámenia doplnkové. Každé dieťa môže byť aside alebo section so skutočným nadpisom na správnej úrovni dokumentu. Nepoužívajte ARIA alert ani alertdialog: tieto roly oznamujú dynamické, časovo citlivé zmeny a nie sú vhodné pre statické redakčné usmernenie.

Prístupný názov pochádza z viditeľného spoločného nadpisu prostredníctvom natívnej štruktúry nadpisov alebo aria-labelledby. Každé označenie oznámenia musí byť text. Farba, štýl okraja, pozícia a ikony môžu posilniť tón, ale nemôžu ho definovať. Ak je ikona dekoratívna, skryte ju pred asistenčnou technológiou; ak komunikuje informácie, ktoré nie sú v označení, prepíšte označenie namiesto spoliehania sa na alternatívny text na opravu dizajnu.

Poradie v DOM určuje význam. Čítačky obrazovky a mobilné rozloženia musia naraziť na prvé oznámenie a potom na druhé. Neotáčajte vizuálne poradie pomocou CSS. Pri 200% priblížení textu a úzkych šírkach sa musia oznámenia skladať bez orezania alebo horizontálneho posúvania stránky. Odkazy potrebujú opisné označenia a viacero odkazov nesmie byť stlačených do neoznačeného radu ikon.

Pravidlá písania

Napíšte vzťah pred písaním oznámení: „Čitateľ potrebuje dve správy, pretože správne usmernenie sa mení podľa ___ .“ Ak nie je možné doplniť konkrétnu podmienku, stav, publikum, čas alebo behaviorálny kontrast, použite prózu.

• Použite presne dve oznámenia pod jedným spoločným názvom.
• Názov udržujte na 3–12 slovách a každé označenie na 2–6 slovách.
• Cieľte na 25–80 slov na telo; 120 slov je absolútne maximum.
• Použite jeden alebo dva krátke odseky na oznámenie a najviac jeden krátky vložený odkaz.
• Uveďte fakt alebo podmienku ako prvú, jej dôsledok ako druhý a akciu ako poslednú, keď sú všetky prítomné.
• Použite paralelnú gramatiku označení: „Pred spustením / Po spustení,“ nie „Pred spustením / Čo by mali administrátori urobiť neskôr.“
• Podmienky pomenúvajte priamo. Nikdy nepíšte „vľavo,“ „vpravo,“ „druhá možnosť“ ani „box vyššie.“
• Prispôsobte tón dôkazom. Neutrálne párové fakty by nemali dostať zelené a červené spracovanie.
• Meniace sa tvrdenia opatrite dátumom, verziou, plánom, jurisdikciou alebo zdrojom podľa potreby.

Porovnateľná váha znamená, že obe správy si zaslúžia rovnaký moment v toku čitateľa. Nevyžaduje rovnaký počet viet alebo znakov. Nenaťahujte krátku pravdu, aby zodpovedala dlhšej. Ak jedno telo presahuje druhé približne viac ako dva ku jednej, otestujte, či väčšie oznámenie nepotrebuje samostatnú sekciu alebo či menšie oznámenie nie je falošným náprotivkom.

Nikdy neumiestňujte viackrokový postup, tabuľku, formulár, cenovú kartu, posudok, propagačnú výzvu na akciu, dlhú citáciu, ukážku kódu, video ani vnorený komponent do oznámenia. Nikdy nepoužívajte dvojicu na zjemnenie právneho, lekárskeho, finančného, súkromného, bezpečnostného alebo deštruktívneho usmernenia. Nenaznačujte, že dve podmienky sú vyčerpávajúce, pokiaľ vlastník obsahu neoveril, že žiadny tretí stav neexistuje.

Typy príspevkov, ktoré ho používajú

Pole postTypes v hlavičke je zdrojom pre túto tabuľku. Zaradenie znamená, že prvok je k dispozícii pre skutočný prípad dvoch oznámení, nie je povinný na každej stránke daného typu.

Kontrolný zoznam QA

• Spoločná téma: Jeden presný názov riadi obe oznámenia bez naťahovania rozsahu.
• Presne dve oznámenia: Zdroj obsahuje dva kompletné záznamy a žiadny implikovaný tretí stav.
• Skutočný vzťah: Označenia pomenúvajú zmysluplný kontrast, podmienku, publikum, stav alebo časovú hranicu.
• Nezávislý význam: Každé oznámenie zostáva jasné, keď je extrahované so spoločným názvom.
• Žiadna falošná symetria: Obe správy si zaslúžia porovnateľný dôraz; ani jedna nie je výplň alebo degradované kritické varovanie.
• Správne umiestnenie: Dvojica nasleduje svoj kontext a predchádza akciu alebo detail, ktorý kvalifikuje.
• Bezpečné susedstvo: Nie je vedľa iného rozdeleného rozloženia, tabuľky, ovládacieho prvku záložiek alebo dvojstĺpcovej CTA.
• Užitočné označenia: Označenia používajú paralelnú gramatiku a nikdy nezávisia od ľavej/pravej pozície alebo farby.
• Kontrola dĺžky: Telá zostávajú v rámci jedného alebo dvoch odsekov a najviac 120 slov každé.
• Obsahová zdržanlivosť: Vo vnútri sa nenachádza žiadny vnorený postup, tabuľka, formulár, médium, propagácia ani zložitý komponent.
• Responzívne poradie: Poradie na mobile, klávesnici, čítačke obrazovky a kopírovanom texte zodpovedá autorskej postupnosti.
• Prístupná sémantika: Viditeľný nadpis označuje rodiča; detské označenia sú nadpisy; statický obsah nepoužíva roly upozornení.
• Integrita tónu: Štylovanie odráža skutočný význam a nemení neutrálne fakty na dobré/zlé hodnotenia.
• Parita notácie: Markdown, Hugo a WordPress zachovávajú rovnaký názov, označenia, telá, atribúty a poradie.
• Zdržanlivosť schémy: Prvok nevytvára žiadne nepodporované štruktúrované dáta.

Zamietnite prvok, ak zlyhajú kontroly spoločnej témy, skutočného vzťahu alebo falošnej symetrie. Ide o redakčné chyby, ktoré renderer nedokáže opraviť. Prepíšte obsah ako prózu, samostatné sekcie, samostatné varovanie alebo iný účelovo prispôsobený prvok pred úpravou prezentácie.

FAQ

Štruktúrované FAQ v hlavičke pokrýva implementačné rozhodnutia, ktoré sú najpravdepodobnejšie nepochopené: oznámenia nemusia byť protikladné ani rovnako dlhé, mobilné poradie nasleduje poradie zdroja, závažné riziká zostávajú samostatnými varovaniami a prvok nevytvára žiadny vlastný schema markup.