Zrzuty ekranu z adnotacjami: zasady i przykłady

Zrzut ekranu z adnotacjami przedstawia rzeczywisty stan interfejsu i identyfikuje dokładne obszary, które czytelnik musi zauważyć. Obraz zawiera ponumerowane znaczniki; strona zawiera pasującą do nich legendę tekstową. To rozdzielenie stanowi istotę elementu: ani nieoznaczony obraz produktu, ani etykiety wtopione w piksele nie spełniają tego założenia.

Audyt aktualności treści, przefiltrowany do jednego śledzonego adresu URL.

1. Śledzony URL: Potwierdza, że przegląd dotyczy zamierzonej strony, a nie całej domeny.
2. Filtr statusu: Zawęża tabelę do stron wymagających decyzji redakcyjnej.
3. Data wyniku: Pokazuje, kiedy ostatnio odświeżono bazowy rekord audytu.

Przechwycenie jest oczekujące, więc komentarz jest specyfikacją produkcyjną, a nie uszkodzonym odnośnikiem do obrazu. Gdy zasób istnieje, obraz, podpis i ponumerowana legenda renderują się jako jedna semantyczna figura.

Dlaczego ten element jest ważny

Czytelnicy używają obrazu produktu, aby odpowiedzieć na pytanie przestrzenne: „Która kontrolka, wartość lub stan oznacza ta instrukcja?” Gęste interfejsy zawierają nawigację, filtry, etykiety, dane, odznaki i akcje, które wszystkie mogą wydawać się równie ważne. Zrzut ekranu bez adnotacji wymaga od czytelnika reverse engineeringu uwagi autora. Ponumerowane znaczniki redukują to wyszukiwanie do bezpośredniego dopasowania między widocznym miejscem a krótkim wyjaśnieniem.

Element zastępuje również kruchy język współrzędnych. „Użyj kontrolki po prawej” staje się nieprawidłowe, gdy pasek narzędzi się zawija; „wybierz filtr statusu oznaczony numerem 2” pozostaje użyteczne, dopóki przechwycenie jest aktualne.

Możliwość ekstrakcji maszynowej oznacza, że oprogramowanie może wyizolować i ponownie wykorzystać użyteczne znaczenie jednostki treści. Rozpoznawanie komputerowe może odczytać tekst interfejsu, ale nie jest w stanie wiarygodnie wywnioskować, dlaczego jedna z dwudziestu kontrolek ma znaczenie dla tej procedury. Widoczna, uporządkowana legenda tworzy jawne pary znacznik–wyjaśnienie, które systemy wyszukiwania, narzędzia tłumaczeniowe, oprogramowanie dostępnościowe i audyty treści mogą przetwarzać jako tekst. Obraz dostarcza dowodów przestrzennych; legenda dostarcza przeszukiwalnego znaczenia. Jest to zgodne z szerszymi zasadami pisania elementów : treść pozostaje typowana i przenośna, nawet gdy zmienia się jej renderer.

Nigdy nie wbudowuj legendy w piksele. Tekst w pikselach nie może być tłumaczony, wyszukiwany, zaznaczany ani poprawiany bez edycji grafiki. Jest również niewidoczny dla czytnika ekranu, czyli oprogramowania, które odczytuje treści cyfrowe osobom niewidomym. W obrazie powinny znajdować się tylko numery znaczników.

Kiedy używać

Użyj zrzutu ekranu z adnotacjami, gdy czytelnik musi zidentyfikować konkretny obszar w rzeczywistym interfejsie, a same słowa pozostawiają więcej niż jeden prawdopodobny cel. Jest wymagany, gdy dwie kontrolki mają podobne nazwy, ważny stan jest subtelny, wynik musi być interpretowany w kontekście lub konfiguracja wizualna nie może być wiernie przedstawiona w prozie. Jest również przydatny, gdy strona produktu zawiera konkretne twierdzenie dotyczące interfejsu, które obraz może udowodnić.

Zrzut ekranu jest opcjonalny, gdy instrukcja już nazywa unikalną, widoczną kontrolkę, a interakcja jest konwencjonalna. „Wybierz Zapisz zmiany” zwykle nie wymaga obrazu, gdy strona zawiera jeden taki przycisk. Staje się wymagany, jeśli ten sam ekran zawiera Zapisz wersję roboczą, Zapisz widok i Zapisz zmiany, a wybór niewłaściwego zmienia rezultat.

