Zigzag sekce — Formát, pravidla a příklady

Zigzag sekce představují sekvenci paralelních funkcí jako opakované dvojice obrázku a textu, přičemž se vizuál na širokých obrazovkách střídá z jedné strany na druhou. Použijte tento vzor k vytvoření jasných vizuálních kontrolních bodů v promyšleném příběhu o produktu, nikoli k natažení krátkého seznamu na dlouhou vstupní stránku.

Vykreslený příklad ukazuje rytmus, ale jeho šedé oblasti jsou v této specifikaci vysvětlujícím UI. Produkční instance musí obsahovat skutečné, informativní vizuály.

Proč na tomto elementu záleží

Dlouhá stránka vytváří problém s navigací. Čtenáři potřebují orientační body, které jim řeknou, kde jedna myšlenka končí a druhá začíná. Zigzag tyto orientační body poskytuje prostřednictvím opakování: obrázek, nadpis, vysvětlení; poté stejná struktura s jiným zarovnáním na širokých obrazovkách. Opakovaná anatomie usnadňuje pochopení každé sekce, zatímco střídání zabraňuje splývání sousedních položek do jednoho sloupce.

Psychologický přínos je nejsilnější, když jsou položky skutečně paralelní. Čtenář uvidí první dvojici, naučí se vzor a může proskenovat další nadpisy a vizuály, než se rozhodne, kde zpomalit. Vizuál poskytuje rozpoznání; nadpis pojmenovává schopnost; tělo vysvětluje její důsledek. Střídání přidává dostatek prostorové změny k obnovení pozornosti, aniž by měnilo informační model.

Tento přínos má svůj limit. Každá dvojice spotřebovává značný vertikální prostor, zejména na telefonu, kde se sloupce skládají pod sebe. Pokud je vysvětlení jen jedna věta a vizuál nepřináší žádný důkaz, vzor nutí čtenáře cestovat dál, aniž by se dozvěděl více. Dekorativní střídání může také působit jako prodejní šablona spíše než promyšlená sekvence. Element si zaslouží svůj prostor pouze tehdy, když každý vizuál pomáhá čtenáři pochopit konkrétní funkci, stav, výsledek nebo pracovní postup.

Strojová vytěžitelnost znamená, že software dokáže izolovat obsahovou jednotku, aniž by ztratil kontext, který ji činí přesnou. Dobře napsaný zigzag je sbírka explicitních položek, z nichž každá má nadpis, samostatné vysvětlení, popis vizuálu a volitelný odkaz. Vyhledávací systémy mohou extrahovat jednu položku jako soudržné prohlášení o funkci, protože její význam nezávisí na tom, že je „ta vlevo". Pořadí určuje zdrojové pořadí, nikoli CSS umístění.

Aplikujte pravidla pro psaní elementů před pravidly na této stránce: nejprve vytvořte úplné vysvětlení a typový element aplikujte v samostatném strukturním průchodu. Pokud tato stránka stanovuje užší počty položek, požadavky na média, mapování těla nebo omezení vnoření, mají tato pravidla specifická pro element přednost.

Kdy jej použít

Použijte zigzag, když jsou splněny všechny tyto podmínky:

1. Stránka má tři až šest paralelních funkcí, schopností, výsledků nebo ne-sekvenčních pohledů na pracovní postup.
2. Každá položka má skutečný vizuál, který vysvětluje nebo demonstruje její předmět.
3. Každá položka potřebuje více vysvětlení, než umožňuje karta, ale méně než celá samostatná kapitola.
4. Čtenáři těží z možnosti proskenovat sekvenci před čtením všech podrobností.
5. Pořadí je užitečné, ale není procedurální; položka zůstává srozumitelná, pokud je extrahována samostatně.

