Infobox: 3 kolumny — format, zasady i przykłady

Trzykolumnowy infobox przedstawia dokładnie trzy równoległe punkty pod jedną wspólną ideą. Jest przydatny, gdy czytelnik musi zobaczyć rzeczywisty trójdzielny model na raz: trzy obowiązki, trzy kryteria, trzy wyniki lub trzy skoordynowane strumienie pracy. Kolumny obiecują równy status redakcyjny, więc każdy punkt musi wykonywać ten sam rodzaj pracy na porównywalnym poziomie szczegółowości.

Ten wyrenderowany element ma jeden wspólny tytuł i dokładnie trzy elementy. Wszystkie trzy tytuły to frazy rzeczownikowe, wszystkie trzy treści opisują rodzaj pewności, a ikony dodają rytmu bez przenoszenia znaczenia. Usuń ikony, a model pozostanie niezmieniony.

Dlaczego ten element jest ważny

Czytelnicy nie odbierają gęstego akapitu jako modelu tylko dlatego, że zawiera trzy zdania. Muszą utrzymać pierwsze zdanie w pamięci, wykryć przejście do drugiego i zdecydować, czy trzecie jest równe, podrzędne, czy tylko dodatkowe. Trzykolumnowy infobox czyni relację jawną. Wspólny tytuł określa, co pozostaje stałe; trzy ograniczone elementy pokazują pełny podział; dopasowana waga wizualna mówi czytelnikom, aby przeanalizowali każdy element, zanim uznają model za zrozumiany.

Pomaga to poprzez fragmentację (chunking), czyli grupowanie powiązanych informacji w łatwe do przyswojenia jednostki. Trzy to wystarczająca liczba, aby ukazać system bez tworzenia katalogu. Czytelnik może przejrzeć trzy tytuły, wejść przez punkt najbardziej dla niego istotny, a następnie porównać poziom szczegółowości. Element jest szczególnie skuteczny, gdy proza wielokrotnie powtarzałaby ten sam temat trzy razy lub ukrywała rozróżnienie w długim zdaniu.

Ekstrahowalność maszynowa to zdolność oprogramowania do wyizolowania jednostki treści bez utraty jej tematu lub relacji. Typowany trzykolumnowy infobox ujawnia jeden temat nadrzędny i troje uporządkowanych dzieci. Systemy wyszukiwania, API treści i narzędzia do wyszukiwania AI mogą zachować wspólny tytuł, tytuł każdego elementu, treść i kolejność źródłową zamiast zgadywać, czy akapit zawiera listę. Jawne nagłówki dają również każdemu elementowi użyteczną etykietę do wyszukiwania.

Ekstrakcja działa tylko wtedy, gdy słowa są samodzielne. „Pewność techniczna oznacza, że strona renderuje się, a linki działają” może przetrwać poza układem. „Trzecia część zajmuje się tym” – nie. Struktura nie może również wytworzyć trzeciego pomysłu. Postępuj zgodnie z zasadami pisania elementów : ustal model treści przed wyborem renderera. Wymóg specyficzny dla elementu – dokładnie trzy elementy – ma pierwszeństwo przed wszelkimi ogólnymi zezwoleniami na powtarzalne elementy.

Kiedy go używać

Użyj trzykolumnowego infoboxu tylko wtedy, gdy wszystkie pięć testów zostanie zaliczonych:

1. Jeden wspólny tytuł może dokładnie zarządzać całym elementem.
2. Temat dzieli się naturalnie na dokładnie trzy punkty.
3. Wszystkie trzy punkty odpowiadają na to samo ukryte pytanie.
4. Każdy punkt zasługuje na podobną głębię, uzasadnienie i wagę wizualną.
5. Każdy punkt można wyjaśnić w jednym lub dwóch krótkich akapitach bez zagnieżdżonej struktury.

