Iconbox — Format, reguli și exemple

Un iconbox asociază o pictogramă intenționată cu o etichetă scurtă și o explicație focusată. Pictograma face subiectul recognoscibil, eticheta îl numește, iar textul explică de ce contează. Elementul funcționează cel mai bine ca membru al unui grup mic de elemente de același nivel, cum ar fi trei capacități ale produsului sau patru cerințe — nu ca decor împrăștiat pe o pagină.

Simbolul bifă este intenționat: întărește verificarea, în loc să umple un colț gol. Deoarece eticheta vizibilă exprimă deja aceeași semnificație, simbolul redat este ascuns de tehnologiile de asistare. Un utilizator de cititor de ecran primește mesajul complet de la „Surse verificate” și explicația acestuia, fără a auzi o ieșire redundantă a pictogramei.

De ce contează acest element

Cititorii nu procesează fiecare propoziție în ordine. Ei caută repere care să răspundă la întrebarea „Este despre lucrul de care am nevoie?” Un iconbox creează un model compact de recunoaștere: mai întâi forma, apoi eticheta, apoi explicația. Într-un grup bine format, cititorii pot scana etichetele, pot identifica o categorie relevantă și pot citi doar textul de susținere de care au nevoie. Acest lucru reduce efortul de a descifra un paragraf care conține mai multe idei la fel de importante.

Valoarea psihologică provine din recunoaștere, grupare și consistență. Un scut familiar poate sugera protecție, un ceas poate sugera timpul, iar un document poate sugera raportare înainte ca cititorul să termine eticheta. Eticheta elimină apoi ambiguitatea. Geometria repetată îi spune cititorului că elementele au același rang editorial. Acest semnal este util doar atunci când conținutul este cu adevărat paralel; o grilă de carduri nu poate transforma afirmații fără legătură într-un set coerent.

Extractibilitatea mașină înseamnă că software-ul poate izola o unitate de conținut păstrând în același timp subiectul și afirmația acesteia. Un iconbox structurat expune un element numit cu un corp concis și o poziție stabilă în cadrul unui grup opțional. Sistemele de regăsire pot extrage „Surse verificate” împreună cu explicația sa, în loc să ghicească ce propoziție aparține cărui simbol vizual. Activul pictogramei în sine contribuie puțin la extracție, așadar cuvintele vizibile trebuie să poarte întreaga propoziție.

Pictograma trebuie totuși să aibă sens editorial. O scânteie arbitrară, o rachetă sau o formă abstractă adaugă zgomot pentru oameni și nicio semantică utilă pentru mașini. „Intenționată, dar redundantă” este un mod de accesibilitate valid: o pictogramă poate ajuta cititorii văzători să recunoască o categorie, fiind în același timp ascunsă de tehnologiile de asistare, deoarece eticheta vizibilă oferă deja semnificația sa. Urmează regulile de redactare a elementelor redactând mai întâi ideea completă și selectând iconboxul abia în etapa structurală ulterioară. Limitările specifice elementului de aici au prioritate pentru alegerea pictogramei, grupare și maparea accesibilității.

Când să îl folosești

Folosește un iconbox atunci când conținutul este o idee concisă și numită, iar o pictogramă din sistemul aprobat poate reprezenta acea idee fără a necesita ghicire. Un grup este potrivit atunci când două până la șase elemente răspund aceleiași întrebări implicite la o adâncime comparabilă: „Ce este inclus?”, „Ce măsuri de protecție se aplică?” sau „Ce produce acest flux de lucru?” Fiecare element ar trebui să rămână inteligibil atunci când este copiat ca text simplu.

Utilizări solide includ un sumar de funcționalități cu un rezultat per element, o prezentare generală a cerințelor înaintea instrucțiunilor detaliate, un set de principii de serviciu sau o explicație compactă a rezultatelor fluxului de lucru. Pictograma este un ajutor de recunoaștere, nu dovada. Detalii precum formatele de fișier, ferestrele de răspuns, sistemele suportate sau dreptul de proprietate aparțin în continuare etichetei și corpului.

