Iconbox — Format, zasady i przykłady

Iconbox łączy jedną celową ikonę z krótką etykietą i zwięzłym wyjaśnieniem. Ikona ułatwia rozpoznanie tematu, etykieta go nazywa, a tekst wyjaśnia, dlaczego jest istotny. Element sprawdza się najlepiej jako jeden z małej, równorzędnej grupy – na przykład trzech możliwości produktu lub czterech wymagań – a nie jako ozdobnik rozrzucony po stronie.

Symbol zaznaczenia jest celowy: wzmacnia weryfikację, zamiast wypełniać pusty narożnik. Ponieważ widoczna etykieta już wyraża to samo znaczenie, wyrenderowany symbol jest ukryty przed technologią asystującą. Osoba korzystająca z czytnika ekranu otrzymuje pełny przekaz z „Zweryfikowane źródła” i jego wyjaśnienia, bez słyszenia zbędnego komunikatu o ikonie.

Dlaczego ten element ma znaczenie

Czytelnicy nie przetwarzają każdego zdania po kolei. Szukają punktów orientacyjnych, które odpowiedzą na pytanie „Czy to dotyczy tego, czego potrzebuję?”. Iconbox tworzy zwarty wzór rozpoznawania: najpierw kształt, potem etykieta, na końcu wyjaśnienie. W dobrze skonstruowanej grupie czytelnicy mogą przeskanować etykiety, zidentyfikować odpowiednią kategorię, a następnie przeczytać tylko potrzebny tekst wspierający. Zmniejsza to wysiłek związany z rozszyfrowywaniem akapitu zawierającego kilka równorzędnych pomysłów.

Wartość psychologiczna wynika z rozpoznawania, porcjowania i spójności. Znajoma tarcza może sugerować ochronę, zegar – czas, a dokument – raport, zanim czytelnik skończy czytać etykietę. Etykieta usuwa następnie niejednoznaczność. Powtarzająca się geometria mówi czytelnikowi, że elementy mają tę samą rangę redakcyjną. Ten sygnał jest użyteczny tylko wtedy, gdy treść rzeczywiście jest równorzędna; siatka kart nie może zmienić niezwiązanych ze sobą twierdzeń w spójny zbiór.

Ekstrakcja maszynowa oznacza, że oprogramowanie może wyizolować jednostkę treści, zachowując jej temat i twierdzenie. Ustrukturyzowany iconbox udostępnia nazwany element ze zwięzłą treścią i stałą pozycją w opcjonalnej grupie. Systemy wyszukiwania mogą wyodrębnić „Zweryfikowane źródła” wraz z ich wyjaśnieniem, zamiast zgadywać, które zdanie należy do którego symbolu wizualnego. Sama ikona ma niewielki wkład w ekstrakcję, więc widoczne słowa musieć nieść pełną informację.

Ikona musi jednak mieć znaczenie redakcyjne. Dowolny błyskotka, rakieta czy abstrakcyjny kształt dodają szumu dla ludzi i nie wnoszą użytecznej semantyki dla maszyn. „Celowa, ale zbędna” to prawidłowy tryb dostępności: ikona może pomóc widzącym czytelnikom rozpoznać kategorię, będąc jednocześnie ukrytą przed technologią asystującą, ponieważ widoczna etykieta już przekazuje jej znaczenie. Postępuj zgodnie z zasadami pisania elementów , najpierw szkicując pełną koncepcję, a iconbox wybierając dopiero w późniejszym przejściu strukturalnym. Ograniczenia specyficzne dla tego elementu mają pierwszeństwo w kwestii wyboru ikony, grupowania i mapowania dostępności.

Kiedy go używać

Użyj iconboxa, gdy treść stanowi zwięzłą, nazwaną koncepcję, a ikona z zatwierdzonego systemu może ją reprezentować bez zgadywania. Grupa jest odpowiednia, gdy od dwóch do sześciu elementów odpowiada na to samo pytanie pomocnicze na porównywalnym poziomie szczegółowości: „Co jest zawarte?”, „Które zabezpieczenia mają zastosowanie?” lub „Co produkuje ten przepływ pracy?”. Każdy element powinien być zrozumiały po skopiowaniu jako zwykły tekst.

Silne zastosowania obejmują podsumowanie funkcji z jednym rezultatem na element, przegląd wymagań przed szczegółowymi instrukcjami, zbiór zasad serwisowych lub zwięzłe wyjaśnienie wyników przepływu pracy. Ikona jest pomocą w rozpoznawaniu, a nie dowodem. Szczegóły, takie jak formaty plików, okna czasowe odpowiedzi, obsługiwane systemy czy własność, nadal należą do etykiety i treści.

