Capturi de ecran adnotate: Reguli și exemple

O captură de ecran adnotată arată o stare reală a interfeței și identifică zonele exacte pe care cititorul trebuie să le observe. Imaginea poartă marcatori numerotați; pagina poartă legenda text corespunzătoare. Această separare este elementul: nici o imagine de produs nemarcată, nici etichete încorporate în pixeli nu îndeplinesc contractul.

Audit de prospețime a conținutului, filtrat la un URL urmărit.

1. URL urmărit: Confirmă că revizuirea se aplică paginii vizate, nu întregului domeniu.
2. Filtru de stare: Restrânge tabelul la paginile care necesită o decizie editorială.
3. Data rezultatului: Arată când a fost actualizată ultima dată înregistrarea auditului subiacent.

Captura este în așteptare, așadar comentariul este o specificație de captură de producție, nu o referință de imagine stricată. Odată ce fișierul există, imaginea, legenda și legenda numerotată se redau ca o singură figură semantică.

De ce contează acest element

Cititorii folosesc o imagine de produs pentru a răspunde la o întrebare spațială: „Ce control, valoare sau stare înseamnă această instrucțiune?” Interfețele dense conțin navigare, filtre, etichete, date, insigne și acțiuni care pot părea toate la fel de importante. O captură de ecran neadnotată îi cere cititorului să reconstituie atenția autorului. Marcatorii numerotați reduc această căutare la o potrivire directă între o locație vizibilă și o explicație scurtă.

Elementul înlocuiește și limbajul fragil al coordonatelor. „Folosește controlul din dreapta” devine greșit când o bară de instrumente se rearanjează; „alege filtrul de stare marcat 2” rămâne utilizabil cât timp captura este actuală.

Extractibilitatea automată înseamnă că software-ul poate izola și reutiliza sensul util al unei unități de conținut. Viziunea computerizată poate recunoaște textul interfeței, dar nu poate deduce în mod fiabil de care dintre douăzeci de controale îi pasă acestei proceduri. O legendă vizibilă și ordonată creează perechi explicite marker-explicație pe care sistemele de căutare, instrumentele de traducere, software-ul de accesibilitate și auditurile de conținut le pot procesa ca text. Imaginea oferă dovezi spațiale; legenda oferă sens căutabil. Aceasta urmează regulile mai largi de scriere a elementelor : conținutul rămâne tipizat și portabil chiar și atunci când redarea sa se schimbă.

Nu încorpora niciodată legenda în pixeli. Textul în pixeli nu poate fi tradus, căutat, selectat sau corectat fără a edita opera grafică. De asemenea, este invizibil pentru un cititor de ecran, un software care anunță conținut digital persoanelor care nu pot vedea ecranul. Doar numerele marcatorilor aparțin imaginii.

Când să îl folosești

Folosește o captură de ecran adnotată când cititorul trebuie să identifice o regiune specifică într-o interfață reală, iar cuvintele singure lasă mai mult de o țintă plauzibilă. Este necesară când două comenzi au nume similare, o stare importantă este subtilă, un rezultat trebuie interpretat în contextul său înconjurător sau o configurație vizuală nu poate fi reprezentată fidel în proză. Este utilă și atunci când o pagină de produs face o afirmație concretă despre interfață pe care imaginea o poate dovedi.

O captură de ecran este opțională atunci când instrucțiunea numește deja un control unic și vizibil, iar interacțiunea este convențională. „Selectează Salvează modificări” nu are nevoie de obicei de nicio imagine când pagina conține un singur astfel de buton. Devine necesară dacă același ecran are Salvează ciornă, Salvează vizualizare și Salvează modificări, iar alegerea greșită schimbă rezultatul.

O captură de ecran este dăunătoare când adaugă greutate fără a rezolva incertitudinea. Nu adăuga una pentru decor sau pentru a repeta text care este mai clar într-un tabel. Paisprezece capturi de ecran într-un ghid de paisprezece pași creează paisprezece întreruperi, probleme de zoom pe mobil și active învechite. Capturează pașii ambigui; lasă verbele precise să poarte pașii de rutină.

Aproape de țintă, dar greșite includ:

