Iconbox — Formát, pravidlá a príklady

Iconbox spája jednu účelnú ikonu s krátkym popisom a zameraným vysvetlením. Ikona robí tému rozpoznateľnou, popis ju pomenúva a text vysvetľuje, prečo je dôležitá. Prvok funguje najlepšie ako jeden člen malej skupiny rovnocenných prvkov, napríklad tri schopnosti produktu alebo štyri požiadavky – nie ako dekorácia roztrúsená po stránke.

Symbol začiarknutia je účelný: posilňuje overenie, namiesto vypĺňania prázdneho rohu. Keďže viditeľný popis už vyjadruje rovnaký význam, vykreslený symbol je skrytý pred asistenčnými technológiami. Používateľ čítačky obrazovky dostane kompletnú správu z „Overené zdroje“ a jeho vysvetlenia bez toho, aby počul nadbytočný výstup ikony.

Prečo na tomto prvku záleží

Čitatelia nespracúvajú každú vetu v poradí. Hľadajú orientačné body, ktoré odpovedajú na otázku „Je to o tom, čo potrebujem?“ Iconbox vytvára kompaktný rozpoznávací vzor: najprv tvar, potom popis, potom vysvetlenie. V dobre vytvorenej skupine môžu čitatelia skenovať popisy, identifikovať relevantnú kategóriu a potom prečítať len podporný text, ktorý potrebujú. To znižuje námahu pri rozbaľovaní odseku, ktorý obsahuje niekoľko rovnako dôležitých myšlienok.

Psychologická hodnota pochádza z rozpoznávania, zoskupovania a konzistentnosti. Známy štít môže naznačovať ochranu, hodiny čas a dokument reportovanie skôr, než čitateľ dočíta popis. Popis potom odstraňuje nejednoznačnosť. Opakovaná geometria hovorí čitateľovi, že položky majú rovnakú redakčnú úroveň. Tento signál je užitočný len vtedy, keď je obsah skutočne paralelný; mriežka kariet nedokáže zmeniť nesúvisiace tvrdenia na súdržnú množinu.

Strojová extrahovateľnosť znamená, že softvér dokáže izolovať jednotku obsahu pri zachovaní jej témy a tvrdenia. Štruktúrovaný iconbox odhaľuje pomenovanú položku so stručným telom a stabilnou pozíciou v rámci voliteľnej skupiny. Vyhľadávacie systémy môžu extrahovať „Overené zdroje“ spolu s ich vysvetlením, namiesto hádania, ktorá veta patrí ku ktorému vizuálnemu symbolu. Samotný ikonový prvok prispieva k extrakcii málo, takže viditeľné slová musia niesť úplné tvrdenie.

Ikona musí mať aj naďalej redakčný význam. Ľubovoľná trblietka, raketa alebo abstraktný tvar pridáva ľuďom šum a strojom neprináša žiadnu užitočnú sémantiku. „Účelná, ale redundantná“ je platný režim prístupnosti: ikona môže pomôcť vidiacim čitateľom rozpoznať kategóriu, pričom je skrytá pred asistenčnými technológiami, pretože viditeľný popis už poskytuje jej význam. Postupujte podľa pravidiel písania prvkov tak, že najprv načrtnete celú myšlienku a iconbox vyberiete až v neskoršom štrukturálnom prechode. Tu uvedené obmedzenia špecifické pre prvok majú prioritu pri výbere ikony, zoskupovaní a mapovaní prístupnosti.

Kedy ho použiť

Použite iconbox, keď je obsah stručná, pomenovaná myšlienka a ikona zo schváleného systému môže túto myšlienku reprezentovať bez dohadovania. Skupina je vhodná, keď dva až šesť prvkov odpovedá na rovnakú implicitnú otázku v porovnateľnej hĺbke: „Čo je zahrnuté?“, „Ktoré ochranné opatrenia platia?“ alebo „Čo tento pracovný postup produkuje?“ Každý prvok by mal zostať zrozumiteľný aj pri skopírovaní ako obyčajný text.

Medzi silné použitia patrí súhrn funkcií s jedným výsledkom na položku, prehľad požiadaviek pred podrobnými inštrukciami, súbor princípov služby alebo kompaktné vysvetlenie výstupov pracovného postupu. Ikona je pomôcka na rozpoznávanie, nie dôkaz. Konkrétne údaje, ako formáty súborov, lehoty na odpoveď, podporované systémy alebo vlastníctvo, stále patria do popisu a tela.