Cazurile apropiate sunt frecvente:

• Folosește o listă cu puncte obișnuită atunci când pictograma ar fi aceeași bifă pe fiecare element. Repetarea nu transmite nicio semnificație de categorie.
• Folosește un tabel comparativ atunci când elementele trebuie evaluate după criterii comune. Iconboxurile separate fac comparația între elemente mai dificilă.
• Folosește o listă de pași atunci când ordinea, finalizarea sau dependența contează. Un rând de iconboxuri sugerează elemente de același nivel, nu o secvență.
• Folosește o cutie de definiție atunci când un termen necunoscut are nevoie de o semnificație formală. O pictogramă nu întărește o definiție precisă.
• Folosește un avertisment sau o notă atunci când severitatea și întreruperea sunt scopurile principale. Un iconbox are o greutate structurală neutră.
• Folosește secțiuni complete atunci când fiecare element are nevoie de mai multe paragrafe, dovezi, media sau subtitluri.

Nu folosi iconboxuri doar pentru a face o pagină cu mult text să pară proiectată. Dacă autorul alege pictograma după ce caută ceva atractiv vizual, în loc de ceva corect din punct de vedere semantic, probabil că acest element nu este necesar pentru conținutul respectiv.

Unde să îl plasezi

Plasează un iconbox independent imediat după paragraful pe care îl susține. Plasează un grup de iconboxuri după un titlu și un paragraf introductiv care denumește întrebarea comună. Acest context explică de ce elementele aparțin împreună; grupul oferă apoi răspunsul compact. Urmează grupului cu detalii, dovezi sau următoarea decizie, fără a repeta fiecare cutie în proză.

Într-un articol, primul grup ar trebui să apară doar după răspunsul direct sau definiția de deschidere. Într-o pagină comercială, un grup de capacități poate urma după enunțarea problemei și a rezultatului, dar nu trebuie să preceadă propunerea de valoare doar pentru a crea un element vizual hero. În documentație, plasează un grup de cerințe înaintea procedurii pe care o guvernează, păstrând în același timp secvența necesară și criteriile de acceptare în instrucțiunile obișnuite.

Nu plasa un grup de iconboxuri direct lângă o altă grilă de carduri, un tabel comparativ, un perete de logo-uri, o bandă de statistici sau un apel la acțiune pe mai multe coloane. Grilele adiacente aplatizează ierarhia informației și fac ca faptele editoriale să semene cu promoțiile. Inserează proză explicativă sau o delimitare de secțiune între ele. Nu pune un iconbox între o afirmație și sursa sa, între un pas și rezultatul său așteptat, în interiorul unei celule de tabel sau în interiorul altui iconbox. Nu poziționa niciodată două grupuri unul după altul.

Anatomie

Un iconbox conține trei zone create de autor și o relație contextuală. Captura de ecran etichetează zonele purtătoare de semnificație, nu valorile pixelilor, astfel încât contractul să supraviețuiască unei reproiectări vizuale.

1. Zona pictogramei: Folosește o pictogramă aprobată al cărei concept se potrivește elementului. Nu înlocuiește niciodată cuvintele vizibile.
2. Eticheta scurtă: Denumește funcționalitatea, cerința, rezultatul sau categoria într-un limbaj concret.
3. Corpul textului: Explică consecința, domeniul de aplicare sau dovada într-un paragraf compact.
4. Destinație opțională: Oferă un singur pas descriptiv următor atunci când se folosește varianta linkuită.
5. Contextul grupului: Un titlu precedent sau o etichetă de grup accesibilă menționează întrebarea la care răspund toate iconboxurile surori.

Marginea, fundalul, raza, dimensiunea pictogramei, culoarea, coloanele grilei și punctele de întrerupere aparțin motorului de redare. Autorii aleg conținutul semantic, identitatea pictogramei, ordinea în sursă și modul de accesibilitate.

Exemple de design

Elementul suportă patru variante de prezentare. Toate păstrează aceeași ierarhie pictogramă-etichetă-corp și aceeași ordine în sursă.

