Sekcje zygzak — format, zasady i przykłady

Sekcje zygzak przedstawiają sekwencję równoległych funkcji jako powtarzane pary obrazu i tekstu, naprzemiennie zmieniając stronę wizualizacji na szerokich ekranach. Używaj tego wzorca, aby tworzyć wyraźne wizualne punkty kontrolne w przemyślanej historii produktu, a nie rozciągać krótką listę w długą stronę docelową.

Przedstawiony przykład pokazuje rytm, ale jego szare obszary to wyjaśniające elementy interfejsu w tej specyfikacji. W rzeczywistych instancjach muszą znajdować się prawdziwe, informacyjne wizualizacje.

Dlaczego ten element ma znaczenie

Długa strona stwarza problem nawigacji. Czytelnicy potrzebują punktów orientacyjnych, które informują ich, kiedy kończy się jedna idea, a zaczyna następna. Zygzak dostarcza tych punktów orientacyjnych poprzez powtarzalność: obraz, nagłówek, wyjaśnienie; następnie ta sama struktura z innym wyrównaniem na szerokim ekranie. Powtarzalna anatomia ułatwia zrozumienie każdej sekcji, podczas gdy naprzemienność zapobiega łączeniu się sąsiednich elementów w jedną kolumnę.

Korzyść psychologiczna jest najsilniejsza, gdy elementy są rzeczywiście równoległe. Czytelnik widzi pierwszą parę, uczy się wzorca i może skanować kolejne nagłówki oraz wizualizacje, zanim zdecyduje, gdzie zwolnić. Obraz zapewnia rozpoznanie; nagłówek nazywa możliwość; treść wyjaśnia jej konsekwencje. Naprzemienność dodaje wystarczająco dużo zmiany przestrzennej, aby zresetować uwagę bez zmiany modelu informacyjnego.

Ta korzyść ma swoje granice. Każda para zajmuje znaczną przestrzeń pionową, szczególnie na telefonie, gdzie kolumny układają się jedna pod drugą. Jeśli wyjaśnienie to tylko jedno zdanie, a obraz nie wnosi żadnych dowodów, wzorzec sprawia, że czytelnik przemierza więcej, nie ucząc się więcej. Dekoracyjna naprzemienność może również sprawiać wrażenie szablonu sprzedażowego, a nie przemyślanej sekwencji. Element zasługuje na swoje miejsce tylko wtedy, gdy każda wizualizacja pomaga czytelnikowi zrozumieć odrębną funkcję, stan, rezultat lub przepływ pracy.

Ekstrakcja maszynowa oznacza, że oprogramowanie może wyizolować jednostkę treści bez utraty kontekstu, który czyni ją dokładną. Dobrze napisany zygzak to zbiór jawnych elementów, z których każdy ma nagłówek, samodzielne wyjaśnienie, opis wizualny i opcjonalny link. Systemy wyszukiwania mogą wyodrębnić jeden element jako spójne stwierdzenie funkcji, ponieważ jego znaczenie nie zależy od bycia „tym po lewej". Kolejność źródłowa, a nie umiejscowienie CSS, ustala sekwencję.

Zastosuj zasady pisania elementów przed zasadami na tej stronie: najpierw napisz pełne wyjaśnienie, a następnie zastosuj typowany element w osobnym przebiegu strukturalnym. Jeśli ta strona określa węższe limity liczby elementów, wymagania dotyczące mediów, mapowanie treści lub ograniczenia zagnieżdżania, te szczegółowe zasady elementu mają pierwszeństwo.

Kiedy go używać

Użyj zygzaka, gdy wszystkie poniższe warunki są spełnione:

1. Strona ma od trzech do sześciu równoległych funkcji, możliwości, rezultatów lub nie-sekwencyjnych widoków przepływu pracy.
2. Każdy element ma rzeczywistą wizualizację, która wyjaśnia lub demonstruje jego temat.
3. Każdy element wymaga więcej wyjaśnienia, niż pozwala na to karta, ale mniej niż pełny, niezależny rozdział.
4. Czytelnicy odnoszą korzyść ze skanowania sekwencji przed przeczytaniem każdego szczegółu.
5. Kolejność jest pomocna, ale nie proceduralna; element pozostaje zrozumiały, jeśli zostanie wyodrębniony samodzielnie.

