Poznámkový box: Kdy a jak jej použít
Použijte poznámkový box k objasnění blízkého obsahu, aniž byste změnili čtenářovu akci, výsledek, riziko nebo priority – a tipy a varování udržujte vždy oddělené.
Poznámkový box izoluje kontext, který čtenáři pomáhá interpretovat blízký obsah, ale nemění to, co by čtenář měl udělat, jaký výsledek očekávat ani jak vážná situace je.
Tento vykreslený příklad řeší pravděpodobnou otázku bez přidání kroku. Čtenář, který jej přeskočí, může hlášení stále správně používat. Čtenář, který si všimne časového rozdílu, získá chybějící kontext a může pokračovat beze změny pracovního postupu.
Proč na tomto prvku záleží
Čtenáři skenují stránku podle vizuální priority. Ohraničená poznámka říká: „Tento kontext může vyřešit otázku, ale nejde o nový pokyn.“ Tento signál snižuje úsilí potřebné ke klasifikaci odbočky. Čtenář může krátce opustit hlavní argument, vstřebat objasnění a vrátit se na stejné místo, aniž by přemýšlel, zda se postup změnil.
Prvek funguje pouze tehdy, když tento slib zůstává spolehlivý. Pokud povinné kroky, prodejní sdělení, definice, varování a věcné souvislosti všechny získají styl poznámky, štítek přestane pomáhat. Čtenáři musí prozkoumat každý box, aby zjistili, co znamená, což přidává více kognitivní zátěže – mentálního úsilí vynaloženého na zpracování informací – než by vytvořil obyčejný text.
Štítky závažnosti také učí chování prostřednictvím opakování. Když neškodný kontext obdrží varovné barvy, čtenáři opakovaně narazí na naléhavý signál bez smysluplného důsledku. Naučí se ho přehlížet. Příští skutečné varování pak soutěží s historií falešných poplachů. Zneužití varovného stylu pro poznámky nedělá jen jednu stránku melodramatickou; oslabuje celý systém rizikových sdělení webu.
Pro stroje poskytuje typovaná poznámka explicitní hranici a účel. Nástroj pro migraci obsahu může blok zachovat jako doplňkový kontext, místo aby jej sloučil do procedurálního kroku. Vyhledávací systém nebo AI agent může extrahovat poznámku s jejím štítkem a tělem a pak ji ponechat podřízenou tvrzení, které vysvětluje. Tento vztah je obtížnější obnovit z odstavce obarveného modře stylováním specifickým pro stránku.
Extrahovatelnost stále závisí na psaní. „Toto může vypadat jinak“ není mimo svůj odstavec užitečné, protože chybí předmět. „Časová razítka hlášení používají UTC, ne místní čas diváka“ je soběstačné. Pravidla psaní prvků mají přednost: nejprve klasifikujte pasáž podle jejího účelu, poté aplikujte registrovaný prvek. Vizuální důraz nikdy nevytváří sémantický typ.
Kdy jej použít
Použijte poznámku pouze tehdy, když platí všechny čtyři podmínky:
- Pasáž objasňuje jeden blízký výrok, hodnotu, instrukci, příklad nebo sekvenci.
- Její přeskočení nemění požadovanou akci, očekávaný výsledek, správnou interpretaci hlavního tvrzení ani úroveň rizika.
- Kontext odpovídá na věrohodnou čtenářskou otázku, která by jinak přerušila porozumění.
- Pasáž je dostatečně soběstačná, aby zůstala smysluplná při extrakci se svým štítkem.
Dobrý materiál pro poznámku zahrnuje konvenci časového pásma, přezdívku názvu, hranici rozsahu již implikovanou hlavním textem, neškodný rozdíl v rozhraní mezi verzemi nebo vysvětlení očekávaného stavu zobrazení. Například: „Tlačítko je na měsíčních účtech označeno Uložit a na ročních účtech Použít; obě odesílají stejná nastavení.“ Akce a výsledek čtenáře se nemění.
Téměř zásahy jsou důležité, protože „užitečná doplňující informace“ je příliš široká definice:
- Fakt potřebný k pochopení následujícího odstavce patří do hlavního vysvětlení. Skrytí v poznámce dělá nezbytné porozumění volitelným.
- Předpoklad patří před postup. Pokud práce nemůže začít bez administrátorského přístupu, přístup není doplňkový kontext.
- Volitelná technika, která práci zrychlí nebo zlepší, patří do tip boxu . Tip mění kvalitu nebo efektivitu výsledku; poznámka ne.
- Podmínka, která zabraňuje smazání, nákladům, expozici, zranění nebo neplatné práci, patří do varovného boxu . Jejím účelem je změnit chování před újmou.
- Formální definice, která stanovuje, co termín znamená, patří do definičního prvku nebo hlavního vysvětlení, nikoli do poznámky.
- Citace patří vedle tvrzení, které podporuje. Důkaz není odbočkou, když na něm tvrzení závisí.
- Propagace, výzva k registraci nebo doporučení produktu je výzva k akci, nikoli informace.
Použijte test žádné změny, když si klasifikací nejste jisti: „Musí čtenář po zjištění této skutečnosti změnit akci, očekávání, rozhodnutí nebo bezpečnostní reakci?“ Pokud ano, nejde o poznámku. Pokud ne, zeptejte se, zda fakt řeší skutečnou nejednoznačnost. Pokud ne, smažte jej nebo ponechte jako běžný text, místo abyste vytvářeli umělý důraz.
Kam ji umístit
Umístěte poznámku ihned za celý blok obsahu, který objasňuje. Cílem může být odstavec, položka seznamu, krok, tabulka, ukázka kódu nebo krátká sekvence, ale cíl musí dávat smysl ještě předtím, než se poznámka objeví. Poznámka pak poskytuje doplňkový kontext, aniž by cíl roztrhala.
Když se poznámka vztahuje na celou sekci, umístěte ji za úvodní odstavec, který definuje rozsah sekce. Tento rozsah pojmenujte v první větě poznámky. Když se vztahuje na postup, umístěte ji za úvodní odstavec a před první krok pouze tehdy, pokud se nemění žádná akce; jinak jde o předpoklad nebo varování. Poznámka o výstupu patří až po představení výstupu, ne o několik odstavců později.
Použijte nejvýše tři poznámky na stránku a jednu na sekci. Tři jsou strop. Pokud se kolem jedné pasáže shromáždí několik poznámek, hlavnímu textu pravděpodobně chybí vysvětlení nebo materiál zaslouží vlastní podsekci.
Poznámka nesmí stát:
- Mezi nadpisem a jeho úvodním odstavcem.
- Mezi tvrzením a důkazem, který jej podporuje.
- Mezi instrukcí a její požadovanou kontrolou úspěchu.
- Přímo vedle tipu, varování, CTA, propagačního banneru nebo jiné poznámky.
- Uvnitř buňky tabulky, odpovědi FAQ, citace, bloku kódu, panelu accordionu nebo jiného calloutu.
- V hero sekci pouze pro vytvoření vizuálního zájmu, kromě případů, kdy specifikace prvku vykresluje svůj požadovaný živý příklad.
- Na konci stránky, když se její cíl objevil mnohem dříve.
Pokud by sousedství vytvořilo hromadu boxů, přesuňte poznámku do prózy nebo restrukturalizujte sekci. Neřešte kolizi změnou poznámky na varovné barvy; prezentace nemůže napravit nejasný obsahový vztah.
Anatomie
Vykreslená poznámka má čtyři viditelné nebo strukturální oblasti:
- Typový štítek: Viditelné slovo „Poznámka“, které identifikuje blok bez spoléhání na barvu nebo ikonu.
- Volitelný název: Krátká, věcná fráze, která pojmenovává kontext, například „Časové pásmo“ nebo „Štítky rozhraní“.
- Tělo: Jedno soběstačné objasnění a, pokud je to užitečné, věta, která jej spojuje s blízkým obsahem.
- Sousední cíl: Celý blok nebo pojmenovaná sekvence, která je objasňována. Umístění nese tento vztah, i když nejde o autorovo textové pole.
Okraje, pozadí, ikony, mezery a typy písma patří do vykreslovacího systému. Autoři dodávají význam, nikoli barevné instrukce nebo dekorativní symboly.
Příklady designu
Podporované varianty testují obsah a responzivní chování. Nevytvářejí různé úrovně důležitosti.
Výchozí: Vykreslovací systém dodá „Poznámka“ a tělo obsahuje jedno objasnění. Používejte tuto formu nejčastěji.
Vlastní název: Věcný název identifikuje předmět. Nezvyšuje závažnost ani nenahrazuje sémantiku poznámky komponenty.
Maximum dvou odstavců: První odstavec uvádí kontext; druhý řeší hranici nebo neškodnou výjimku. Delší vysvětlení se stávají běžným obsahem.
Inline reference: Jedna inline hodnota kódu nebo popisný odkaz může objasnit cíl. Ani jedna by neměla proměnit poznámku v dokumentaci v dokumentaci.
Úzký viewport: Štítek, název a tělo zachovávají pořadí čtení, normálně se zalomí a zůstávají srozumitelné bez okraje nebo ikony.
Parametry
Obsahový model odděluje pevný sémantický typ, volitelné pojmenování, tělo a vztah k blízkému obsahu. „Zdroj“ říká, odkud autor nebo vykreslovací systém získává hodnotu.
| Název | Typ | Povinný | Min/max | Výchozí | Zdroj | |
|---|---|---|---|---|---|---|
type | Enum | Ano | Přesně note | note | Název direktivy nebo atribut shortcode | |
title | Prostý řetězec | Ne | 1–6 slov; maximálně 50 znaků | Poznámka | Atribut; výchozí hodnota vykreslovacího systému při vynechání | |
body | Omezený Markdown | Ano | 15–90 slov; 1–2 krátké odstavce | Žádný | Tělo direktivy nebo shortcode | |
inlineLink | URL plus kotva | Ne | 0–1 odkaz | Vynecháno | Tělo | |
inlineCode | Inline rozsah kódu | Ne | 0–2 krátké hodnoty | Vynecháno | Tělo | |
target | Vztah v dokumentu | Ano | Přesně jeden blízký blok nebo jedna pojmenovaná sekvence | Předchozí úplný blok obsahu | Umístění v pořadí dokumentu | |
label | Odvozený prostý řetězec | Ano | Jeden viditelný sémantický štítek | Poznámka | Vykreslovací systém z type |
Název je volitelný, protože „Poznámka“ je obvykle dostačující. První nadpis přenosné direktivy se může mapovat na title podle výchozích pravidel těla, ale pro tento prvek je preferována stručná forma atributu. Vše ostatní se mapuje na body. Současná implementace v Hugo přijímá poziční typ nebo pojmenovaný type plus volitelný pojmenovaný title; nikdy nemíchejte poziční a pojmenované parametry.
Syntaxe a příklady kódu
Tyto formy nesou stejný typ, název a tělo. Prezentace na platformě se může lišit, ale objasnění musí zůstat poznámkou.
Přenosná Markdown direktiva
:::note{title="Časové pásmo"}
Časová razítka hlášení používají UTC. Filtry a výpočty se nemění, když se liší místní časové pásmo diváka.
:::
Název direktivy poskytuje typ, atribut poskytuje volitelný název a uzavřený Markdown poskytuje tělo.
Hugo shortcode
{{< callout type="note" title="Časové pásmo" >}}Časová razítka hlášení používají UTC. Filtry a výpočty se nemění, když se liší místní časové pásmo diváka.{{< /callout >}}
Tento příklad používá pouze pojmenované parametry. Bez vlastního názvu je poziční forma callout note platná a vykreslovací systém dodá štítek „Poznámka“.
WordPress blok nebo shortcode
<!-- wp:amicited/note {"title":"Časové pásmo"} -->
<p>Časová razítka hlášení používají UTC. Filtry a výpočty se nemění, když se liší místní časové pásmo diváka.</p>
<!-- /wp:amicited/note -->
[note title="Časové pásmo"]Časová razítka hlášení používají UTC. Filtry a výpočty se nemění, když se liší místní časové pásmo diváka.[/note]
Registrovaný blok je preferovanou implementací pro WordPress. Shortcode je přijatelný tam, kde jej instalace explicitně podporuje; importní systémy nesmí zploštit poznámku na varování ani odvodit jiný typ z jejích barev.
Příklady
Dobrý: neškodná variace rozhraní
Toto je dobré, protože odpovídá na věrohodnou otázku ohledně rozhraní při zachování stejné akce a výsledku. Pojmenovává oba štítky, říká, kde se každý objevuje, a potvrzuje jejich ekvivalentní chování. Poznámka dává smysl i po extrakci z okolního postupu.
Špatný: varování maskované jako informace
Poznámka – Smazání pracovního prostoru: Smazání pracovního prostoru trvale odstraní jeho hlášení. Před pokračováním exportujte potřebné záznamy.
Toto je špatné, protože důsledek vyžaduje změnu chování před nevratnou akcí. Klidná formulace a neutrální štítek z něj nedělají doplňkový obsah. Musí to být varování umístěné před ovládacím prvkem smazání, s cílem, důsledkem a preventivní akcí uvedenými explicitně.
Další špatná poznámka říká: „Export musí obsahovat všechny požadované sloupce.“ To je akceptační kritérium. Uveďte požadované sloupce v instrukci nebo specifikační tabulce. Třetí říká: „Můžete ušetřit čas filtrováním exportu jako prvního.“ To je volitelná rada zlepšující výsledek, a tedy tip. Správná klasifikace je důležitější než vizuální rozmanitost.
Schéma značkování a přístupnost
Poznámkový box nemá vyhrazený typ ani vlastnost Schema.org. Zůstává viditelným obsahem v rámci obklopujícího Article, TechArticle, produktového nebo jiného pravdivého schématu na úrovni stránky. Nevytvářejte pro něj samostatný objekt JSON-LD. Když poznámka objasňuje krok, udržujte ji odděleně od HowToStep.text, pokud není objasnění nezbytné k provedení kroku; pokud je nezbytné, nešlo od počátku o volitelný obsah poznámky.
Statická poznámka nepotřebuje role="alert", ARIA živou oblast ani vynucené oznámení. Tyto mechanismy komunikují naléhavost nebo dynamickou změnu, zatímco poznámka je přítomna v normálním pořadí dokumentu a nese neurgentní kontext. Agresivní oznámení by zkreslilo její důležitost a zvýšilo hlučnost výstupu asistenčních technologií.
Vykreslete viditelný štítek jako text v Document Object Model, nikoli jako obrázek na pozadí, tooltip pouze s ikonou nebo dekoraci generovanou CSS. Pokud je použita role region, připojte její přístupný název k viditelnému štítku nebo vlastnímu názvu. Pořadí čtení je štítek, volitelný název, pak tělo. Barvy a ikony mohou typ posílit, ale nesmí být jediným rozlišením od tipů a varování.
Při 200% přiblížení textu a na úzkém viewportu se musí tělo zalomit bez horizontálního posouvání. Odkazy vyžadují popisný text kotvy a musí být přístupné z klávesnice. Inline kód musí zůstat čitelný při vysokém kontrastu. Podstatné informace nemohou existovat pouze v snímku anatomie nebo alternativním textu ikony.
Pravidla psaní
Cílte na 15–60 slov. Tvrdé maximum je 90 slov v nejvýše dvou krátkých odstavcích. Delší pasáž obvykle zaslouží integraci do hlavního vysvětlení; extrémně krátká poznámka je často štítek bez užitečného kontextu.
Napište jedno objasnění na box v klidném, věcném tónu. Uveďte předmět v první větě, pak vysvětlete neškodný rozdíl nebo hranici. Preferujte přesné formulace jako „Časová razítka používají UTC“ před konverzační výplní jako „Jen abyste věděli.“ Uveďte důvod před jakýmkoli interpretačním pravidlem: „Archivované projekty zůstávají viditelné v historických hlášeních, takže jejich součty se mohou stále objevovat v minulých časových rozsazích.“
Poznámka může obsahovat prostý důraz, až dvě krátké inline hodnoty kódu a nejvýše jeden popisný odkaz. Nikdy nesmí obsahovat:
- Povinný krok, předpoklad, validační pravidlo, kritérium úspěchu nebo instrukci k obnově.
- Závažné riziko, nevratný důsledek, bezpečnostní podmínku, právní instrukci nebo zveřejnění nákladů.
- Volitelnou radu, jejímž účelem je zlepšit rychlost, kvalitu, přesnost nebo pohodlí.
- Úplnou definici, důkaz potřebný k podpoře tvrzení nebo seznam zdrojů.
- Více než jedno nezávislé objasnění.
- Tabulku, blok kódu, formulář, tlačítko, CTA, reference, propagaci nebo vnořený prvek.
- Vtipy, alarmistický jazyk, dekorativní emodži nebo slova jako „kritické“ a „nebezpečí“.
Nenazývejte každou poznámku „Důležité.“ Důležitost není účelem prvku a slovo se falešně přibližuje závažnosti varování. Použijte „Poznámka“ nebo věcný název předmětu. Nikdy nepoužívejte poznámku k záchraně nejasného textu: nejprve opravte hlavní vysvětlení, pak ponechte poznámku pouze v případě, že skutečně zbývá doplňková nejednoznačnost.
Typy příspěvků, které jej používají
Frontmatter postTypes uvádí formáty, kde se doplňkový kontext opakuje. Zařazení zůstává volitelné; tabulka definuje povolenou úlohu a pozici, nikoli povinné místo.
| Typ příspěvku | Typické použití | Pozice | Do poznámky nepatří |
|---|---|---|---|
| Návod | Neškodné rozdíly v štítcích rozhraní, verzích, časových pásmech nebo stavech zobrazení | Za úplným krokem nebo výstupem, který objasňuje | Předpoklady, povinné akce, kontroly úspěchu nebo obnova po selhání |
| Ultimátní průvodce | Hranice rozsahu, terminologická synonyma nebo kontextové výjimky, které nemění argument | Za odstavcem, který stanovuje obecné pravidlo | Důkazy, definice potřebné k porozumění nebo zásadní výjimky |
| Stránka Co je X | Názvová variace nebo hranice, která zabraňuje předvídatelnému nedorozumění | Za základní definicí a prvním vysvětlujícím odstavcem | Kanonická definice nebo kvalifikace, která mění její přesnost |
| Produktová stránka | Nezávadný kontext dostupnosti, štítku, jednotky nebo zobrazení | Vedle příslušné věcné sekce a mimo ovládací prvky nákupu | Cenové podmínky, opakované poplatky, požadavky na kompatibilitu nebo nákupní rizika |
Jiné typy příspěvků mohou použít poznámku, když projde stejným testem žádné změny. Uvedení v seznamu neospravedlňuje přidání kvůli vizuálnímu rytmu a vynechání nemění varování v poznámku.
Kontrolní seznam QA
Před publikací ověřte každou položku:
- Blok objasňuje jednu blízkou pasáž a nemění akci, výsledek, priority, interpretaci ani riziko.
- Kontext odpovídá na věrohodnou čtenářskou otázku, místo aby opakoval cíl.
- Povinné informace zůstávají v hlavním obsahu.
- Poznámka je umístěna ihned za svým úplným cílem nebo za odstavcem rozsahu u pojmenované sekvence.
- Neodděluje nadpis od jeho úvodu, tvrzení od důkazu ani instrukci od kontroly úspěchu.
- Žádné varování, tip, CTA, banner ani druhá poznámka nestojí přímo vedle ní.
- Stránka nemá více než tři poznámky a sekce nemá více než jednu.
- Tělo cílí na 15–60 slov, zůstává pod 90 slovy a obsahuje jedno objasnění.
- Viditelný textový štítek funguje bez barvy, okraje, ikony nebo obrázku.
- Kopie zůstává smysluplná při extrakci se svým štítkem, ale bez okolního stylování.
- Box nepoužívá roli alert ani živou oblast, když je přítomen při načtení stránky.
- Mapování v Markdown, Hugo a WordPress zachovává typ, název, tělo a umístění.
- Parametry Hugo jsou zcela poziční nebo zcela pojmenované; nikdy nejsou smíšené.
- Uvnitř se neobjevuje žádná nepodporovaná vnořená komponenta, blok kódu, tabulka, formulář ani propagační akce.
- Zástupné symboly snímků obrazovky požadují budoucí zachycení bez vykreslování neexistujících aktiv.
FAQ
Jaký je rozdíl mezi poznámkou, tipem a varováním? Poznámka objasňuje, aniž by cokoli měnila. Tip nabízí volitelné zlepšení. Varování mění chování, aby se předešlo újmě, ztrátě, nákladům, expozici nebo neplatné práci. Klasifikujte podle důsledku přeskočení bloku, nikoli podle jeho barvy.
Může poznámkový box obsahovat povinné informace? Ne. Povinné informace patří do hlavního obsahu, kde je každý čtenář potká v pořadí. Poznámka může vysvětlit neškodnou variaci, ale její přeskočení nesmí učinit úkol nebo interpretaci nesprávnými.
Kolik poznámkových boxů by měla stránka obsahovat? Použijte nejvýše tři na stránku a jednu na sekci. Většina stránek jich potřebuje méně. Opakované poznámky naznačují, že hlavní vysvětlení potřebuje restrukturalizaci.
Měl by poznámkový box používat varovné barvy nebo roli alert? Ne. Varovná prezentace signalizuje závažný důsledek a role="alert" signalizuje naléhavé dynamické informace. Použití kteréhokoli z nich na rutinní kontext učí lidi ignorovat skutečný signál a zavádí uživatele asistenčních technologií.
Může poznámkový box obsahovat odkazy nebo kód? Může obsahovat jeden popisný odkaz nebo až dvě krátké inline hodnoty kódu, pokud přímo objasňují cíl. Pro bloky kódu, tabulky, formuláře nebo vícestupňovou dokumentaci použijte hlavní obsah.
Poznámka si zaslouží své ohraničení tím, že řeší skutečnou nejednoznačnost, zatímco ponechává čtenářův kurz beze změny. Udržujte ji klidnou, sousedící, soběstačnou a vizuálně odlišnou od rad a rizik.
Další návody v této sekci
Připraveni uvést to do praxe?
Bezplatná kontrola · 7denní zkušební verze · bez platební karty