Silne zastosowania obejmują trzy składniki frameworku, trzy obowiązki właściciela, trzy wymiary jakości, trzy wyniki z jednej możliwości lub trzy kontrole wykonywane na tym samym etapie. Relacja może być komplementarna, sekwencyjna lub kategoryczna, ale musi być wyraźnie określona. Jeśli autor nie jest w stanie dokończyć zdania „Te trzy należą do siebie, ponieważ…”, grupowanie jest prawdopodobnie wizualnym wypełniaczem.

Najczęstszym niemal błędem jest prawdziwa para plus słaby trzeci element. „Ludzie, proces i więcej” nie staje się trójdzielnym modelem tylko dlatego, że układ ma trzy miejsca. Podobnie „Szybkość, dokładność i wartość”, gdy artykuł definiuje tylko szybkość i dokładność, a wartość traktuje jako ich rezultat. Zachowaj parę, wyjaśnij rezultat w prozie lub wybierz inny element.

Nie używaj tego infoboxu do trzech sekwencyjnych instrukcji. Kolumny osłabiają sekwencję, zwłaszcza gdy układają się pionowo przy wąskich szerokościach; użyj listy kroków, gdy kolejność wykonania ma znaczenie. Nie używaj go do trzech produktów ocenianych według kilku kryteriów; użyj tabeli porównawczej. Nie używaj go do listy, która dziś zawiera trzy fakty, ale może zyskać czwarty podczas następnej aktualizacji. Stały trzykolumnowy kontrakt jest odpowiedni tylko wtedy, gdy trzy jest nieodłączną cechą pomysłu.

Inne niemal błędy obejmują nagłówek plus dwa rzeczywiste elementy, jeden element zawierający wszystkie zastrzeżenia, trzy twierdzenia promocyjne bez mechanizmu lub dowodu oraz jeden segment odbiorców podzielony na trzy arbitralne demografie. W każdym przypadku układ wyolbrzymia relację, na którą treść nie zapracowała.

Gdzie go umieścić

Umieść infobox bezpośrednio po akapicie wprowadzającym nadrzędną ideę. Ten akapit powinien wyjaśniać, dlaczego trójdzielny widok jest pomocny; wspólny tytuł nazywa model, a elementy definiują jego części. Po elemencie umieść interpretację, dowód lub przejście odnoszące się do grupy jako całości.

Może pojawić się bezpośrednio pod nagłówkiem H2, gdy ten nagłówek dostarcza wspólnego tytułu, a żaden akapit ani komponent nie znajduje się pomiędzy. Może również następować po definicji, gdy trzy elementy rozwijają wymiary terminu. Nie może przerywać twierdzenia i jego cytatu, ostrzeżenia i warunku, który je wywołuje, kroku i jego oczekiwanego rezultatu ani zdania wprowadzającego konwencjonalną listę. Te relacje muszą pozostać ciągłe.

Nie umieszczaj go bezpośrednio obok innej trzykolumnowej siatki, tabeli cen, panelu zakładek, zestawu kart lub wezwania do działania z trzema opcjami. Powtarzająca się geometria sprawia, że redakcyjne wyjaśnienie wygląda interaktywnie lub komercyjnie i zmusza czytelników do wnioskowania, które grupowanie ma znaczenie. Wstaw wyjaśniającą prozę lub wybierz jedną strukturę, która przenosi całą relację. Unikaj umieszczania drugiego infoboxu w tej samej krótkiej sekcji; powtórzenie zamienia przemyślany model w dekoracyjny mebel.

Na długiej stronie wiele trzykolumnowych infoboxów jest akceptowalnych tylko pod różnymi nagłówkami i dla rzeczywiście różnych modeli. Nie powinny być używane jako domyślne traktowanie każdego tria w tekście.

Anatomia

Anatomia zawiera jeden region nadrzędny i trzy powtarzane regiony elementów. Oznaczony zrzut ekranu powinien identyfikować części semantyczne, a nie kolor, promień czy odstępy, aby specyfikacja przetrwała przeprojektowanie.

