Anotované snímky obrazovky: Pravidla a příklady

Anotovaný snímek obrazovky zobrazuje reálný stav rozhraní a identifikuje přesné oblasti, kterých si čtenář musí všimnout. Obrázek nese číslované značky; stránka nese odpovídající textovou legendu. Toto oddělení je podstatou prvku: ani neoznačený obrázek produktu, ani popisky vepsané do pixelů nesplňují tento závazek.

Audit aktuálnosti obsahu, filtrovaný na jednu sledovanou URL.

1. Sledovaná URL: Potvrzuje, že se kontrola vztahuje na zamýšlenou stránku, nikoli na celou doménu.
2. Filtr stavu: Zužuje tabulku na stránky vyžadující redakční rozhodnutí.
3. Datum výsledku: Ukazuje, kdy byl podkladový záznam auditu naposledy obnoven.

Snímek zatím není pořízen, takže komentář je specifikací pro produkční pořízení, nikoli nefunkčním odkazem na obrázek. Jakmile bude aktivum existovat, obrázek, popisek a číslovaná legenda se vykreslí jako jeden sémantický figure.

Proč na tomto prvku záleží

Čtenáři používají obrázek produktu k zodpovězení prostorové otázky: „Který ovládací prvek, hodnota nebo stav tímto pokynem myslí?“ Hustá rozhraní obsahují navigaci, filtry, popisky, data, odznaky a akce, které mohou všechny vypadat stejně důležitě. Neanotovaný snímek obrazovky nutí čtenáře zpětně rekonstruovat autorovu pozornost. Číslované značky redukují toto hledání na přímé přiřazení mezi viditelným místem a stručným vysvětlením.

Prvek také nahrazuje křehké souřadnicové vyjadřování. „Použijte ovládání vpravo“ přestává platit, když se panel nástrojů zalomí; „zvolte filtr stavu označený 2“ zůstává použitelné, dokud je snímek aktuální.

Strojová extrahovatelnost znamená, že software dokáže izolovat a znovu použít užitečný význam obsahové jednotky. Počítačové vidění může rozpoznat text v rozhraní, ale nedokáže spolehlivě určit, proč je jeden z dvaceti ovládacích prvků důležitý pro tento postup. Viditelná, uspořádaná legenda vytváří explicitní dvojice značka–vysvětlení, které vyhledávací systémy, překladové nástroje, software pro přístupnost a obsahové audity dokáží zpracovat jako text. Obrázek dodává prostorový důkaz; legenda dodává vyhledatelný význam. To následuje širší pravidla pro psaní prvků : obsah zůstává typovaný a přenosný i když se změní jeho renderer.

Nikdy nevkládejte legendu do pixelů. Text v pixelech nelze překládat, vyhledávat, vybírat ani opravovat bez úpravy grafiky. Je také neviditelný pro čtečku obrazovky, software, který oznamuje digitální obsah lidem, kteří nevidí na obrazovku. Do obrázku patří pouze čísla značek.

Kdy jej použít

Použijte anotovaný snímek obrazovky, když čtenář musí identifikovat konkrétní oblast v reálném rozhraní a samotná slova ponechávají více než jeden pravděpodobný cíl. Je vyžadován, když mají dva ovládací prvky podobné názvy, důležitý stav je nenápadný, výsledek musí být interpretován v kontextu okolí nebo vizuální konfiguraci nelze věrně popsat prózou. Je také užitečný, když stránka produktu uvádí konkrétní tvrzení o rozhraní, které obrázek může dokázat.

Snímek obrazovky je volitelný, když instrukce již pojmenovává jedinečný, viditelný ovládací prvek a interakce je konvenční. „Vyberte Uložit změny“ obvykle nepotřebuje obrázek, pokud stránka obsahuje jediné takové tlačítko. Stává se povinným, pokud stejná obrazovka obsahuje Uložit koncept, Uložit zobrazení a Uložit změny a výběr špatného změní výsledek.

Snímek obrazovky škodí, když přidává váhu bez odstranění nejistoty. Nepřidávejte jej pro dekoraci nebo pro opakování textu, který je přehlednější v tabulce. Čtrnáct snímků obrazovky ve čtrnáctikrokovém návodu vytváří čtrnáct přerušení, problémy s přiblížením na mobilu a zastaralá aktiva. Zachyťte nejednoznačné kroky; přesná slovesa ať nesou rutinní.

Mezi téměř správné, ale chybné případy patří:

• Celý dashboard použitý k vysvětlení jedné ikony: ořízněte na nejmenší oblast, která zachovává orientaci. Značka ztracená v širokém rozhraní nesnižuje úsilí při hledání.
• Snímek obrazovky použitý jako číselný důkaz: zopakujte rozhodující hodnotu v textu nebo tabulce. Pixely nemohou být jedinou přístupnou kopií tvrzení.
• Snímek obrazovky menu před jeho otevřením: zachyťte stav, který čtenář potřebuje zkontrolovat. Zavřený stav dokazuje, že produkt existuje, ale ne jakou volbu zvolit.
• Snímek obrazovky obsahující záznamy zákazníků: nahraďte je stabilními demo daty před pořízením. Rozmazání lze snadno přehlédnout.
• Diagram maskovaný jako snímek obrazovky: použijte diagram pro abstraktní vztahy. Realismus rozhraní pomáhá pouze tehdy, když na rozhraní záleží.

Kam jej umístit

Umístěte figure za odstavec nebo krok, který čtenáře poprvé vyzývá k prohlédnutí rozhraní. V postupu jej vložte za akci a před stav úspěchu nebo řešení problémů, aby čtenář našel ovládání před ověřením výsledku.

Udržujte obrázek, popisek a legendu pohromadě. Nadpis může skupinu uvést, ale jiný odstavec, zvýraznění, reklama nebo konec stránky nesmí oddělit snímek od jeho číslovaných vysvětlení. Popisek identifikuje celou obrazovku a kontext; nenese instrukci, která patří do prózy, ani nenahrazuje legendu.

Neumisťujte dva celošířkové snímky obrazovky vedle sebe. Vložte vysvětlení, které je odlišuje, nebo vytvořte jeden popsaný srovnávací snímek, pokud je třeba oba stavy hodnotit společně. Udržujte snímky obrazovky mimo nesouvisející výzvy k akci, husté tabulky a galerie.

Prvek opakujte pouze tehdy, když každý výskyt odpovídá na jinou prostorovou otázku. Preferujte jeden zaměřený figure; jinak dejte samostatným ořezům odlišné názvy souborů a účely.

Anatomie

Snímek anatomie demonstruje viditelné a textové části jednoho kompletního prvku. Vysvětlující popisky zůstávají ve vykreslené legendě, nikoli jako součást zdrojového obrázku.

Vykreslená legenda

1. Kontextová hranice: Zahrnuje dostatek okolního rozhraní k identifikaci stránky a umístění, ale vylučuje nesouvisející navigaci a prázdný prostor.
2. Číslovaná značka: Používá vysoce kontrastní kruh a celé číslo, nikoli pouze barvu, k propojení oblasti s položkou legendy.
3. Cílová oblast: Označuje nejmenší kompletní ovládací prvek, hodnotu nebo stav potřebný pro vysvětlení; nikdy nepřekrývá popisek cíle.
4. Orientační bod: Zachovává jeden stabilní nadpis, záložku nebo popisek panelu, aby čtenář našel stejnou oblast v živém produktu.
5. Popisek: Pojmenovává obrazovku, stav a scénář viditelným textem pod obrázkem.
6. Legenda: Používá číslovaný seznam, jehož čísla přesně odpovídají značkám a jehož položky vysvětlují význam, nikoli pouze vzhled.

Čísla značek začínají na 1 a následují pořadí legendy. Použijte dvě až šest na obrázek; jedna stačí pro obtížný cíl, zatímco více než šest obvykle signalizuje příliš široký záběr.

Příklady designu

Podporované varianty mění ořez a viewport, nikoli pravidla anotace. Každá varianta používá demo data, číslované značky na obrázku, externí textovou legendu a viditelný popisek.

Zaměřený ovládací prvek: Preferováno pro jedinou nejednoznačnou akci. Zachovejte jeden orientační popisek, aby ořez nebyl anonymním obdélníkem.

Stav pracovního postupu: Použijte, když záleží na vztahu mezi vstupem, stavem a výsledkem. Udržujte nesouvisející globální navigaci mimo záběr.

URL v kontextu: Jediná standardní varianta, která zahrnuje chrom prohlížeče, tedy záložky, adresní řádek a ovládání prohlížeče. Zahrňte pouze adresní řádek a nezbytný indikátor oprávnění nebo zabezpečení.

Mobilní stav: Zachyťte skutečné úzké rozvržení, když se interakce mění na mobilní šířce. Nezmenšujte širokou desktopovou obrazovku a nenazývejte ji mobilním příkladem.

Parametry

Parametry tvoří přenosný obsahový kontrakt. Vizuální hodnoty jako barva značek, tloušťka okraje a typografie popisků patří rendereru a nejsou autorskými poli.