Zrzut ekranu jest szkodliwy, gdy dodaje objętości bez rozwiązywania niepewności. Nie dodawaj go dla dekoracji ani do powtarzania tekstu, który jest jaśniejszy w tabeli. Czternaście zrzutów ekranu w czternastokrokowym przewodniku tworzy czternaście przerwań, problemów z powiększeniem na urządzeniach mobilnych i nieaktualnych zasobów. Przechwytuj niejednoznaczne kroki; precyzyjne czasowniki niech niosą rutynowe.

Bliskie nietrafienia obejmują:

• Pełny pulpit nawigacyjny użyty do wyjaśnienia jednej ikony: przytnij do najmniejszego obszaru zachowującego orientację. Znacznik zagubiony w szerokim interfejsie nie zmniejsza wysiłku wyszukiwania.
• Zrzut ekranu jako dowód liczbowy: powtórz decydującą wartość w tekście lub tabeli. Piksele nie mogą być jedyną dostępną kopią twierdzenia.
• Zrzut ekranu menu przed jego otwarciem: przechwyć stan, który czytelnik musi sprawdzić. Zamknięty stan dowodzi, że produkt istnieje, ale nie, który wybór podjąć.
• Zrzut ekranu zawierający dane klientów: zastąp je stabilnymi danymi demonstracyjnymi przed przechwyceniem. Rozmycie jest łatwe do przeoczenia.
• Diagram udający zrzut ekranu: użyj diagramu dla abstrakcyjnych relacji. Realizm interfejsu pomaga tylko wtedy, gdy interfejs ma znaczenie.

Gdzie umieścić

Umieść figurę po akapicie lub kroku, który po raz pierwszy prosi czytelnika o spojrzenie na interfejs. W procedurze umieść ją po akcji, a przed stanem powodzenia lub rozwiązywaniem problemów, aby czytelnik zlokalizował kontrolkę przed weryfikacją wyniku.

Trzymaj obraz, podpis i legendę razem. Nagłówek może wprowadzać grupę, ale inny akapit, wyróżnienie, reklama lub podział strony nie mogą oddzielać przechwycenia od ponumerowanych wyjaśnień. Podpis identyfikuje cały ekran i kontekst; nie zawiera instrukcji należącej do prozy ani nie zastępuje legendy.

Nie umieszczaj obok siebie dwóch zrzutów ekranu na pełną szerokość. Wstaw wyjaśnienie, które je rozróżnia, lub stwórz jedną oznaczoną kompozycję porównawczą, gdy oba stany muszą być oceniane razem. Trzymaj zrzuty ekranu z dala od niezwiązanych wezwań do działania, gęstych tabel i galerii.

Powtarzaj element tylko wtedy, gdy każde wystąpienie odpowiada na inne pytanie przestrzenne. Preferuj jedną skupioną figurę; w przeciwnym razie nadaj różnym przycięciom odrębne nazwy plików i cele.

Anatomia

Przechwycenie anatomiczne pokazuje widoczne i tekstowe części jednego kompletnego elementu. Etykiety wyjaśniające pozostają w renderowanej legendzie, a nie stają się częścią obrazu źródłowego.

Renderowana legenda

1. Granica kontekstu: Zawiera wystarczająco dużo otaczającego interfejsu, aby zidentyfikować stronę i lokalizację, ale wyklucza niezwiązaną nawigację i pustą przestrzeń.
2. Ponumerowany znacznik: Używa kontrastowego koła i liczby całkowitej, nie tylko koloru, aby połączyć obszar z wpisem w legendzie.
3. Obszar docelowy: Zaznacza najmniejszą kompletną kontrolkę, wartość lub stan potrzebny do wyjaśnienia; nigdy nie zakrywa etykiety celu.
4. Punkt orientacyjny: Zachowuje jeden stabilny nagłówek, zakładkę lub etykietę panelu, aby czytelnik mógł znaleźć ten sam obszar w działającym produkcie.
5. Podpis: Nazywa ekran, stan i scenariusz w widocznym tekście pod obrazem.
6. Legenda: Używa uporządkowanej listy, której numery dokładnie pasują do znaczników, a wpisy wyjaśniają znaczenie, nie tylko wygląd.