Często spotykane przypadki graniczne:

• Użyj zwykłej listy punktowanej, gdy ikona byłaby tym samym znacznikiem wyboru dla każdego elementu. Powtarzalność nie niesie żadnego znaczenia kategoryzującego.
• Użyj tabeli porównawczej, gdy elementy muszą być oceniane według wspólnych kryteriów. Osobne iconboxy utrudniają porównanie między elementami.
• Użyj listy kroków, gdy liczy się kolejność, ukończenie lub zależność. Rząd iconboxów sugeruje równorzędność, a nie sekwencję.
• Użyj ramki definicji, gdy jeden nieznany termin wymaga formalnego znaczenia. Ikona nie wzmacnia precyzyjnej definicji.
• Użyj ostrzeżenia lub notatki, gdy głównym zadaniem jest ważność i przerwanie. Iconbox ma neutralną wagę strukturalną.
• Użyj pełnych sekcji, gdy każdy element wymaga kilku akapitów, dowodów, multimediów lub podtytułów.

Nie używaj iconboxów wyłącznie po to, by treściowo-gęsta strona wyglądała na zaprojektowaną. Jeśli autor wybiera ikonę po poszukiwaniu czegoś atrakcyjnego wizualnie, a nie semantycznie trafnego, treść prawdopodobnie nie potrzebuje tego elementu.

Gdzie go umieszczać

Umieść samodzielny iconbox bezpośrednio po akapicie, który wspiera. Umieść grupę iconboxów po nagłówku i jednym akapicie wprowadzającym, który nazywa wspólne pytanie. Ten kontekst wyjaśnia, dlaczego elementy należą do siebie; grupa daje następnie zwięzłą odpowiedź. Po grupie umieść szczegóły, dowody lub następną decyzję, zamiast powtarzać każdy box prozą.

W artykule pierwsza grupa powinna pojawić się dopiero po bezpośredniej odpowiedzi lub definicji otwierającej. Na stronie komercyjnej grupa możliwości może nastąpić po opisie problemu i rezultatu, ale nie może poprzedzać propozycji wartości wyłącznie w celu stworzenia wizualnego hero. W dokumentacji umieść grupę wymagań przed procedurą, którą reguluje, zachowując wymaganą kolejność i kryteria akceptacji w zwykłych instrukcjach.

Nie umieszczaj grupy iconboxów bezpośrednio obok innej siatki kart, tabeli porównawczej, ściany logo, paska statystyk ani wielokolumnowego wezwania do działania. Sąsiadujące siatki spłaszczają hierarchię informacji i sprawiają, że fakty redakcyjne przypominają promocje. Wstaw między nie prozę wyjaśniającą lub granicę sekcji. Nie umieszczaj iconboxa między twierdzeniem a jego źródłem, między krokiem a jego oczekiwanym rezultatem, wewnątrz komórki tabeli ani wewnątrz innego iconboxa. Nigdy nie zestawiaj dwóch grup jedna za drugą.

Anatomia

Iconbox zawiera trzy obszary autorskie i jedną relację kontekstową. Zrzut ekranu oznacza obszary niosące znaczenie, a nie wartości pikseli, aby kontrakt przetrwał zmianę wyglądu.

1. Obszar ikony: Używa jednej zatwierdzonej ikony, której koncepcja pasuje do elementu. Nigdy nie zastępuje widocznych słów.
2. Krótka etykieta: Nazywa funkcję, wymaganie, rezultat lub kategorię konkretnym językiem.
3. Treść tekstowa: Wyjaśnia konsekwencję, zakres lub dowód w jednym zwięzłym akapicie.
4. Opcjonalny cel: Podaje jeden opisowy następny krok, gdy używany jest wariant linkowany.
5. Kontekst grupy: Poprzedzający nagłówek lub dostępna etykieta grupy określa pytanie, na które odpowiadają wszystkie iconboxy w grupie.

Obramowanie, tło, zaokrąglenie, rozmiar ikony, kolor, kolumny siatki i punkty graniczne należą do warstwy renderującej. Autorzy wybierają treść semantyczną, tożsamość ikony, kolejność źródłową i tryb dostępności.

Przykłady projektowe

Element obsługuje cztery warianty prezentacji. Wszystkie zachowują tę samą hierarchię ikona-etykieta-treść i tę samą kolejność źródłową.

Standardowy: Domyślna samodzielna lub zgrupowana karta. Używaj, gdy treść potrzebuje 25–60 słów, aby wyjaśnić element.