• Un tablou de bord complet folosit pentru a explica o singură pictogramă: decupează la cea mai mică regiune care păstrează orientarea. Un marcator pierdut într-o interfață largă nu reduce efortul de căutare.
• O captură de ecran folosită ca dovadă numerică: repetă valoarea decisivă în text sau într-un tabel. Pixelii nu pot fi singura copie accesibilă a unei afirmații.
• O captură de ecran a unui meniu înainte de a se deschide: capturează starea pe care cititorul trebuie să o inspecteze. Starea închisă dovedește că produsul există, dar nu ce alegere să facă.
• O captură de ecran care conține înregistrări ale clienților: înlocuiește-le cu date demonstrative stabile înainte de captură. Estomparea este ușor de ratat.
• O diagramă deghizată în captură de ecran: folosește o diagramă pentru relații abstracte. Realismul interfeței ajută doar când interfața contează.

Unde să îl plasezi

Plasează figura după paragraful sau pasul care îi cere prima dată cititorului să inspecteze interfața. Într-o procedură, pune-o după acțiune și înainte de starea de succes sau depanare, astfel încât cititorul să localizeze controlul înainte de a verifica rezultatul.

Păstrează imaginea, legenda și legenda numerotată împreună. Un titlu poate introduce grupul, dar un alt paragraf, un apel, o reclamă sau o întrerupere de pagină nu trebuie să separe captura de explicațiile sale numerotate. O legendă identifică întregul ecran și contextul; nu poartă o instrucțiune care aparține prozei și nici nu înlocuiește legenda.

Nu așeza două capturi de ecran pe lățime completă una lângă alta. Inserează explicația care le diferențiază sau creează o comparație etichetată când ambele stări trebuie evaluate împreună. Ține capturile de ecran departe de apeluri la acțiune fără legătură, tabele dense și galerii.

Repetă elementul doar când fiecare apariție răspunde la o întrebare spațială diferită. Preferă o figură concentrată; altfel, oferă decupări separate cu nume de fișiere și scopuri distincte.

Anatomie

Captura de anatomie demonstrează părțile vizibile și textuale ale unui element complet. Etichetele explicative rămân în legenda redată, nu devin parte a imaginii sursă.

Legendă redată

1. Limită de context: Include suficientă interfață înconjurătoare pentru a identifica pagina și locația, dar exclude navigarea fără legătură și spațiul gol.
2. Marcator numerotat: Folosește un cerc de contrast ridicat și un număr întreg, nu doar culoarea, pentru a conecta o regiune la intrarea sa din legendă.
3. Regiune țintă: Marchează cel mai mic control, valoare sau stare completă necesară pentru explicație; nu acoperă niciodată eticheta țintei.
4. Reper de orientare: Păstrează un titlu, filă sau etichetă de panou stabilă, astfel încât cititorul să poată găsi aceeași zonă în produsul live.
5. Legendă: Denumește ecranul, starea și scenariul în text vizibil sub imagine.
6. Legendă numerotată: Folosește o listă ordonată ale cărei numere se potrivesc exact cu marcatorii și ale cărei intrări explică semnificația, nu doar aspectul.

Numerele marcatorilor încep de la 1 și urmează ordinea legendei. Folosește două până la șase pe imagine; unul este potrivit pentru o țintă dificilă, iar mai mult de șase semnalează de obicei o captură prea largă.

Exemple de design

Variantele suportate schimbă decupajul și viewport-ul, nu politica de adnotare. Fiecare variantă folosește date demonstrative, marcatori de imagine numerotați, o legendă text externă și o legendă vizibilă.

Control focalizat: Preferat pentru o singură acțiune ambiguă. Păstrează o etichetă de orientare, astfel încât decupajul să nu devină un dreptunghi anonim.

Stare flux de lucru: Folosește când relația dintre o intrare, o stare și un rezultat contează. Păstrează navigarea globală fără legătură în afara cadrului.

URL în context: Singura variantă standard care include cromul browserului, adică filele proprii ale browserului, bara de adrese și controalele. Include doar bara de adrese și indicatorul necesar de permisiune sau securitate.

Stare mobilă: Capturează layout-ul îngust real când interacțiunea se schimbă la lățimea mobilă. Nu micșora un ecran lat de desktop și nu îl numi exemplu mobil.

Parametri

Parametrii formează contractul portabil de conținut. Valorile vizuale, cum ar fi culoarea marcatorului, grosimea bordurii și tipografia legendei, aparțin redării și nu sunt câmpuri ale autorului.

screenId identifică suprafața produsului independent de numele său de fișier, astfel încât o lansare poate găsi diferite decupaje ale content-freshness-audit. Fișierul alt.yaml rămâne simplu: un nume de fișier urmat de un șir de text alternativ pliat.