Numery znaczników zaczynają się od 1 i podążają za kolejnością legendy. Używaj od dwóch do sześciu na obraz; jeden wystarcza dla trudnego celu, podczas gdy więcej niż sześć zwykle sygnalizuje zbyt szerokie przechwycenie.

Przykłady projektowe

Warianty wspierane zmieniają przycięcie i rzutnię, a nie politykę adnotacji. Każdy wariant używa danych demonstracyjnych, ponumerowanych znaczników na obrazie, zewnętrznej legendy tekstowej i widocznego podpisu.

Skoncentrowana kontrolka: Preferowana dla pojedynczej niejednoznacznej akcji. Zachowaj jedną etykietę orientacyjną, aby przycięcie nie stało się anonimowym prostokątem.

Stan przepływu pracy: Użyj, gdy ważna jest relacja między polem wejściowym, statusem a wynikiem. Trzymaj niezwiązaną nawigację globalną poza kadrem.

URL w kontekście: Jedyny standardowy wariant obejmujący elementy przeglądarki, czyli zakładki, pasek adresu i kontrolki samej przeglądarki. Uwzględnij tylko pasek adresu i niezbędny wskaźnik uprawnienia lub bezpieczeństwa.

Stan mobilny: Przechwyć rzeczywisty wąski układ, gdy interakcja zmienia się na szerokości mobilnej. Nie pomniejszaj szerokiego ekranu komputerowego i nie nazywaj go przykładem mobilnym.

Parametry

Parametry stanowią przenośny kontrakt treści. Wartości wizualne, takie jak kolor znacznika, grubość obramowania i typografia podpisu, należą do renderera i nie są polami autora.

screenId identyfikuje powierzchnię produktu niezależnie od nazwy pliku, dzięki czemu wydanie może znaleźć różne przycięcia content-freshness-audit. Plik alt.yaml pozostaje prosty: jedna nazwa pliku, po której następuje złożony ciąg tekstu alternatywnego.

Składnia i przykłady kodu

Każda notacja zachowuje te same metadane, podpis, znaczniki i kolejność czytania obraz–podpis–legenda.

Przenośna dyrektywa 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"}
Audyt aktualności treści przefiltrowany do jednego śledzonego adresu URL.

1. **Śledzony URL:** Potwierdza, którą stronę audyt ocenia.
2. **Filtr statusu:** Ogranicza wyniki do stron oczekujących na przegląd.
3. **Data wyniku:** Pokazuje, kiedy dane audytu zostały odświeżone.
:::

Adapter rozwiązuje alt z pliku alt.yaml w folderze. Brak klucza nazwy pliku jest błędem publikacji, a nie pozwoleniem na skopiowanie podpisu.

Mapowanie 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" >}}
Audyt aktualności treści przefiltrowany do jednego śledzonego adresu URL.

1. **Śledzony URL:** Potwierdza, którą stronę audyt ocenia.
2. **Filtr statusu:** Ogranicza wyniki do stron oczekujących na przegląd.
3. **Data wyniku:** Pokazuje, kiedy dane audytu zostały odświeżone.
{{< /annotated-screenshot >}}

Jest to kontrakt adaptera, a nie zarejestrowany shortcode. Dopóki nie istnieje zatwierdzony renderer i zasób, używaj ustalonego potoku semantic-figure lub pozostaw zalecany komentarz przechwycenia. Nie zastępuj rendererem, który pomija legendę lub pola aktualności.

Blok lub shortcode WordPress

[annotated_screenshot src="workflow-state.webp" viewport="1440" density="2x" screen_id="content-freshness-audit" capture_date="2026-08-27"]
[caption]Audyt aktualności treści przefiltrowany do jednego śledzonego adresu URL.[/caption]
[marker number="1" label="Tracked URL"]Potwierdza, którą stronę audyt ocenia.[/marker]
[marker number="2" label="Status filter"]Ogranicza wyniki do stron oczekujących na przegląd.[/marker]
[marker number="3" label="Result date"]Pokazuje, kiedy dane audytu zostały odświeżone.[/marker]
[/annotated_screenshot]