Silne zastosowania obejmują prezentację produktu z jednym widokiem interfejsu na możliwość, stronę rozwiązania łączącą każdy problem operacyjny z odpowiadającym mu przepływem pracy lub ultimate guide pokazujący kilka równoległych modeli. Wizualizacją może być zrzut ekranu, diagram, wykres lub zdjęcie, jeśli ten nośnik niesie informacje. Użyj adnotowanego zrzutu ekranu wewnątrz elementu, gdy surowy obraz interfejsu zmuszałby czytelników do szukania odpowiedniego elementu sterującego.

Bliskie chybienia są częste. Nie używaj zygzaka do ponumerowanych instrukcji: zmiana stron osłabia sygnał kierunkowy, którego potrzebują kroki. Nie używaj go do porównania, ponieważ naprzemienne produkty uniemożliwiają ocenę według kryteriów. Nie używaj go do dwunastu korzyści, z których każda wymaga jednego zdania; karty, punkty lub tabela podsumowująca lepiej wykorzystują przestrzeń. Nie używaj go do argumentacji, w której każda sekcja zależy od poprzedniego wniosku; ciągła proza i nagłówki zachowują tę logikę wyraźniej.

Najbardziej odkrywczym testem jest usunięcie obrazów. Jeśli pozostałe nagłówki tworzą spójny zestaw równorzędnych elementów, a każdy brakujący obraz pozostawia znaczącą lukę dowodową, zygzak jest prawdopodobnie odpowiedni. Jeśli tekst staje się ogólną listą korzyści i nic ważnego nie zostaje utracone, obrazy były dekoracją, a element jest nadużyciem.

Gdzie go umieścić

Umieść zygzak po tym, jak strona zdefiniowała wspólny problem i nazwała grupę możliwości. Czytelnicy powinni wiedzieć, dlaczego sekwencja ma znaczenie, zanim napotkają pierwszy duży obraz. Na stronie produktu lub rozwiązania jest to zazwyczaj po hero, bezpośredniej odpowiedzi lub krótkim przeglądzie, a przed dowodami, szczegółowymi specyfikacjami, cenami lub końcowym wezwaniem do działania.

Wprowadź całą sekwencję nagłówkiem H2 i jednym krótkim akapitem ramowym. Nie dodawaj osobnego H2 przed każdym elementem; każdy tytuł elementu jest podrzędnym nagłówkiem w ramach wspólnej sekcji. Zachowaj wszystkie elementy w ciągłości, aby naprzemienny rytm komunikował jeden zbiór. Jeśli długa kwalifikacja musi przerwać sekwencję, zakończ zygzak i rozpocznij nową sekcję po nim.

Zygzak nie może znajdować się bezpośrednio obok innej dużej sekwencji wizualnej, galerii obrazów, suwaka produktów, osi czasu lub powtarzanej siatki kart. Ułożone obok siebie wzorce wyświetlania powodują zmęczenie wizualne i zaciemniają, który zbiór jest główny. Nie może oddzielać twierdzenia od jego dowodu, ostrzeżenia od instrukcji, którą kwalifikuje, ani ceny od warunków zakupu. Nie może pojawiać się wewnątrz uporządkowanej listy, komórki tabeli, panelu akordeonu ani innego zygzaka.

Domyślnie używaj jednego zygzaka na stronę. Drugi jest akceptowalny tylko wtedy, gdy dwa zbiory odpowiadają na wyraźnie różne pytania, używają oddzielnych nagłówków sekcji i mają między sobą prozę lub dowody. Nigdy nie zmieniaj naprzemiennie wyrównania niepowiązanych sekcji strony tylko po to, by imitować wzorzec; granica zbioru jest częścią znaczenia elementu.

Anatomia

