Anotované snímky obrazovky: pravidlá a príklady

Anotovaná snímka obrazovky zobrazuje reálny stav rozhrania a identifikuje presné oblasti, ktoré si čitateľ musí všimnúť. Obrázok nesie očíslované značky; stránka nesie zodpovedajúcu textovú legendu. Toto oddelenie je podstatou prvku: ani neoznačený obrázok produktu, ani popisky vložené priamo do pixelov nespĺňajú túto požiadavku.

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

1. Sledovaná URL: Potvrdzuje, že sa kontrola vzťahuje na konkrétnu stránku, nie na celú doménu.
2. Filter stavu: Zužuje tabuľku na stránky, ktoré vyžadujú redakčné rozhodnutie.
3. Dátum výsledku: Zobrazuje, kedy bol podkladový záznam auditu naposledy aktualizovaný.

Zachytenie ešte neexistuje, takže komentár je špecifikáciou produkčného snímania, nie nefunkčným odkazom na obrázok. Keď bude prostriedok k dispozícii, obrázok, popis a očíslovaná legenda sa vykreslia ako jeden sémantický obrázok s popisom.

Prečo na tomto prvku záleží

Čitatelia používajú obrázok produktu na zodpovedanie priestorovej otázky: „Ktorý ovládací prvok, hodnotu alebo stav myslí tento pokyn?“ Husté rozhrania obsahujú navigáciu, filtre, popisky, dáta, odznaky a akcie, ktoré môžu všetky vyzerať rovnako dôležito. Neanotovaná snímka obrazovky žiada čitateľa, aby spätne odvodil, čomu autor venoval pozornosť. Očíslované značky redukujú toto hľadanie na priame priradenie medzi viditeľným miestom a krátkym vysvetlením.

Prvok tiež nahrádza krehký súradnicový jazyk. „Použite ovládací prvok vpravo“ prestáva platiť, keď sa panel nástrojov zalamuje; „vyberte filter stavu označený číslom 2“ zostáva použiteľný, pokiaľ je snímka aktuálna.

Strojová extrahovateľnosť znamená, že softvér dokáže izolovať a znovu použiť užitočný význam obsahovej jednotky. Počítačové videnie dokáže rozpoznať text v rozhraní, ale nedokáže spoľahlivo určiť, prečo je jeden z dvadsiatich ovládacích prvkov dôležitý pre tento postup. Viditeľná, usporiadaná legenda vytvára explicitné dvojice značka–vysvetlenie, ktoré môžu vyhľadávacie systémy, prekladové nástroje, softvér na prístupnosť a obsahové audity spracovať ako text. Obrázok poskytuje priestorový dôkaz; legenda poskytuje vyhľadávateľný význam. Toto nasleduje širšie pravidlá písania prvkov : obsah zostáva typovaný a prenositeľný, aj keď sa jeho vykresľovanie zmení.

Nikdy nevkladajte legendu priamo do pixelov. Pixelový text nemožno prekladať, vyhľadávať, vyberať ani opravovať bez úpravy grafiky. Je tiež neviditeľný pre čítačku obrazovky, softvér, ktorý oznamuje digitálny obsah ľuďom, ktorí nevidia obrazovku. Do obrázka patria len čísla značiek.

Kedy to použiť

Použite anotovanú snímku obrazovky, keď čitateľ musí identifikovať konkrétnu oblasť v reálnom rozhraní a samotné slová zanechávajú viac než jeden pravdepodobný cieľ. Je potrebná, keď majú dva ovládacie prvky podobné názvy, dôležitý stav je jemne odlíšený, výsledok treba interpretovať v jeho kontexte, alebo vizuálnu konfiguráciu nemožno verne opísať prózou. Je užitočná aj vtedy, keď stránka produktu uvádza konkrétne tvrdenie o rozhraní, ktoré obrázok môže dokázať.