Silné použití zahrnuje prohlídku produktu s jedním pohledem na rozhraní na schopnost, stránku řešení párující každý provozní problém s odpovídajícím pracovním postupem nebo ultimátního průvodce předvádějícího několik paralelních modelů. Vizuálem může být snímek obrazovky, diagram, graf nebo fotografie, pokud toto médium nese informaci. Použijte anotovaný snímek obrazovky uvnitř položky, když by surový záběr rozhraní nutil čtenáře hledat příslušný ovládací prvek.

Běžné jsou případy, které se blíží, ale nehodí se. Nepoužívejte zigzag pro číslované instrukce: měnící se strany oslabují směrový signál, který kroky potřebují. Nepoužívejte jej pro srovnání, protože střídání produktů znemožňuje hodnocení po jednotlivých kritériích. Nepoužívejte jej pro dvanáct přínosů, z nichž každý potřebuje jednu větu; karty, odrážky nebo souhrnná tabulka využijí prostor lépe. Nepoužívejte jej pro argument, kde každá sekce závisí na předchozím závěru; souvislá próza a nadpisy zachovávají tuto logiku přehledněji.

Nejprozrazujícím testem je odstranění obrázků. Pokud zbývající nadpisy tvoří soudržnou množinu souvisejících položek a každý chybějící vizuál zanechá smysluplnou mezeru v důkazech, je zigzag pravděpodobně vhodný. Pokud se text změní na generický seznam přínosů a nic důležitého se neztratí, obrázky byly dekorací a element je zneužit.

Kam jej umístit

Umístěte zigzag poté, co stránka definovala společný problém a pojmenovala skupinu schopností. Čtenáři by měli vědět, proč na sekvenci záleží, než narazí na první velký vizuál. Na stránce produktu nebo řešení je to obvykle po hero sekci, přímé odpovědi nebo krátkém přehledu a před důkazy, podrobnými specifikacemi, cenami nebo závěrečnou výzvou k akci.

Uveďte celou sekvenci nadpisem H2 a jedním krátkým rámcovacím odstavcem. Nepřidávejte samostatný H2 před každou položku; každý název položky je podřízený nadpis v rámci sdílené sekce. Udržujte všechny položky souvislé, aby střídavý rytmus komunikoval jeden celek. Pokud musí dlouhé upřesnění přerušit sekvenci, dokončete zigzag a začněte novou sekci až po něm.

Zigzag nesmí být umístěn bezprostředně vedle jiné velké vizuální sekvence, galerie obrázků, produktového slideru, časové osy nebo opakované mřížky karet. Následné zobrazovací vzory za sebou vytvářejí vizuální únavu a zastírají, která kolekce je primární. Nesmí oddělovat tvrzení od jeho důkazu, varování od instrukce, kterou upřesňuje, ani cenu od jejích nákupních podmínek. Nesmí se objevit uvnitř uspořádaného seznamu, buňky tabulky, accordion panelu ani jiného zigzagu.

Používejte standardně jeden zigzag na stránku. Druhý je přijatelný pouze tehdy, když obě kolekce odpovídají na zřetelně odlišné otázky, používají samostatné nadpisy sekcí a je mezi nimi próza nebo důkazy. Nikdy nestřídejte zarovnání nesouvisejících sekcí stránky pouze za účelem napodobení vzoru; hranice kolekce je součástí významu elementu.

Anatomie

1. Nadpis kolekce: Pojmenovává sdílenou otázku nebo kategorii, kterou pokrývá každá položka.
2. Úvod kolekce: Vysvětluje, proč položky patří k sobě a čeho by si měl čtenář všimnout.
3. Kontejner položky: Udržuje jeden vizuál a jednu textovou oblast programově a vizuálně propojené.
4. Nadpis položky: Pojmenovává jednu konkrétní funkci, výsledek nebo pohled konkrétním jazykem.
5. Tělo položky: Vysvětluje, co položka dělá, proč je důležitá a jaké hranice jsou potřeba pro její správnou interpretaci.
6. Informativní vizuál: Demonstruje stejný předmět jako text a má užitečný alternativní text nebo přístupný popisek.
7. Volitelný odkaz položky: Nabízí jeden relevantní hloubkový pohled nebo akci po vysvětlení.
8. Prezentační střídání: Mění stranu vizuálu na širokých obrazovkách, aniž by měnilo DOM pořadí nebo význam.