1. Zewnętrzna granica: Grupuje tytuł i wszystkie trzy elementy jako jedną jednostkę redakcyjną.
2. Wspólny tytuł: Nazywa ideę podzieloną przez trzy elementy. Nie jest czwartym elementem.
3. Opcjonalne miejsce na ikonę: Zawiera jedną zatwierdzoną ikonę dekoracyjną na element; wszystkie trzy miejsca są używane razem lub pomijane razem.
4. Tytuł elementu: Nazywa jednego członka zbioru językiem równoległym do pozostałych dwóch tytułów.
5. Treść elementu: Wyjaśnia tego członka na dopasowanym poziomie szczegółowości i pozostaje zrozumiała po ekstrakcji.
6. Relacja układu: Używa trzech równych kolumn, gdzie pozwala na to miejsce, i układa element pierwszy, drugi, a następnie trzeci na wąskich ekranach.

Autorzy kontrolują tytuły, treści, tokeny ikon i kolejność źródłową. Renderer kontroluje szerokość kolumn, odstępy, punkty graniczne, obramowania, tła i typografię.

Przykłady projektowe

Istnieje jeden element semantyczny z czterema obsługiwanymi wariantami i jednym stanem responsywnym. Żaden nie zmienia dokładnego kontraktu na trzy elementy.

Domyślny wariant z tytułami: Preferowany do treści wyjaśniających. Wspólny tytuł i trzy tytuły elementów czynią hierarchię jawną; ikony nie występują.

Wariant z ikonami: Dodaje jedną ikonę dekoracyjną do każdego elementu. Ikony muszą należeć do tej samej rodziny, rozmiaru i wagi wizualnej. Mieszanka ikon, zdjęć i pustych miejsc nie jest obsługiwana.

Wariant z tytułem kontekstowym: Bezpośrednio poprzedzający nagłówek H2 dostarcza wspólnego tytułu. Jest to dozwolone tylko wtedy, gdy kontener może programowo odwołać się do tego widocznego nagłówka i nic nie oddziela nagłówka od elementu.

Wariant kompaktowy: Odpowiedni dla trzech krótkich definicji lub kontroli. Każda treść jest nadal pełnym zdaniem, a nie sloganem lub fragmentem etykiety.

Stan wąskiego okna: Elementy układają się pionowo w kolejności autorskiej. Żadne sformułowanie nie może zależeć od pozycji lewej, środkowej ani prawej.

Parametry

Kontrakt oddziela autorskie znaczenie od prezentacji. Responsywne kolumny i stylowanie ikon należą do renderera; pola treści i porządek semantyczny należą do źródła.

Tytuł jest wymagany, chyba że bezpośrednio poprzedzający nagłówek dostarcza tego samego tematu nadrzędnego i etykietuje kontener. Treść elementu może zawierać podkreślenia, kod wbudowany i jeden odpowiedni link tekstowy. Nie może zawierać zagnieżdżonych nagłówków, tabel, list dłuższych niż trzy krótkie wypunktowania, multimediów, formularzy, wezwań do działania ani innego komponentu.

Składnia i przykłady kodu

Wszystkie trzy notacje zachowują ten sam tytuł, trzy uporządkowane elementy, opcjonalne tokeny ikon i treści. Przenośna dyrektywa Markdown jest kanonicznym źródłem. Hugo i WordPress to kontrakty adapterów i muszą odrzucić każdą liczbę elementów inną niż trzy.

Przenośna dyrektywa Markdown

:::infobox-3-columns
## A publishable page needs three kinds of confidence

::item{icon="reader"}
### Reader confidence

The answer is clear, complete, and specific enough to guide a decision or action.
::

::item{icon="editorial"}
### Editorial confidence

Claims are supported, terminology is consistent, and every required qualification remains attached.
::

::item{icon="technical"}
### Technical confidence

The page renders, links resolve, metadata maps correctly, and machines can recover its structure.
::
:::

Pierwszy nadrzędny nagłówek mapuje się na title. Każde ::item mapuje swój pierwszy nagłówek na item.title, pozostałą treść na item.content i opcjonalny atrybut icon na zatwierdzony token ikony. Trzy zagnieżdżone elementy są wymagane nawet wtedy, gdy układ układa je pionowo.