Kompaktowy: Używa jednozdaniowej treści liczącej 12–30 słów. Nadaje się do znanych koncepcji, a nie do kompresowania niuansowego zastrzeżenia.

Linkowany: Dodaje jeden cel. Preferuj widoczny opisowy link. Jeśli cała karta jest interaktywna, renderer musi zapewnić pojedynczy cel linku i wyraźny stan fokusu.

Statusowy: Komunikuje stan, taki jak dostępny, ograniczony, zaliczony lub oczekujący. Słowo określające status musi być widoczne; ani kolor, ani kształt ikony nie mogą być jedynym sygnałem.

Wąski widok: Każda grupa staje się jedną kolumną w kolejności źródłowej. Renderer nie może zmieniać kolejności boxów, aby wyrównać ich wysokości.

Tryb dostępności jest oddzielny od wariantu prezentacji. Zbędna ikona jest ukryta przed technologią asystującą, ponieważ jej etykieta niesie to samo znaczenie. Naprawdę informacyjna ikona otrzymuje programowy odpowiednik tekstowy, ale autorzy powinni normalnie dodać tę informację do widocznej etykiety, zamiast utrzymywać fakt przekazywany wyłącznie ikoną.

Parametry

Kontrakt utrzymuje znaczenie autorskie oddzielone od prezentacji. Limity dotyczą każdego wariantu, chyba że podano ostrzejsze ograniczenie.

icon musi pochodzić z zatwierdzonego rejestru ikon; autorzy nie mogą dostarczać własnych SVG, emoji, adresów URL obrazów ani nazw klas ikon-font. Ograniczony Markdown dopuszcza wyróżnienie, kod wbudowany i jeden link wbudowany. Wyklucza zagnieżdżone nagłówki, listy, tabele, multimedia, formularze, przyciski, akordeony i inne komponenty. Gdy pierwszy nagłówek treści dostarcza label, adapter usuwa ten nagłówek z treści i renderuje go na odpowiednim względnym poziomie strony.

Składnia i przykłady kodu

Każdy zapis odwzorowuje tę samą ikonę, etykietę, treść, wariant i tryb dostępności. Klucz ikony jest semantyczny i przenośny; każda platforma mapuje shield-check na swój zatwierdzony lokalny zasób.

Przenośna dyrektywa Markdown

:::iconbox{icon="shield-check" iconMode="redundant" variant="standard"}
### Zweryfikowane źródła

Każde stwierdzenie faktograficzne prowadzi do źródła, które recenzent może sprawdzić, dzięki czemu dowody pozostają widoczne podczas pisania, zatwierdzania i późniejszych aktualizacji.
:::

Pierwszy nagłówek staje się label; pozostały akapit staje się content. Ikona jest zbędna, ponieważ „Zweryfikowane źródła” przekazuje pełne znaczenie w widocznym tekście.

Shortcode Hugo

{{< iconbox icon="shield-check" label="Zweryfikowane źródła" iconMode="redundant" variant="standard" >}}
Każde stwierdzenie faktograficzne prowadzi do źródła, które recenzent może sprawdzić, dzięki czemu dowody pozostają widoczne podczas pisania, zatwierdzania i późniejszych aktualizacji.
{{< /iconbox >}}

Adapter używa tylko nazwanych parametrów. Musi odrzucić nieznany klucz ikony lub wariant, zamiast po cichu wyświetlać zastępczy, który może zmienić znaczenie.

Blok WordPress

<!-- wp:amicited/iconbox {"icon":"shield-check","label":"Zweryfikowane źródła","iconMode":"redundant","variant":"standard"} -->
<p>Każde stwierdzenie faktograficzne prowadzi do źródła, które recenzent może sprawdzić, dzięki czemu dowody pozostają widoczne podczas pisania, zatwierdzania i późniejszych aktualizacji.</p>
<!-- /wp:amicited/iconbox -->

Edytor powinien udostępniać przeszukiwalny wybór zatwierdzonych ikon, a nie pole na dowolny tekst. Jego podgląd dostępnej nazwy powinien pokazywać, czy ikona jest ukryta, czy odczytywana.

Przykłady

Dobry przykład

Działa to, ponieważ symbol dokumentu pasuje do koncepcji raportu, etykieta nazywa konkretną możliwość, a treść wyjaśnia wynik i jego praktyczne konsekwencje. Widoczny tekst jest kompletny bez symbolu, więc symbol można ukryć przed technologią asystującą.

Zły przykład

