Zigzagové sekcie — Formát, pravidlá a príklady

Zigzagové sekcie zobrazujú sekvenciu paralelných funkcií ako opakované dvojice obrázku a textu, pričom sa vizuál na širokých obrazovkách strieda z jednej strany na druhú. Používajte tento vzor na vytvorenie jasných vizuálnych kontrolných bodov v rámci premysleného príbehu o produkte, nie na natiahnutie krátkeho zoznamu do dlhej vstupnej stránky.

Vyrenderovaný príklad ukazuje rytmus, ale jeho sivé oblasti sú v tejto špecifikácii vysvetľujúcim UI. Produkčné inštancie musia obsahovať skutočné, informatívne vizuály.

Prečo na tomto prvku záleží

Dlhá stránka vytvára problém s navigáciou. Čitatelia potrebujú orientačné body, ktoré im povedia, kde jedna myšlienka končí a druhá začína. Zigzag tieto orientačné body poskytuje prostredníctvom opakovania: obrázok, nadpis, vysvetlenie; potom rovnaká štruktúra s iným zarovnaním na širokej obrazovke. Opakovaná anatómia uľahčuje pochopenie každej sekcie, zatiaľ čo striedanie zabraňuje splynutiu susedných položiek do jedného stĺpca.

Psychologický prínos je najsilnejší, keď sú položky skutočne paralelné. Čitateľ uvidí prvý pár, naučí sa vzor a môže skenovať nasledujúce nadpisy a vizuály predtým, než sa rozhodne, kde spomaliť. Vizuál poskytuje rozpoznanie; nadpis pomenúva schopnosť; telo vysvetľuje jej dôsledok. Striedanie pridáva práve toľko priestorovej zmeny na resetovanie pozornosti bez zmeny informačného modelu.

Tento prínos má svoje hranice. Každý pár zaberá značný vertikálny priestor, najmä na telefóne, kde sa stĺpce ukladajú pod seba. Ak je vysvetlenie len jedna veta a vizuál nepridáva žiadny dôkaz, vzor núti čitateľa cestovať ďalej bez toho, aby sa dozvedel viac. Dekoratívne striedanie môže tiež pôsobiť ako predajná šablóna namiesto premyslenej postupnosti. Prvok si zaslúži svoju veľkosť len vtedy, keď každý vizuál pomáha čitateľovi pochopiť odlišnú funkciu, stav, výsledok alebo pracovný postup.

Strojová extrahovateľnosť znamená, že softvér dokáže izolovať jednotku obsahu bez straty kontextu, ktorý ju robí presnou. Dobre napísaný zigzag je kolekcia explicitných položiek, z ktorých každá má nadpis, samostatné vysvetlenie, popis vizuálu a voliteľný odkaz. Vyhľadávacie systémy môžu extrahovať jednu položku ako súvislé vyhlásenie o funkcii, pretože jej význam nezávisí od toho, že je „ten naľavo.“ Postupnosť určuje poradie v zdroji, nie CSS umiestnenie.

Aplikujte pravidlá písania prvkov pred pravidlami na tejto stránke: najprv napíšte úplné vysvetlenie a typovaný prvok aplikujte v samostatnom štrukturálnom prechode. Ak táto stránka stanovuje užšie počty položiek, požiadavky na médiá, mapovanie tela alebo obmedzenia vnorenia, tieto pravidlá špecifické pre prvok majú prednosť.

Kedy to použiť

Použite zigzag, keď sú splnené všetky tieto podmienky:

1. Stránka má tri až šesť paralelných funkcií, schopností, výsledkov alebo nenásledných zobrazení pracovného postupu.
2. Každá položka má skutočný vizuál, ktorý vysvetľuje alebo demonštruje jej tému.
3. Každá položka potrebuje viac vysvetlenia, než umožňuje karta, ale menej než samostatná kapitola.
4. Čitatelia profitujú z prehliadnutia sekvencie pred prečítaním všetkých detailov.
5. Poradie je užitočné, ale nie procedurálne; položka zostáva pochopiteľná, ak je extrahovaná samostatne.

Silné použitia zahŕňajú prehliadku produktu s jedným zobrazením rozhrania na schopnosť, stránku riešenia spárujúcu každý operačný problém s príslušným pracovným postupom alebo komplexného sprievodcu zobrazujúceho niekoľko paralelných modelov. Vizuál môže byť screenshot, diagram, graf alebo fotografia, ak toto médium nesie informácie. Použite anotovaný screenshot vo vnútri položky, ak by surový záber rozhrania nútil čitateľov hľadať príslušný ovládací prvok.

