Infobox: 2 kolumny — Format, zasady i przykłady

Dwukolumnowy infobox dzieli jeden pomysł na dokładnie dwa równoległe punkty, dzięki czemu czytelnik może od razu zrozumieć zależność. Używaj go, gdy para jest bardziej użyteczna obok siebie niż ukryta w akapicie: dwie odpowiedzialności, dwa etapy, dwie perspektywy lub dwie uzupełniające się części jednej odpowiedzi.

Ten wyrenderowany przykład to jeden infobox, jeden wspólny tytuł i dokładnie dwa elementy. Oba elementy odpowiadają na ten sam rodzaj pytania na porównywalnym poziomie szczegółowości. Element nie twierdzi, że dwie potrzeby są przeciwieństwami; pokazuje, że użyteczny brief musi uwzględniać obie.

Dlaczego ten element jest ważny

Gęsta proza zmusza czytelników do rekonstruowania relacji. W zdaniu takim jak „Brief treści musi służyć czytelnikowi poprzez rozwiązanie zadania i służyć biznesowi poprzez wspieranie kwalifikowanego działania” dwie odpowiedzialności istnieją, ale ich granice są słabe. Dwukolumnowy infobox sprawia, że wspólny temat jest widoczny raz, a każdej odpowiedzialności nadaje nazwany obszar. Czytelnicy mogą zeskanować oba nagłówki, wybrać, od czego zacząć, i porównać ilość oraz rodzaj szczegółów bez ponownego czytania złożonego zdania.

Korzyść psychologiczna wynika z chunkowania: grupowania powiązanych informacji w ograniczone jednostki. Wspólny tytuł mówi czytelnikowi, co pozostaje stałe, podczas gdy tytuły elementów pokazują, co się zmienia. Ta hierarchia jest szczególnie przydatna, gdy żaden punkt nie powinien dominować. Zwykła proza naturalnie nadaje pierwszemu punktowi większe znaczenie i może sprawić, że drugi będzie wydawał się dopisany po namyśle; dopasowane kolumny sygnalizują równą wagę redakcyjną.

Ekstrahowalność maszynowa to zdolność oprogramowania do wyodrębnienia jednostki treści przy zachowaniu jej znaczenia. Typowany infobox udostępnia temat nadrzędny i dwa jawne elementy podrzędne. System wyszukiwania może zachować wspólny tytuł, tytuły elementów, treść właściwą i kolejność źródłową, zamiast zgadywać, gdzie kończy się jedna klauzula, a zaczyna druga. Każdy element musi być nadal samodzielny: „Wymóg biznesowy to dowód potwierdzający kwalifikowane działanie” przetrwa ekstrakcję, podczas gdy „Druga strona” już nie.

Struktura nie ratuje słabego myślenia. Jeśli źródło zawiera jeden rozwinięty punkt i jedno zdanie dodane dla symetrii, renderer jedynie uwidacznia tę nierównowagę. Zastosuj zasady pisania elementów : najpierw napisz pełne uzasadnienie, a następnie wybierz ten element tylko wtedy, gdy gotowy pomysł rzeczywiście ma dwie równoległe części. Szczegółowe zasady dla tego elementu na tej stronie mają pierwszeństwo tam, gdzie określają jego dokładne mapowanie elementów i ograniczenia.

Kiedy go używać

Użyj dwukolumnowego infoboxu, gdy spełnione są wszystkie cztery warunki:

1. Istnieje jeden jasny pomysł nadrzędny, który może stanowić tytuł całego boxu.
2. Pomysł nadrzędny dzieli się naturalnie na dokładnie dwa elementy.
3. Oba elementy pełnią tę samą funkcję informacyjną, np. wyjaśniają odpowiedzialność, etap, perspektywę odbiorcy lub wymiar.
4. Każdy element można zrozumieć w około 30–90 słowach bez zagnieżdżonej struktury.

Dobre zastosowania obejmują „Przed uruchomieniem / Po uruchomieniu”, „Sygnał czytelnika / Sygnał biznesu”, „Co się zmienia / Co pozostaje takie samo” oraz „Odpowiedzialność właściciela / Odpowiedzialność recenzenta”. Etykiety powinny ujawniać prawdziwą relację. Jeśli czytelnik nie może dokończyć zdania „Te należą do siebie, ponieważ…”, grupowanie jest prawdopodobnie dekoracyjne.

