Zigzag-sektioner — Format, regler och exempel

Zigzag-sektioner presenterar en sekvens av parallella funktioner som upprepade bild-och-text-par, där bilden växlar från ena sidan till den andra på breda skärmar. Använd mönstret för att skapa tydliga visuella kontrollpunkter genom en genomtänkt produktberättelse, inte för att sträcka ut en kort lista till en lång landningssida.

Det renderade exemplet visar rytmen, men dess grå områden är förklarande gränssnitt i denna specifikation. Produktionsinstanser måste innehålla verkliga, informativa bilder.

Varför detta element är viktigt

En lång sida skapar ett navigeringsproblem. Läsare behöver landmärken som talar om när en idé slutar och nästa börjar. En zigzag tillhandahåller dessa landmärken genom upprepning: bild, rubrik, förklaring; sedan samma struktur med en annan bredskärmsjustering. Upprepad anatomi gör varje sektion lättare att förstå, medan växling hindrar angränsande objekt från att smälta samman till en kolumn.

Den psykologiska fördelen är starkast när objekten är genuint parallella. En läsare ser det första paret, lär sig mönstret och kan skanna efterföljande rubriker och bilder innan de väljer var de ska stanna upp. Bilden ger igenkänning; rubriken namnger funktionen; brödtexten förklarar dess konsekvens. Växling lägger till precis tillräckligt med rumslig förändring för att återställa uppmärksamheten utan att ändra informationsmodellen.

Den fördelen har en gräns. Varje par förbrukar avsevärt vertikalt utrymme, särskilt på en telefon där kolumnerna staplas. Om förklaringen bara är en mening och bilden inte tillför några bevis, får mönstret läsaren att färdas längre utan att lära sig mer. Dekorativ växling kan också kännas som en säljmall snarare än en genomtänkt sekvens. Elementet förtjänar sin plats endast när varje bild hjälper läsaren att förstå en distinkt funktion, ett tillstånd, ett resultat eller ett arbetsflöde.

Maskinextraherbarhet innebär att programvara kan isolera en innehållsenhet utan att förlora det sammanhang som gör den korrekt. En väldesignad zigzag är en samling explicita objekt, var och en med en rubrik, en självständig förklaring, en bildbeskrivning och en valfri länk. Retrievalsystem kan extrahera ett objekt som ett sammanhängande funktionsuttalande eftersom dess innebörd inte beror på att vara “den till vänster.” Källordning, inte CSS-placering, fastställer sekvensen.

Tillämpa reglerna för elementtexter före reglerna på denna sida: skriv den fullständiga förklaringen först och tillämpa det typade elementet i en separat strukturell omgång. Där denna sida anger snävare antal objekt, mediakrav, brödtextkartläggning eller häckningsbegränsningar har dessa elementspecifika regler företräde.

När det ska användas

Använd en zigzag när alla dessa villkor är uppfyllda:

1. Sidan har tre till sex parallella funktioner, kapaciteter, resultat eller icke-sekventiella arbetsflödesvyer.
2. Varje objekt har en verklig bild som förklarar eller demonstrerar sitt ämne.
3. Varje objekt behöver mer förklaring än ett kort tillåter men mindre än ett fullständigt oberoende kapitel.
4. Läsare drar nytta av att skanna sekvensen innan de läser varje detalj.
5. Ordningen är hjälpsam men inte procedurorienterad; ett objekt förblir begripligt om det extraheras enskilt.

Starka användningsområden inkluderar en produktgenomgång med ett gränssnitt per kapacitet, en lösningssida som parar ihop varje operativt problem med sitt motsvarande arbetsflöde, eller en ultimat guide som visar flera parallella modeller. Bilden kan vara en skärmbild, ett diagram, ett schema eller ett fotografi när det mediet bär information. Använd en kommenterad skärmbild inuti ett objekt när en rå gränssnittsbild skulle tvinga läsare att leta efter relevant kontroll.

Nästan rätt är vanligt. Använd inte en zigzag för numrerade instruktioner: växlande sidor försvagar den riktningssignal som steg behöver. Använd den inte för en jämförelse, eftersom växlande produkter förhindrar utvärdering kriterium för kriterium. Använd den inte för tolv fördelar som var och en bara behöver en mening; kort, punktlistor eller en sammanfattningstabell använder utrymmet bättre. Använd den inte för ett argument där varje sektion bygger på föregående slutsats; löpande text och rubriker bevarar den logiken tydligare.

Det mest avslöjande testet är att ta bort bilderna. Om de kvarvarande rubrikerna bildar en sammanhängande uppsättning jämlikar och varje saknad bild lämnar ett meningsfullt bevisglapp, är zigzag sannolikt lämplig. Om texten blir en generisk fördelarlista och inget viktigt går förlorat, var bilderna dekoration och elementet är felanvänt.