Snímka obrazovky je voliteľná, keď inštrukcia už pomenúva jedinečný, viditeľný ovládací prvok a interakcia je bežná. „Vyberte Uložiť zmeny“ zvyčajne nepotrebuje obrázok, keď stránka obsahuje iba jedno takéto tlačidlo. Stáva sa povinnou, ak tá istá obrazovka obsahuje Uložiť koncept, Uložiť zobrazenie a Uložiť zmeny a výber nesprávneho mení výsledok.

Snímka obrazovky škodí, keď pridáva objem bez odstránenia neistoty. Nepridávajte ju na dekoráciu alebo na opakovanie textu, ktorý je jasnejší v tabuľke. Štrnásť snímok obrazovky v štrnásťkrokovom návode vytvára štrnásť prerušení, problémy s približovaním na mobile a zastarané prostriedky. Zachyťte nejednoznačné kroky; presné slovesá nech nesú rutinné.

Takmer správne príklady zahŕňajú:

• Celý dashboard použitý na vysvetlenie jednej ikony: orežte na najmenšiu oblasť, ktorá zachováva orientáciu. Značka stratená v širokom rozhraní neznižuje úsilie pri hľadaní.
• Snímka obrazovky použitá ako číselný dôkaz: zopakujte rozhodujúcu hodnotu v texte alebo tabuľke. Pixely nemôžu byť jedinou prístupnou kópiou tvrdenia.
• Snímka obrazovky ponuky pred jej otvorením: zachyťte stav, ktorý čitateľ potrebuje preskúmať. Zatvorený stav dokazuje, že produkt existuje, ale nie ktorú voľbu zvoliť.
• Snímka obrazovky obsahujúca záznamy zákazníkov: nahraďte ich stabilnými demo údajmi pred snímaním. Rozmazanie sa ľahko prehliadne.
• Diagram maskovaný ako snímka obrazovky: použite diagram na abstraktné vzťahy. Realizmus rozhrania pomáha len vtedy, keď na rozhraní záleží.

Kam ju umiestniť

Umiestnite obrázok s popisom za odsek alebo krok, ktorý prvýkrát žiada čitateľa, aby prezrel rozhranie. V postupe ho umiestnite za akciu a pred úspešný stav alebo riešenie problémov, aby čitateľ našiel ovládací prvok pred overením výsledku.

Udržujte obrázok, popis a legendu pohromade. Nadpis môže uvádzať skupinu, ale ďalší odsek, zvýraznenie, reklama alebo zalomenie strany nesmie oddeliť snímku od jej očíslovaných vysvetlení. Popis identifikuje celú obrazovku a kontext; nenesie inštrukciu, ktorá patrí do prózy, ani nenahrádza legendu.

Neumiestňujte dve snímky v plnej šírke vedľa seba. Vložte vysvetlenie, ktoré ich odlišuje, alebo vytvorte jedno označené porovnanie, keď treba oba stavy vyhodnotiť spolu. Udržujte snímky ďalej od nesúvisiacich výziev na akciu, hustých tabuliek a galérií.

Opakujte prvok len vtedy, keď každý výskyt odpovedá na inú priestorovú otázku. Uprednostnite jeden zameraný obrázok s popisom; inak dajte jednotlivým orezom odlišné názvy súborov a účely.

Anatómia

Anatomická snímka demonštruje viditeľné a textové časti jedného kompletného prvku. Vysvetľujúce popisky zostávajú vo vykreslenej legende, nie sú súčasťou zdrojového obrázka.

Vykreslená legenda

1. Kontextová hranica: Zahŕňa dostatok okolitého rozhrania na identifikáciu stránky a umiestnenia, ale vylučuje nesúvisiacu navigáciu a prázdny priestor.
2. Očíslovaná značka: Používa vysoko kontrastný kruh a celé číslo, nie iba farbu, na prepojenie oblasti s položkou legendy.
3. Cieľová oblasť: Označuje najmenší kompletný ovládací prvok, hodnotu alebo stav potrebný na vysvetlenie; nikdy nezakrýva popis cieľa.
4. Orientačný bod: Zachováva jeden stabilný nadpis, kartu alebo popis panela, aby čitateľ našiel rovnakú oblasť v živom produkte.
5. Popis: Pomenúva obrazovku, stav a scenár viditeľným textom pod obrázkom.
6. Legenda: Používa zoradený zoznam, ktorého čísla sa presne zhodujú so značkami a ktorého položky vysvetľujú význam, nielen vzhľad.