Takmer správne prípady sú časté:

• Použite obyčajný zoznam s odrážkami, ak by ikona bola rovnaká značka začiarknutia pri každej položke. Opakovanie neprináša žiadny kategorický význam.
• Použite porovnávaciu tabuľku, keď položky musia byť posudzované podľa spoločných kritérií. Samostatné iconboxy sťažujú porovnávanie naprieč položkami.
• Použite zoznam krokov, keď záleží na poradí, dokončení alebo závislosti. Rad iconboxov naznačuje rovnocennosť, nie postupnosť.
• Použite definičný box, keď jeden neznámy termín potrebuje formálnu definíciu. Ikona neposilňuje presnú definíciu.
• Použite upozornenie alebo poznámku, keď sú hlavnou úlohou závažnosť a prerušenie. Iconbox má neutrálnu štrukturálnu váhu.
• Použite plné sekcie, keď každá položka potrebuje niekoľko odsekov, dôkazy, médiá alebo podnadpisy.

Nepoužívajte iconboxy len na to, aby textovo ťažká stránka vyzerala dizajnovo. Ak autor vyberá ikonu po hľadaní niečoho vizuálne atraktívneho namiesto sémanticky presného, obsah pravdepodobne tento prvok nepotrebuje.

Kam ho umiestniť

Umiestnite samostatný iconbox bezprostredne za odsek, ktorý podporuje. Umiestnite skupinu iconboxov za nadpis a jeden úvodný odsek, ktorý pomenúva spoločnú otázku. Tento kontext vysvetľuje, prečo položky patria k sebe; skupina potom poskytuje kompaktnú odpoveď. Za skupinou nasledujú podrobnosti, dôkazy alebo ďalšie rozhodnutie, nie opakovanie každého boxu v próze.

V článku by sa prvá skupina mala objaviť až po priamej odpovedi alebo úvodnej definícii. Na komerčnej stránke môže skupina schopností nasledovať po vyhlásení problému a výsledku, ale nesmie predchádzať hodnotovej ponuke len na vytvorenie vizuálneho hrdinu. V dokumentácii umiestnite skupinu požiadaviek pred postup, ktorý riadi, pričom požadované poradie a akceptačné kritériá ponechajte v bežných inštrukciách.

Neumiestňujte skupinu iconboxov priamo vedľa inej mriežky kariet, porovnávacej tabuľky, steny log, pásu štatistík alebo viacstĺpcovej výzvy na akciu. Susedné mriežky splošťujú informačnú hierarchiu a spôsobujú, že redakčné fakty pripomínajú propagáciu. Vložte medzi ne vysvetľujúcu prózu alebo hranicu sekcie. Neumiestňujte iconbox medzi tvrdenie a jeho zdroj, medzi krok a jeho očakávaný výsledok, do vnútra bunky tabuľky alebo do vnútra iného iconboxu. Nikdy neumiestňujte dve skupiny chrbtom k sebe.

Anatómia

Iconbox obsahuje tri autorské oblasti a jeden kontextový vzťah. Screenshot označuje oblasti nesúce význam, nie pixelové hodnoty, aby zmluva prežila vizuálny redizajn.

1. Oblasť ikony: Používa jednu schválenú ikonu, ktorej koncept zodpovedá položke. Nikdy nenahrádza viditeľné slová.
2. Krátky popis: Pomenúva funkciu, požiadavku, výsledok alebo kategóriu konkrétnym jazykom.
3. Textové telo: Vysvetľuje dôsledok, rozsah alebo dôkaz v jednom kompaktnom odseku.
4. Voliteľný cieľ: Poskytuje jeden popisný ďalší krok pri použití prepojenej varianty.
5. Kontext skupiny: Predchádzajúci nadpis alebo prístupný popis skupiny uvádza otázku, na ktorú všetky súrodenecké iconboxy odpovedajú.

Okraj, pozadie, zaoblenie, veľkosť ikony, farba, stĺpce mriežky a zlomové body patria do réžie vykresľovača. Autori vyberajú sémantický obsah, identitu ikony, poradie v zdroji a režim prístupnosti.

Príklady dizajnu

Prvok podporuje štyri prezentačné varianty. Všetky zachovávajú rovnakú hierarchiu ikona–popis–telo a rovnaké poradie v zdroji.