Przypadki bliskie granicy mają znaczenie, ponieważ dwukolumnowy układ może sprawić, że prawie każda para będzie wyglądać celowo. Nie używaj go do jednego pomysłu podzielonego w arbitralnym miejscu zdania. Nie zamieniaj listy czterech elementów w dwie długie kolumny tylko po to, by zaoszczędzić miejsce w pionie; kolejność źródłowa i skanowalność stają się niejednoznaczne. Nie używaj go do szczegółowego porównania produktów z wieloma kryteriami, ponieważ tabela porównawcza daje każdemu kryterium osobny wiersz. Nie używaj go do zalet i wad, gdy liczba punktów jest różna lub gdy czytelnicy muszą rozważyć kilka kompromisów. Nie łącz definicji z promocyjnym wezwaniem do działania: te bloki pełnią różne funkcje i nie zasługują na równe traktowanie.

Najsilniejszym sygnałem ostrzegawczym jest etykieta taka jak „Inne”, „Więcej” lub „Dodatkowe informacje”. Takie etykiety ujawniają, że podział wynika z dostępnego miejsca, a nie ze znaczenia. Wróć do prozy lub znajdź rzeczywiste rozróżnienie przed użyciem elementu.

Gdzie go umieścić

Umieść infobox bezpośrednio po akapicie wprowadzającym wspólny pomysł. Czytelnik potrzebuje jednego zdania kontekstu przed spotkaniem z podziałem, ale nie powinien musieć przechodzić przez niezwiązane dowody lub inną podsekcję, aby do niego dotrzeć. Po boxie kontynuuj analizą, przykładami lub instrukcjami odnoszącymi się do obu elementów.

Może znajdować się bezpośrednio pod nagłówkiem H2, gdy sam H2 dostarcza pomysłu nadrzędnego, a infobox ma własny, bardziej szczegółowy tytuł. Może również następować po krótkiej definicji, gdy dwa elementy wyjaśniają wymiary tej definicji. Nie może pojawiać się między twierdzeniem a jego cytowaniem, między krokiem a warunkiem wymaganym do wykonania tego kroku ani wewnątrz elementu listy uporządkowanej. Te pozycje zrywają relacje, które powinny pozostać ciągłe.

Nie umieszczaj go obok innego dwukolumnowego infoboxu, tabeli porównawczej, zestawu zakładek ani bloku zalet i wad. Sąsiednie równoległe struktury zmuszają czytelnika do decydowania, która relacja wizualna ma znaczenie, i mogą tworzyć cztery pozorne kolumny na szerokich ekranach. Wstaw wyjaśniającą prozę między różne struktury lub połącz materiał w jedną lepiej dopasowaną tabelę lub sekcję. Unikaj umieszczania go bezpośrednio przed lub po dwukolumnowym wezwaniu do działania; identyczna geometria może sprawić, że redakcyjne wyjaśnienie będzie wyglądać promocyjnie.

Używaj nie więcej niż jednego dwukolumnowego infoboxu w krótkiej sekcji. Powtarzanie zamienia użyteczne przeciwstawienie w element wystroju strony. Gdy długi artykuł zawiera kilka autentycznych par, oddziel je różnymi nagłówkami i potwierdź, że każda para ma odrębny pomysł nadrzędny.

Anatomia

Anatomia zawiera jeden obszar nadrzędny i dwa powtarzające się obszary podrzędne. Zrzut ekranu powinien oznaczać części semantyczne, a nie wypełnienia czy tokeny kolorystyczne, aby specyfikacja pozostała użyteczna w przypadku zmiany systemu wizualnego.

1. Granica zewnętrzna: Grupuje tytuł nadrzędny i oba elementy jako jedną jednostkę redakcyjną.
2. Wspólny tytuł: Nazywa pomysł, który wyjaśniają oba elementy. Nie jest trzecim punktem.
3. Tytuł i treść pierwszego elementu: Określa pierwszy element pary w kompletnym, ekstrahowalnym języku.
4. Tytuł i treść drugiego elementu: Odpowiada na ten sam rodzaj pytania z dopasowaną głębią.
5. Relacja układu: Używa kolumn o równej szerokości, gdy pozwala na to miejsce, a na wąskich ekranach układa element pierwszy przed drugim.

Obramowania, tło, odstępy, promienie, skala typograficzna i punkt załamania należą do renderera. Autorzy kontrolują hierarchię treści i kolejność, a nie tokeny wizualne.

Przykłady projektowe