Čísla značiek začínajú číslom 1 a nasledujú poradie legendy. Použite dve až šesť na obrázok; jedna značka vyhovuje pri náročnom cieli, zatiaľ čo viac ako šesť zvyčajne signalizuje príliš široké zachytenie.

Príklady dizajnov

Podporované varianty menia orez a viewport, nie politiku anotácií. Každý variant používa demo dáta, očíslované značky na obrázku, externú textovú legendu a viditeľný popis.

Zameraný ovládací prvok: Uprednostnite ho pre jednu nejednoznačnú akciu. Zachovajte jeden orientačný popis, aby sa orez nestal anonymným obdĺžnikom.

Stav pracovného postupu: Použite, keď vzťah medzi vstupom, stavom a výsledkom je dôležitý. Udržujte nesúvisiacu globálnu navigáciu mimo záberu.

URL v kontexte: Jediný štandardný variant, ktorý zahŕňa prvky prehliadača, teda vlastné karty prehliadača, adresný riadok a ovládacie prvky. Zahrňte len adresný riadok a potrebný indikátor povolenia alebo bezpečnosti.

Mobilný stav: Zachyťte skutočné úzke rozloženie, keď sa interakcia mení pri mobilnej šírke. Nezmenšujte širokú desktopovú obrazovku a nenazývajte ju mobilným príkladom.

Parametre

Parametre tvoria prenositeľnú obsahovú zmluvu. Vizuálne hodnoty, ako je farba značky, hrúbka okraja a typografia popisu, patria vykresľovaču a nie sú autorskými poľami.

screenId identifikuje povrch produktu nezávisle od názvu súboru, takže vydanie môže nájsť rôzne orezy stránky content-freshness-audit. Súbor alt.yaml zostáva jednoduchý: jeden názov súboru, za ním jeden zalomený reťazec alternatívneho textu.

Syntax a príklady kódu

Každý zápis zachováva rovnaké metadáta, popis, značky a poradie čítania obrázok – popis – legenda.

Prenositeľná direktíva Markdown

:::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 sledovanú URL.

1. **Sledovaná URL:** Potvrdzuje, ktorú stránku audit vyhodnocuje.
2. **Filter stavu:** Obmedzuje výsledky na stránky čakajúce na kontrolu.
3. **Dátum výsledku:** Zobrazuje, kedy boli údaje auditu obnovené.
:::

Adaptér rieši alt z alt.yaml v priečinku. Chýbajúci kľúč názvu súboru je zlyhanie publikovania, nie povolenie skopírovať popis.

Mapovanie 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 sledovanú URL.

1. **Sledovaná URL:** Potvrdzuje, ktorú stránku audit vyhodnocuje.
2. **Filter stavu:** Obmedzuje výsledky na stránky čakajúce na kontrolu.
3. **Dátum výsledku:** Zobrazuje, kedy boli údaje auditu obnovené.
{{< /annotated-screenshot >}}

Toto je zmluva adaptéra, nie registrovaný shortcode. Kým neexistuje schválený vykresľovač a prostriedok, používajte etablovaný sémantický obrázkový pipeline alebo ponechajte predpísaný komentár na zachytenie. Nenahrádzajte vykresľovač, ktorý vynecháva legendu alebo polia aktuálnosti.

WordPress blok alebo 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 sledovanú URL.[/caption]
[marker number="1" label="Sledovaná URL"]Potvrdzuje, ktorú stránku audit vyhodnocuje.[/marker]
[marker number="2" label="Filter stavu"]Obmedzuje výsledky na stránky čakajúce na kontrolu.[/marker]
[marker number="3" label="Dátum výsledku"]Zobrazuje, kedy boli údaje auditu obnovené.[/marker]
[/annotated_screenshot]