Štandardný: Predvolená samostatná alebo zoskupená karta. Použite, keď telo potrebuje 25 – 60 slov na vysvetlenie položky.

Kompaktný: Používa jednoduché telo s 12 – 30 slovami. Je vhodný pre známe koncepty, nie na komprimovanie nuansovaného kvalifikátora.

Prepojený: Pridáva jeden cieľ. Uprednostnite viditeľný popisný odkaz. Ak je celá karta interaktívna, vykresľovač musí poskytnúť jeden cieľ odkazu a jasný fokusový stav.

Stavový: Komunikuje stav, ako napríklad dostupné, obmedzené, prešlo alebo čakajúce. Slovo označujúce stav musí byť viditeľné; ani farba, ani tvar ikony nesmie byť jediným signálom.

Úzke viewport: Každá skupina sa v poradí zdroja zmení na jeden stĺpec. Vykresľovač nesmie presúvať boxy na vyrovnanie ich výšok.

Režim prístupnosti je oddelený od prezentačnej varianty. Redundantná ikona je skrytá pred asistenčnými technológiami, pretože jej popis nesie rovnaký význam. Skutočne informatívna ikona dostane programový textový ekvivalent, ale autori by mali túto informáciu bežne pridať do viditeľného popisu namiesto udržiavania informácie len v ikone.

Parametre

Zmluva udržiava autorský význam oddelený od prezentácie. Obmedzenia sa vzťahujú na každú variantu, pokiaľ nie je uvedené prísnejšie obmedzenie.

icon musí byť vyriešený prostredníctvom registra schválených ikon; autori nemôžu dodať ľubovoľné SVG, emoji, URL obrázkov alebo názvy tried ikonových fontov. Obmedzený Markdown povoľuje dôraz, vložený kód a jeden vložený odkaz. Vylučuje vnorené nadpisy, zoznamy, tabuľky, médiá, formuláre, tlačidlá, accordiony a ďalšie komponenty. Keď prvý nadpis tela poskytuje label, adaptér odstráni tento nadpis z tela a vykreslí ho na správnej úrovni vzhľadom na stránku.

Syntax a príklady kódu

Každý zápis mapuje rovnakú ikonu, popis, telo, variantu a režim prístupnosti. Kľúč ikony je sémantický a prenosný; každá platforma mapuje shield-check na svoj schválený lokálny prostriedok.

Prenosná Markdown direktíva

:::iconbox{icon="shield-check" iconMode="redundant" variant="standard"}
### Verified sources

Every factual claim links to a source a reviewer can inspect, so evidence remains visible during writing, approval, and later updates.
:::

Prvý nadpis sa stáva label; zvyšný odsek sa stáva content. Ikona je redundantná, pretože „Overené zdroje“ poskytuje úplný význam vo viditeľnom texte.

Hugo shortcode

{{< iconbox icon="shield-check" label="Verified sources" iconMode="redundant" variant="standard" >}}
Every factual claim links to a source a reviewer can inspect, so evidence remains visible during writing, approval, and later updates.
{{< /iconbox >}}

Adaptér používa iba pomenované parametre. Musí odmietnuť neznámy kľúč ikony alebo variantu namiesto tichého zobrazenia fallbacku, ktorý by mohol zmeniť význam.

WordPress blok

<!-- wp:amicited/iconbox {"icon":"shield-check","label":"Verified sources","iconMode":"redundant","variant":"standard"} -->
<p>Every factual claim links to a source a reviewer can inspect, so evidence remains visible during writing, approval, and later updates.</p>
<!-- /wp:amicited/iconbox -->

Editor by mal sprístupniť vyhľadávateľný výber schválených ikon, nie voľné textové pole pre prostriedok. Jeho ukážka prístupného názvu by mala ukázať, či je ikona skrytá alebo oznamovaná.

Príklady

Dobrý príklad

Toto funguje, pretože symbol dokumentu zodpovedá konceptu reportu, popis pomenúva konkrétnu schopnosť a telo vysvetľuje výstup a jeho praktický dôsledok. Viditeľný text je úplný aj bez symbolu, takže symbol môže byť skrytý pred asistenčnými technológiami.

Zlý príklad

Toto zlyháva na každej úrovni. Raketa je dekoratívna, nie presný kategorický marker, popis neobsahuje žiadnu konkrétnu schopnosť a telo neuvádza mechanizmus, hranice ani overiteľný výsledok. Emoji môže byť tiež oznamovaný nepredvídateľne. Nahraďte blok konkrétnym vyhlásením – čo sa zrýchli, akým mechanizmom, za akých podmienok – alebo ho odstráňte.

