Nyşanlar we piktogrammalar ulgamy

1) Önümdäki nyşanlaryň roly

Nyşanlar many we ýagdaýyň ykjam göterijisidir. Skanerleri çaltlaşdyrýarlar, ýer tygşytlamaga kömek edýärler we patternleriň tanalmagyny ýokarlandyrýarlar. Önüm interfeýslerinde nyşan teksti we reňki doldurýar, olary çalyşmaýar.

1. Manysy> stili: her nyşanyň anyk ulanyş ssenariýasy bolmaly.

2. Yzygiderlilik: ýekeje tor, ştrih, burçlar, dolduryş ritmi.

3. Elýeterlilik: nyşan ýeke-täk signal däl; elmydama/tooltip/aria bar.

4. Öndürijilik: bir SVG-paýlanyş, spraýtlar we reňk/ululyk bellikleri.

2) Tor we esasy çyzyklar

Esasy artbordlar: 16 × 16, 20 × 20, 24 × 24 (esasy), 32 × 32.
Esasy çyzyk (keyline): optiki balans üçin 1-2 px girişi bilen ýazylan tegelek/inedördül.
Piksel ädimi: tutuş koordinatlara çyzýarys; stroke kraten 0. 5 px (adatça 1. 5 px 24 × 24).

• "Galyň" diagonallary has inçe görünýär - 0 goşuň. 25 px problemaly ýerlerde stroke.
• Ýiti burçlaryň depelerini "ýyldyrym çakmazlygy" üçin 1 px-de keyline azajyk gyzdyrýarys.
• Tegelekler we nokatlar köplenç deň wizual massa üçin diametri + 1 px talap edýär.

Basmagyň zolaklary: interaktiw zona ≥ 40 × 40 px (ykjam), ≥ 32 × 32 px (desktop); nyşan merkezleşdirildi.

3) Toplumyň stili

• stroke: 1. 5 px (24×24), 1. 25 px (20×20), 1 px (16×16).
• linecap/linejoin: 'round' dostluk üçin ýa-da 'miter' tehniki stil üçin (gidline ýazýarys).
• Geometriýadaky radius burçlary: 2-3 px (24 × 24).

Doldurma (filled) - dykyz ýerler we status nyşanlary üçin.
Dvoton (duotone) - suratly boş ýagdaýlar üçin rugsat berilýär, ýöne möhüm UI signallary üçin däl.

• Outline - esasy ýagdaý.
• Filled - aktiw/saýlama.
• Two-tone - bezeg/kömek.

4) Reňk we kontrast (WCAG)

Esasy re modeim - 'currentColor' arkaly monohrom: nyşan tekstiň/kontekstiň reňkini miras alýar.

• `icon. error ', fon ≥ 3:1, gol bilen (diňe reňk däl).
• `icon. on-surface ', fon ≥ 3:1; ownuk ölçegler üçin nyşana almak 4. 5:1.
• Reňkli ploshkalarda 'on-' reňkleri ulanyň (reňk ulgamyndan kontrasty awto-saýlamak).

5) Ýagdaýlar we özara gatnaşyklar

Default/Hover/Active/Disabled/Focus: tapawut diňe bir reňkde däl - aç-açanlygy/guýulmagy/galyňlygy/fon-dermany üýtgedýäris, focus ring goşýarys.
Badges: sanlaryň kontrasty ≥ 4. 5:1 çeňňege; san ululygy ≥ 10-11 px.
Toggle-nyşanlar (saýlanan, halaýan): diňe bir reňk däl, guýulýan we/ýa-da içki nokady üýtgedýäris.

6) Nyşan + tekst

Nyşanlar esasy hereketlerde bellikleriň ornuny tutmaýar. Iň az jübüt: nyşan + gysga tekst (ýa-da tooltip 'aria-label'). Sanawlarda we tablisalarda nyşan tekstiň we esasy çyzygyň beýikligi boýunça tekizlenýär.

7) Elýeterlilik (A11y)

Bezeg nyşanlary üçin: 'role = "img" aria-hidden = "true' ýa-da elýeterlilik akymyndan aýyryň.
Semantik üçin:' <svg role =" img" aria-labelledby =" id">' +' <title id = "id "> Düşündiriş </title>' ýa-da 'aria-label '.
Nyşan statusyň ýeke-täk göterijisi bolmaly däldir: teksti/maslahaty/ikonografiki patterni (görnüşi, ştrih) goşuň.
Tekstiň ululygy we goluň garşylygy WCAG-a laýyk gelýär (adaty ≥ 4. 5:1).

8) SVG-paýlanyş we öndürijilik

Näme üçin SVG: wektor aýdyňlygy, CSS arkaly stilizasiýa, optimizasiýa bilen ownuk agram.

• "Figma" -da esasy faýllary saklamak, SVG-e eksport etmek: artykmaç 'group' -siz, 'fill-rule' -siz, 'viewBox' atributy bilen we 'width/height' -siz (CSS-de täzeden kesgitleýäris).
• SVGO (taslama profili) arkaly geçmek: meta maglumatlary aýyrmak, koordinatlary azaltmak, ýollary birleşdirmek.
• Nyşan şriftlerinden ýüz öwürmek (icon fonts) - elýeterlilik we render meselesi.

1. SVG-sprite:

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>

Käbir − 'stroke-width' -ni aňsatlyk bilen üýtgedip bolmaýan arzan gaýtalamalar.
2. Inline-SVG (React komponenti): stilleriň we propslaryň çeýeligi, tree-shaking.
3. External '<img>' - diňe bezeg/illýustrasiýa üçin.

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

9) Komponentiň API (React mysaly)

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

• 'Size = "1em' we 'stroke = 1. 5`.
• Eger 'decorative' bolsa, 'aria-hidden =' true '-ni goşýarys.