Sintaxă și exemple de cod

Fiecare notație păstrează aceleași metadate, legendă, marcatori și ordinea de citire imagine–legendă–legendă numerotată.

Directivă Markdown portabilă

:::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 de prospețime a conținutului filtrat la un URL urmărit.

1. **URL urmărit:** Confirmă ce pagină evaluează auditul.
2. **Filtru de stare:** Limitează rezultatele la paginile care așteaptă revizuire.
3. **Data rezultatului:** Arată când au fost reîmprospătate datele auditului.
:::

Adaptorul rezolvă alt din alt.yaml al folderului. O cheie de nume de fișier lipsă este o eroare de publicare, nu o permisiune de a copia legenda.

Mapare shortcode Hugo

{{< 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 de prospețime a conținutului filtrat la un URL urmărit.

1. **URL urmărit:** Confirmă ce pagină evaluează auditul.
2. **Filtru de stare:** Limitează rezultatele la paginile care așteaptă revizuire.
3. **Data rezultatului:** Arată când au fost reîmprospătate datele auditului.
{{< /annotated-screenshot >}}

Acesta este un contract de adaptor, nu un shortcode înregistrat. Până când există un redator și un activ aprobat, folosește pipeline-ul stabilit de figuri semantice sau lasă comentariul de captură prescris. Nu înlocui cu un redator care elimină legenda sau câmpurile de prospețime.

Bloc sau shortcode WordPress

[annotated_screenshot src="workflow-state.webp" viewport="1440" density="2x" screen_id="content-freshness-audit" capture_date="2026-08-27"]
[caption]Audit de prospețime a conținutului filtrat la un URL urmărit.[/caption]
[marker number="1" label="URL urmărit"]Confirmă ce pagină evaluează auditul.[/marker]
[marker number="2" label="Filtru de stare"]Limitează rezultatele la paginile care așteaptă revizuire.[/marker]
[marker number="3" label="Data rezultatului"]Arată când au fost reîmprospătate datele auditului.[/marker]
[/annotated_screenshot]

Un bloc WordPress poate expune câmpurile ca controale, dar trebuie să stocheze descrierile marcatorilor ca text.

Exemple

Corect: o stare ambiguă, trei marcatori utili

Revizuirea prospețimii conținutului pentru demo.example/pricing/.

1. URL urmărit: Verifică că rezultatul aparține paginii de prețuri selectate în instrucțiune.
2. Necesită revizuire: Identifică filtrul exact care elimină paginile curente din coada de lucru.
3. Ultima reîmprospătare: Împiedică editorul să trateze un rezultat vechi de audit ca pe un diagnostic curent.

Acest exemplu funcționează deoarece fiecare marcator răspunde unei decizii, decupajul păstrează orientarea, iar legenda explică consecințe care nu sunt vizibile în pixeli. Domeniul demo este clar date non-clienți.

Greșit: un poster de produs etichetat

Versiunea greșită explică un întreg tablou de bord dintr-o dată. Opt săgeți se încrucișează, etichetele ascund comenzile, iar promoția încorporată nu oferă nicio acțiune. Marcajele browserului creează risc de confidențialitate, numele clienților fac aprobarea incertă, niciun identificator de ecran nu suportă actualizări, iar scalarea mobilă face țintele ilizibile.

Repară-l selectând o singură sarcină, folosind date demonstrative aprobate, decupând panoul său și păstrând doar marcatorii necesari. Mută explicațiile într-o legendă text, adaugă text alternativ contextual și înregistrează identificatorul ecranului și data.

Marcare Schema și accesibilitate

O captură de ecran adnotată nu are un tip Schema.org special. Poate popula proprietatea image a unui Article sau un ImageObject cu contentUrl, legendă, lățime și înălțime corecte. Nu inventa proprietăți pentru marcatori; păstrează legenda vizibilă.

Folosește semantica nativă de figură: un <figure> care conține <img>, un <figcaption> și legenda ordonată. Legenda denumește întregul ecran și starea. Atributul alt al imaginii descrie ce arată ecranul în acest context; nu ar trebui să înceapă cu „captură de ecran”, deoarece elementul imagine se anunță deja singur. Legenda furnizează explicațiile numerotate detaliate, așadar repetarea tuturor celor șase intrări în textul alternativ creează un anunț lung și duplicat.

Țintește 80–180 de caractere, cu 250 ca plafon. Denumește zona produsului, starea și scopul marcat: „Audit de prospețime a conținutului filtrat la un URL urmărit, cu marcatori pe filtrul de stare și data ultimei reîmprospătări.” Nu transcrie interfața, nu înghesui cuvinte cheie și nu folosi numele fișierului. Această imagine informativă are nevoie în mod normal de text alternativ ne-gol.

Numerele marcatorilor trebuie să fie lizibile fără culoare. Folosește contrast ridicat atât pe regiuni deschise, cât și pe întunecate ale interfeței, păstrează dimensiunea vizuală consistentă și nu acoperi etichetele sau valorile. Legenda folosește o listă ordonată în ordinea normală a documentului; evită rolurile ARIA (Accessible Rich Internet Applications) care transformă conținutul static într-o alertă sau widget interactiv. O relație aria-describedby este opțională doar când testarea arată că îmbunătățește navigarea fără a cauza anunțarea de două ori a legendei vizibile.

La lățimi înguste, designul responsive trebuie să păstreze sensul. Scalează o imagine largă doar dacă marcatorii și țintele rămân lizibile; altfel, oferă un decupaj focalizat sau o captură mobilă autentică. Nu provoca niciodată derulare orizontală la nivel de pagină și nu solicita zoom. Legenda și legenda numerotată se înfășoară mai jos.

Reguli de conținut și captură

Consistența face capturile de ecran comparabile și înlocuibile. Capturează ecranele de produs desktop la un viewport fix de 1440 pixeli CSS și densitate de pixeli de 2x, adesea numită densitate Retina, care înregistrează doi pixeli de dispozitiv pentru fiecare pixel CSS. Capturează stările mobile autentice la 390 de pixeli CSS și densitate 2x. Folosește tema de produs aprobată în mod consecvent într-un ghid; nu alterna între modul luminos și întunecat, cu excepția cazului în care diferența de temă este subiectul.

Folosește doar date demonstrative: fără nume reale, adrese de e-mail, domenii, detalii de facturare, tokenuri, prompturi sau rezultate. Inspectează barele laterale, elementele recente, completarea automată, notificările și avatarurile înainte de captură.

Exclude cromul browserului, cu excepția cazului în care un URL, o permisiune sau un control al browserului este scopul. Ascunde filele, marcajele, extensiile, descărcările, profilele și notificările. Capturează după încărcare; închide tooltip-urile irelevante și arată cursorul doar când este esențial.

Stochează capturile sursă în cdn-assets/seo-playbook/elements/annotated-screenshot/. Folosește nume în litere mici cu cratimă, bazate pe ecran și stare, cum ar fi freshness-audit-needs-review.webp; nu folosi niciodată final, new, v2, numele unei persoane sau o dată ca nume de fișier. Numele stabil permite înlocuirea activului fără a rescrie fiecare pagină. Folosește WebP pentru livrarea normală, preferabil o setare fără pierderi când textul mic al interfeței trebuie să rămână clar. Folosește PNG doar când pipeline-ul de producție demonstrează că WebP dăunează textului sau transparenței. Nu folosi JPEG pentru capturi UI cu text fin și margini ascuțite.

Randează la cel mult 1600 de pixeli CSS lățime; o sursă de 1440 pixeli la 2x poate avea 2880 de pixeli fizici. Păstrează raportul de aspect și dimensiunile intrinseci. Optimizarea sprijină SEO-ul imaginilor , dar compresia nu trebuie să estompeze textul sau marcatorii.

Fiecare folder de active conține alt.yaml cu o intrare per nume de fișier:

freshness-audit-needs-review.webp: >-
  Audit de prospețime a conținutului AmICited filtrat la un URL urmărit, cu marcatori numerotați pe starea revizuirii și data ultimei reîmprospătări.

Cheia se potrivește exact cu numele fișierului; valoarea este text alternativ, nu o legendă sau legendă numerotată. Substitutele, tablourile de bord standard și referințele la imagini inexistente sunt interzise. Capturile în așteptare folosesc doar un comentariu SCREENSHOT și screenshotsPending = true.

Politica de prospețime și re-captură

Capturile de ecran îmbătrânesc în tăcere când un control ilustrat se mută sau își schimbă numele. Tratează fiecare captură ca pe o vedere a unui ecran înregistrat: screenId unește modificările produsului cu activele, în timp ce data capturii identifică starea înregistrată.

O modificare a UI declanșează o re-captură atunci când mută sau redenumește o țintă marcată, schimbă starea pe care legenda o explică, modifică calea de navigare necesară pentru a ajunge la ea, elimină un reper de orientare păstrat sau face ca imaginea veche să fie probabil să trimită cititorul la controlul greșit. Re-capturează setul complet de figuri pentru acel ecran, inclusiv variantele focalizate și mobile. O modificare a tokenului de culoare, ajustare a spațierii sau adăugare de bară laterală fără legătură nu necesită înlocuire automată, cu excepția cazului în care captura de ecran intră acum în conflict vizibil cu experiența live sau standardul de accesibilitate.

Când un ecran se schimbă, caută screenId-ul său, apoi folderul și numele fișierului pentru a identifica utilizările moștenite. Înlocuiește fișierele stabile, revizuiește alt.yaml și inspectează fiecare legendă afectată. Nu redenumi fișierele de înlocuire și nu lăsa referințe mai vechi în urmă.

Proprietarul ecranului de produs semnalează modificările; proprietarul conținutului acceptă înlocuirile. Re-capturează cu aceeași configurație demonstrativă, viewport, densitate și temă. Revizuiește capturile de ecran la fiecare reîmprospătare substanțială a paginii.

Tipuri de postări care îl folosesc

Frontmatter-ul postTypes este îmbinarea înregistrată. Fiecare tip folosește același contract de element, dar aplică un prag diferit de cerință.

Studiile de caz necesită o limită suplimentară: fie obține permisiunea explicită de a afișa informații reale ale clientului, fie reconstruiește interfața cu date demonstrative dezvăluite clar și tratează-o ca pe o ilustrare a fluxului de lucru, nu ca dovadă a rezultatelor. Redactarea nu este un substitut pentru consimțământ sau pentru o configurație controlată.

Checklist QA

Un revizuitor verifică comunicarea și riscul de întreținere înainte de lustruirea vizuală.

• Scop: Figura rezolvă o ambiguitate spațială sau dovedește o afirmație vizibilă a interfeței.
• Necesitate: Pașii de rutină rămân text; pagina nu atribuie implicit o captură de ecran fiecărui pas.
• Stare reală: Captura arată meniul exact deschis, filtrul selectat, rezultatul sau eroarea discutată în text.
• Date demonstrative: Nu sunt vizibile informații despre clienți, angajați, conturi, browser, tokenuri, prompturi sau facturare.
• Consistența capturii: Viewport, densitate 2x, temă, stare a interfeței și regula cromului browserului se potrivesc cu standardul.
• Decupaj focalizat: Suficient context rămâne pentru orientare, dar zonele de interfață fără legătură nu concurează cu ținta.
• Marcatori: Există una până la șase numere continue, fiecare cu contrast ridicat, lizibil și fără a acoperi etichete și valori.
• Legendă externă: Fiecare marcator are o intrare corespunzătoare în listă ordonată în textul paginii; niciun text al legendei nu este încorporat în pixeli.
• Legendă: Figura are o legendă vizibilă concisă care denumește ecranul, starea și scenariul.
• Text alternativ: alt.yaml al folderului conține o cheie exactă de nume de fișier și o descriere contextuală în banda țintă de lungime.
• Comportament mobil: Ținta și marcatorii rămân lizibili fără derulare orizontală la nivel de pagină sau zoom necesar; altfel, există un decupaj focalizat.
• Contract de fișier: Calea, numele în litere mici cu cratimă, formatul, dimensiunile și dimensiunea intrinsecă urmează standardul de livrare.
• Prospețime: screenId și data capturii sunt înregistrate, UI-ul live se potrivește încă și toate referințele pot fi găsite prin căutare text.
• Paritate portabilă: Reprezentările Markdown, Hugo și WordPress păstrează același activ, legendă, ordinea marcatorilor și formularea legendei.
• Fără activ stricat: O cale de imagine reală apare doar după ce fișierul există; capturile în așteptare rămân comentarii și păstrează screenshotsPending = true.

FAQ

Șablonul academy rendează cele cinci întrebări revizuite stocate în frontmatter-ul [[faq]] al acestei pagini. Acestea acoperă frecvența capturilor de ecran, legendele externe, lungimea textului alternativ, declanșatoarele de re-captură și excepția cromului browserului.