WordPress blok môže vystaviť polia ako ovládacie prvky, ale musí ukladať popisy značiek ako text.

Príklady

Dobrý: jeden nejednoznačný stav, tri užitočné značky

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

1. Sledovaná URL: Overuje, že výsledok patrí k stránke s cenami vybranej v inštrukcii.
2. Na kontrolu: Identifikuje presný filter, ktorý odstraňuje aktuálne stránky z pracovného frontu.
3. Naposledy obnovené: Zabraňuje editorovi považovať starý výsledok auditu za aktuálnu diagnózu.

Toto funguje, pretože každá značka odpovedá na rozhodnutie, orez zachováva orientáciu a legenda vysvetľuje dôsledky, ktoré nie sú v pixeloch viditeľné. Demo doména je zjavne nie reálnym zákazníckym údajom.

Zlý: označený produktový plagát

Zlá verzia vysvetľuje celý dashboard naraz. Osem šípok sa križuje, popisky zakrývajú ovládacie prvky a vložená propagácia neposkytuje žiadnu akciu. Záložky prehliadača vytvárajú riziko pre súkromie, mená zákazníkov sťažujú schvaľovanie, chýba identifikátor obrazovky pre aktualizácie a mobilné škálovanie robí ciele nečitateľnými.

Opravte to výberom jednej úlohy, použitím schválených demo údajov, orezaním na príslušný panel a ponechaním len potrebných značiek. Presuňte vysvetlenia do textovej legendy, pridajte kontextový alternatívny text a zaznamenajte identifikátor obrazovky a dátum.

Štruktúrované dáta a prístupnosť

Anotovaná snímka obrazovky nemá špeciálny typ Schema.org. Môže napĺňať vlastnosť image v Article alebo ImageObject s presnými údajmi contentUrl, popisom, šírkou a výškou. Nevymýšľajte vlastnosti značiek; ponechajte legendu viditeľnú.

Používajte natívnu sémantiku obrázka: jeden <figure> obsahujúci <img>, <figcaption> a zoradenú legendu. Popis pomenúva celú obrazovku a stav. Atribút alt obrázka opisuje, čo obrázok zobrazuje v tomto kontexte; nemal by začínať slovami „snímka obrazovky“, pretože samotný prvok obrázka sa už oznamuje. Legenda poskytuje podrobné očíslované vysvetlenia, takže opakovanie všetkých šiestich položiek v alternatívnom texte vytvára dlhé, duplicitné oznámenie.

Cieľom je 80 – 180 znakov, s maximom 250. Pomenujte oblasť produktu, stav a označený účel: „Audit aktuálnosti obsahu filtrovaný na jednu sledovanú URL, so značkami na filtri stavu a dátume posledného obnovenia.“ Neprepisujte rozhranie, nenapchávajte kľúčové slová ani nepoužívajte názov súboru. Tento informatívny obrázok zvyčajne potrebuje neprázdny alternatívny text.

Čísla značiek musia byť čitateľné bez farby. Použite vysoký kontrast voči svetlým aj tmavým oblastiam rozhrania, zachovajte konzistentnú vizuálnu veľkosť a nezakrývajte popisy ani hodnoty. Legenda používa zoradený zoznam v bežnom poradí dokumentu; vyhýbajte sa ARIA, teda Accessible Rich Internet Applications, rolám, ktoré menia statický obsah na upozornenie alebo interaktívny widget. Vzťah aria-describedby je voliteľný len vtedy, keď testovanie ukáže, že zlepšuje navigáciu bez toho, aby spôsobil dvojité oznámenie viditeľnej legendy.

Pri úzkych šírkach musí responzívny dizajn zachovať význam. Škálujte široký obrázok len vtedy, keď značky a ciele zostávajú čitateľné; inak poskytnite zameraný orez alebo skutočné mobilné zachytenie. Nikdy nespôsobujte horizontálne posúvanie na úrovni stránky ani nevyžadujte priblíženie. Popis a legenda sa zalamujú nižšie.

Pravidlá pre obsah a snímanie