Istnieje jeden element semantyczny z czterema obsługiwanymi wariantami treści i widoku. Warianty zmieniają obsługę tytułu lub prezentację responsywną; nigdy nie zmieniają wymogu dokładnie dwóch elementów.

Domyślny wariant z tytułem: Preferowany do samodzielnego użytku. Wspólny tytuł nazywa pomysł nadrzędny, a oba elementy podrzędne mają zwięzłe tytuły.

Wariant z tytułem kontekstowym: Bezpośrednio poprzedzający nagłówek H2 może pełnić rolę wspólnego tytułu. Jest to dozwolone tylko wtedy, gdy żaden akapit ani komponent nie oddziela H2 od boxu, a infobox ma dostępną nazwę pochodzącą z tego nagłówka.

Wariant kompaktowy: Użyj do dwóch krótkich definicji lub odpowiedzialności. Każda treść wciąż stanowi pełne zdanie; układ nie staje się parą sloganów.

Wariant dla wąskiego widoku: Elementy układają się pionowo. Kolejność pozostaje znacząca bez odwołań do „lewej”, „prawej”, „powyżej” lub „obok”.

Ikony nie są wariantem treści. Jeśli system projektowy dodaje dekoracyjne ikony, używają one pustego tekstu alternatywnego i nie zastępują tytułów elementów. Jeśli każdy element potrzebuje informacyjnego obrazu, użyj elementu zorientowanego na obraz zamiast rozszerzać ten kontrakt infoboxu.

Parametry

Kontrakt parametrów zapobiega przekształceniu się elementu w ogólną siatkę. Wartości opisujące znaczenie należą do autorskiej treści; układ responsywny pozostaje w rendererze.

Tytuł jest wymagany, chyba że bezpośrednio poprzedzający nagłówek dokumentu dostarcza tego samego tematu nadrzędnego i może oznaczyć kontener programowo. Treści elementów pozwalają na wyróżnienie, kod w tekście i jeden użyteczny link. Nie pozwalają na zagnieżdżone nagłówki, tabele, multimedia, akordeony, formularze, wezwania do działania ani inny infobox.

Składnia i przykłady kodu

Wszystkie trzy notacje zachowują ten sam tytuł nadrzędny, dwa uporządkowane elementy, tytuły elementów i treści elementów. Przenośna dyrektywa Markdown jest źródłem kanonicznym. Formy Hugo i WordPress to kontrakty adapterów; ich renderery muszą generować równoważny semantyczny HTML i responsywną kolejność.

Przenośna dyrektywa Markdown

:::infobox-2-columns
## Przydatny brief treści odpowiada na dwa pytania

::item
### Czego potrzebuje czytelnik?

Określ pytanie, decyzję lub zadanie, które strona musi rozwiązać, uwzględniając kontekst zmieniający odpowiedź.
::

::item
### Czego potrzebuje biznes?

Określ kwalifikowane działanie, które strona ma wspierać, wraz z dowodami wymaganymi do uzyskania tego działania.
::
:::

Pierwszy nagłówek nadrzędny mapuje się na title. Każde ::item mapuje swój pierwszy nagłówek na item.title, a pozostałą treść na item.content. To dokładne mapowanie dwóch elementów zastępuje ogólne zezwolenie na powtarzalne elementy w podstawowych zasadach.

Shortcode Hugo

{{< infobox-2-columns title="A useful content brief answers two questions" >}}
  {{< infobox-item title="What does the reader need?" >}}
  State the question, decision, or task the page must resolve, including the context that changes the answer.
  {{< /infobox-item >}}
  {{< infobox-item title="What does the business need?" >}}
  State the qualified action the page should support, along with the evidence required to earn that action.
  {{< /infobox-item >}}
{{< /infobox-2-columns >}}

Adapter używa tylko nazwanych parametrów. Musi odrzucić trzeci element, zamiast po cichu go zawijać, i musi zachować autorską kolejność elementów, gdy układ się układa.

WordPress block

<!-- wp:amicited/infobox-2-columns {"title":"A useful content brief answers two questions"} -->
  <!-- wp:amicited/infobox-item {"title":"What does the reader need?"} -->
  <p>State the question, decision, or task the page must resolve, including the context that changes the answer.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"What does the business need?"} -->
  <p>State the qualified action the page should support, along with the evidence required to earn that action.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-2-columns -->