1. Nagłówek zbioru: Nazywa wspólne pytanie lub kategorię, której dotyczy każdy element.
2. Wprowadzenie do zbioru: Wyjaśnia, dlaczego elementy należą do siebie i co czytelnik powinien zauważyć.
3. Kontener elementu: Utrzymuje jeden obraz i jeden region tekstu w sposób programowy i wizualny powiązane.
4. Nagłówek elementu: Nazywa konkretną funkcję, rezultat lub widok w konkretnym języku.
5. Treść elementu: Wyjaśnia, co element robi, dlaczego ma znaczenie oraz wszelkie granice potrzebne do prawidłowej interpretacji.
6. Informacyjna wizualizacja: Demonstruje ten sam temat co tekst i ma użyteczny tekst alternatywny lub dostępny podpis.
7. Opcjonalny link elementu: Oferuje jedno odpowiednie szczegółowe omówienie lub działanie po wyjaśnieniu.
8. Naprzemienność prezentacji: Zmienia stronę wizualizacji na szerokich ekranach bez zmiany kolejności DOM ani znaczenia.

Odstępy, kolor, zaokrąglenie rogów, przycięcie obrazu i punkt przerwania należą do mechanizmu renderującego. Autorzy dostarczają semantyczną kolejność, kompletną treść i dostępne informacje o mediach.

Przykłady projektowe

Poniżej przedstawiono obsługiwane warianty. Dzielą one jedną umowę treściową; zmienia się tylko początkowe wyrównanie, traktowanie wizualizacji lub zachowanie na różnych widocznych obszarach.

Media-first: Domyślny wariant na szerokim ekranie zaczyna się od pierwszej wizualizacji po lewej. Użyj go, gdy pierwsza wizualizacja zapewnia natychmiastowe rozpoznanie, a otaczająca strona nie umieszcza już dominującego obrazu po tej stronie.

Text-first: Zaczyna się od tekstu po lewej, a następnie naprzemiennie. Użyj go, gdy początkowe wyjaśnienie musi ustalić znaczenie przed pierwszym obrazem lub gdy tworzy to lepszą równowagę z poprzedzającą sekcją.

Contained-media: Umieszcza zrzuty ekranu lub diagramy w spójnej ramce. Użyj go do interfejsów produktów, wykresów i diagramów, których krawędzie i etykiety mają znaczenie. Wszystkie elementy używają tej samej logiki ramki, nawet gdy źródłowe obrazy mają różne wymiary.

Edge-media: Pozwala zdjęciom lub ilustracjom niebędącym interfejsem wypełniać ich regiony. Kadrowanie może zmieniać się responsywnie, ale nie może usuwać tematu ani żadnych informacji opisanych w tekście.

Mobile-stacked: Usuwa naprzemienność lewo-prawo i używa jednej spójnej kolejności czytania dla każdego elementu. Jest to wymagane zachowanie responsywne, a nie opcjonalny wariant redakcyjny.

Nie ma wariantu tylko-tekstowego, autoodtwarzania ani karuzeli. Usunięcie znaczących mediów usuwa powód do używania zygzaka; ruch i ukryte slajdy wprowadzają różne umowy interakcji.

Parametry

Treść nadrzędna mapuje swój pierwszy nagłówek na title, następujący po nim akapit na intro, a każdy zagnieżdżony element na jedną powtarzaną parę. Pierwszy nagłówek elementu mapuje na item.title; pozostała treść mapuje na item.content. Odniesienia do mediów i tekst alternatywny pozostają przy elemencie, ponieważ opisują tylko ten element. Autorzy nie mogą ustawiać strony lewej ani prawej dla poszczególnych elementów: mechanizm renderujący wyprowadza wyrównanie na szerokim ekranie z pozycji źródłowej i parametru start.

Składnia i przykłady kodu

Wszystkie adaptery muszą zachować jeden tytuł nadrzędny, jedno wprowadzenie, uporządkowane elementy i stabilną kolejność źródłową. Przykłady skracają zbiór do trzech elementów, czyli minimalnej prawidłowej liczby.

Przenośna dyrektywa Markdown

:::zigzag{start=media mediaFit=contain}
## Zamień decyzje dotyczące treści w powtarzalny system

Przejdź od kompletnego inwentarza do priorytetyzowanej produkcji i mierzonych wyników.

::item{media="inventory-view" alt="Inwentarz treści pogrupowany według statusu i właściciela."}
### Zobacz cały inwentarz

Zgromadź każdy adres URL, właściciela, status i sygnał wydajności w jednym widoku, zanim zdecydujesz, co zmienić.
::