Var det ska placeras

Placera zigzagen efter att sidan har definierat det gemensamma problemet och namngett gruppen av kapaciteter. Läsare bör veta varför sekvensen är viktig innan de möter den första stora bilden. På en produkt- eller lösningssida är detta normalt efter hjälten, det direkta svaret eller den korta översikten och före bevis, detaljerade specifikationer, prissättning eller den slutliga uppmaningen till handling.

Introducera hela sekvensen med en H2 och ett kort inramande stycke. Lägg inte till en separat H2 före varje objekt; varje objekttitel är en underrubrik inom den gemensamma sektionen. Håll alla objekt sammanhängande så att den växlande rytmen kommunicerar en samling. Om en lång kvalificering måste avbryta sekvensen, avsluta zigzagen och starta en ny sektion efter den.

En zigzag får inte placeras omedelbart bredvid en annan stor visuell sekvens, bildgalleri, produktkarusell, tidslinje eller upprepat kortrutnät. Rygg-mot-rygg-visningsmönster skapar visuell trötthet och döljer vilken samling som är primär. Den får inte dela upp ett påstående från dess bevis, en varning från instruktionen den kvalificerar, eller ett pris från dess köpvillkor. Den får inte förekomma inuti en ordnad lista, tabellcell, accordion-panel eller en annan zigzag.

Använd som standard en zigzag per sida. En andra är acceptabel endast när de två samlingarna besvarar tydligt olika frågor, använder separata sektionsrubriker och har text eller bevis mellan sig. Växla aldrig justeringen av orelaterade sidsektioner enbart för att imitera mönstret; samlingsgränsen är en del av elementets betydelse.

Anatomi

1. Samlingsrubrik: Namnger den gemensamma frågan eller kategorin som täcks av varje objekt.
2. Samlingsintroduktion: Förklarar varför objekten hör ihop och vad läsaren bör lägga märke till.
3. Objektbehållare: Håller en bild och en textregion programmatiskt och visuellt sammanhörande.
4. Objektrubrik: Namnger en specifik funktion, ett resultat eller en vy i konkret språk.
5. Objektbrödtext: Förklarar vad objektet gör, varför det är viktigt och eventuella avgränsningar som behövs för att tolka det korrekt.
6. Informativ bild: Demonsterar samma ämne som texten och har användbar alternativtext eller en tillgänglig bildtext.
7. Valfri objektlänk: Erbjuder en relevant fördjupning eller åtgärd efter förklaringen.
8. Presentationsväxling: Ändrar bildens sida på breda skärmar utan att ändra DOM-ordning eller innebörd.

Avstånd, färg, hörnradie, bildbeskärning och brytpunkt tillhör renderaren. Författare tillhandahåller semantisk ordning, fullständig text och tillgänglig medieinformation.

Designexempel

Följande är de varianter som stöds. De delar ett innehållskontrakt; endast startjustering, bildbehandling eller visningsportbeteende ändras.

Media först: Standardvarianten för bred skärm börjar med den första bilden till vänster. Använd den när den första bilden ger omedelbar igenkänning och den omgivande sidan inte redan placerar en dominant bild på den sidan.

Text först: Börjar med text till vänster, växlar sedan. Använd den när den inledande förklaringen måste etablera mening före den första bilden eller när det skapar bättre balans med föregående sektion.

Innesluten media: Placerar skärmbilder eller diagram inom en konsekvent ram. Använd för produktgränssnitt, diagram och scheman där kanter och etiketter är viktiga. Alla objekt använder samma ramlogik även när källbilder har olika dimensioner.

Kant-till-kant-media: Tillåter fotografier eller icke-gränssnittsillustrationer att fylla sina regioner. Beskärning kan ändras responsivt, men den får inte ta bort motivet eller någon information som beskrivs av texten.

Mobil staplad: Tar bort vänster-höger-växling och använder en konsekvent läsordning för varje objekt. Detta är obligatoriskt responsivt beteende, inte en valfri redaktionell variant.

Det finns ingen text-only-, autoplay- eller karusellvariant. Att ta bort meningsfull media tar bort anledningen att använda zigzag; rörelse och dolda bilder introducerar olika interaktionskontrakt.

Parametrar

Förälderbrödtexten mappar sin första rubrik till title, sitt efterföljande stycke till intro och varje nästlat objekt till ett upprepat par. Ett objekts första rubrik mappar till item.title; dess återstående brödtext mappar till item.content. Mediareferenser och alternativtext stannar på objektet eftersom de beskriver enbart det objektet. Författare kan inte ställa in vänster eller höger per objekt: renderaren härleder bredskärmsjustering från källposition och start.