Bežné sú prípady blízko k zlyhaniu. Nepoužívajte zigzag pre číslované inštrukcie: meniace sa strany oslabuje smerový signál, ktorý kroky potrebujú. Nepoužívajte ho na porovnanie, pretože striedanie produktov bráni hodnoteniu podľa kritérií. Nepoužívajte ho pre dvanásť výhod, z ktorých každá potrebuje jednu vetu; karty, odrážky alebo súhrnná tabuľka využijú priestor lepšie. Nepoužívajte ho pre argument, kde každá sekcia závisí od predchádzajúceho záveru; súvislá próza a nadpisy zachovávajú túto logiku jasnejšie.

Najodhaľujúcejším testom je odstrániť obrázky. Ak zvyšné nadpisy tvoria súvislú množinu rovnocenných prvkov a každý chýbajúci vizuál zanecháva zmysluplnú medzeru v dôkazoch, zigzag je pravdepodobne vhodný. Ak sa text zmení na generický zoznam výhod a nič dôležité sa nestratí, obrázky boli dekoráciou a prvok je zneužitý.

Kam ho umiestniť

Umiestnite zigzag až potom, čo stránka definovala spoločný problém a pomenovala skupinu schopností. Čitatelia by mali vedieť, prečo na sekvencii záleží, ešte predtým, než narazia na prvý veľký vizuál. Na stránke produktu alebo riešenia je to zvyčajne po hero sekcii, priamej odpovedi alebo krátkom prehľade a pred dôkazmi, podrobnými špecifikáciami, cenami alebo záverečnou výzvou na akciu.

Uveďte celú sekvenciu nadpisom H2 a jedným krátkym rámcovacím odsekom. Nepridávajte samostatný H2 pred každú položku; názov každej položky je podradený nadpis v rámci zdieľanej sekcie. Udržujte všetky položky súvislé, aby striedavý rytmus komunikoval jeden celok. Ak musí dlhšia kvalifikácia prerušiť sekvenciu, dokončite zigzag a začnite novú sekciu až po ňom.

Zigzag nesmie byť umiestnený bezprostredne vedľa inej veľkej vizuálnej sekvencie, galérie obrázkov, produktového slidera, časovej osi alebo opakujúcej sa mriežky kariet. Vzorové zobrazenia vedľa seba vytvárajú vizuálnu únavu a zakrývajú, ktorá kolekcia je primárna. Nesmie oddeliť tvrdenie od jeho dôkazu, varovanie od inštrukcie, ktorú kvalifikuje, ani cenu od nákupných podmienok. Nesmie sa objaviť vo vnútri zoradeného zoznamu, bunky tabuľky, accordion panela ani iného zigzagu.

Štandardne používajte jeden zigzag na stránku. Druhý je prijateľný len vtedy, keď dve kolekcie odpovedajú na jasne odlišné otázky, používajú samostatné nadpisy sekcií a majú medzi sebou prózu alebo dôkazy. Nikdy nestriedajte zarovnanie nesúvisiacich sekcií stránky len na napodobnenie vzoru; hranica kolekcie je súčasťou významu prvku.

Anatómia

1. Nadpis kolekcie: Pomenúva zdieľanú otázku alebo kategóriu, ktorú pokrýva každá položka.
2. Úvod kolekcie: Vysvetľuje, prečo položky patria k sebe a čo by si mal čitateľ všimnúť.
3. Kontajner položky: Udržuje jeden vizuál a jednu textovú oblasť programovo a vizuálne prepojené.
4. Nadpis položky: Pomenúva jednu konkrétnu funkciu, výsledok alebo zobrazenie konkrétnym jazykom.
5. Telo položky: Vysvetľuje, čo položka robí, prečo je dôležitá a aké hranice sú potrebné na jej správnu interpretáciu.
6. Informatívny vizuál: Demonštruje rovnakú tému ako text a má užitočný alternatívny text alebo prístupný popis.
7. Voliteľný odkaz položky: Ponúka jeden relevantný hlbší ponor alebo akciu po vysvetlení.
8. Prezentačné striedanie: Mení stranu vizuálu na širokých obrazovkách bez zmeny DOM poradia alebo významu.

Medzery, farba, zaoblenie rohov, orezanie obrázku a breakpoint patria renderovaciemu nástroju. Autori poskytujú sémantické poradie, kompletný text a prístupné informácie o médiách.

Príklady dizajnu