Standard: Cardul implicit, independent sau grupat. Folosește-l când corpul are nevoie de 25–60 de cuvinte pentru a explica un element.

Compact: Folosește un corp de o propoziție de 12–30 de cuvinte. Este potrivit pentru concepte familiare, nu pentru a comprima o nuanță calitativă.

Linkuit: Adaugă o destinație. Preferă un link vizibil descriptiv. Dacă întregul card este interactiv, motorul de redare trebuie să ofere o singură țintă de link și o stare de focus clară.

Stare: Comunică o stare, precum disponibil, restricționat, promovat sau în așteptare. Cuvântul care denotă starea trebuie să fie vizibil; nici culoarea, nici forma pictogramei nu pot fi singurul semnal.

Fereastră îngustă: Orice grup devine o coloană în ordinea sursei. Motorul de redare nu trebuie să reordoneze cutiile pentru a le echilibra înălțimile.

Modul de accesibilitate este separat de varianta de prezentare. O pictogramă redundantă este ascunsă de tehnologiile de asistare, deoarece eticheta sa poartă aceeași semnificație. O pictogramă cu adevărat informativă primește un echivalent text programatic, dar autorii ar trebui să adauge în mod normal acea informație la eticheta vizibilă, în loc să mențină un fapt bazat doar pe pictogramă.

Parametri

Contractul menține semnificația creată de autor separată de prezentare. Limitele se aplică fiecărei variante, cu excepția cazului în care se specifică o limită mai strictă.

icon trebuie să se rezolve prin registrul de pictograme aprobate; autorii nu pot furniza SVG arbitrare, emoji-uri, URL-uri de imagini sau nume de clase icon-font. Markdownul limitat permite accentuarea, codul inline și un link inline. Exclude titluri imbricate, liste, tabele, media, formulare, butoane, acordeoane și alte componente. Când primul titlu din corp furnizează label, adaptorul elimină acel titlu din corp și îl redă la nivelul corect relativ la pagină.

Sintaxă și exemple de cod

Fiecare notație corespunde aceleiași pictograme, etichete, corp, variantă și mod de accesibilitate. Cheia pictogramei este semantică și portabilă; fiecare platformă mapează shield-check la activul local aprobat.

Directivă Markdown portabilă

:::iconbox{icon="shield-check" iconMode="redundant" variant="standard"}
### Surse verificate

Fiecare afirmație factuală face legătura cu o sursă pe care un examinator o poate inspecta, astfel încât dovezile rămân vizibile în timpul redactării, aprobării și actualizărilor ulterioare.
:::

Primul titlu devine label; paragraful rămas devine content. Pictograma este redundantă deoarece „Surse verificate” oferă semnificația completă în text vizibil.

Shortcode Hugo

{{< 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 >}}

Adaptorul folosește doar parametri denumiți. Trebuie să respingă o cheie de pictogramă sau o variantă necunoscută, în loc să afișeze silențios un fallback care ar putea modifica semnificația.

Bloc WordPress

<!-- 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 -->

Editorul ar trebui să expună un selector căutabil de pictograme aprobate, nu un câmp de activ cu text liber. Previzualizarea numelui accesibil ar trebui să arate dacă pictograma este ascunsă sau anunțată.

Exemple

Exemplu bun

Acest exemplu funcționează deoarece simbolul documentului se potrivește cu conceptul de raport, eticheta numește o capacitate concretă, iar corpul explică rezultatul și consecința sa practică. Textul vizibil este complet fără simbol, așadar simbolul poate fi ascuns de tehnologiile de asistare.

Exemplu prost

Acest exemplu eșuează la fiecare nivel. Racheta este decorativă, nu un marker corect de categorie, eticheta nu conține nicio capacitate specifică, iar corpul nu oferă mecanism, limită sau rezultat verificabil. Emoji-ul poate fi, de asemenea, anunțat imprevizibil. Înlocuiește blocul cu o afirmație concretă — ce devine mai rapid, prin ce mecanism, în ce condiții — sau șterge-l.