To zawodzi na każdym poziomie. Rakieta jest dekoracyjna, a nie dokładnym znacznikiem kategorii; etykieta nie zawiera konkretnej możliwości, a treść nie podaje mechanizmu, granic ani weryfikowalnego rezultatu. Emoji może być również odczytywane w nieprzewidywalny sposób. Zastąp blok konkretnym stwierdzeniem – co staje się szybsze, przez jaki mechanizm, w jakich warunkach – lub usuń go.

Znaczniki Schema i dostępność

Iconbox nie ma dedykowanego typu Schema.org. Jego etykieta i treść pozostają zawartością otaczającego Article, TechArticle, WebPage, Product lub innego bytu na poziomie strony, gdy znaczniki te są uzasadnione. Grupa wizualna nie jest automatycznie ItemList; używaj znaczników listy tylko wtedy, gdy zbiór jest kompletny lub uporządkowany w modelu treści. Statusowy iconbox nie uzasadnia właściwości Review, Rating ani dostępności bez wymaganych danych bazowych.

Renderuj nieinteraktywny iconbox jako section, gdy jest częścią głównego wywodu, lub jako aside, gdy jest uzupełnieniem. Nadaj mu dostępną nazwę poprzez widoczną etykietę. Użyj prawdziwego nagłówka na odpowiednim poziomie; nie wybieraj h3 tylko dlatego, że jego domyślny rozmiar czcionki wygląda dobrze. Powtarzające się równorzędne elementy mogą znajdować się wewnątrz listy, gdy grupa rzeczywiście jest listą, a każdy iconbox w jednym elemencie listy.

Większość ikon powinna być osadzonym SVG z aria-hidden="true" i focusable="false", ponieważ widoczna etykieta powtarza ich znaczenie. Nie czyni to ich redakcyjnie dekoracyjnymi: wciąż pomagają w rozpoznawaniu wzrokowym, ale odczytywanie tej samej koncepcji dwukrotnie dodaje szumu. Jeśli ikona przekazuje informację nieobecną w etykiecie, zapewnij dostępny odpowiednik tekstowy poprzez mapowanie iconText komponentu. Jeszcze lepiej – popraw widoczną etykietę, aby wszyscy czytelnicy otrzymali tę informację.

Nigdy nie polegaj wyłącznie na kolorze, pozycji, ruchu ani kształcie ikony. Zielony znacznik wyboru potrzebuje widocznego tekstu, takiego jak „Zaliczony”; kłódka potrzebuje „Ograniczony” lub dokładnego warunku dostępu. Ikony wymagają wystarczającego kontrastu względem tła, ale tokeny kolorów należą do warstwy renderującej. Ozdobne elementy, które niczego nie przekazują, należy usunąć, a nie opatrywać rozwlekłym tekstem alternatywnym. Unikaj alt="ikona", nazw plików, nazw glifów Unicode i zduplikowanego tekstu, takiego jak „Tarcza, Zweryfikowane źródła”.

W przypadku wariantu linkowanego jeden iconbox ma jeden cel. Interaktywna nazwa musi komunikować ten cel, fokus klawiaturowy musi być widoczny, a obszar klikalny nie może zawierać innego linku ani przycisku. Najechanie kursorem nie może ujawniać istotnego tekstu. Kolejność czytania i klawiatury musi być zgodna z kolejnością źródłową przy każdej szerokości widoku.

Zasady pisania

Napisz etykietę przed wyborem ikony. Etykieta powinna być konkretną frazą rzeczownikową lub krótkim rezultatem: „Dostęp oparty na rolach”, „Cotygodniowy eksport” lub „Recenzja ludzka”. Zachowaj gramatyczną równoległość etykiet w grupie. Unikaj ogólnych twierdzeń, takich jak „Potężny”, „Bezproblemowy”, „Innowacyjny” i „Najlepszy w klasie”, ponieważ nie nazywają one ani możliwości, ani decyzji.

Używaj 2–6 słów i nie więcej niż 55 znaków w etykiecie. Używaj jednego akapitu treści liczącego 12–60 słów; wariant kompaktowy powinien mieścić się w zakresie 12–30. Rozpocznij od konkretnego mechanizmu, zakresu lub rezultatu. Zachowaj spokojny, faktograficzny ton. Jeśli zastrzeżenie zmienia obietnicę, umieść je w tym samym boxie, a nie w oddalonym drobnym druku.

Używaj od dwóch do sześciu boxów na grupę. Nadaj każdemu elementowi porównywalną głębię i każ im odpowiadać na to samo pytanie. Porządkuj według priorytetu czytelnika, logiki przepływu pracy lub określonej kategorii – a nie według tego, która ikona wygląda najlepiej. Nie używaj tej samej ikony dla różnych znaczeń w jednej grupie i nie używaj wielu stylów wizualnych lub rodzin ikon razem.