screenId identifikuje plochu produktu nezávisle na názvu souboru, takže vydání může najít různé ořezy content-freshness-audit. Soubor alt.yaml zůstává jednoduchý: jeden název souboru následovaný jedním zalomeným řetězcem alternativního textu.

Syntaxe a příklady kódu

Každý zápis zachovává stejná metadata, popisek, značky a pořadí čtení obrázek–popisek–legenda.

Přenosná Markdown direktiva

:::annotated-screenshot{src="/images/seo-playbook/elements/annotated-screenshot/workflow-state.webp" viewport=1440 density="2x" screenId="content-freshness-audit" captureDate="2026-08-27"}
Audit aktuálnosti obsahu filtrovaný na jednu sledovanou URL.

1. **Sledovaná URL:** Potvrzuje, kterou stránku audit hodnotí.
2. **Filtr stavu:** Omezuje výsledky na stránky čekající na kontrolu.
3. **Datum výsledku:** Ukazuje, kdy byla data auditu obnovena.
:::

Adaptér řeší alt z alt.yaml ve složce. Chybějící klíč názvu souboru je selhání publikace, nikoli povolení kopírovat popisek.

Mapování Hugo shortcode

{{< annotated-screenshot src="/images/seo-playbook/elements/annotated-screenshot/workflow-state.webp" viewport="1440" density="2x" screenId="content-freshness-audit" captureDate="2026-08-27" >}}
Audit aktuálnosti obsahu filtrovaný na jednu sledovanou URL.

1. **Sledovaná URL:** Potvrzuje, kterou stránku audit hodnotí.
2. **Filtr stavu:** Omezuje výsledky na stránky čekající na kontrolu.
3. **Datum výsledku:** Ukazuje, kdy byla data auditu obnovena.
{{< /annotated-screenshot >}}

Toto je adaptérová smlouva, nikoli registrovaný shortcode. Dokud neexistuje schválený renderer a aktivum, použijte zavedenou sémantickou-figure pipeline nebo ponechte předepsaný komentář k pořízení. Nenahrazujte renderer, který vypouští legendu nebo pole aktuálnosti.

WordPress blok nebo shortcode

[annotated_screenshot src="workflow-state.webp" viewport="1440" density="2x" screen_id="content-freshness-audit" capture_date="2026-08-27"]
[caption]Audit aktuálnosti obsahu filtrovaný na jednu sledovanou URL.[/caption]
[marker number="1" label="Sledovaná URL"]Potvrzuje, kterou stránku audit hodnotí.[/marker]
[marker number="2" label="Filtr stavu"]Omezuje výsledky na stránky čekající na kontrolu.[/marker]
[marker number="3" label="Datum výsledku"]Ukazuje, kdy byla data auditu obnovena.[/marker]
[/annotated_screenshot]

WordPress blok může vystavit pole jako ovládací prvky, ale musí ukládat popisy značek jako text.

Příklady

Dobrý: jeden nejednoznačný stav, tři užitečné značky

Kontrola aktuálnosti obsahu pro demo.example/pricing/.

1. Sledovaná URL: Ověřuje, že výsledek patří stránce s cenami vybrané v instrukci.
2. Vyžaduje kontrolu: Identifikuje přesný filtr, který odstraňuje aktuální stránky z pracovní fronty.
3. Naposledy obnoveno: Zabraňuje editorovi považovat starý výsledek auditu za aktuální diagnózu.

Funguje to, protože každá značka odpovídá na rozhodnutí, ořez zachovává orientaci a legenda vysvětluje důsledky neviditelné v pixelech. Demo doména je zřetelně necustomer data.

Špatný: popsaný plakát produktu

Špatná verze vysvětluje celý dashboard najednou. Osm šipek se kříží, popisky zakrývají ovládání a vložená propagace neposkytuje žádnou akci. Bookmarky prohlížeče vytvářejí riziko pro soukromí, jména zákazníků způsobují nejistotu schvalování, žádný identifikátor obrazovky nepodporuje aktualizace a škálování na mobilu činí cíle nečitelné.

Opravte to výběrem jednoho úkolu, použitím schválených demo dat, oříznutím na jeho panel a ponecháním pouze nezbytných značek. Přesuňte vysvětlení do textové legendy, přidejte kontextový alternativní text a zaznamenejte identifikátor obrazovky a datum.

Značkování schématu a přístupnost

Anotovaný snímek obrazovky nemá speciální typ Schema.org. Může vyplnit vlastnost image Article nebo ImageObject s přesným contentUrl, popiskem, šířkou a výškou. Nevymýšlejte vlastnosti značek; udržujte legendu viditelnou.