Nasledujúce sú podporované varianty. Zdieľajú jednu obsahovú zmluvu; mení sa len počiatočné zarovnanie, vizuálne spracovanie alebo správanie na viewporte.

Médiá na prvom mieste: Predvolený variant pre širokú obrazovku začína prvým vizuálom vľavo. Použite ho, keď prvý vizuál poskytuje okamžité rozpoznanie a okolitá stránka už neumiestňuje dominantný obrázok na túto stranu.

Text na prvom mieste: Začína textom vľavo, potom sa strieda. Použite ho, keď úvodné vysvetlenie musí stanoviť význam ešte pred prvým vizuálom alebo keď vytvára lepšiu rovnováhu s predchádzajúcou sekciou.

Obsiahnuté médiá: Umiestňuje screenshoty alebo diagramy do konzistentného rámca. Použite ho pre produktové rozhrania, grafy a diagramy, ktorých okraje a popisky sú dôležité. Všetky položky používajú rovnakú logiku rámca, aj keď zdrojové obrázky majú rôzne rozmery.

Okrajové médiá: Umožňuje fotografiám alebo nerozhranovým ilustráciám vyplniť ich oblasti. Orezanie sa môže responzívne meniť, ale nesmie odstrániť subjekt ani žiadnu informáciu opísanú textom.

Mobilné ukladanie: Odstraňuje striedanie vľavo-vpravo a používa jedno konzistentné poradie čítania pre každú položku. Toto je povinné responzívne správanie, nie voliteľný redakčný variant.

Neexistuje variant len s textom, s automatickým prehrávaním alebo s karuselom. Odstránenie zmysluplných médií odstraňuje dôvod na použitie zigzagu; pohyb a skryté snímky zavádzajú iné interakčné zmluvy.

Parametre

Rodičovské telo mapuje svoj prvý nadpis na title, nasledujúci odsek na intro a každú vnorenú položku na jeden opakovaný pár. Prvý nadpis položky sa mapuje na item.title; zvyšné telo položky sa mapuje na item.content. Referencie na médiá a alternatívny text zostávajú pri položke, pretože opisujú len túto položku. Autori nemôžu nastaviť ľavú alebo pravú stranu na položku: renderovací nástroj odvodzuje zarovnanie na širokej obrazovke z pozície v zdroji a hodnoty start.

Syntax a príklady kódu

Všetky adaptéry musia zachovať jeden rodičovský názov, jeden úvod, zoradené položky a stabilné poradie v zdroji. Príklady skracujú kolekciu na tri položky, minimálny platný počet.

Prenosný Markdown direktív

:::zigzag{start=media mediaFit=contain}
## Premeňte rozhodnutia o obsahu na opakovateľný systém

Prejdite od kompletného inventára k prioritizovanej produkcii a meraným výsledkom.

::item{media="inventory-view" alt="Content inventory grouped by status and owner."}
### Pozrite si celý inventár

Prineste každú URL, vlastníka, stav a výkonnostný signál do jedného zobrazenia pred rozhodnutím, čo zmeniť.
::

::item{media="priority-view" alt="Priority queue ordered by business value and effort."}
### Prioritizujte hodnotnú prácu

Zoraďte príležitosti podľa obchodnej hodnoty a úsilia, aby tím mohol pracovať na odôvodnenom poradí.
::

::item{media="impact-view" alt="Reporting view with publication annotations beside performance changes."}
### Merajte publikovaný vplyv

Pripojte každú zmenu k anotácii a stabilnému reportovaciemu oknu, aby bolo možné neskoršie zmeny preskúmať.
::
:::

Tieto identifikátory dokumentujú prenosnú zmluvu; produkčný adaptér každý z nich vyrieši na schválené aktívum. Autori musia pred publikovaním potvrdiť, že vyriešené aktívum existuje.

Hugo shortcode

{{< 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 >}}

Hugo adaptér používa len pomenované parametre. Odvodzuje striedavé triedy z pozície položky a nesmie prepisovať poradie v zdroji, aby dosiahol vizuálny vzor.

WordPress blok

<!-- 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 by mal obmedziť vnútorné bloky na zigzagové položky a umožniť preskupovanie zoznamu bez ponúkania manuálnych ovládacích prvkov vľavo/vpravo. Editorový náhľad a front-end musia používať rovnaké poradie položiek.

Príklady

Dobrý príklad

Nadpis: Pochopte každú fázu obnovy obsahu