Mezery, barva, poloměr rohů, ořez obrázku a breakpoint náleží rendereru. Autoři poskytují sémantické pořadí, úplný text a přístupné informace o médiích.

Příklady designu

Následující jsou podporované varianty. Sdílejí jednu obsahovou smlouvu; mění se pouze počáteční zarovnání, vizuální zpracování nebo chování na viewportu.

Média první: Výchozí širokoúhlá varianta začíná prvním vizuálem vlevo. Použijte ji, když první vizuál poskytuje okamžité rozpoznání a okolní stránka již neumísťuje dominantní obrázek na tuto stranu.

Text první: Začíná textem vlevo a poté střídá. Použijte ji, když úvodní vysvětlení musí ustanovit význam ještě před prvním vizuálem nebo když vytváří lepší rovnováhu s předchozí sekcí.

Média v rámu: Umísťuje snímky obrazovky nebo diagramy do konzistentního rámu. Použijte pro produktová rozhraní, grafy a diagramy, jejichž okraje a popisky jsou důležité. Všechny položky používají stejnou logiku rámu, i když mají zdrojové obrázky různé rozměry.

Média přes okraj: Umožňuje fotografiím nebo ilustracím mimo rozhraní vyplnit jejich oblasti. Ořez se může měnit responzivně, ale nesmí odstranit předmět ani žádnou informaci popsanou textem.

Mobilní skládání: Odstraňuje střídání vlevo-vpravo a používá jedno konzistentní pořadí čtení pro každou položku. Toto je vyžadované responzivní chování, nikoli volitelná redakční varianta.

Neexistuje varianta pouze s textem, automatickým přehráváním nebo carouselem. Odstranění smysluplných médií odstraňuje důvod k použití zigzagu; pohyb a skryté snímky zavádějí odlišné interakční kontrakty.

Parametry

Nadřazené tělo mapuje svůj první nadpis na title, svůj následující odstavec na intro a každou vnořenou položku na jednu opakovanou dvojici. První nadpis položky se mapuje na item.title; její zbývající tělo se mapuje na item.content. Odkazy na média a alternativní text zůstávají u položky, protože popisují pouze tuto položku. Autoři nemohou nastavit levou nebo pravou stranu po jednotlivých položkách: renderer odvozuje širokoúhlé zarovnání z pozice ve zdroji a z hodnoty start.

Syntaxe a příklady kódu

Všechny adaptéry musí zachovat jeden nadřazený název, jeden úvod, uspořádané položky a stabilní zdrojové pořadí. Příklady zkracují kolekci na tři položky, což je minimální platný počet.

Přenositelná Markdown direktiva

:::zigzag{start=media mediaFit=contain}
## Proměňte rozhodování o obsahu v opakovatelný systém

Přejděte od kompletního inventáře k prioritizované produkci a měřeným výsledkům.

::item{media="inventory-view" alt="Inventář obsahu seskupený podle stavu a vlastníka."}
### Prohlédněte si celý inventář

Získejte přehled o všech URL, vlastnících, stavech a výkonnostních signálech na jednom místě, než se rozhodnete, co změnit.
::

::item{media="priority-view" alt="Fronta priorit seřazená podle obchodní hodnoty a úsilí."}
### Prioritizujte hodnotnou práci

Seřaďte příležitosti podle obchodní hodnoty a úsilí, aby tým mohl pracovat podle promyšlené fronty.
::

::item{media="impact-view" alt="Reportovací pohled s anotacemi publikace vedle změn výkonu."}
### Měřte publikovaný dopad

Propojte každou změnu s anotací a stabilním reportovacím oknem, aby bylo možné pozdější pohyby vyšetřit.
::
:::