WordPress powinien udostępniać dwa stałe sloty elementów, a nie nieograniczony obszar „dodaj blok”. Edytorzy mogą zmieniać kolejność dwóch elementów, ale nie mogą wstawić niezwiązanego bloku między nie ani dodać trzeciej kolumny.

Przykłady

Dobry przykład

To działa, ponieważ wspólny tytuł ustanawia jeden pomysł, granica czasowa tworzy autentyczną parę, a obie kolumny określają porównywalną pracę pomiarową. Każdy element pozostaje znaczący po ułożeniu lub wyodrębnieniu niezależnie.

Zły przykład

Popraw swoje treści

Pisz dobrze: Twórz użyteczne, autorytatywne i angażujące treści, które Twoja publiczność pokocha, a wyszukiwarki nagrodzą.

Inne rzeczy: SEO obejmuje również prace techniczne, linki, projekt konwersji, analitykę, budowanie marki, dystrybucję, utrzymanie i wiele innych ważnych działań.

To zawodzi, ponieważ para jest sztuczna. „Pisz dobrze” to niejasna instrukcja, „Inne rzeczy” to kategoria różnorodna, a drugi element obejmuje znacznie większy zakres niż pierwszy. Box sugeruje równe, równoległe koncepcje tam, gdzie one nie istnieją. Zastąp go prozą, która definiuje rzeczywisty cel treści, a następnie użyj listy lub oddzielnych sekcji dla poszczególnych strumieni pracy.

Znaczniki schematu i dostępność

Dwukolumnowy infobox nie ma dedykowanego typu Schema.org i nie tworzy samodzielnych danych strukturalnych. Jego tekst pozostaje częścią otaczającego Article, TechArticle lub WebPage, gdy strona kwalifikuje się do takiego znacznika. Nie oznaczaj dwóch elementów jako ItemList tylko dlatego, że są dwa; element reprezentuje relację, a niekoniecznie rankingową lub kompletną listę. Jeśli element niezależnie zawiera fakt używany gdzie indziej w danych strukturalnych, polityka schematu na poziomie strony reguluje ten fakt.

Semantyczny HTML powinien wyrażać jeden oznaczony kontener z dwiema sekcjami podrzędnymi. Użyj aside tylko wtedy, gdy para jest uzupełnieniem otaczającej narracji; użyj section, gdy jest częścią głównego wywodu. Nadaj kontenerowi dostępną nazwę poprzez jego widoczny tytuł i aria-labelledby. Każdy tytuł podrzędny musi być prawdziwym nagłówkiem na odpowiednim poziomie, a nie pogrubionym tekstem wybranym dla wyglądu.

Kolejność źródłowa jest kolejnością dostępności. Nawigacja klawiaturą, czytniki ekranu, kopiowanie-wklejanie i wąskie ekrany muszą napotkać element pierwszy przed drugim. CSS może tworzyć kolumny, ale nie może ich wizualnie odwracać. Nigdy nie odwołuj się do „lewego boxu” lub „prawego boxu”, ponieważ te pozycje znikają po ułożeniu. Kolor, kształt ikony i tło nie mogą być jedynym sposobem rozróżnienia elementów. Projekt musi obsługiwać powiększenie tekstu bez obcinania, przewijania poziomego lub nakładania się kolumn.

Zasady pisania

Zacznij od napisania zdania nadrzędnego: „Ten pomysł ma dwie części: X i Y.” Jeśli to zdanie jest nieprecyzyjne, nie używaj tego elementu. Nadaj obu tytułom elementów tę samą formę gramatyczną — dwa rzeczowniki, dwa pytania lub dwa wyrażenia czasowe — ponieważ równoległy język czyni relację natychmiast czytelną.

Używaj dokładnie dwóch elementów. Zachowaj każdy tytuł w granicach 2–7 słów, a każdą treść w zakresie 30–90 słów tam, gdzie to możliwe, z absolutnym maksimum 120 słów. Różnica jednego zdania jest dopuszczalna; 35-wyrazowy element obok 110-wyrazowego wymaga edycji lub innej struktury. Każda treść powinna odpowiadać na to samo ukryte pytanie i używać porównywalnej głębi dowodów. Dopasowana głębia nie oznacza wypełniania krótkiej odpowiedzi wypełniaczem.

