Oznámení: Dva sloupce — Pravidla a příklady
Použijte dvousloupcové oznámení k přehlednému zobrazení dvou souvisejících sdělení, zachování kontrastu na mobilu a zamezení falešné symetrie u pokynů a podmínek.
Dvousloupcové oznámení umisťuje dvě krátká, popsaná sdělení pod jedno společné téma. Sdělení mohou kontrastovat činnosti, vysvětlovat dvě podmínky nebo rozlišovat související stavy, ale každé musí zůstat přesné a užitečné, i když je čteno samostatně.
Zvolte pokyn podle stavu vaší publikace
Tento vykreslený prvek funguje, protože „Koncept stránky" a „Publikovaná stránka" jsou skutečné stavy, nikoli pouze dekorativní nadpisy. Společný nadpis definuje rozhodnutí, každé oznámení poskytuje úplný pokyn a ani jedno nevyžaduje, aby čtenář význam odvozoval z barvy nebo horizontálního umístění.
Proč na tomto prvku záleží
Čtenáři se často setkávají s pokyny během skenování pro podmínku, která se jich týká. Dlouhý odstavec, který říká „koncepty mohou obsahovat označené příklady, zatímco publikované stránky vyžadují ověřené hodnoty", nutí čtenáře držet jednu větu v paměti při testování druhé. Dvě ohraničená oznámení tuto práci snižují. Popisky nejprve odhalí větev, takže čtenář může identifikovat relevantní podmínku a pak si přečíst její pokyn.
Psychologickým přínosem je selektivní pozornost. Lidé ne vždy potřebují obě zprávy stejně; potřebují jistotu, že si všimli té správné. Společný nadpis stanovuje otázku, zatímco odlišné popisky zpřístupňují dostupné stavy. Vedlejší uspořádání také činí smysluplný kontrast zřejmým, aniž by ho přehánělo jako vítěze a poraženého.
Tento přínos mizí, když autor vytvoří falešnou symetrii. Falešná symetrie nastává, když rozvržení implikuje, že dvě myšlenky mají stejný rozsah, důležitost nebo platnost, i když obsah tomu neodpovídá. Jednovětá připomínka vedle šestikrokového bezpečnostního postupu není pár. Stejně tak není povinné právní omezení vedle volitelného tipu na produktivitu. Sloupce stejné šířky mohou způsobit, že nerovnocenná sdělení vypadají zaměnitelně, což je přesně špatný signál.
Strojová extrahovatelnost je schopnost softwaru izolovat obsah při zachování vztahů, které jej činí přesným. Typové dvousloupcové oznámení odhaluje jeden rodičovský předmět a dvě popsaná podřízená oznámení. Vyhledávací systémy a AI agenti mohou získat „Pro publikovanou stránku používejte ověřené hodnoty se zdrojem a datem kontroly", aniž by hádali, který nadpis řídí kterou větu. Explicitní popisky, pořadí ve zdroji a samostatná těla přežijí responzivní skládání i extrakci pouze textu.
Než zvolíte tuto komponentu, postupujte podle pravidel psaní prvků . Účel má přednost před vzhledem. Závažné riziko zůstává varovným boxem , oprava chování po jednotlivých bodech zůstává blokem doporučeného a zakázaného chování a dvě skutečnosti se nestanou oznámeními jen proto, že je design umí umístit do sloupců.
Kdy to použít
Použijte tento prvek, když má jedno společné téma přesně dvě krátká sdělení a jejich současné zobrazení pomáhá čtenáři klasifikovat, porovnávat nebo předcházet zmatku. Mezi vhodné vztahy patří:
- Dvě podmínky: přihlášen versus odhlášen, koncept versus publikováno, před migrací versus po migraci.
- Dva okruhy uživatelů: vlastník účtu versus pozvaný uživatel, pokud oba dostávají pokyny ke stejné události.
- Doporučené a nedoporučované chování: pouze pokud je každá strana krátkým sdělením, nikoli seznamem porovnávaných chování.
- Dostupné a nedostupné stavy: pokud popisky uvádějí podmínky, které daný stav vytvářejí.
- Současné a budoucí chování: pokud jsou data nebo hranice verzí explicitní.
Všechny tyto testy musí projít:
- Jeden nadpis může přesně uvést obě sdělení.
- Existují přesně dvě podmínky nebo sdělení; zdroj neskrývá třetí případ.
- Každé sdělení má konkrétní popisek a úplný důsledek nebo akci.
- Dvojici lze pochopit v pořadí zdroje na úzké obrazovce.
- Žádné sdělení nevyžaduje vnořený postup, tabulku, formulář nebo dlouhé upřesnění.
Těsné mimonávrhy odhalují zneužití. Použijte běžnou prózu, když druhé tvrzení pouze navazuje na první. Použijte srovnávací tabulku, když čtenáři musí posoudit několik kritérií. Použijte rozhodovací strom, když se větví více než dvě podmínky nebo když jedna odpověď vede k další otázce. Použijte samostatné varování, když by přehlédnutí zprávy mohlo způsobit škodu, ztrátu dat, právní postih nebo nevratnou akci. Použijte blok doporučeného a zakázaného chování, když několik nesprávných chování vyžaduje odpovídající nápravu.
Nevymýšlejte protiváhu. Pokud je poctivý pokyn „Před migrací zazálohujte databázi", přidání „Po migraci: pokračujte v práci" vytváří symetrii, ale žádnou hodnotu. Stejně tak nerozdělujte jedno oznámení na „Důležité" a „Také důležité". Popisky musí pojmenovávat skutečné podmínky, stavy, okruhy uživatelů nebo pozice.
Kam to umístit
Umístěte prvek ihned za odstavec, který definuje společnou situaci. Čtenáři musí vědět, jaké rozhodnutí nebo stav sdělení zpřesňují, než narazí na větve. Když dvojice předchází akci, umístěte ji před první krok, který mění data nebo zavazuje čtenáře k volbě.
Přesná pravidla umístění jsou:
- Umístěte dvojici se dvěma podmínkami po předpokladech a před pokyny specifickými pro danou podmínku.
- Umístěte kontrast před akcí před ovládací prvek, příkaz, stažení nebo krok, který zpřesňuje.
- Umístěte dvojici výsledných stavů poté, co byl výsledek definován, a před podrobnosti o řešení problémů.
- Uchovávejte důkaz nebo zdroj uvnitř příslušného sdělení, pokud podporuje pouze toto sdělení; sdílený důkaz umístěte ihned za celou dvojici.
- V opakovaných dokumentačních sekcích používejte stejné pořadí ve zdroji, aby se opakující se stavy nepřesouvaly.
Prvek nesmí sousedit s jinou dvousloupcovou komponentou, srovnávací tabulkou, ovládacím prvkem záložek, cenovou mřížkou nebo rozdělenou výzvou k akci. Sousedící mřížky činí hranice nejasnými a mohou naznačovat čtyřsměrnou volbu. Nesmí oddělovat tvrzení od jeho citace, krok od požadovaného varování ani ovládací prvek formuláře od jeho popisku. Neumisťujte jej do číslovaného kroku: vnořené větve mohou učinit posloupnost a odpovědnost nejasnými.
Nikdy neumisťujte závažné varování do jednoho sloupce vedle běžné rady ve druhém. Stejná geometrie snižuje dominanci varování a naznačuje, že si čtenář může mezi nimi vybrat. Povýšte riziko na samostatné varování před příslušnou akcí, pak tento prvek použijte později, pouze pokud si dvě bezpečné podmínky stále vyžadují objasnění.
Anatomie
- Společný nadpis: pojmenovává jednu situaci nebo rozhodnutí, které řídí obě sdělení.
- Kontejner sdělení: seskupuje dvojici jako jeden redakční prvek, aniž by naznačoval, že jde o jediné upozornění.
- Popisek sdělení: pojmenovává podmínku, stav, okruh uživatelů nebo chování ve 2–6 slovech.
- Tělo sdělení: uvádí relevantní skutečnost, důsledek a následnou akci v tomto pořadí, pokud jsou všechny tři potřeba.
- Volitelná ikona: posiluje viditelný textový popisek; nikdy nenesou rozlišení sama.
- Volitelná poznámka ke zdroji: podporuje měnící se, regulované nebo externě definované tvrzení v rámci sdělení, které zpřesňuje.
- Pořadí ve zdroji: určuje pořadí pro čtečky obrazovky, kopírování a mobil; vizuální stylování jej nesmí obracet.
Autor dodává společný nadpis, dva popisky, dvě těla, tón a případné zdroje. Vykreslovací engine dodává responzivní mřížku, mezery, vizuální důraz, sémantický kontejner a dekorativní zpracování ikon.
Příklady designu
Toto jsou všechny podporované varianty. Varianty mění popisky a důraz, nikoli datový model dvou sdělení.
Kontrastní činnosti
Použijte pro jednu doporučenou a jednu nedoporučovanou činnost, pokud je na každé straně pouze jedno sdělení. Uveďte činnost a její důvod; tuto variantu nerozšiřujte na porovnávané seznamy.
Podmíněné stavy
Použijte, pokud správný pokyn závisí na vzájemně se vylučující podmínce, například „Existující účet" a „Nový účet". Pojmenujte podmínku v každém popisku a uveďte nejběžnější nebo předpokladovou podmínku jako první.
Párová objasnění
Použijte, když dvě související skutečnosti zabraňují různým nedorozuměním, ale nejsou protiklady. Aplikujte neutrální stylování na obě, aby design nevytvářel schválení, závažnost nebo preferenci.
Kompaktní dvojice stavů
Použijte pro krátké důsledky stavů poté, co již byly stavy vysvětleny. Každé tělo je jedna věta. Neodstraňujte popisky ani neredukujte těla na nevysvětlené hodnoty.
Skládaná mobilní dvojice
Všechny varianty se skládají na úzkých šířkách. Udržujte první sdělení bezprostředně před druhým a zachovejte společný nadpis. Nevytvářejte swipe interakci nebo záložky, protože skrytí jednoho sdělení maří účel prvku.
Parametry
„Zdroj" určuje, odkud adaptér získává jednotlivé hodnoty. Mapování těla záměrně ukládá dva kompletní záznamy sdělení, nikoli dva vizuálně umístěné sloupce.
| Název | Typ | Povinné | Min/max | Výchozí | Zdroj |
|---|---|---|---|---|---|
| title | Plain string | Yes | 3–12 slov; 100 znaků | None | První nadpis v těle |
| variant | Enum | No | contrast, conditional, clarification, nebo compact | clarification | Atribut |
| notice | Repeated record | Yes | Přesně 2 | None | Vnořená položka těla |
| label | Plain string | Yes per notice | 2–6 slov; 50 znaků | None | První nadpis v těle sdělení |
| content | Limited rich text | Yes per notice | 1–2 odstavce; doporučeno 25–80 slov, maximum 120 | None | Tělo sdělení za prvním nadpisem |
| tone | Enum | No | neutral, positive, caution, nebo negative | neutral | Atribut sdělení |
| icon | Registered icon key | No | Jedna dekorativní ikona na sdělení | None | Atribut sdělení |
| source | Plain text with optional link | Conditional | Jedna stručná poznámka ke zdroji na sdělení | None | Konec těla sdělení |
První nadpis rodičovského těla se mapuje na title. Každá vnořená položka mapuje svůj první nadpis na label a vše za ním na content; atributy sdělení obsahují tone a icon. Vykreslovací engine musí odmítnout jednu, tři nebo prázdné položky sdělení, místo aby tiše vyplnil nebo vypustil sloupec.
Syntaxe a příklady kódu
Všechny formáty zachovávají stejný název, pořadí sdělení, popisky, těla, tóny a zdroje. „Sloupec jedna" a „sloupec dva" jsou prezentační termíny, nikoli názvy polí.
Přenosná Markdown direktiva
:::notification-two-column{variant=conditional}
## Zvolte pokyn podle stavu vaší publikace
::notice{tone=neutral icon="draft"}
### Koncept stránky
Ukázkové hodnoty používejte pouze tehdy, jsou-li viditelně označeny jako příklady. Před publikací každý vzorek odstraňte nebo nahraďte.
::
::notice{tone=caution icon="publish"}
### Publikovaná stránka
Používejte ověřené hodnoty se zdrojem a datem kontroly. Pokud není ověření dokončeno, tvrzení neuveřejňujte.
::
:::
Tento prvek přepisuje generický název vnořené položky na notice, protože záznamy mají chování tónu specifické pro sdělení. První rodičovský nadpis poskytuje společný název; první nadpis každého sdělení poskytuje jeho popisek.
Hugo shortcode
V současné produkci neexistuje shortcode, který by implementoval tuto přesnou smlouvu párových sdělení. Dokud nebude existovat adaptér, používejte sémantické HTML jako ve vykresleném příkladu. Zamýšlená Hugo notace je zdokumentována jako:
{{< notification-two-column variant="conditional" >}}
## Zvolte pokyn podle stavu vaší publikace
{{< notification tone="neutral" icon="draft" >}}
### Koncept stránky
Označené ukázkové hodnoty používejte pouze jako příklady a před publikací je odstraňte.
{{< /notification >}}
{{< notification tone="caution" icon="publish" >}}
### Publikovaná stránka
Používejte ověřené hodnoty se zdrojem a datem kontroly.
{{< /notification >}}
{{< /notification-two-column >}}
Forma s lomítkem a hvězdičkou zabraňuje tomu, aby tento příklad specifikace vyvolal shortcode, který neexistuje. Budoucí adaptér musí validovat přesně dvě podřízená oznámení a vykreslit je v pořadí zdroje.
WordPress blok
<!-- wp:amicited/notification-two-column {"variant":"conditional"} -->
<h2>Zvolte pokyn podle stavu vaší publikace</h2>
<!-- wp:amicited/notification {"tone":"neutral","icon":"draft"} -->
<h3>Koncept stránky</h3>
<p>Označené ukázkové hodnoty používejte pouze jako příklady a před publikací je odstraňte.</p>
<!-- /wp:amicited/notification -->
<!-- wp:amicited/notification {"tone":"caution","icon":"publish"} -->
<h3>Publikovaná stránka</h3>
<p>Používejte ověřené hodnoty se zdrojem a datem kontroly.</p>
<!-- /wp:amicited/notification -->
<!-- /wp:amicited/notification-two-column -->
WordPress editor by měl nabízet dvě pevně daná místa pro sdělení, umožnit změnu pořadí a zabránit publikaci, pokud je popisek nebo tělo prázdné. Nesmí dovolit autorům přidat třetí sdělení jen proto, že blok mřížky podporuje více sloupců.
Příklady
Dobře: dvě skutečné podmínky s úplnými akcemi
Před importem
Stáhněte aktuální záznamy a poznamenejte si čas exportu. Kopie vám poskytne bod obnovy, pokud mapování polí přinese neočekávaný výsledek.Po importu
Porovnejte počet importovaných záznamů se zdrojovým počtem, poté zkontrolujte alespoň jeden záznam obsahující každé mapované pole. Počty odhalí chybějící položky; celý záznam odhalí posunuté hodnoty.
Tato dvojice má jedno téma — bezpečné ověření importu — a skutečnou časovou hranici. Každé sdělení pojmenovává akci a vysvětluje, jaké selhání odhaluje. Druhé je delší, protože obsahuje dvě související kontroly, ale obě strany nesou srovnatelnou odpovědnost a zůstávají srozumitelné i při skládání.
Špatně: falešná symetrie, která degraduje riziko
Užitečný tip
Přejmenujte export, aby se později snáze hledal.Důležité
Import s volbou „Nahradit vše" trvale smaže stávající záznamy a nelze jej vrátit zpět. Před pokračováním zazálohujte databázi, potvrďte cíl, získejte schválení a naplánujte odstávku.
První sdělení je volitelná administrativní záležitost; druhé popisuje nevratnou ztrátu dat a několik předpokladů. Jejich umístění do stejně širokých sloupců implikuje stejnou váhu a činí kritickou zprávu jednou ze dvou alternativ. Přesuňte sdělení o ztrátě dat do samostatného varovného boxu před ovládací prvek. Tip na název souboru ponechte jako běžnou podpůrnou prózu.
Schéma markup a přístupnost
Dvousloupcové oznámení nemá vyhrazený typ Schema.org. Jeho obsah zůstává v rámci nadřazeného Article, TechArticle nebo WebPage. Nevydávejte ItemList, HowToStep, Question nebo Answer pouze proto, že existují dva ohraničené záznamy. Pokud sdělení obsahuje obsah, který nezávisle splňuje podmínky pro strukturovaná data, rozhodují o mapování pravidla schématu nadřazeného typu příspěvku; tento prvek sám o sobě žádné nepřidává.
Použijte jeden popsaný section, když dvojice patří do hlavního vysvětlení, nebo popsaný aside, když jsou obě sdělení doplňková. Každý potomek může být aside nebo section se skutečným nadpisem na správné úrovni dokumentu. Nepoužívejte ARIA role alert nebo alertdialog: tyto role ohlašují dynamické, časově citlivé změny a nejsou vhodné pro statické redakční pokyny.
Přístupný název pochází z viditelného společného nadpisu prostřednictvím nativní struktury nadpisů nebo aria-labelledby. Každý popisek sdělení musí být text. Barva, styl okraje, pozice a ikony mohou posilovat tón, ale nemohou jej definovat. Pokud je ikona dekorativní, skryjte ji před asistenčními technologiemi; pokud sděluje informace, které nejsou v popisku, přepište popisek místo spoléhání se na alternativní text pro opravu návrhu.
Pořadí v DOM řídí význam. Čtečky obrazovky a mobilní rozvržení musí narazit nejprve na první sdělení a poté na druhé. Neobracejte vizuální pořadí pomocí CSS. Při 200% přiblížení textu a na úzkých šířkách se sdělení musí skládat bez ořezávání nebo horizontálního posouvání stránky. Odkazy potřebují popisné popisky a více odkazů nesmí být stlačeno do neoznačeného řádku ikon.
Pravidla psaní
Než začnete psát sdělení, napište vztah: „Čtenář potřebuje dvě zprávy, protože správný pokyn se mění podle ___." Pokud nelze prázdné místo vyplnit konkrétní podmínkou, stavem, okruhem uživatelů, časem nebo kontrastem chování, použijte prózu.
- Použijte přesně dvě sdělení pod jedním společným nadpisem.
- Udržujte nadpis na 3–12 slovech a každý popisek na 2–6 slovech.
- Cílejte na 25–80 slov na tělo; 120 slov je absolutní maximum.
- Použijte jeden nebo dva krátké odstavce na sdělení a nejvýše jeden krátký inline odkaz.
- Uveďte nejprve skutečnost nebo podmínku, poté její důsledek a nakonec akci, pokud jsou přítomny všechny.
- Používejte paralelní gramatiku popisků: „Před spuštěním / Po spuštění", nikoli „Před spuštěním / Co by měli administrátoři udělat později".
- Pojmenovávejte podmínky přímo. Nikdy nepište „vlevo", „vpravo", „druhá možnost" nebo „box výše".
- Přizpůsobte tón důkazům. Neutrální párová fakta by neměla zdědit zelené a červené zpracování.
- U měnících se tvrzení uveďte datum, verzi, plán, jurisdikci nebo zdroj podle potřeby.
Srovnatelná váha znamená, že si obě sdělení zaslouží stejný okamžik v toku čtenáře. Nevyžaduje shodný počet vět nebo znaků. Nenatahujte krátkou pravdu, aby odpovídala delší. Pokud jedno tělo převyšuje druhé zhruba více než dvakrát, otestujte, zda větší sdělení nepotřebuje samostatnou sekci nebo zda menší sdělení není falešným protějškem.
Nikdy neumisťujte vícekrokový postup, tabulku, formulář, cenovou kartu, reference, propagační výzvu k akci, dlouhou citaci, ukázku kódu, video nebo vnořenou komponentu dovnitř sdělení. Nikdy nepoužívejte dvojici ke změkčení právních, lékařských, finančních, bezpečnostních, ochranných nebo destruktivních pokynů. Neimplikujte, že dvě podmínky jsou vyčerpávající, pokud vlastník obsahu neověřil, že neexistuje žádný třetí stav.
Typy příspěvků, které jej používají
Pole postTypes v frontmatter je zdrojem pro tuto tabulku. Uvedení znamená, že prvek je k dispozici pro skutečný případ dvou sdělení, nikoli povinný na každé stránce daného typu.
| Typ příspěvku | Typické použití | Doporučené umístění | Běžné zneužití |
|---|---|---|---|
| Návod | Dvě podmínky, které mění následující akci | Po předpokladech a před ovlivněným krokem | Skrytí sekvenčních kroků v paralelních sděleních |
| Průvodce řešením problémů | Dva pozorované stavy s odlišnými dalšími kontrolami | Po potvrzení příznaku | Použití dvojice, když jsou možné tři nebo více příčin |
| Dokumentační článek | Pokyny pro stávající a nové uživatele k jedné funkci | Ihned před podrobnostmi konfigurace | Párování běžné nápovědy s varováním o destruktivní akci |
| Stránka zásad | Podmínky v rozsahu a mimo rozsah s ekvivalentními vysvětleními | Po definování rozsahu | Zobrazení závazného požadavku jako jedné volitelné strany |
| Stránka normy nebo nařízení | Dva stavy použitelnosti nebo dvě odpovědné strany | Po uvedení řídícího termínu a jurisdikce | Komprimování výjimek nebo právních upřesnění do malého boxu |
| Srovnání A vs B | Jedno krátké kontextové sdělení pro každou možnost | Po rozsahu srovnání, před tabulkami důkazů | Nahrazení férového srovnání kritérium po kritériu marketingovými shrnutími |
Kontrolní seznam QA
- Společné téma: Jeden přesný nadpis řídí obě sdělení, aniž by rozšiřoval záběr.
- Přesně dvě sdělení: Zdroj obsahuje dva kompletní záznamy a žádný implikovaný třetí stav.
- Skutečný vztah: Popisky pojmenovávají smysluplný kontrast, podmínku, okruh uživatelů, stav nebo časovou hranici.
- Nezávislý význam: Každé sdělení zůstává jasné i při extrakci se společným nadpisem.
- Žádná falešná symetrie: Obě sdělení si zaslouží srovnatelný důraz; žádné není výplň nebo degradované kritické varování.
- Správné umístění: Dvojice následuje svůj kontext a předchází akci nebo detailu, který zpřesňuje.
- Bezpeční sousedé: Není vedle jiného rozděleného rozvržení, tabulky, ovládacího prvku záložek nebo dvousloupcové CTA.
- Užitečné popisky: Popisky používají paralelní gramatiku a nikdy nezávisí na pozici vlevo/vpravo nebo barvě.
- Kontrola délky: Těla zůstávají v rozsahu jednoho nebo dvou odstavců a nejvýše 120 slov.
- Obsahová zdrženlivost: Uvnitř se neobjevuje žádný vnořený postup, tabulka, formulář, média, propagace ani složitá komponenta.
- Responzivní pořadí: Pořadí na mobilu, klávesnici, čtečce obrazovky a při kopírování textu odpovídá autorově posloupnosti.
- Přístupná sémantika: Viditelný nadpis popisuje rodiče; podřízené popisky jsou nadpisy; statický obsah nepoužívá role alert.
- Integrita tónu: Stylování odráží skutečný význam a nemění neutrální fakta na hodnocení dobrý/špatný.
- Parita notace: Markdown, Hugo a WordPress zachovávají stejný název, popisky, těla, atributy a pořadí.
- Schéma zdrženlivost: Prvek nevytváří žádná nepodporovaná strukturovaná data.
Zamítněte prvek, pokud selžou kontroly společného tématu, skutečného vztahu nebo falešné symetrie. Jde o redakční vady, které vykreslovací engine nemůže opravit. Přepište obsah jako prózu, samostatné sekce, samostatné varování nebo jiný prvek odpovídající účelu, než upravíte prezentaci.
FAQ
Strukturované FAQ ve frontmatter pokrývá implementační rozhodnutí, která jsou nejčastěji nepochopena: sdělení nemusí být protiklady nebo stejně dlouhá, mobilní pořadí následuje pořadí zdroje, závažná rizika zůstávají samostatnými varováními a prvek sám o sobě nevytváří žádné schéma markup.
Další návody v této sekci
Připraveni uvést to do praxe?
Bezplatná kontrola · 7denní zkušební verze · bez platební karty