Mapowanie shortcode’a Hugo

{{< infobox-3-columns title="A publishable page needs three kinds of confidence" variant="icons" >}}
  {{< infobox-item title="Reader confidence" icon="reader" >}}
  The answer is clear, complete, and specific enough to guide a decision or action.
  {{< /infobox-item >}}
  {{< infobox-item title="Editorial confidence" icon="editorial" >}}
  Claims are supported, terminology is consistent, and every required qualification remains attached.
  {{< /infobox-item >}}
  {{< infobox-item title="Technical confidence" icon="technical" >}}
  The page renders, links resolve, metadata maps correctly, and machines can recover its structure.
  {{< /infobox-item >}}
{{< /infobox-3-columns >}}

Jest to przenośna specyfikacja adaptera, a nie obietnica, że bieżąca strona rejestruje te shortcody. Używa tylko nazwanych parametrów, zachowuje kolejność źródłową, waliduje tokeny ikon i kończy się błędem walidacji autorskiej zamiast po cichu upuszczać lub opakowywać dodatkowy element.

Blok WordPress

<!-- wp:amicited/infobox-3-columns {"title":"A publishable page needs three kinds of confidence","variant":"icons"} -->
  <!-- wp:amicited/infobox-item {"title":"Reader confidence","icon":"reader"} -->
  <p>The answer is clear, complete, and specific enough to guide a decision or action.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Editorial confidence","icon":"editorial"} -->
  <p>Claims are supported, terminology is consistent, and every required qualification remains attached.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Technical confidence","icon":"technical"} -->
  <p>The page renders, links resolve, metadata maps correctly, and machines can recover its structure.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-3-columns -->

Edytor powinien udostępniać trzy stałe miejsca na elementy. Może pozwolić autorowi na zmianę kolejności elementów, ale nie może oferować nieograniczonego insertera, który umożliwia dodanie czwartego dziecka lub niepowiązanego bloku.

Przykłady

Dobry przykład: prawdziwy trójdzielny model operacyjny

Działa to, ponieważ wspólny tytuł definiuje jeden model odpowiedzialności, trzy role są odrębne, a każda treść odpowiada na to samo pytanie: co ten właściciel musi zweryfikować? Elementy używają równoległych tytułów rzeczownikowych i porównywalnej głębi. Żaden nie istnieje tylko po to, by wypełnić wiersz.

Zły przykład: para rozszerzona do trzech

Trzy sposoby na ulepszenie strony docelowej

Wyjaśnij ofertę: Nazwij odbiorców, problem, mechanizm i oczekiwany rezultat językiem, który czytelnik może zweryfikować.

Udowodnij twierdzenie: Dodaj odpowiednie dowody, wyjaśnij ich ograniczenia i utrzymuj cytaty przypisane do twierdzeń, które wspierają.

Spraw, by “zaskoczyła”: Dodaj atrakcyjne kolory i cokolwiek innego, co wydaje się angażujące.

Pierwsze dwa elementy to wymagania redakcyjne z możliwymi do zaobserwowania rezultatami. Trzeci to niejasna rada wizualna, nie ma odpowiadającego standardu dowodowego i pełni inną funkcję. Został dodany, ponieważ projekt wymagał trzech kolumn, a nie dlatego, że model ma trzy części. Usuń trzeci element i użyj dwuczęściowej struktury lub zdefiniuj prawdziwy trzeci wymóg, taki jak redukcja tarcia interakcji, i poprzyj go na tym samym poziomie szczegółowości.

Znaczniki schematu i dostępność

Trzykolumnowy 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 się kwalifikuje. Nie oznaczaj dzieci jako ItemList tylko dlatego, że jest ich trzy, i nie wnioskuj HowTo z sekwencyjnie brzmiących etykiet. Dostarczaj znaczniki schematu na poziomie strony tylko wtedy, gdy podstawowa treść niezależnie spełnia wymagania tego schematu.