1. Nájdite klesajúce stránky — Trendový graf zobrazuje rovnakú URL za porovnateľné obdobia. Text vysvetľuje, ako rozlíšiť trvalý pokles od bežného týždenného pohybu.
2. Diagnostikujte príčinu — Zobrazenie dotazu a stránky ukazuje, ktoré témy stratili viditeľnosť. Text oddeľuje posun v záujme, silnejších konkurentov, zastarané fakty a technické chyby.
3. Zaznamenajte zásah — Zobrazenie anotácií ukazuje dátum publikovania a presnú zmenu. Text vysvetľuje, prečo zaznamenaný zásah robí neskoršie merania dôveryhodnými.
4. Preskúmajte výsledok — Reportovacie zobrazenie ukazuje dohodnuté pozorovacie okno. Text uvádza, čo ďalej spúšťa úspech, žiadnu zmenu a ďalší pokles.

Toto funguje, pretože štyri položky opisujú paralelné zobrazenia v rámci jedného systému obnovy, každý vizuál poskytuje dôkazy, ktoré próza nedokáže efektívne reprodukovať, a samotné nadpisy poskytujú čitateľom užitočný prehľad. Poradie podporuje príbeh bez toho, aby sa prvok zmenil na inštrukcie.

Zlý príklad

Nadpis: Prečo je naša platforma lepšia

1. Jednoduché — Dekoratívna fotografia usmievajúceho sa človeka sprevádza „Naša platforma sa ľahko používa.“
2. Výkonné — Dekoratívny abstraktný tvar sprevádza „Dosiahnite výkonné výsledky rýchlejšie.“
3. Flexibilné — Stock fotografia sprevádza „Flexibilné funkcie sedia každému podnikaniu.“
4. Kontaktujte nás — Veľký formulár požaduje sedem polí.
5. Dôveryhodné — Pás s logami sa zobrazuje bez vysvetlenia, koho logá reprezentujú.
6. Viac funkcií — Osem nesúvisiacich odrážok vypĺňa vysoký posledný riadok.

Toto zlyháva, pretože tvrdenia sú všeobecné, obrázky nenesú žiadnu informáciu a položky robia rôzne úlohy. Vložený formulár prerušuje kolekciu, zatiaľ čo posledná položka skrýva zoznam vo formáte určenom na jedno zamerané vysvetlenie. Stránka sa stáva dlhou bez toho, aby bola jasnejšia. Nahraďte prvé tri tvrdenia textom podloženým dôkazmi alebo kompaktnými kartami výhod, umiestnite formulár za vysvetľujúcu sekciu, identifikujte dôkaz dôveryhodnosti a zvyšným funkciám dajte vhodný zoznam alebo tabuľku.

Schema markup a prístupnosť

Zigzag je prezentačný vzor, nie typ Schema.org. Jeho text zostáva súčasťou obaľujúceho prvku Article alebo WebPage a produktové fakty môžu prispievať k platnému markupu Product alebo SoftwareApplication len vtedy, keď stránka a fakty nezávisle spĺňajú tieto požiadavky. Nevydávajte ItemList len preto, že prvok opakuje položky, a nikdy nevydávajte HowTo, keď sú položky paralelné funkcie, nie požadované kroky.

Použite section s prístupným nadpisom pre kolekciu a sémantický section alebo article pre každú položku. Udržujte DOM poradie logické a identické naprieč breakpointmi. CSS grid môže meniť, kde sa obrázok zobrazuje vizuálne, ale poradie pre klávesnicu, čítačku obrazovky, kopírovanie a vkladanie a extrakciu vyhľadávaním musí zostať konzistentné. Nikdy nepíšte „ako je znázornené vľavo“ alebo „na obrázku vpravo,“ pretože tieto pozície sa na menších obrazovkách obracajú alebo miznú.

Každý informatívny obrázok potrebuje alternatívny text, ktorý uvádza, čo obrázok v kontexte prináša. Neopakujte doslovne susediaci odsek. Ak komplexný graf, rozhranie alebo diagram nie je možné stručne opísať, pridajte viditeľný popis alebo blízky dlhý opis. Dekoratívne obrázky sa neodporúčajú, pretože každá položka musí ospravedlniť svoj vizuál; ak renderovací nástroj pridáva dekoratívne prvky, dostanú prázdny alternatívny text.

Nadpisy musia nasledovať hierarchiu stránky, nie byť pevne nastavené na vizuálnu veľkosť. Odkazy položiek potrebujú popisné štítky, ako napríklad „Prezrieť si inventárny workflow,“ nie opakovaný text „Zistiť viac.“ Nerobte z celého riadku obrázku a textu jeden veľký odkaz: vnorené odkazy a nejasné aktivačné oblasti vytvárajú problémy pre klávesnicu a čítačku obrazovky. Rešpektujte preferencie zníženého pohybu a nikdy nevyžadujte animáciu spúšťanú posúvaním na odhalenie obsahu.