Syntax och kodexempel

Alla adaptrar måste bevara en förälderrubrik, en introduktion, ordnade objekt och en stabil källordning. Exemplen förkortar samlingen till tre objekt, det lägsta giltiga antalet.

Portabel Markdown-direktiv

:::zigzag{start=media mediaFit=contain}
## Turn content decisions into a repeatable system

Move from a complete inventory to prioritized production and measured results.

::item{media="inventory-view" alt="Content inventory grouped by status and owner."}
### See the whole inventory

Bring every URL, owner, status, and performance signal into one view before deciding what to change.
::

::item{media="priority-view" alt="Priority queue ordered by business value and effort."}
### Prioritize valuable work

Order opportunities by business value and effort so the team can act on a reasoned queue.
::

::item{media="impact-view" alt="Reporting view with publication annotations beside performance changes."}
### Measure published impact

Connect each change to an annotation and a stable reporting window so later movement can be investigated.
::
:::

Dessa identifierare dokumenterar det portabla kontraktet; en produktionsadapter löser varje identifierare till en godkänd tillgång. Författare måste bekräfta att den lösta tillgången finns före publicering.

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-adaptern använder endast namngivna parametrar. Den härleder växlande klasser från objektposition och får inte skriva om källordning för att uppnå det visuella mönstret.

WordPress-block

<!-- 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 bör begränsa inre block till zigzag-objekt och exponera listomordning utan att erbjuda manuella vänster/höger-kontroller. Förhandsvisningen i redigeraren och frontend måste använda samma objektordning.

Exempel

Bra exempel

Rubrik: Förstå varje steg i en innehållsuppdatering

1. Hitta sidor som tappar — Ett trenddiagram visar samma URL över jämförbara perioder. Texten förklarar hur man skiljer bestående nedgång från vanlig veckovisa variationer.
2. Diagnostisera orsaken — En fråge-och-sida-vy visar vilka ämnen som förlorat synlighet. Texten separerar intentdrift, starkare konkurrenter, föråldrade fakta och tekniska fel.
3. Registrera åtgärden — En anteckningsvy visar publiceringsdatum och exakt ändring. Texten förklarar varför en registrerad åtgärd gör senare mätning trovärdig.
4. Granska resultatet — En rapportvy visar det överenskomna observationsfönstret. Texten anger vad framgång, oförändrat läge och ytterligare nedgång var och en utlöser härnäst.

Detta fungerar eftersom de fyra objekten beskriver parallella vyer inom ett uppdateringssystem, varje bild tillför bevis som prosan inte effektivt kan återge, och rubrikerna ensamma ger läsarna en användbar överblick. Ordningen stödjer en berättelse utan att göra elementet till instruktioner.

Dåligt exempel

Rubrik: Varför vår plattform är bättre

1. Enkelt — Ett dekorativt fotografi av en leende person åtföljer “Vår plattform är enkel att använda.”
2. Kraftfullt — En dekorativ abstrakt form åtföljer “Få kraftfulla resultat snabbare.”
3. Flexibelt — Ett lagerfotografi åtföljer “Flexibla funktioner passar alla företag.”
4. Kontakta oss — Ett stort formulär ber om sju fält.
5. Betrott — En logotyprad visas utan att förklara vilka logotyperna representerar.
6. Fler funktioner — Åtta orelaterade punkter fyller en hög sista rad.

Detta misslyckas eftersom påståendena är generiska, bilderna bär ingen information och objekten gör olika saker. Det inbäddade formuläret avbryter samlingen, medan det sista objektet döljer en lista inuti ett format avsett för en enda fokuserad förklaring. Sidan blir lång utan att bli tydligare. Ersätt de första tre påståendena med bevisstödd text eller kompakta förmånskort, placera formuläret efter den förklarande sektionen, identifiera förtroendebeviset och ge de återstående funktionerna en lämplig lista eller tabell.

Schema-markup och tillgänglighet

Zigzag är ett presentationsmönster, inte en Schema.org-typ. Dess text förblir en del av den omslutande Article eller WebPage, och produktfakta kan bidra till giltig Product eller SoftwareApplication-markup endast när sidan och fakta oberoende uppfyller dessa krav. Skicka inte ut ItemList enbart för att elementet upprepar objekt, och skicka aldrig ut HowTo när objekten är parallella funktioner snarare än obligatoriska steg.

Använd en section med en tillgänglig rubrik för samlingen och en semantisk section eller article för varje objekt. Håll DOM-ordningen logisk och identisk över brytpunkter. CSS-rutnätsordning kan ändra var bilden visas visuellt, men tangentbords-, skärmläsar-, kopiera-och-klistra- och sökextraktionsordning måste förbli konsekvent. Skriv aldrig “som visas till vänster” eller “i bilden till höger”, eftersom dessa positioner vänder eller försvinner på mindre skärmar.

