Sistem de icoane și pictograme

1) Rolul pictogramelor în produs

Icoanele sunt un purtător compact de sens și stare. Accelerează scanarea, ajută la economisirea spațiului și la creșterea recunoașterii tiparului. În interfețele produsului, pictograma completează textul și culoarea, în loc să le înlocuiască.

1. Înțeles> stil: fiecare pictogramă trebuie să aibă un scenariu clar de aplicare.

2. Consistență: grilă unică, accident vascular cerebral, unghiuri, ritm de umplere.

3. Disponibilitate: pictograma nu este singurul semnal; există întotdeauna o semnătură/tooltip/arie.

4. Performanță: o conductă SVG, sprite și jetoane de culoare/dimensiune.

2) Grilă și linii cheie

Tablouri de artă de bază: 16 × 16, 20 × 20, 24 × 24 (principal), 32 × 32.
Keyline-A cerc/pătrat înscris la 1-2 px pentru echilibrul optic.
Pixel pitch: trageți pe coordonate întregi; accident vascular cerebral este un multiplu de 0. 5 px (de obicei 1. 5 px la 24 × 24).

• Diagonalele „mai groase” arată mai subțiri - adăugați 0. 25 px la accident vascular cerebral în pete cu probleme.
• Scufundăm ușor vârfurile colțurilor ascuțite în interiorul liniei cheie cu 1 px pentru a nu „zornăi”.
• Cercurile și punctele necesită adesea + 1 px la diametru pentru o masă vizuală egală.

Faceți clic pe zone: zona interactivă ≥ 40 × 40 px (mobil), ≥ 32 × 32 px (desktop); pictograma este centrată.

3) Stil typesetting

• accident vascular cerebral: 1. 5 px (24 × 24), 1. 25 px (20 × 20), 1 px (16 × 16).
• linecap/linejoin: „rotund” pentru prietenie sau „miter” pentru stilul tehnic (fixat în ghid).
• Unghiuri de rază în geometrie: 2-3 px (cu 24 × 24).

Umplut-Pentru zone dense și icoane de stare.
Duotone este permis pentru stări ilustrative goale, dar nu pentru semnale UI critice.

• Contur - starea de bază.
• Umplut - activ/alocare.
• Două tonuri - decorative/în ajutor.

4) Culoare și contrast (WCAG)

Modul de bază este monocrom prin „currentColor”: pictograma moștenește culoarea textului/contextului.

• 'icon. eroare "fundal ↔ ≥ 3:1, semnat cu text (nu doar culoare).
• 'icon. pe suprafață " fundal 3:1; pentru dimensiuni mici scopul la 4. 5:1.
• Pe culoarea moare, utilizaţi culorile „on” (contrast automat din sistemul de culori).

5) Stări și interacțiuni

Implicit/Hover/Active/Disabled/Focus: diferența nu este doar de culoare - schimbați opacitatea/umplerea/grosimea/pilula de fundal, adăugați inelul de focalizare.
Insigne - Contrast cifre ≥ 4. 5:1 pentru a muri; dimensiunea cifrei ≥ 10-11 px.
Comutați pictogramele (favorite, cum ar fi): schimbați umplerea și/sau punctul intern, nu doar culoarea.

6) Icon + text

Pictogramele nu înlocuiesc etichetele în acțiuni cheie. Pereche minimă: pictogramă + text scurt (sau tooltip by 'aria-label'). În liste și tabele, pictograma este aliniată cu înălțimea capacului textului și cu linia de bază.

7) Disponibilitate (A11y)

Pentru pictograme decorative:' rol =” img” aria-ascuns =” adevărat” sau eliminați accesibilitatea din flux.
Pentru semantic: '<svg role = „img” aria-labelledby = „id'>' + '<title id =” id'> Descriere </title>' sau 'aria-label'.
Pictograma nu trebuie să fie singurul purtător al stării: adăugați text/indiciu/model iconografic (formă, contur).
Dimensiunea textului și contrastul semnăturii corespund WCAG (regular ≥ 4. 5:1).

8) conducte și performanțe SVG

De ce SVG: claritate vectorială, stil prin CSS, greutate redusă cu optimizare.

• Stocați fișierele principale în Figma, exportați în SVG cu opțiuni: fără „grup” suplimentar, fără „regulă de umplere” în mod implicit, cu atributul 'viewBox' și fără „lățime/înălțime” fixă (suprascriere în CSS).
• Rulați prin SVGO (profilul proiectului): ștergerea metadatelor, reducerea coordonatelor, fuzionarea căilor.
• Abandonarea fonturilor de pictograme - probleme de accesibilitate și randare.

1. Sprite SVG:

html
<svg style="display:none">
<symbol id="icon-upload" viewBox="0 0 24 24">…</symbol>
</svg>
…
<svg class="i"><use href="#icon-upload"></use></svg>

repetiții ieftine, − nu puteți schimba cu ușurință „lățimea stroke” în unele conducte.
2. Inline-SVG (componenta React): flexibilitatea stilurilor și recuzită, tremuratul copacilor.
3. Extern „<img>” - numai pentru decorativ/ilustrativ.

css
.i { width: 1em; height: 1em; color: var(--icon-color, currentColor); }
.i--muted { opacity:.64; }
.i--danger { color: var(--role-danger); }

9) Componenta API (React exemplu)

tsx type IconProps = {
name: 'upload'      'download'      'wallet'      'trophy'      'shield'      string;
size?: number      '1em'      'sm'      'md'      'lg';
stroke?: number;       // 1      1. 25      1. 5 title?: string;        // для a11y decorative?: boolean;     // если true -> aria-hidden className?: string;
};

• În mod implicit, "size =" 1em "" și "contur = 1. 5`.
• Dacă „decorativ”, adăugați „aria-ascuns =” adevărat „”.