Tyto identifikátory dokumentují přenositelný kontrakt; produkční adaptér přeloží každý z nich na schválené aktivum. Autoři musí před publikováním potvrdit, že přeložené aktivum existuje.

Hugo shortcode

{{< zigzag title="Proměňte rozhodování o obsahu v opakovatelný systém" intro="Přejděte od kompletního inventáře k prioritizované produkci a měřeným výsledkům." start="media" mediaFit="contain" >}}
  {{< zigzag-item title="Prohlédněte si celý inventář" media="inventory-view" alt="Inventář obsahu seskupený podle stavu a vlastníka." >}}
  Získejte přehled o všech URL, vlastnících, stavech a výkonnostních signálech na jednom místě, než se rozhodnete, co změnit.
  {{< /zigzag-item >}}
  {{< zigzag-item title="Prioritizujte hodnotnou práci" media="priority-view" alt="Fronta priorit seřazená podle obchodní hodnoty a úsilí." >}}
  Seřaďte příležitosti podle obchodní hodnoty a úsilí, aby tým mohl pracovat podle promyšlené fronty.
  {{< /zigzag-item >}}
  {{< zigzag-item title="Měřte publikovaný dopad" media="impact-view" alt="Reportovací pohled s anotacemi publikace vedle změn výkonu." >}}
  Propojte každou změnu s anotací a stabilním reportovacím oknem, aby bylo možné pozdější pohyby vyšetřit.
  {{< /zigzag-item >}}
{{< /zigzag >}}

Hugo adaptér používá pouze pojmenované parametry. Odvozuje střídavé třídy z pozice položky a nesmí přepisovat zdrojové pořadí k dosažení vizuálního vzoru.

WordPress blok

<!-- wp:amicited/zigzag {"title":"Proměňte rozhodování o obsahu v opakovatelný systém","intro":"Přejděte od kompletního inventáře k prioritizované produkci a měřeným výsledkům.","start":"media","mediaFit":"contain"} -->
  <!-- wp:amicited/zigzag-item {"title":"Prohlédněte si celý inventář","media":"inventory-view","alt":"Inventář obsahu seskupený podle stavu a vlastníka."} -->
  <p>Získejte přehled o všech URL, vlastnících, stavech a výkonnostních signálech na jednom místě, než se rozhodnete, co změnit.</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"Prioritizujte hodnotnou práci","media":"priority-view","alt":"Fronta priorit seřazená podle obchodní hodnoty a úsilí."} -->
  <p>Seřaďte příležitosti podle obchodní hodnoty a úsilí, aby tým mohl pracovat podle promyšlené fronty.</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"Měřte publikovaný dopad","media":"impact-view","alt":"Reportovací pohled s anotacemi publikace vedle změn výkonu."} -->
  <p>Propojte každou změnu s anotací a stabilním reportovacím oknem, aby bylo možné pozdější pohyby vyšetřit.</p>
  <!-- /wp:amicited/zigzag-item -->
<!-- /wp:amicited/zigzag -->

WordPress by měl omezit vnitřní bloky na zigzag položky a umožnit přeuspořádání seznamu bez nabízení manuálních ovládacích prvků vlevo/vpravo. Náhled v editoru i front end musí používat stejné pořadí položek.

Příklady

Dobrý příklad

Nadpis: Pochopte každou fázi obnovy obsahu

1. Najděte klesající stránky — Spojnicový graf zobrazuje stejnou URL v porovnatelných obdobích. Text vysvětluje, jak odlišit trvalý pokles od běžného týdenního výkyvu.
2. Diagnostikujte příčinu — Pohled dotazů a stránek ukazuje, která témata ztratila viditelnost. Text odděluje posun v záměru, silnější konkurenty, zastaralá fakta a technické chyby.
3. Zaznamenejte zásah — Pohled anotací ukazuje datum publikace a přesnou změnu. Text vysvětluje, proč zaznamenaný zásah činí pozdější měření věrohodným.
4. Vyhodnoťte výsledek — Reportovací pohled zobrazuje dohodnuté pozorovací okno. Text uvádí, co spouští úspěch, žádná změna nebo další pokles.