Używaj bezpośredniego, neutralnego języka. Określ rozróżnienie w tytułach i wyjaśnij jego konsekwencje w treściach. Preferuj „Przed uruchomieniem / Po uruchomieniu” zamiast „Pierwszy / Drugi”, ponieważ znaczące etykiety przetrwają ekstrakcję. Unikaj „albo/albo”, chyba że wybory są rzeczywiście wykluczające się, i unikaj „versus”, gdy elementy się uzupełniają.

Nigdy nie umieszczaj wewnątrz elementu:

• Trzeciego elementu, nawet jeśli renderer mógłby go zawinąć.
• Wieloetapowej procedury, długiej listy punktowanej, tabeli danych, siatki cenowej, formularza, opinii klienta lub banera promocyjnego.
• Niezależnych sekcji H2, zagnieżdżonych infoboxów, zakładek, akordeonów, wideo ani galerii obrazów.
• Wymaganego tekstu prawnego, ostrzeżeń bezpieczeństwa, list źródeł ani zastrzeżeń odnoszących się tylko do jednego zdania poza boxem.
• Dwóch niepowiązanych linków zaprojektowanych tak, by przypominać konkurujące wezwania do działania.

Jeśli którykolwiek element potrzebuje podtytułów lub więcej niż dwóch akapitów, przekształć oba elementy w zwykłe sekcje strony. Jeśli czytelnicy muszą wybierać między elementami, dodaj kryteria decyzyjne w prozie lub użyj elementu porównawczego lub decyzyjnego; sama symetria wizualna nie wyjaśnia wyboru.

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

Pole postTypes w metadanych jest źródłem dla tego zestawu użycia. Każdy wymieniony format ma naturalną dwuczęściową relację, ale żaden nie powinien domyślnie zawierać elementu, gdy treść nie tworzy autentycznej pary.

Lista kontrolna QA

• Jeden pomysł nadrzędny: Box ma jeden jasny, wspólny temat, który wyjaśnia, dlaczego oba elementy należą do siebie.
• Dokładnie dwa elementy: Źródło i wyrenderowany wynik zawierają dwa elementy podrzędne — nigdy jeden, trzy ani pusty slot.
• Prawdziwy paralelizm: Oba elementy odpowiadają na ten sam rodzaj pytania i używają tytułów o równoległej gramatyce.
• Dopasowana głębia: Żaden element nie jest tokenowym przeciwwagą ani zbieraniną różności; szczegółowość i dowody są porównywalne.
• Użyteczne umiejscowienie: Box następuje po kontekście wprowadzającym i nie oddziela twierdzenia od dowodu ani kroku od jego wymagania.
• Bezpieczne sąsiedztwo: Nie sąsiaduje z inną równoległą siatką, komponentem porównawczym ani dwukolumnowym CTA.
• Ekstrahowalne sformułowania: Tytuły nadrzędne i elementów nazywają swoje tematy, a treści nie polegają na „lewej”, „prawej” ani pobliskich zaimkach.
• Kolejność responsywna: Wąskie układy układają element pierwszy przed drugim bez obcinania, przewijania poziomego ani wizualnego zmieniania kolejności.
• Dostępna struktura: Kontener ma widoczną programistyczną etykietę, tytuły podrzędne są prawdziwymi nagłówkami, a kolor lub ikony nie niosą znaczenia samodzielnie.
• Limity treści: Każda treść mieści się w dwóch akapitach i nie zawiera zagnieżdżonego złożonego komponentu, procedury ani elementu promocyjnego.
• Parzystość notacji: Przenośny Markdown, Hugo i WordPress zachowują ten sam tytuł, dwa elementy, treści i kolejność.
• Powściągliwość schematu: Żaden znacznik listy ani porównania nie jest dodawany, chyba że treść strony niezależnie się do niego kwalifikuje.

Recenzent powinien odrzucić element, gdy którykolwiek z pierwszych czterech warunków nie jest spełniony. Te niepowodzenia wskazują na problem koncepcyjny, a nie defekt stylistyczny, i zmiana szerokości lub dekoracji nie może ich naprawić.

FAQ

Wpisy FAQ w metadanych odpowiadają na powtarzające się pytania implementacyjne: liczba elementów jest ustalona na dwa, głębia ma znaczenie bardziej niż identyczna liczba słów, szczegółowe porównania wymagają tabeli, urządzenia mobilne zachowują kolejność źródłową, a element nie generuje znaczników schematu. Utrzymanie tych odpowiedzi w strukturalnych metadanych pozwala szablonowi akademii wyrenderować zatwierdzony format FAQ bez powielania treści w treści właściwej.