Schema markup a prístupnosť

Iconbox nemá vyhradený Schema.org typ. Jeho popis a telo zostávajú obsahom obklopujúceho Article, TechArticle, WebPage, Product alebo inej entitnej stránky, ak je takéto označenie inak opodstatnené. Vizuálna skupina nie je automaticky ItemList; použite markup zoznamu len vtedy, keď je množina v obsahovom modeli úplná alebo zoradená. Stavový iconbox neoprávňuje použitie vlastností Review, Rating alebo dostupnosti bez požadovaných podkladových údajov.

Vykreslite neinteraktívny iconbox ako section, keď je súčasťou hlavného argumentu, alebo ako aside, keď je doplnkový. Poskytnite mu prístupný názov prostredníctvom viditeľného popisu. Použite skutočný nadpis na správnej úrovni; nevyberajte h3 len preto, že jeho predvolená veľkosť písma vyzerá správne. Opakované rovnocenné prvky môžu byť umiestnené v zozname, keď skupina skutočne je zoznamom, pričom každý iconbox je v jednej položke zoznamu.

Väčšina ikon by mala byť inline SVG s aria-hidden="true" a focusable="false", pretože viditeľný popis opakuje ich význam. To ich nerobí redakčne dekoratívnymi: stále pomáhajú vizuálnemu rozpoznávaniu, ale oznamovanie toho istého konceptu dvakrát pridáva šum. Ak ikona komunikuje informáciu, ktorá v popise chýba, poskytnite prístupný textový ekvivalent prostredníctvom mapovania iconText komponentu. Ešte lepšie je prepracovať viditeľný popis tak, aby všetci čitatelia dostali informáciu.

Nikdy sa nespoliehajte len na farbu, pozíciu, pohyb alebo tvar ikony. Zelená značka potrebuje viditeľný text ako „Prešlo“; zámok potrebuje „Obmedzené“ alebo presnú podmienku prístupu. Ikony vyžadujú dostatočný kontrast voči svojmu pozadiu, ale farebné tokeny vlastní vykresľovač. Dekoratívne ozdoby, ktoré nenesú žiadny význam, by mali byť odstránené, nie im pridelený verbose alternatívny text. Vyhnite sa alt="ikona", názvom súborov, názvom Unicode glyfov a duplicitnému textu ako „Štít, Overené zdroje“.

Pre prepojenú variantu má jeden iconbox jeden cieľ. Interaktívny názov musí komunikovať tento cieľ, klávesový fokus musí byť viditeľný a klikateľná oblasť nesmie obsahovať ďalší odkaz alebo tlačidlo. Hover nesmie odhaliť esenciálny text. Poradie čítania a klávesnice musí zodpovedať poradiu zdroja pri každej šírke viewportu.

Pravidlá písania

Napíšte popis pred výberom ikony. Popis by mal byť konkrétna podstatná fráza alebo krátky výsledok: „Prístup na základe rolí“, „Týždenný export“ alebo „Ľudská kontrola“. Udržujte popisy rovnocenných prvkov gramaticky paralelné. Vyhnite sa všeobecným tvrdeniam ako „Silný“, „Bezproblémový“, „Inovatívny“ a „Najlepší vo svojej triede“, pretože nepomenúvajú schopnosť ani rozhodnutie.

Použite 2 – 6 slov a maximálne 55 znakov pre popis. Použite jeden odsek tela s 12 – 60 slovami; kompaktná varianta by mala zostať v rozmedzí 12 – 30. Začnite konkrétnym mechanizmom, rozsahom alebo výsledkom. Udržujte pokojný, faktický tón. Ak kvalifikácia mení sľub, uveďte ju v rovnakom boxe, nie vo vzdialených drobných písmenách.

Použite dva až šesť boxov na skupinu. Každej položke dajte porovnateľnú hĺbku a nechajte ich odpovedať na rovnakú otázku. Zoraďte podľa priority čitateľa, logiky pracovného postupu alebo uvedenej kategórie – nie podľa toho, ktorá ikona vyzerá najlepšie. Nepoužívajte rovnakú ikonu pre rôzne významy v rámci jednej skupiny a nepoužívajte viacero vizuálnych štýlov alebo rodín ikon súčasne.