Toto funguje, protože čtyři položky popisují paralelní pohledy v rámci jednoho systému obnovy, každý vizuál poskytuje důkazy, které próza nemůže efektivně reprodukovat, a samotné nadpisy poskytují čtenářům užitečný přehled. Pořadí podporuje příběh, aniž by se element měnil v instrukce.

Špatný příklad

Nadpis: Proč je naše platforma lepší

1. Snadná — Dekorativní fotografie usmívající se osoby doprovází „Naše platforma se snadno používá."
2. Výkonná — Dekorativní abstraktní tvar doprovází „Dosahujte výkonných výsledků rychleji."
3. Flexibilní — Stock fotografie doprovází „Flexibilní funkce vyhovují každému podnikání."
4. Kontaktujte nás — Velký formulář požaduje sedm polí.
5. Důvěryhodná — Pás log se objevuje bez vysvětlení, koho loga reprezentují.
6. Více funkcí — Osm nesouvisejících odrážek vyplňuje vysoký závěrečný řádek.

Toto selhává, protože tvrzení jsou generická, obrázky nenesou žádnou informaci a položky dělají různé úkoly. Vložený formulář přerušuje kolekci, zatímco poslední položka skrývá seznam uvnitř formátu určeného pro jedno zaměřené vysvětlení. Stránka se prodlužuje, aniž by byla jasnější. Nahraďte první tři tvrzení důkazy podloženou prózou nebo kompaktními kartami přínosů, umístěte formulář za vysvětlující sekci, identifikujte důkaz důvěryhodnosti a zbývajícím funkcím přiřaďte vhodný seznam nebo tabulku.

Schema markup a přístupnost

Zigzag je prezentační vzor, nikoli typ Schema.org. Jeho text zůstává součástí nadřazeného Article nebo WebPage a produktová fakta mohou přispívat k platnému Product nebo SoftwareApplication markupu pouze tehdy, když stránka a fakta nezávisle splňují tyto požadavky. Nevytvářejte ItemList pouze proto, že element opakuje položky, a nikdy nevytvářejte HowTo, pokud jsou položky paralelní funkce, nikoli požadované kroky.

Použijte sekci s přístupným nadpisem pro kolekci a sémantickou sekci nebo article pro každou položku. Udržujte DOM pořadí logické a identické napříč breakpointy. CSS grid řazení může měnit, kde se obrázek vizuálně nachází, ale pořadí pro klávesnici, čtečku obrazovky, kopírování a vkládání a vyhledávací extrakci musí zůstat konzistentní. Nikdy nepište „jak je znázorněno vlevo" nebo „na obrázku vpravo", protože tyto pozice se na menších obrazovkách obracejí nebo mizí.

Každý informativní obrázek potřebuje alternativní text, který uvádí, co obrázek přináší v kontextu. Neopakujte doslovně sousední odstavec. Pokud nelze složitý graf, rozhraní nebo diagram popsat stručně, přidejte viditelný popisek nebo nedaleký dlouhý popis. Dekorativní obrázky se nedoporučují, protože každá položka musí svůj vizuál odůvodnit; pokud renderer přidá dekorativní prvky, obdrží prázdný alternativní text.

Nadpisy musí následovat hierarchii stránky, nikoli být pevně nastaveny na vizuální velikost. Odkazy položek potřebují popisné štítky, například „Zkontrolovat pracovní postup inventáře", nikoli opakovaný text „Zjistit více". Nedělejte z celého řádku textu a obrázku jeden velký odkaz: vnořené odkazy a nejasné aktivační oblasti vytvářejí problémy pro klávesnici a čtečky obrazovky. Respektujte preference omezení pohybu a nikdy nevyžadujte animaci spouštěnou scrollováním k odhalení obsahu.