Konzistentnosť robí snímky obrazovky porovnateľnými a vymeniteľnými. Snímajte desktopové obrazovky produktu pri pevnom viewporte 1440 CSS pixelov a 2x hustote pixelov, často nazývanej Retina hustota, ktorá zaznamenáva dva zariadené pixely na každý CSS pixel. Snímajte skutočné mobilné stavy pri 390 CSS pixeloch a 2x hustote. Používajte schválenú tému produktu konzistentne v rámci jedného sprievodcu; nestriedajte svetlý a tmavý režim, pokiaľ rozdiel v téme nie je predmetom.

Používajte výhradne demo dáta: žiadne skutočné mená, e-mailové adresy, domény, fakturačné údaje, tokeny, výzvy ani výsledky. Skontrolujte bočné panely, nedávne položky, automatické dopĺňanie, oznámenia a avatary pred snímaním.

Vylúčte prvky prehliadača, pokiaľ URL, povolenie alebo ovládací prvok prehliadača nie sú pointou. Skryte karty, záložky, rozšírenia, sťahovania, profily a oznámenia. Snímajte po načítaní; zatvorte irelevantné tooltipy a kurzor zobrazujte len v nevyhnutných prípadoch.

Ukladajte zdrojové snímky do cdn-assets/seo-playbook/elements/annotated-screenshot/. Používajte názvy v malých písmenách kebab-case podľa obrazovky a stavu, napríklad freshness-audit-needs-review.webp; nikdy nepoužívajte final, new, v2, meno osoby ani dátum ako názov súboru. Stabilný názov umožňuje nahradiť prostriedok bez prepisovania každej stránky. Používajte WebP pre bežné doručenie, ideálne v bezstratovom nastavení, keď malý text v rozhraní musí zostať ostrý. Používajte PNG len vtedy, keď produkčný pipeline preukáže, že WebP poškodzuje text alebo priehľadnosť. Nepoužívajte JPEG pre snímky UI s jemným textom a ostrými hranami.

Vykresľujte v šírke maximálne 1600 CSS pixelov; 1440-pixelový 2x zdroj môže byť 2880 fyzických pixelov. Zachovajte pomer strán a intrinsické rozmery. Optimalizácia podporuje SEO obrázkov , ale kompresia nesmie rozmazávať text ani značky.

Každý priečinok s prostriedkami obsahuje alt.yaml s jedným záznamom na názov súboru:

freshness-audit-needs-review.webp: >-
  AmICited audit aktuálnosti obsahu filtrovaný na jednu sledovanú URL, s očíslovanými značkami na stave kontroly a dátume posledného obnovenia.

Kľúč sa presne zhoduje s názvom súboru; hodnota je alternatívny text, nie popis alebo legenda. Placeholdery, zásobníkové dashboardy a neexistujúce odkazy na obrázky sú zakázané. Nevyhotovené snímky používajú len komentár SCREENSHOT a screenshotsPending = true.

Politika aktuálnosti a presnímania

Snímky obrazovky ticho starnú, keď sa zobrazený ovládací prvok presunie alebo zmení názov. Pristupujte ku každému zachyteniu ako k pohľadu na registrovanú obrazovku: screenId spája zmeny produktu s prostriedkami, zatiaľ čo dátum zachytenia identifikuje zaznamenaný stav.

Zmena UI spúšťa presnímanie, keď presunie alebo premenuje označený cieľ, zmení stav, ktorý legenda vysvetľuje, zmení navigačnú cestu potrebnú na jeho dosiahnutie, odstráni zachovaný orientačný bod, alebo keď by starý obrázok mohol viesť čitateľa k nesprávnemu ovládaciemu prvku. Presnímajte celú sadu obrázkov s popismi pre túto obrazovku vrátane zameraných a mobilných variantov. Zmena farebného tokenu, úprava medzier alebo nesúvisiaci prídavok bočného panela nevyžaduje automatickú výmenu, pokiaľ snímka nie je v viditeľnom rozpore so živým zážitkom alebo štandardom prístupnosti.