Varje informativ bild behöver alternativtext som anger vad bilden bidrar med i sitt sammanhang. Upprepa inte det intilliggande stycket ord för ord. Om ett komplext diagram, gränssnitt eller schema inte kan beskrivas koncist, lägg till en synlig bildtext eller en längre beskrivning i närheten. Dekorativa bilder avråds eftersom varje objekt måste motivera sin bild; om en renderare lägger till dekorativa utsmyckningar får de tom alternativtext.

Rubriker måste följa sidhierarkin snarare än att vara hårdkodade till en visuell storlek. Objektlänkar behöver beskrivande etiketter som “Granska inventariearbetsflödet,” inte upprepad “Läs mer”-text. Gör inte hela text-och-bild-raden till en enda stor länk: nästlade länkar och otydliga aktiveringsregioner skapar problem för tangentbord och skärmläsare. Respektera inställningar för minskad rörelse och kräv aldrig scrollutlöst animation för att avslöja innehållet.

Skrivregler

Skriv samlingstiteln på 3–12 ord och dess introduktion på 20–60 ord. Varje objekttitel använder 3–9 konkreta ord, och varje brödtext använder 40–120 ord. Tre till sex objekt är det intervall som stöds. Dessa gränser finns eftersom elementet behöver tillräckligt med substans för att motivera stora bildregioner utan att göra varje par till en självständig essä.

Gör objektens rubriker grammatiskt parallella. Om den första börjar med ett verb—“Hitta sidor som tappar”—bör de andra också göra det. Varje brödtext bör besvara tre frågor i en naturlig ordning: vad är detta, varför är det viktigt här, och vad bör läsaren lägga märke till i bilden? Använd specifika substantiv, gränssnittsetiketter, villkor och konsekvenser. Undvik okvalificerade superlativ som “bäst,” “kraftfull” eller “revolutionerande.”

Håll djupet balanserat. Ett objekt på 110 ord bredvid två objekt på 40 ord signalerar att samlingen kan blanda abstraktionsnivåer. Dela upp det breda objektet, slå samman grunda objekt eller flytta detaljer till en länkad sida. Länkar är valfria och begränsade till en per objekt så att sekvensen förblir förklarande snarare än att bli en navigationskatalog.

Lägg aldrig in dessa inuti ett zigzag-objekt:

• Ett formulär, nyhetsbrevsfångst, prisregister, erbjudande eller primär uppmaning till handling.
• En jämförelsetabell, accordion, flikar, karusell, galleri, videospelare eller en annan zigzag.
• En numrerad procedur vars ordning krävs för framgång.
• Flera orelaterade funktionspunkter som läggs till för att fylla bildhöjden.
• Ett ostöttat påstående, testemonialfragment eller logotyp utan sin källa och kontext.
• En bild som endast lagts till för att layouten har en bildplats.

Inläggstyper som använder det

Fråndatan postTypes är källan till sanning för denna relation. En zigzag är valfri i varje listad typ och bör endast förekomma när sidan har en kvalificerande parallell, visuell sekvens.

QA-checklista

• Sekvensen innehåller tre till sex genuint parallella objekt.
• En H2 och en kort introduktion förklarar varför objekten hör ihop.
• Varje objekt har en konkret, grammatiskt parallell rubrik.
• Varje brödtext håller sig inom 40–120 ord och har jämförbart djup.
• Varje bild finns, bidrar med information och matchar sitt objekt.
• Alternativtext eller en tillgänglig bildtext förmedlar varje bilds användbara information.
• Standard-DOM-ordningen är logisk utan någon CSS eller bilder.
• Bredskärmsväxling härleds automatiskt; författare tilldelade inte godtyckliga sidor.
• Mobil använder en konsekvent staplad ordning utan horisontell scrollning.
• Ingen formulering beror på vänster, höger eller någon annan visningsplatsspecifik position.
• Inget objekt innehåller formulär, tabeller, nästlade visningskomponenter eller procedursteg.
• Samlingen ligger inte intill ett annat stort upprepat visuellt mönster.
• Länkar är beskrivande och begränsade till en valfri länk per objekt.
• Ingen schematyp härleds från den växlande layouten ensam.
• Sidan förblir användbar när animation är inaktiverad och bilder laddas långsamt.
• Markdown-, Hugo- och WordPress-representationer bevarar samma fält och objektordning.

Använd zigzag-sektioner när parallella idéer förtjänar parallella bevis. Växling bör hjälpa läsare att lägga märke till varje sammanhängande objekt; det bör aldrig vara anledningen till att objektet finns.