::item{media="priority-view" alt="Kolejka priorytetów uporządkowana według wartości biznesowej i nakładu pracy."}
### Priorytetyzuj wartościową pracę

Uporządkuj możliwości według wartości biznesowej i nakładu pracy, aby zespół mógł działać na podstawie przemyślanej kolejki.
::

::item{media="impact-view" alt="Widok raportowania z adnotacjami publikacji obok zmian wydajności."}
### Zmierz wpływ publikacji

Połącz każdą zmianę z adnotacją i stabilnym oknem raportowania, aby późniejsze zmiany można było badać.
::
:::

Te identyfikatory dokumentują przenośną umowę; adapter produkcyjny rozpoznaje każdy z nich jako zatwierdzony zasób. Autorzy muszą potwierdzić istnienie rozpoznanego zasobu przed publikacją.

Shortcode Hugo

{{< zigzag title="Turn content decisions into a repeatable system" intro="Move from a complete inventory to prioritized production and measured results." start="media" mediaFit="contain" >}}
  {{< zigzag-item title="See the whole inventory" media="inventory-view" alt="Content inventory grouped by status and owner." >}}
  Bring every URL, owner, status, and performance signal into one view before deciding what to change.
  {{< /zigzag-item >}}
  {{< zigzag-item title="Prioritize valuable work" media="priority-view" alt="Priority queue ordered by business value and effort." >}}
  Order opportunities by business value and effort so the team can act on a reasoned queue.
  {{< /zigzag-item >}}
  {{< zigzag-item title="Measure published impact" media="impact-view" alt="Reporting view with publication annotations beside performance changes." >}}
  Connect each change to an annotation and a stable reporting window so later movement can be investigated.
  {{< /zigzag-item >}}
{{< /zigzag >}}

Adapter Hugo używa tylko nazwanych parametrów. Wyprowadza klasy naprzemienne z pozycji elementu i nie może przepisywać kolejności źródłowej, aby osiągnąć wizualny wzorzec.

Blok WordPress

<!-- wp:amicited/zigzag {"title":"Turn content decisions into a repeatable system","intro":"Move from a complete inventory to prioritized production and measured results.","start":"media","mediaFit":"contain"} -->
  <!-- wp:amicited/zigzag-item {"title":"See the whole inventory","media":"inventory-view","alt":"Content inventory grouped by status and owner."} -->
  <p>Bring every URL, owner, status, and performance signal into one view before deciding what to change.</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"Prioritize valuable work","media":"priority-view","alt":"Priority queue ordered by business value and effort."} -->
  <p>Order opportunities by business value and effort so the team can act on a reasoned queue.</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"Measure published impact","media":"impact-view","alt":"Reporting view with publication annotations beside performance changes."} -->
  <p>Connect each change to an annotation and a stable reporting window so later movement can be investigated.</p>
  <!-- /wp:amicited/zigzag-item -->
<!-- /wp:amicited/zigzag -->

WordPress powinien ograniczać wewnętrzne bloki do elementów zygzaka i udostępniać zmianę kolejności bez oferowania ręcznych kontrolek lewo/prawo. Podgląd edytora i strona frontowa muszą używać tej samej kolejności elementów.

Przykłady

Dobry przykład

Nagłówek: Zrozum każdy etap odświeżania treści

1. Znajdź spadające strony — Wykres trendów pokazuje ten sam URL w porównywalnych okresach. Tekst wyjaśnia, jak odróżnić trwały spadek od zwykłych tygodniowych wahań.
2. Zdiagnozuj przyczynę — Widok zapytań i stron pokazuje, które tematy straciły widoczność. Tekst oddziela dryf intencji, silniejszych konkurentów, nieaktualne fakty i błędy techniczne.
3. Zarejestruj interwencję — Widok adnotacji pokazuje datę publikacji i dokładną zmianę. Tekst wyjaśnia, dlaczego odnotowana interwencja czyni późniejszy pomiar wiarygodnym.
4. Przejrzyj rezultat — Widok raportowania pokazuje uzgodnione okno obserwacji. Tekst określa, co każde kolejno uruchamia: sukces, brak zmiany i dalszy spadek.