Użyj jednego oznaczonego semantycznie kontenera z trzema sekcjami potomnymi. Użyj <section>, gdy model jest częścią głównego wywodu, i <aside>, gdy jest uzupełniający. Połącz widoczny wspólny tytuł za pomocą aria-labelledby i nadaj każdemu dziecku prawdziwy nagłówek na odpowiednim poziomie dokumentu. Pogrubiony tekst nie jest substytutem nagłówka.

Kolejność źródłowa to kolejność czytania. Czytniki ekranu, nawigacja klawiaturowa, skopiowany tekst i układy mobilne muszą napotkać element pierwszy, drugi, a następnie trzeci. CSS może tworzyć kolumny, ale nie może używać reguł kolejności do ich przetasowania. Nigdy nie pisz „lewy”, „środkowy” ani „prawy”; te pozycje znikają, gdy elementy układają się pionowo.

Ikony są dekoracyjne, chyba że przekazują informacje nieobecne w tytule. Dekoracyjne ikony używają aria-hidden="true" w HTML lub pustego tekstu alternatywnego, gdy są renderowane jako obrazy. Jeśli ikona jest informacyjna, jej znaczenie musi również pojawić się w widocznym tekście; dostępna nazwa ukryta przed wzrokiem nie pomaga czytelnikom, którzy widzą stronę, ale nie potrafią zinterpretować symbolu. Kolor i kształt ikony nigdy nie mogą być jedynym rozróżnieniem między elementami.

Przy wąskich szerokościach ułóż elementy pionowo, zanim tekst stanie się zbyt ciasny. Wspieraj powiększanie tekstu bez obcinania, nakładania się lub przewijania poziomego na poziomie strony. Trzykolumnowy zrzut ekranu nie zastępuje responsywnej treści semantycznej.

Zasady pisania

Zacznij od zdania „Ten pomysł ma trzy części: X, Y i Z.” Zdanie musi pozostać dokładne po zdefiniowaniu każdej części. Jeśli jedna część jest wynikiem pozostałych dwóch, szerokim workiem na wszystko lub drobnym przykładem, model nie jest naprawdę równoległy.

Użyj dokładnie trzech elementów. Utrzymuj każdy tytuł w zakresie 2–7 słów i używaj tego samego wzorca gramatycznego: trzy frazy rzeczownikowe, trzy pytania lub trzy etykiety czasowe. Utrzymuj każdą treść w zakresie 25–80 słów, gdzie to możliwe, i nigdy nie przekraczaj 110. Różnica jednego zdania jest akceptowalna. 25-wyrazowy element obok dwóch 100-wyrazowych wymaga edycji lub innej struktury.

Dopasowana głębia oznacza porównywalną pracę wyjaśniającą, a nie wypełniacz. Każda treść powinna odpowiadać na to samo ukryte pytanie, zawierać podobny poziom szczegółowości i przedstawiać konsekwencje na podobnym poziomie. Jeśli jeden element naprawdę potrzebuje więcej wyjaśnień, przenieś model do zwykłych sekcji, gdzie długość może się uczciwie różnić.

Używaj bezpośredniego, neutralnego języka. Tytuły powinny identyfikować znaczenie, a nie pozycję: „Odkrywanie / Produkcja / Przegląd” jest mocniejsze niż „Pierwszy / Drugi / Trzeci.” Sekwencyjne etykiety są akceptowalne tylko wtedy, gdy każdy element podsumowuje fazę, a nie instruuje czytelnika przez kroki. Unikaj superlatywów, niepopartych twierdzeń o korzyściach i trzech sloganów udających wyjaśnienie.

Ikony są opcjonalne. Użyj wszystkich trzech lub żadnej, wybierz je z jednej zatwierdzonej rodziny i utrzymuj je wizualnie spójne. Nie wybieraj ikon przed tytułami, nie używaj emoji jako produkcyjnych tokenów ikon i nie pozwól, aby ikona zastąpiła znaczący nagłówek elementu.

Nigdy nie umieszczaj wewnątrz elementu:

• Dwóch lub czterech elementów, pustego elementu ani „różnorodnego” trzeciego miejsca.
• Szczegółowej procedury, macierzy porównawczej, planu cenowego, formularza, karuzeli opinii ani banera promocyjnego.
• Zagnieżdżonych sekcji H2, innego infoboxu, zakładek, paneli akordeonu, wideo ani galerii obrazów.
• Długich list wypunktowanych, list źródeł, zastrzeżeń prawnych, ostrzeżeń bezpieczeństwa ani kwalifikacji oderwanych od twierdzenia, którym zarządzają.
• Trzech niepowiązanych linków stylizowanych na równe wezwania do działania.

Gdy treść przekracza te ograniczenia, przenieś trzy elementy do zwykłych sekcji strony. Stały układ nigdy nie powinien być powodem do kompresji istotnych niuansów lub ukrywania zastrzeżenia.

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

Pole postTypes w metadanych to zarejestrowany zbiór zastosowań. Identyfikuje formaty, które często zawierają znaczący trójdzielny model; nie wymaga infoboxu, gdy źródło nie ma prawdziwego tria.

Lista kontrolna QA

• Jedna nadrzędna idea: Precyzyjny wspólny tytuł wyjaśnia, dlaczego wszystkie trzy elementy należą do siebie.
• Dokładnie trzy elementy: Źródło i renderowane wyjście zawierają troje kompletnych dzieci – nigdy dwóch, czterech ani pustego miejsca.
• Prawdziwy trójdzielny podział: Usunięcie dowolnego elementu czyni model niekompletnym; żaden nie jest wypełniaczem, rezultatem ani kategorią różnorodną.
• Równoległe tytuły: Wszystkie tytuły elementów używają tej samej formy gramatycznej i identyfikują znaczenie, a nie pozycję na ekranie.
• Dopasowana głębia: Każda treść odpowiada na to samo ukryte pytanie z porównywalnym poziomem szczegółowości i dowodów.
• Właściwe umiejscowienie: Element znajduje się po swoim kontekście wprowadzającym i nie oddziela twierdzenia, ostrzeżenia, kroku ani cytatu od jego zależnej treści.
• Bezpieczni sąsiedzi: Nie przylega do innej trzykolumnowej siatki, bloku cen, panelu zakładek ani wezwania do działania z trzema opcjami.
• Ekstrahowalne sformułowania: Wspólny tytuł i tytuły elementów nazywają swoje tematy; treści nie polegają na pobliskich zaimkach ani pozycji wizualnej.
• Spójność ikon: Wszystkie trzy elementy używają zatwierdzonych ikon z jednej rodziny lub żaden element nie używa ikony; znaczenie pozostaje w tekście.
• Responsywna kolejność: Na urządzeniach mobilnych elementy układają się pionowo: element pierwszy, drugi, a następnie trzeci, bez obcinania, przewijania poziomego ani zmiany kolejności przez CSS.
• Dostępna semantyka: Kontener ma widoczną programową etykietę, tytuły elementów są nagłówkami, a ikony dekoracyjne są ukryte przed technologiami asystującymi.
• Ograniczenia treści: Treści mieszczą się w dwóch krótkich akapitach i nie zawierają zagnieżdżonego złożonego komponentu, procedury ani elementu promocyjnego.
• Parzystość notacji: Przenośny Markdown, Hugo i WordPress zachowują ten sam tytuł, trzy elementy, tokeny ikon, treści i kolejność.
• Powściągliwość schematu: Renderer nie wnioskuje znaczników listy, porównania ani instrukcji z trzech kolumn.

Osoba recenzująca powinna odrzucić element, gdy liczba elementów, prawdziwa trójdzielna logika lub dopasowana głębia zawodzą. Są to defekty modelu treści; wizualne upiększenie nie może ich naprawić.

FAQ

Wpisy FAQ w metadanych obejmują stałą liczbę elementów, dopasowaną głębię, opcjonalne ikony, kolejność mobilną i powściągliwość schematu. Szablon akademii może renderować te zatwierdzone odpowiedzi bez ich duplikowania w treści.