Pravidlá písania

Napíšte názov kolekcie v 3–12 slovách a jej úvod v 20–60 slovách. Každý názov položky používa 3–9 konkrétnych slov a každé telo používa 40–120 slov. Tri až šesť položiek je podporovaný rozsah. Tieto limity existujú, pretože prvok potrebuje dostatok podstaty na ospravedlnenie veľkých vizuálnych oblastí bez toho, aby sa každý pár zmenil na samostatnú esej.

Urobte nadpisy položiek gramaticky paralelné. Ak prvý začína slovesom — „Nájdite klesajúce stránky“ — ostatné by mali tiež. Každé telo by malo odpovedať na tri otázky v prirodzenom poradí: čo to je, prečo je to tu dôležité a čo by si mal čitateľ všimnúť na vizuáli? Používajte konkrétne podstatné mená, označenia rozhrania, podmienky a dôsledky. Vyhýbajte sa nekvalifikovaným superlatívom ako „najlepší,“ „výkonný“ alebo „revolučný.“

Udržujte hĺbku vyváženú. Jedna položka so 110 slovami vedľa dvoch položiek so 40 slovami signalizuje, že kolekcia môže miešať úrovne abstrakcie. Rozdeľte širokú položku, spojte plytké položky alebo presuňte detail na prepojenú stránku. Odkazy sú voliteľné a obmedzené na jeden na položku, aby sekvencia zostala vysvetľujúca a nie navigačný adresár.

Nikdy nevkladajte do zigzagovej položky tieto prvky:

• Formulár, zápisník na newsletter, cenovú tabuľku, ponuku alebo primárnu výzvu na akciu.
• Porovnávaciu tabuľku, accordion, taby, karusel, galériu, videoprehrávač alebo iný zigzag.
• Číslovaný postup, ktorého poradie je vyžadované na úspech.
• Niekoľko nesúvisiacich odrážok funkcií pridaných na vyplnenie vizuálnej výšky.
• Nepodložené tvrdenie, fragment svedectva alebo logo bez zdroja a kontextu.
• Obrázok pridaný len preto, že rozloženie má slot na obrázok.

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

postTypes v frontmatter je zdrojom pravdy pre tento vzťah. Zigzag je voliteľný v každom uvedenom type a mal by sa objaviť len vtedy, keď má stránka kvalifikujúcu sa paralelnú vizuálnu sekvenciu.

QA kontrolný zoznam

• Sekvencia obsahuje tri až šesť skutočne paralelných položiek.
• Jeden H2 a krátky úvod vysvetľujú, prečo položky patria k sebe.
• Každá položka má konkrétny, gramaticky paralelný nadpis.
• Každé telo zostáva v rozmedzí 40–120 slov a má porovnateľnú hĺbku.
• Každý vizuál existuje, prispieva informáciami a zodpovedá svojej položke.
• Alternatívny text alebo prístupný popis vyjadruje užitočnú informáciu každého vizuálu.
• Predvolené DOM poradie je logické bez akéhokoľvek CSS alebo obrázkov.
• Striedanie na širokej obrazovke je odvodené automaticky; autori nepriraďovali ľubovoľné strany.
• Mobil používa jedno konzistentné poradie ukladania bez horizontálneho posúvania.
• Žiadny text nezávisí od ľavej, pravej alebo inej pozície špecifickej pre viewport.
• Žiadna položka neobsahuje formuláre, tabuľky, vnorené zobrazovacie komponenty ani procedurálne kroky.
• Kolekcia nie je susediaca s iným veľkým opakovaným vizuálnym vzorom.
• Odkazy sú popisné a obmedzené na jeden voliteľný odkaz na položku.
• Žiadny typ schemy nie je odvodený len zo striedavého rozloženia.
• Stránka zostáva užitočná, keď je animácia vypnutá a obrázky sa načítavajú pomaly.
• Markdown, Hugo a WordPress reprezentácie zachovávajú rovnaké polia a poradie položiek.

Používajte zigzagové sekcie, keď si paralelné myšlienky zaslúžia paralelné dôkazy. Striedanie by malo pomôcť čitateľom všimnúť si každú súvislú položku; nikdy by nemalo byť dôvodom, prečo položka existuje.