Blok WordPress może udostępniać pola jako kontrolki, ale musi przechowywać opisy znaczników jako tekst.

Przykłady

Dobrze: jeden niejednoznaczny stan, trzy użyteczne znaczniki

Przegląd aktualności treści dla demo.example/pricing/.

1. Śledzony URL: Weryfikuje, że wynik należy do strony z cenami wybranej w instrukcji.
2. Wymaga przeglądu: Identyfikuje dokładny filtr, który usuwa aktualne strony z kolejki roboczej.
3. Ostatnio odświeżone: Zapobiega traktowaniu starego wyniku audytu jako bieżącej diagnozy przez redaktora.

To działa, ponieważ każdy znacznik odpowiada na decyzję, przycięcie zachowuje orientację, a legenda wyjaśnia konsekwencje niewidoczne w pikselach. Domena demonstracyjna jest wyraźnie nie-danymi klienta.

Źle: oznakowany plakat produktu

Zła wersja wyjaśnia cały pulpit nawigacyjny naraz. Osiem strzałek krzyżuje się, etykiety zasłaniają kontrolki, a wbudowana promocja nie daje żadnej akcji. Zakładki przeglądarki stwarzają ryzyko prywatności, nazwy klientów powodują niepewność co do zgody, brak identyfikatora ekranu wspiera aktualizacje, a skalowanie mobilne sprawia, że cele są nieczytelne.

Napraw to, wybierając jedno zadanie, używając zatwierdzonych danych demonstracyjnych, przycinając do panelu i pozostawiając tylko niezbędne znaczniki. Przenieś wyjaśnienia do legendy tekstowej, dodaj kontekstowy tekst alternatywny i zapisz identyfikator ekranu oraz datę.

Znaczniki schematu i dostępność

Zrzut ekranu z adnotacjami nie ma specjalnego typu Schema.org. Może wypełniać właściwość image w Article lub ImageObject z dokładnym contentUrl, podpisem, szerokością i wysokością. Nie wymyślaj właściwości znaczników; legenda pozostaje widoczna.

Używaj natywnej semantyki figure: jeden <figure> zawierający <img>, <figcaption> i uporządkowaną legendę. Podpis nazywa cały ekran i stan. Atrybut alt obrazu opisuje, co obraz pokazuje w tym kontekście; nie powinien zaczynać się od „zrzut ekranu”, ponieważ element obrazu już się sam anonsuje. Legenda dostarcza szczegółowych wyjaśnień, więc powtarzanie wszystkich sześciu wpisów w tekście alternatywnym tworzy długie, zduplikowane ogłoszenie.

Celuj w 80–180 znaków, z maksimum 250. Nazwij obszar produktu, stan i oznaczony cel: „Audyt aktualności treści przefiltrowany do jednego śledzonego adresu URL, ze znacznikami na filtrze statusu i dacie ostatniego odświeżenia.” Nie transkrybuj interfejsu, nie upychaj słów kluczowych ani nie używaj nazwy pliku. Ten informacyjny obraz zazwyczaj wymaga niepustego tekstu alternatywnego.

Numery znaczników muszą być czytelne bez koloru. Używaj wysokiego kontrastu zarówno na jasnych, jak i ciemnych obszarach interfejsu, zachowuj spójny rozmiar wizualny i nie zakrywaj etykiet ani wartości. Legenda używa uporządkowanej listy w normalnej kolejności dokumentu; unikaj ról ARIA (Accessible Rich Internet Applications), które zamieniają treść statyczną w alert lub interaktywny widżet. Relacja aria-describedby jest opcjonalna tylko wtedy, gdy testy pokazują, że poprawia nawigację bez powodowania dwukrotnego odczytu widocznej legendy.

Przy wąskich szerokościach responsywny design musi zachować znaczenie. Skaluj szeroki obraz tylko wtedy, gdy znaczniki i cele pozostają czytelne; w przeciwnym razie zapewnij skupione przycięcie lub prawdziwe przechwycenie mobilne. Nigdy nie powoduj poziomego przewijania na poziomie strony ani nie wymagaj powiększenia. Podpis i legenda zawijają się poniżej.

Zasady dotyczące treści i przechwytywania