Keď sa obrazovka zmení, vyhľadajte jej screenId, potom jej priečinok a názov súboru, aby ste zachytili staršie použitia. Nahraďte stabilné súbory, skontrolujte alt.yaml a prezrite každú ovplyvnenú legendu. Nepremenúvajte náhradné súbory a nenechávajte staršie odkazy visieť.

Vlastník obrazovky produktu signalizuje zmeny; vlastník obsahu prijíma náhrady. Znovu snímajte s rovnakou demo sadou, viewportom, hustotou a témou. Skontrolujte snímky pri každej podstatnej obnove stránky.

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

Frontmatter postTypes je registrované prepojenie. Každý typ používa rovnakú zmluvu prvku, ale uplatňuje inú hranicu požiadaviek.

Prípadové štúdie vyžadujú dodatočnú hranicu: buď získajte výslovné povolenie na zobrazenie skutočných zákazníckych informácií, alebo znovu vytvorte rozhranie s jasne uvedenými demo údajmi a pristupujte k nemu ako k ilustrácii pracovného postupu, nie ako k dôkazu výsledku. Redigovanie nie je náhradou za súhlas alebo kontrolovanú zostavu.

Kontrolný zoznam QA

Kontrolór overuje komunikáciu a riziko údržby pred vizuálnym doladením.

• Účel: Obrázok s popisom rieši jednu priestorovú nejednoznačnosť alebo dokazuje jedno viditeľné tvrdenie o rozhraní.
• Nevyhnutnosť: Rutinné kroky zostávajú textom; stránka nepriraďuje automaticky jednu snímku každému kroku.
• Reálny stav: Snímka zobrazuje presné otvorené menu, vybraný filter, výsledok alebo chybu, o ktorej sa hovorí v kópii.
• Demo dáta: Nie sú viditeľné žiadne informácie o zákazníkoch, zamestnancoch, účtoch, prehliadači, tokenoch, výzvach ani fakturácii.
• Konzistentnosť snímania: Viewport, 2x hustota, téma, stav rozhrania a pravidlo prehliadača zodpovedajú štandardu.
• Zameraný orez: Dostatočný kontext zostáva pre orientáciu, ale nesúvisiace oblasti rozhrania nekonkurujú cieľu.
• Značky: Existuje jedna až šesť súvislých čísel, každé s vysokým kontrastom, čitateľné a mimo popisov a hodnôt.
• Externá legenda: Každá značka má jeden zodpovedajúci záznam v zoradenom zozname v texte stránky; žiadne znenie legendy nie je vložené do pixelov.
• Popis: Obrázok s popisom má stručný viditeľný popis pomenúvajúci jeho obrazovku, stav a scenár.
• Alternatívny text: alt.yaml v priečinku obsahuje presný kľúč názvu súboru a kontextový opis v rámci cieľového rozsahu dĺžky.
• Správanie na mobile: Cieľ a značky zostávajú čitateľné bez horizontálneho posúvania na úrovni stránky alebo potrebného priblíženia; inak existuje zameraný orez.
• Súborová zmluva: Cesta, názov v malých písmenách kebab-case, formát, rozmery a intrinsická veľkosť zodpovedajú doručovaciemu štandardu.
• Aktuálnosť: screenId a dátum zachytenia sú zaznamenané, živé UI sa stále zhoduje a všetky odkazy možno nájsť textovým vyhľadávaním.
• Prenositeľná parita: Markdown, Hugo a WordPress reprezentácie zachovávajú rovnaký prostriedok, popis, poradie značiek a znenie legendy.
• Žiadny nefunkčný prostriedok: Skutočná cesta k obrázku sa zobrazí až po existencii súboru; nevyhotovené snímky zostávajú komentármi a zachovávajú screenshotsPending = true.

FAQ

Akademická šablóna vykresľuje päť skontrolovaných otázok uložených v [[faq]] frontmatter tejto stránky. Zahŕňajú frekvenciu snímok, externé legendy, dĺžku alternatívneho textu, spúšťače presnímania a výnimku pre prehliadač.