Použijte nativní sémantiku figure: jeden <figure> obsahující <img>, <figcaption> a číslovanou legendu. Popisek pojmenovává celou obrazovku a stav. Atribut alt obrázku popisuje, co obrazovka ukazuje v tomto kontextu; neměl by začínat „snímek obrazovky“, protože prvek obrázku se již sám oznamuje. Legenda poskytuje podrobná číslovaná vysvětlení, takže opakování všech šesti položek v alt textu vytváří dlouhé duplicitní oznámení.

Cíl je 80–180 znaků, s maximem 250. Pojmenujte oblast produktu, stav a označený účel: „Audit aktuálnosti obsahu filtrovaný na jednu sledovanou URL, se značkami na filtru stavu a datu posledního obnovení.“ Nepřepisujte rozhraní, necpěte klíčová slova ani nepoužívejte název souboru. Tento informativní obrázek obvykle potřebuje neprázdný alt text.

Čísla značek musí být čitelná bez barev. Použijte vysoký kontrast vůči světlým i tmavým oblastem rozhraní, udržujte jejich vizuální velikost konzistentní a nezakrývejte popisky ani hodnoty. Legenda používá číslovaný seznam v běžném pořadí dokumentu; vyhněte se rolím ARIA (Accessible Rich Internet Applications), které mění statický obsah na upozornění nebo interaktivní widget. Vztah aria-describedby je volitelný pouze tehdy, když testování ukáže, že zlepšuje navigaci, aniž by způsobilo dvojité oznámení viditelné legendy.

Při úzkých šířkách musí responzivní design zachovat význam. Škálujte široký obrázek pouze tehdy, pokud značky a cíle zůstávají čitelné; jinak poskytněte zaměřený ořez nebo skutečný mobilní snímek. Nikdy nezpůsobujte horizontální posouvání na úrovni stránky nebo nevyžadujte přiblížení. Popisek a legenda se zalamují níže.

Pravidla pro obsah a pořizování

Konzistence činí snímky obrazovky srovnatelnými a nahraditelnými. Pořizujte desktopové snímky produktu při pevném viewportu 1440 CSS pixelů a 2x hustotě pixelů, často nazývané Retina hustota, což zaznamenává dva zařízení pixely na jeden CSS pixel. Pořizujte skutečné mobilní stavy při 390 CSS pixelech a 2x hustotě. Používejte konzistentně schválený motiv produktu v rámci jednoho návodu; nestřídejte světlý a tmavý režim, pokud rozdíl motivů není předmětem.

Používejte pouze demo data: žádná skutečná jména, e-mailové adresy, domény, fakturační údaje, tokeny, promptové vstupy ani výsledky. Před pořízením zkontrolujte postranní panely, nedávné položky, automatické vyplňování, oznámení a avatary.

Vylučte chrom prohlížeče, pokud URL, oprávnění nebo ovládání prohlížeče není cílem. Skryjte záložky, bookmarky, rozšíření, stahování, profily a oznámení. Pořizujte po načtení; zavřete irelevantní tooltipy a kurzor zobrazte pouze v nezbytném případě.

Ukládejte zdrojové snímky pod cdn-assets/seo-playbook/elements/annotated-screenshot/. Používejte názvy malými písmeny s pomlčkami (kebab case) podle obrazovky a stavu, například freshness-audit-needs-review.webp; nikdy nepoužívejte final, new, v2, jméno osoby ani datum jako název souboru. Stabilní název umožňuje výměnu aktiva bez přepisování každé stránky. Používejte WebP pro běžné doručení, nejlépe bezztrátové nastavení, pokud drobný text rozhraní musí zůstat ostrý. Používejte PNG pouze tehdy, když produkční pipeline prokáže, že WebP poškozuje text nebo průhlednost. Nepoužívejte JPEG pro snímky UI s jemným textem a ostrými hranami.

Vykreslujte maximálně na 1600 CSS pixelů na šířku; 1440 pixelový 2x zdroj může být 2880 fyzických pixelů. Zachovejte poměr stran a přirozené rozměry. Optimalizace podporuje SEO obrázků , ale komprese nesmí rozmazat text nebo značky.

Každá složka s aktivy obsahuje alt.yaml s jedním záznamem na název souboru:

freshness-audit-needs-review.webp: >-
  AmICited audit aktuálnosti obsahu filtrovaný na jednu sledovanou URL, s číslovanými značkami na stavu kontroly a datu posledního obnovení.

Klíč přesně odpovídá názvu souboru; hodnota je alternativní text, nikoli popisek nebo legenda. Placeholdery, fiktivní dashboardy a neexistující reference na obrázky jsou zakázány. Čekající snímky používají pouze komentář SCREENSHOT a screenshotsPending = true.