Spójność sprawia, że zrzuty ekranu są porównywalne i wymienne. Przechwytuj ekrany produktu na komputerze przy stałej rzutni 1440 CSS pikseli i gęstości 2x, często nazywanej gęstością Retina, która rejestruje dwa piksele urządzenia na każdy piksel CSS. Przechwytuj rzeczywiste stany mobilne przy 390 CSS pikselach i gęstości 2x. Używaj zatwierdzonego motywu produktu konsekwentnie w ramach przewodnika; nie przełączaj między trybem jasnym a ciemnym, chyba że różnica motywu jest tematem.

Używaj wyłącznie danych demonstracyjnych: żadnych prawdziwych nazwisk, adresów e-mail, domen, danych rozliczeniowych, tokenów, promptów ani wyników. Przed przechwyceniem sprawdź paski boczne, ostatnie elementy, autouzupełnianie, powiadomienia i awatary.

Wyklucz elementy przeglądarki, chyba że adres URL, uprawnienie lub kontrolka przeglądarki są sednem. Ukryj zakładki, zakładki przeglądarki, rozszerzenia, pobrane pliki, profile i powiadomienia. Przechwytuj po załadowaniu strony; zamknij nieistotne podpowiedzi i pokazuj kursor tylko wtedy, gdy jest niezbędny.

Przechowuj źródłowe przechwycenia w cdn-assets/seo-playbook/elements/annotated-screenshot/. Używaj nazw w małych literach z myślnikami, opartych na ekranie i stanie, np. freshness-audit-needs-review.webp; nigdy nie używaj final, new, v2, imienia osoby ani daty jako nazwy pliku. Stabilna nazwa pozwala na wymianę zasobu bez przepisywania każdej strony. Używaj WebP do standardowego dostarczania, najlepiej w ustawieniu bezstratnym, gdy mały tekst interfejsu musi pozostać ostry. Używaj PNG tylko wtedy, gdy potok produkcyjny wykazuje, że WebP szkodzi tekstowi lub przezroczystości. Nie używaj JPEG do przechwytywania interfejsów z drobnym tekstem i ostrymi krawędziami.

Renderuj w maksymalnej szerokości 1600 CSS pikseli; źródło 1440 pikseli w 2x może mieć 2880 fizycznych pikseli. Zachowaj proporcje i wymiary wewnętrzne. Optymalizacja wspiera SEO obrazów , ale kompresja nie może rozmazywać tekstu ani znaczników.

Każdy folder zasobów zawiera alt.yaml z jednym wpisem na nazwę pliku:

freshness-audit-needs-review.webp: >-
  AmICited content freshness audit filtered to one tracked URL, with numbered markers on the review status and last-refreshed date.

Klucz dokładnie pasuje do nazwy pliku; wartość to tekst alternatywny, a nie podpis ani legenda. Symbole zastępcze, standardowe pulpity nawigacyjne i nieistniejące odnośniki do obrazów są zabronione. Oczekujące przechwycenia używają tylko komentarza SCREENSHOT i screenshotsPending = true.

Zasady aktualności i ponownego przechwytywania

Zrzuty ekranu starzeją się po cichu, gdy przedstawiona kontrolka zmienia położenie lub nazwę. Traktuj każde przechwycenie jako widok zarejestrowanego ekranu: screenId łączy zmiany produktu z zasobami, a data przechwycenia identyfikuje zarejestrowany stan.

Zmiana interfejsu wyzwala ponowne przechwycenie, gdy przenosi lub zmienia nazwę oznaczonego celu, zmienia stan wyjaśniany w legendzie, zmienia ścieżkę nawigacji potrzebną do dotarcia do niego, usuwa zachowany punkt orientacyjny lub sprawia, że stary obraz prawdopodobnie skieruje czytelnika do niewłaściwej kontrolki. Wykonaj ponowne przechwycenie kompletnego zestawu figur dla tego ekranu, w tym wariantów skupionych i mobilnych. Zmiana tokena koloru, dostosowanie odstępów lub dodanie niezwiązanej zawartości paska bocznego nie wymaga automatycznej wymiany, chyba że zrzut ekranu koliduje teraz widocznie z działającym doświadczeniem lub standardem dostępności.