To działa, ponieważ cztery elementy opisują równoległe widoki w ramach jednego systemu odświeżania, każda wizualizacja dostarcza dowodów, których proza nie może skutecznie odtworzyć, a same nagłówki dają czytelnikom użyteczny przegląd. Kolejność wspiera historię, nie zamieniając elementu w instrukcje.

Zły przykład

Nagłówek: Dlaczego nasza platforma jest lepsza

1. Łatwe — Dekoracyjne zdjęcie uśmiechniętej osoby towarzyszy „Nasza platforma jest łatwa w użyciu."
2. Potężne — Dekoracyjny abstrakcyjny kształt towarzyszy „Osiągaj potężne wyniki szybciej."
3. Elastyczne — Zdjęcie stockowe towarzyszy „Elastyczne funkcje pasują do każdej firmy."
4. Skontaktuj się z nami — Duży formularz wymaga siedmiu pól.
5. Zaufane — Pasek logo pojawia się bez wyjaśnienia, kogo logo reprezentują.
6. Więcej funkcji — Osiem niepowiązanych punktów wypełnia wysoki ostatni wiersz.

To nie działa, ponieważ twierdzenia są ogólne, obrazy nie niosą informacji, a elementy pełnią różne funkcje. Osadzony formularz przerywa zbiór, a ostatni element ukrywa listę w formacie przeznaczonym do jednego skoncentrowanego wyjaśnienia. Strona staje się długa, nie stając się jaśniejsza. Zastąp pierwsze trzy twierdzenia prozą popartą dowodami lub zwartymi kartami korzyści, umieść formularz po sekcji wyjaśniającej, zidentyfikuj dowód zaufania i nadaj pozostałym funkcjom odpowiednią listę lub tabelę.

Znaczniki schema i dostępność

Zygzak to wzorzec prezentacji, a nie typ Schema.org. Jego treść pozostaje częścią zawierającego go Article lub WebPage, a fakty produktowe mogą wnosić wkład do prawidłowego znacznika Product lub SoftwareApplication tylko wtedy, gdy strona i fakty niezależnie spełniają te wymagania. Nie emituj ItemList tylko dlatego, że element się powtarza, i nigdy nie emituj HowTo, gdy elementy są równoległymi funkcjami, a nie wymaganymi krokami.

Użyj sekcji z dostępnym nagłówkiem dla zbioru i semantycznej sekcji lub artykułu dla każdego elementu. Zachowaj logiczną i identyczną kolejność DOM we wszystkich punktach przerwania. Kolejność CSS grid może zmieniać to, gdzie obraz pojawia się wizualnie, ale kolejność dla klawiatury, czytnika ekranu, kopiowania-wklejania i ekstrakcji wyszukiwarki musi pozostać spójna. Nigdy nie pisz „jak pokazano po lewej" lub „na obrazie po prawej", ponieważ te pozycje odwracają się lub znikają na mniejszych ekranach.

Każdy informacyjny obraz potrzebuje tekstu alternatywnego, który określa, co obraz wnosi w kontekście. Nie powtarzaj sąsiedniego akapitu słowo w słowo. Jeśli złożony wykres, interfejs lub diagram nie może być opisany zwięźle, dodaj widoczny podpis lub pobliską długą deskrypcję. Obrazy dekoracyjne są odradzane, ponieważ każdy element musi uzasadniać swoją wizualizację; jeśli mechanizm renderujący dodaje dekoracyjne ozdobniki, otrzymują one pusty tekst alternatywny.

Nagłówki muszą podążać za hierarchią strony, a nie być zakodowane na stałe do rozmiaru wizualnego. Linki elementów potrzebują opisowych etykiet, takich jak „Przejrzyj przepływ pracy inwentarza", a nie powtarzanego tekstu „Dowiedz się więcej". Nie rób całego wiersza tekstu i obrazu jednym dużym linkiem: zagnieżdżone linki i niejasne regiony aktywacji powodują problemy z klawiaturą i czytnikiem ekranu. Szanuj preferencje ograniczonego ruchu i nigdy nie wymagaj animacji wyzwalanej przewijaniem, aby odkryć treść.

Zasady pisania