Markup schema și accesibilitate

Iconboxul nu are un tip Schema.org dedicat. Eticheta și corpul său rămân conținut al entității Article, TechArticle, WebPage, Product sau al altei entități la nivel de pagină atunci când acel markup este justificat din alte motive. Un grup vizual nu este automat un ItemList; folosește markup de listă doar atunci când setul este complet sau ordonat în modelul de conținut. Un iconbox de stare nu justifică proprietățile Review, Rating sau availability fără datele de bază necesare.

Redă un iconbox neinteractiv ca section atunci când face parte din argumentul principal sau ca aside atunci când este suplimentar. Oferă-i un nume accesibil prin eticheta vizibilă. Folosește un titlu real la nivelul corect; nu alege h3 doar pentru că dimensiunea sa implicită a fontului arată potrivit. Elementele surori repetate pot sta în interiorul unei liste atunci când grupul este într-adevăr o listă, fiecare iconbox fiind într-un element de listă.

Majoritatea pictogramelor ar trebui să fie SVG-uri inline cu aria-hidden="true" și focusable="false", deoarece eticheta vizibilă repetă semnificația lor. Acest lucru nu le face decorative din punct de vedere editorial: ele ajută totuși recunoașterea vizuală, dar anunțarea aceluiași concept de două ori adaugă zgomot. Dacă o pictogramă comunică informații absente din etichetă, furnizează un echivalent text accesibil prin maparea iconText a componentei. Și mai bine, revizuiește eticheta vizibilă pentru ca toți cititorii să primească informația.

Nu te baza niciodată doar pe culoare, poziție, mișcare sau forma pictogramei. O bifă verde are nevoie de text vizibil precum „Promovat”; un lacăt are nevoie de „Restricționat” sau de condiția exactă de acces. Pictogramele necesită un contrast suficient față de fundalul lor, dar motorul de redare deține token-urile de culoare. Elementele decorative care nu transmit nimic ar trebui eliminate, nu li se atribuie text alternativ verbose. Evită alt="icon", nume de fișiere, nume de glife Unicode și text duplicat precum „Scut, Surse verificate.”

Pentru varianta linkuită, un iconbox are o singură destinație. Numele interactiv trebuie să comunice acea destinație, focusul la tastatură trebuie să fie vizibil, iar zona clickabilă nu trebuie să conțină un alt link sau buton. Hoverul nu poate dezvălui text esențial. Ordinea de citire și de la tastatură trebuie să se potrivească cu ordinea sursei la orice lățime a ferestrei de vizualizare.

Reguli de redactare

Scrie eticheta înainte de a selecta pictograma. Eticheta ar trebui să fie o sintagmă nominală concretă sau un rezultat scurt: „Acces bazat pe roluri,” „Export săptămânal” sau „Revizuire umană.” Menține etichetele surori gramatical paralele. Evită afirmații generice precum „Puternic,” „Fără întreruperi,” „Inovator” și „Cel mai bun din clasă,” deoarece nu denumesc nici o capacitate, nici o decizie.

Folosește 2–6 cuvinte și nu mai mult de 55 de caractere pentru etichetă. Folosește un paragraf de corp de 12–60 de cuvinte; varianta compactă ar trebui să rămână între 12–30. Începe cu mecanismul, domeniul de aplicare sau rezultatul specific. Păstrează un ton calm și factual. Dacă o nuanță modifică promisiunea, pune-o în aceeași cutie, nu într-un text mic îndepărtat.

Folosește între două și șase cutii per grup. Oferă fiecărui element o profunzime comparabilă și fă-le să răspundă la aceeași întrebare. Ordonă-le după prioritatea cititorului, logica fluxului de lucru sau o categorie declarată — nu după care pictogramă arată cel mai bine. Nu folosi aceeași pictogramă pentru semnificații diferite în cadrul aceluiași grup și nu folosi mai multe stiluri vizuale sau familii de pictograme împreună.

Nu pune niciodată următoarele în interiorul unui iconbox:

• Un inventar lung de funcționalități, o procedură cu mai mulți pași, o listă cu puncte imbricată, un tabel, un formular, o mărturie, un preț sau o clauză de declinare a răspunderii.
• O etichetă doar cu pictogramă, un acronym neexplicat sau o stare exprimată doar prin culoare.
• Mai mult de un link, apeluri la acțiune concurente sau un buton în interiorul unui link pe întreg cardul.
• O captură de ecran, un videoclip, un grafic, un logo, o fotografie sau un alt iconbox.
• Dovezi care se aplică mai multor cutii, dar apar într-una singură, făcând grupul să pară neuniform sau înșelător.

Dacă conținutul depășește aceste limite, promovează-l într-o secțiune normală. Dacă fiecare element are nevoie de aceeași bifă, elimină pictogramele și folosește o listă. Dacă etichetele nu au sens fără imaginile lor, rescrie etichetele înainte de publicare.

Tipuri de postări care îl folosesc

Câmpul frontmatter postTypes este sursa acestui tabel. Includerea înseamnă că elementul este disponibil atunci când conținutul formează un set autentic de elemente de același nivel, nu că fiecare pagină de acel tip ar trebui să conțină iconboxuri.

Listă de verificare QA

• Pictogramă intenționată: Fiecare pictogramă are o relație evidentă cu eticheta sa; eliminarea ei ar reduce recunoașterea vizuală, nu semnificația factuală.
• Text vizibil complet: Eticheta și corpul comunică întreaga propoziție fără a se baza pe pictogramă, culoare sau poziție.
• Mod de accesibilitate corect: Pictogramele redundante sunt ascunse; pictogramele informative au un echivalent text concis și un motiv documentat.
• Grup real de același nivel: Elementele surori răspund la aceeași întrebare, au profunzime comparabilă și folosesc o gramatică paralelă a etichetelor.
• Număr sigur: Un grup conține între două și șase elemente; seturile mai mari sunt categorisite sau mutate într-o structură mai potrivită.
• Text precis: Etichetele denumesc capacități, cerințe, stări sau rezultate concrete; corpurile oferă un mecanism, domeniu de aplicare sau consecință.
• Sursă validă a pictogramei: Fiecare cheie de pictogramă există în registrul aprobat și nu este autorizat niciun emoji, SVG arbitrar, URL de imagine sau nume de clasă icon-font.
• Amplasare corectă: Grupul urmează contextul său de încadrare și nu separă afirmațiile de surse, pașii de rezultate sau avertismentele de acțiunile afectate.
• Vecini siguri: Nicio grilă de carduri, tabel, perete de logo-uri, bandă de statistici sau CTA pe mai multe coloane nu stă direct lângă grup.
• Structură accesibilă: Nivelurile titlurilor urmează documentul, contrastul este suficient, starea are text vizibil, iar ordinea sursei se potrivește cu ordinea de citire.
• Restricție de interacțiune: Un iconbox linkuit are o singură destinație, un nume descriptiv, o stare de focus vizibilă și niciun control interactiv imbricat.
• Paritate a notației: Markdown portabil, Hugo și WordPress păstrează aceeași cheie de pictogramă, etichetă, conținut, variantă și comportament de accesibilitate.
• Restricție schema: Componenta nu adaugă schema autonomă și nu deduce proprietăți ItemList sau de stare din aspect.
• Verificare responsive: La lățimi înguste, cutiile se stivuiesc în ordinea sursei, fără tăiere, derulare orizontală sau text esențial ascuns.

Respinge elementul dacă pictograma sa este arbitrară, eticheta sa este vagă sau textul său vizibil depinde de simbol. Acestea sunt defecte ale modelului de conținut; modificarea spațierii, culorii sau stilului de ilustrație nu le poate repara.

FAQ

FAQ-ul din frontmatter acoperă dimensiunea grupului, textul alternativ, cardurile linkuite, emoji-urile și comportamentul schema. Păstrarea răspunsurilor aprobate în frontmatter structurat permite layoutului academiei să le redea în mod consecvent, fără a duplica aceleași întrebări în corpul articolului.