Gdy ekran się zmienia, wyszukaj jego screenId, a następnie jego folder i nazwę pliku, aby znaleźć starsze użycia. Wymień stabilne pliki, przejrzyj alt.yaml i sprawdź każdą dotkniętą legendę. Nie zmieniaj nazw plików zastępczych, pozostawiając starsze odwołania.

Właściciel ekranu produktu sygnalizuje zmiany; właściciel treści akceptuje zamienniki. Wykonaj ponowne przechwycenie z tym samym zestawem demonstracyjnym, rzutnią, gęstością i motywem. Przeglądaj zrzuty ekranu podczas każdej istotnej odświeżenia strony.

Typy wpisów, które go używają

postTypes w frontmatter to zarejestrowane połączenie. Każdy typ używa tego samego kontraktu elementu, ale stosuje inny próg wymagania.

Studia przypadków wymagają dodatkowej granicy: albo uzyskaj wyraźną zgodę na pokazanie rzeczywistych informacji o kliencie, albo odbuduj interfejs z wyraźnie ujawnionymi danymi demonstracyjnymi i traktuj go jako ilustrację przepływu pracy, a nie dowód wyniku. Redakcja nie zastępuje zgody ani kontrolowanego zestawu.

Lista kontrolna QA

Recenzent sprawdza komunikację i ryzyko konserwacji przed wygładzeniem wizualnym.

• Cel: Figura rozwiązuje jedną niejednoznaczność przestrzenną lub udowadnia jedno widoczne twierdzenie interfejsu.
• Konieczność: Rutynowe kroki pozostają tekstem; strona nie przypisuje domyślnie jednego zrzutu ekranu do każdego kroku.
• Rzeczywisty stan: Przechwycenie pokazuje dokładnie otwarte menu, wybrany filtr, wynik lub błąd omawiany w treści.
• Dane demonstracyjne: Żadne dane klienta, pracownika, konta, przeglądarki, tokena, promptu ani rozliczeniowe nie są widoczne.
• Spójność przechwycenia: Rzutnia, gęstość 2x, motyw, stan interfejsu i reguła elementów przeglądarki są zgodne ze standardem.
• Skupione przycięcie: Wystarczająco dużo kontekstu pozostaje dla orientacji, ale niepowiązane obszary interfejsu nie konkurują z celem.
• Znaczniki: Jest od jednego do sześciu ciągłych numerów, każdy o wysokim kontraście, czytelny i poza etykietami i wartościami.
• Zewnętrzna legenda: Każdy znacznik ma jeden pasujący wpis na uporządkowanej liście w tekście strony; żadne sformułowanie legendy nie jest wbudowane w piksele.
• Podpis: Figura ma zwięzły widoczny podpis nazywający jej ekran, stan i scenariusz.
• Tekst alternatywny: Folder zawiera alt.yaml z dokładnym kluczem nazwy pliku i kontekstowym opisem w docelowym przedziale długości.
• Zachowanie na urządzeniach mobilnych: Cel i znaczniki pozostają czytelne bez poziomego przewijania na poziomie strony lub wymaganego powiększenia; w przeciwnym razie istnieje skupione przycięcie.
• Kontrakt pliku: Ścieżka, nazwa w małych literach z myślnikami, format, wymiary i rozmiar wewnętrzny są zgodne ze standardem dostarczania.
• Aktualność: screenId i data przechwycenia są zapisane, działający interfejs wciąż pasuje, a wszystkie odwołania można znaleźć przez wyszukiwanie tekstowe.
• Przenośność: Reprezentacje w Markdown, Hugo i WordPress zachowują ten sam zasób, podpis, kolejność znaczników i sformułowanie legendy.
• Brak uszkodzonego zasobu: Rzeczywista ścieżka obrazu pojawia się dopiero po istnieniu pliku; oczekujące przechwycenia pozostają komentarzami i zachowują screenshotsPending = true.

FAQ

Szablon academy renderuje pięć przeanalizowanych pytań zapisanych w [[faq]] frontmatter tej strony. Obejmują one częstotliwość zrzutów ekranu, zewnętrzne legendy, długość tekstu alternatywnego, wyzwalacze ponownego przechwycenia i wyjątek dotyczący elementów przeglądarki.