Nikdy nevkladajte do iconboxu:

• Dlhý inventár funkcií, viackrokový postup, vnorený zoznam s odrážkami, tabuľku, formulár, svedectvo, cenu alebo právne vylúčenie zodpovednosti.
• Popis pozostávajúci len z ikony, nevysvetlenú skratku alebo stav vyjadrený len farbou.
• Viac ako jeden odkaz, konkurenčné výzvy na akciu alebo tlačidlo vnútri celokartového odkazu.
• Screenshot, video, graf, logo, fotografiu alebo ďalší iconbox.
• Dôkaz, ktorý sa týka niekoľkých boxov, ale objavuje sa len v jednom, čím skupina pôsobí nerovnomerne alebo zavádzajúco.

Ak obsah presahuje tieto limity, povýšte ho do bežnej sekcie. Ak každá položka potrebuje rovnakú značku začiarknutia, odstráňte ikony a použite zoznam. Ak popisy nedávajú zmysel bez svojich obrázkov, prepíšte popisy pred publikovaním.

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

Pole postTypes v frontmatter je zdrojom pre túto tabuľku. Zahrnutie znamená, že prvok je k dispozícii, keď obsah tvorí skutočnú skupinu rovnocenných prvkov, nie že každá stránka tohto typu by mala obsahovať iconboxy.

QA kontrolný zoznam

• Účelná ikona: Každá ikona má zrejmý vzťah k svojmu popisu; jej odstránenie by znížilo vizuálne rozpoznanie, nie faktický význam.
• Kompletný viditeľný text: Popis a telo komunikujú úplné tvrdenie bez spoliehania sa na ikonu, farbu alebo pozíciu.
• Správny režim prístupnosti: Redundantné ikony sú skryté; informatívne ikony majú stručný textový ekvivalent a zdokumentovaný dôvod.
• Skutočná rovnocenná skupina: Súrodenci odpovedajú na rovnakú otázku, majú porovnateľnú hĺbku a používajú paralelnú gramatiku popisov.
• Bezpečný počet: Skupina obsahuje dva až šesť prvkov; väčšie množiny sú kategorizované alebo presunuté do vhodnejšej štruktúry.
• Presný text: Popisy pomenúvajú konkrétne schopnosti, požiadavky, stavy alebo výsledky; telá uvádzajú mechanizmus, rozsah alebo dôsledok.
• Platný zdroj ikony: Každý kľúč ikony existuje v schválenom registri a nie je autorovaný žiadny emoji, ľubovoľné SVG, URL obrázka alebo názov triedy ikonového fontu.
• Správne umiestnenie: Skupina nasleduje svoj rámcujúci kontext a neoddeľuje tvrdenia od zdrojov, kroky od výsledkov ani upozornenia od dotknutých akcií.
• Bezpeční susedia: Žiadna mriežka kariet, tabuľka, stena log, pás štatistík alebo viacstĺpcová CTA nesedí priamo vedľa skupiny.
• Prístupná štruktúra: Úrovne nadpisov nasledujú dokument, kontrast je dostatočný, stav má viditeľný text a poradie zdroja zodpovedá poradiu čítania.
• Interakčná zdržanlivosť: Prepojený iconbox má jeden cieľ, popisný názov, viditeľný fokusový stav a žiadny vnorený interaktívny ovládací prvok.
• Notačná parita: Prenosný Markdown, Hugo a WordPress zachovávajú rovnaký kľúč ikony, popis, obsah, variantu a správanie prístupnosti.
• Schema zdržanlivosť: Komponent nepridáva samostatný schema markup a neodvodzuje ItemList alebo stavové vlastnosti z vzhľadu.
• Responzívne overenie: Pri úzkych šírkach sa boxy skladajú v poradí zdroja bez orezania, horizontálneho posúvania alebo skrytého esenciálneho textu.

Zamietnite prvok, ak je jeho ikona ľubovoľná, popis vágny alebo viditeľný text závisí od symbolu. To sú defekty obsahového modelu; zmena rozstupov, farby alebo štýlu ilustrácie ich nedokáže opraviť.

FAQ

Frontmatter FAQ pokrýva veľkosť skupiny, alternatívny text, prepojené karty, emoji a správanie schema markupu. Uchovávanie schválených odpovedí v štruktúrovanom frontmatter umožňuje layoutu akadémie vykresliť ich konzistentne bez duplikovania rovnakých otázok v tele článku.