Politika aktuálnosti a opětovného pořízení

Snímky obrazovky tiše zastarávají, když se zobrazený ovládací prvek přemístí nebo změní název. Považujte každý snímek za pohled na registrovanou obrazovku: screenId propojuje změny produktu s aktivy, zatímco datum pořízení identifikuje zaznamenaný stav.

Změna UI spouští opětovné pořízení, když přemístí nebo přejmenuje označený cíl, změní stav, který legenda vysvětluje, změní navigační cestu potřebnou k jeho dosažení, odstraní zachovaný orientační bod nebo způsobí, že starý obrázek pravděpodobně nasměruje čtenáře na špatný ovládací prvek. Znovu pořiďte kompletní sadu figure pro danou obrazovku, včetně zaměřených a mobilních variant. Změna barevného tokenu, úprava mezer nebo nesouvisející přidání postranního panelu nevyžaduje automatickou výměnu, pokud snímek nyní viditelně nekoliduje s živým zážitkem nebo standardem přístupnosti.

Když se obrazovka změní, vyhledejte její screenId, poté její složku a název souboru pro zachycení starších použití. Nahraďte stabilní soubory, zkontrolujte alt.yaml a prohlédněte každou ovlivněnou legendu. Nepřejmenovávejte náhradní soubory a nenechávejte starší reference bez připojení.

Vlastník obrazovky produktu signalizuje změny; vlastník obsahu přijímá náhrady. Znovu pořiďte se stejnou demo sadou, viewportem, hustotou a motivem. Zkontrolujte snímky obrazovky při každé věcné obnově stránky.

Typy příspěvků, které jej používají

postTypes v front matter je registrované propojení. Každý typ používá stejný kontrakt prvku, ale uplatňuje jinou úroveň požadavků.

Případové studie vyžadují dodatečnou hranici: buď získejte výslovné povolení zobrazovat skutečné informace zákazníků, nebo přestavějte rozhraní s jasně uvedenými demo daty a považujte je za ilustraci pracovního postupu, nikoli za důkaz výsledku. Redigování není náhradou za souhlas nebo kontrolní fixaci.

Kontrolní seznam QA

Recenzent kontroluje komunikační a údržbové riziko před vizuální úpravou.

• Účel: Figure řeší jednu prostorovou nejednoznačnost nebo dokazuje jedno viditelné tvrzení o rozhraní.
• Nutnost: Rutinní kroky zůstávají textem; stránka ve výchozím nastavení nepřiřazuje každému kroku snímek obrazovky.
• Reálný stav: Snímek ukazuje přesně to otevřené menu, vybraný filtr, výsledek nebo chybu, o kterých se v textu mluví.
• Demo data: Nejsou viditelná žádná data zákazníků, zaměstnanců, účtů, prohlížečů, tokenů, promptů ani fakturační údaje.
• Konzistence pořízení: Viewport, 2x hustota, motiv, stav rozhraní a pravidlo chromu prohlížeče odpovídají standardu.
• Zaměřený ořez: Zůstává dostatek kontextu pro orientaci, ale nesouvisející oblasti rozhraní nesoutěží s cílem.
• Značky: Je jedna až šest souvislých čísel, každé s vysokým kontrastem, čitelné a mimo popisky a hodnoty.
• Externí legenda: Každá značka má jednu odpovídající položku v číslovaném seznamu v textu stránky; žádný text legendy není vložen do pixelů.
• Alternativní text: Složka alt.yaml obsahuje přesný klíč názvu souboru a kontextový popis v cílovém rozsahu délky.
• Chování na mobilu: Cíl a značky zůstávají čitelné bez horizontálního posouvání stránky nebo nutného přiblížení; jinak existuje zaměřený ořez.
• Souborová smlouva: Cesta, název v kebab case malými písmeny, formát, rozměry a přirozená velikost odpovídají standardu doručení.
• Aktuálnost: screenId a datum pořízení jsou zaznamenány, živé UI stále odpovídá a všechny reference lze najít textovým vyhledáváním.
• Přenosná parita: Markdown, Hugo a WordPress reprezentace zachovávají stejné aktivum, popisek, pořadí značek a znění legendy.
• Žádné nefunkční aktivum: Skutečná cesta k obrázku se objeví až poté, co soubor existuje; čekající snímky zůstávají komentáři a zachovávají screenshotsPending = true.

FAQ

Akademická šablona vykresluje pět recenzovaných otázek uložených v [[faq]] front matter této stránky. Pokrývají frekvenci snímků obrazovky, externí legendy, délku alternativního textu, spouštěče opětovného pořízení a výjimku pro chrom prohlížeče.