Napisz tytuł zbioru w 3–12 słowach, a jego wprowadzenie w 20–60 słowach. Każdy tytuł elementu używa 3–9 konkretnych słów, a każda treść 40–120 słów. Od trzech do sześciu elementów to obsługiwany zakres. Te limity istnieją, ponieważ element potrzebuje wystarczającej treści, aby uzasadnić duże regiony wizualne, nie zamieniając każdej pary w niezależny esej.

Spraw, aby nagłówki elementów były gramatycznie równoległe. Jeśli pierwszy zaczyna się od czasownika — „Znajdź spadające strony" — pozostałe również powinny. Każda treść powinna odpowiadać na trzy pytania w naturalnej kolejności: co to jest, dlaczego ma to znaczenie i co czytelnik powinien zauważyć na wizualizacji? Używaj konkretnych rzeczowników, etykiet interfejsu, warunków i konsekwencji. Unikaj niekwalifikowanych superlatyw, takich jak „najlepszy", „potężny" lub „rewolucyjny".

Utrzymuj zrównoważoną głębię. Jeden 110-wyrazowy element obok dwóch 40-wyrazowych sygnalizuje, że zbiór może mieszać poziomy abstrakcji. Podziel obszerny element, połącz płytkie elementy lub przenieś szczegóły na połączoną stronę. Linki są opcjonalne i ograniczone do jednego na element, aby sekwencja pozostała wyjaśniająca, a nie stała się katalogiem nawigacyjnym.

Nigdy nie umieszczaj w elemencie zygzaka:

• Formularza, zapisu do newslettera, tabeli cenowej, oferty ani głównego wezwania do działania.
• Tabeli porównawczej, akordeonu, zakładek, karuzeli, galerii, odtwarzacza wideo ani innego zygzaka.
• Ponumerowanej procedury, której kolejność jest wymagana do osiągnięcia sukcesu.
• Kilku niepowiązanych punktów dotyczących funkcji dodanych w celu wypełnienia wysokości wizualnej.
• Niepopartego twierdzenia, fragmentu referencji ani logo bez źródła i kontekstu.
• Obrazu dodanego tylko dlatego, że układ ma miejsce na obraz.

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

Frontmatter postTypes jest źródłem prawdy dla tej relacji. Zygzak jest opcjonalny w każdym wymienionym typie i powinien pojawiać się tylko wtedy, gdy strona ma kwalifikującą się równoległą sekwencję wizualną.

Lista kontrolna QA

• Sekwencja zawiera od trzech do sześciu rzeczywiście równoległych elementów.
• Jeden H2 i krótkie wprowadzenie wyjaśniają, dlaczego elementy należą do siebie.
• Każdy element ma konkretny, gramatycznie równoległy nagłówek.
• Każda treść mieści się w 40–120 słowach i ma porównywalną głębię.
• Każda wizualizacja istnieje, wnosi informacje i pasuje do swojego elementu.
• Tekst alternatywny lub dostępny podpis przekazuje użyteczne informacje każdej wizualizacji.
• Domyślna kolejność DOM jest logiczna bez żadnego CSS ani obrazów.
• Naprzemienność na szerokim ekranie jest wyprowadzana automatycznie; autorzy nie przypisywali dowolnych stron.
• Wersja mobilna używa jednej spójnej kolejności ułożenia bez przewijania poziomego.
• Żaden tekst nie zależy od lewej, prawej ani innej pozycji zależnej od widocznego obszaru.
• Żaden element nie zawiera formularzy, tabel, zagnieżdżonych komponentów wyświetlania ani kroków proceduralnych.
• Zbiór nie sąsiaduje z innym dużym powtarzalnym wzorcem wizualnym.
• Linki są opisowe i ograniczone do jednego opcjonalnego linku na element.
• Żaden typ schema nie jest wnioskowany wyłącznie na podstawie naprzemiennego układu.
• Strona pozostaje użyteczna, gdy animacja jest wyłączona, a obrazy ładują się wolno.
• Reprezentacje Markdown, Hugo i WordPress zachowują te same pola i kolejność elementów.

Używaj sekcji zygzak, gdy równoległe pomysły zasługują na równoległe dowody. Naprzemienność powinna pomagać czytelnikom zauważyć każdy spójny element; nigdy nie powinna być powodem, dla którego element istnieje.