Nigdy nie umieszczaj wewnątrz iconboxa:

• Długiej listy funkcji, wieloetapowej procedury, zagnieżdżonej listy punktowanej, tabeli, formularza, opinii klienta, ceny ani zastrzeżenia prawnego.
• Etykiety składającej się tylko z ikony, niewyjaśnionego akronimu ani statusu wyrażonego wyłącznie kolorem.
• Więcej niż jednego linku, konkurujących wezwań do działania ani przycisku wewnątrz linku obejmującego całą kartę.
• Zrzutu ekranu, wideo, wykresu, logo, zdjęcia ani innego iconboxa.
• Dowodu, który dotyczy kilku boxów, ale pojawia się tylko w jednym, przez co grupa wygląda nierówno lub myląco.

Jeśli treść przekracza te limity, awansuj ją do zwykłej sekcji. Jeśli każdy element potrzebuje tego samego znacznika wyboru, usuń ikony i użyj listy. Jeśli etykiety nie mają sensu bez obrazków, przepisz etykiety przed publikacją.

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

Pole postTypes w metadanych jest źródłem tej tabeli. Umieszczenie oznacza, że element jest dostępny, gdy treść tworzy rzeczywisty zbiór równorzędnych elementów, a nie że każda strona danego typu powinna zawierać iconboxy.

Lista kontrolna QA

• Celowa ikona: Każda ikona ma oczywisty związek ze swoją etykietą; jej usunięcie zmniejszyłoby rozpoznawalność wzrokową, a nie znaczenie faktograficzne.
• Kompletny widoczny tekst: Etykieta i treść przekazują pełną informację bez polegania na ikonie, kolorze ani pozycji.
• Prawidłowy tryb dostępności: Zbędne ikony są ukryte; ikony informacyjne mają zwięzły odpowiednik tekstowy i udokumentowany powód.
• Prawdziwa grupa równorzędna: Elementy odpowiadają na to samo pytanie, mają porównywalną głębię i używają równoległej gramatyki etykiet.
• Bezpieczna liczba: Grupa zawiera od dwóch do sześciu elementów; większe zbiory są kategoryzowane lub przenoszone do bardziej odpowiedniej struktury.
• Precyzyjny tekst: Etykiety nazywają konkretne możliwości, wymagania, stany lub wyniki; treść podaje mechanizm, zakres lub konsekwencję.
• Prawidłowe źródło ikony: Każdy klucz ikony istnieje w zatwierdzonym rejestrze i nie autoryzowano emoji, dowolnego SVG, adresu URL obrazu ani nazwy klasy ikon-font.
• Właściwe umiejscowienie: Grupa podąża za kontekstem ramowym i nie oddziela twierdzeń od źródeł, kroków od rezultatów ani ostrzeżeń od dotkniętych działań.
• Bezpieczni sąsiedzi: Żadna siatka kart, tabela, ściana logo, pasek statystyk ani wielokolumnowe CTA nie znajduje się bezpośrednio obok grupy.
• Dostępna struktura: Poziomy nagłówków są zgodne z dokumentem, kontrast jest wystarczający, status ma widoczny tekst, a kolejność źródłowa odpowiada kolejności czytania.
• Ograniczenie interaktywności: Linkowany iconbox ma jeden cel, opisową nazwę, widoczny stan fokusu i żadnego zagnieżdżonego elementu sterującego.
• Równoważność zapisów: Przenośny Markdown, Hugo i WordPress zachowują ten sam klucz ikony, etykietę, treść, wariant i zachowanie dostępności.
• Ograniczenie schema: Komponent nie dodaje samodzielnego schematu i nie wnioskuje ItemList ani właściwości statusu z wyglądu.
• Weryfikacja responsywności: Przy wąskich szerokościach boxy układają się w kolejności źródłowej bez przycinania, poziomego przewijania ani ukrywania istotnego tekstu.

Odrzuć element, jeśli jego ikona jest dowolna, etykieta jest niejasna lub widoczny tekst zależy od symbolu. Są to defekty modelu treści; zmiana odstępów, koloru lub stylu ilustracji nie może ich naprawić.

FAQ

Metadane FAQ obejmują wielkość grupy, tekst alternatywny, linkowane karty, emoji i zachowanie schematu. Przechowywanie zatwierdzonych odpowiedzi w ustrukturyzowanych metadanych pozwala układowi akademii renderować je spójnie bez powielania tych samych pytań w treści artykułu.