Pravidla pro psaní

Napište název kolekce ve 3–12 slovech a její úvod ve 20–60 slovech. Každý nadpis položky používá 3–9 konkrétních slov a každé tělo používá 40–120 slov. Podporovaný rozsah jsou tři až šest položek. Tato omezení existují, protože element potřebuje dostatek podstaty k odůvodnění velkých vizuálních oblastí, aniž by se každá dvojice změnila v nezávislou esej.

Vytvářejte nadpisy položek gramaticky paralelní. Pokud první začíná slovesem — „Najděte klesající stránky" — měly by i ostatní. Každé tělo by mělo v přirozeném pořadí odpovědět na tři otázky: co to je, proč je to zde důležité a čeho by si měl čtenář všimnout ve vizuálu? Používejte konkrétní podstatná jména, popisky rozhraní, podmínky a důsledky. Vyhněte se nekvalifikovaným superlativům jako „nejlepší", „výkonný" nebo „revoluční".

Udržujte hloubku vyváženou. Jedna 110slovná položka vedle dvou 40slovných položek signalizuje, že kolekce může míchat úrovně abstrakce. Rozdělte širokou položku, slučte mělké položky nebo přesuňte podrobnosti na propojenou stránku. Odkazy jsou volitelné a omezené na jeden na položku, aby sekvence zůstala vysvětlující, nikoli aby se stala navigačním adresářem.

Nikdy nevkládejte do položky zigzagu:

• Formulář, sběr newsletteru, ceník, nabídku nebo primární výzvu k akci.
• Srovnávací tabulku, accordion, záložky, carousel, galerii, video přehrávač nebo jiný zigzag.
• Číslovaný postup, jehož pořadí je vyžadováno pro úspěch.
• Několik nesouvisejících odrážek funkcí přidaných k vyplnění vizuální výšky.
• Nepodložené tvrzení, fragment doporučení nebo logo bez zdroje a kontextu.
• Obrázek přidaný jen proto, že rozvržení má slot pro obrázek.

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

Pole postTypes v frontmatter je zdrojem pravdy pro tento vztah. Zigzag je v každém uvedeném typu volitelný a měl by se objevit pouze tehdy, když má stránka kvalifikující se paralelní vizuální sekvenci.

QA kontrolní seznam

• Sekvence obsahuje tři až šest skutečně paralelních položek.
• Jeden H2 a krátký úvod vysvětlují, proč položky patří k sobě.
• Každá položka má konkrétní, gramaticky paralelní nadpis.
• Každé tělo zůstává v rozmezí 40–120 slov a má srovnatelnou hloubku.
• Každý vizuál existuje, přináší informaci a odpovídá své položce.
• Alternativní text nebo přístupný popisek předává užitečnou informaci každého vizuálu.
• Výchozí DOM pořadí je logické i bez CSS nebo obrázků.
• Širokoúhlé střídání je odvozeno automaticky; autoři nepřiřazovali libovolné strany.
• Mobil používá jedno konzistentní skládané pořadí bez horizontálního posouvání.
• Žádný text není závislý na levé, pravé nebo jiné pozici specifické pro viewport.
• Žádná položka neobsahuje formuláře, tabulky, vnořené zobrazovací komponenty ani procedurální kroky.
• Kolekce není sousedící s jiným velkým opakovaným vizuálním vzorem.
• Odkazy jsou popisné a omezené na jeden volitelný odkaz na položku.
• Žádný schema typ není odvozen pouze ze střídavého rozvržení.
• Stránka zůstává použitelná, když je animace vypnuta a obrázky se načítají pomalu.
• Markdown, Hugo a WordPress reprezentace zachovávají stejná pole a pořadí položek.

Používejte zigzag sekce, když si paralelní myšlenky zaslouží paralelní důkazy. Střídání by mělo čtenářům pomoci vnímat každou soudržnou položku; nikdy by nemělo být důvodem, proč položka existuje.