Иконалар мен пиктограммалар жүйесі

1) Өнімдегі иконалардың рөлі

Иконалар - мағынасы мен күйінің ықшам тасымалдаушысы. Олар сканерлеуді жеделдетеді, орынды үнемдеуге және паттерндердің танымалдығын арттыруға көмектеседі. Азық-түлік интерфейстерінде иконка мәтін мен түс алмастырмайды.

1. Мағынасы> мәнері: әрбір белгішеде нақты қолдану сценарийі болуы тиіс.

2. Консистенттілігі: бірыңғай тор, штрих, бұрыштар, толтыру ырғағы.

3. Қол жетімділік: белгі жалғыз сигнал емес; әрқашан/tooltip/aria қолтаңбасы бар.

4. Өнімділігі: бір SVG-пайплайн, түсі/өлшемі спрайттар мен белгілер.

2) Тор және негізгі сызықтар

Базалық артбордтар: 16 × 16, 20 × 20, 24 × 24 (негізгі), 32 × 32.
Негізгі сызық (keyline): оптикалық теңгерім үшін 1-2 px шегінісі бар шеңбер/шаршы.
Пиксель қадамы: тұтас координаттарда сызыңыз; stroke еселенген 0. 5 px (әдетте 1. 5 px 24 × 24).

• «Қалың» диагоналдары жұқа көрінеді - 0 қосыңыз. 25 px проблемалы жерлердегі stroke.
• Өткір бұрыштардың шыңдарын 1 px-те keyline ішіне сәл ғана жылытамыз.
• Дөңгелектер мен нүктелер көбінесе көрнекі салмаққа тең диаметрге + 1 px талап етеді.

Басу аймақтары: интерактивті аймақ ≥ 40 × 40 px (mobile), ≥ 32 × 32 px (desktop); белгішесі орталықтандырылған.

3) Теру мәнері

• stroke: 1. 5 px (24×24), 1. 25 px (20×20), 1 px (16×16).
• linecap/linejoin: достық үшін 'round' немесе техникалық стиль үшін 'miter' (гайдлайнда белгілейміз).
• Геометриядағы радиус бұрыштары: 2-3 px (24 × 24).

Құю (filled) - тығыз аумақтар мен мәртебе таңбашалары үшін.
Екітон (duotone) - иллюстрациялық бос жай-күйлер үшін рұқсат етіледі, бірақ сыни UI-сигналдар үшін емес.

• Outline - негізгі күйі.
• Filled - актив/бөлектеу.
• Two-tone - сәндік/анықтамада.

4) Түсі және қарама-қарсылығы (WCAG)

Негізгі режим - 'currentColor' арқылы монохром: белгішеге мәтін/мәтін түсі беріледі.

• `icon. error '≥ фоны 3:1, мәтін қолтаңбасы (тек түсі ғана емес).
• `icon. on-surface ', фон ≥ 3:1; ұсақ өлшемдер үшін мақсатқа 4. 5:1.
• Түсті плашкаларда 'on-' түстерін пайдаланыңыз (түсті жүйеден контрастты автоматты түрде таңдау).

5) Жай-күйі және өзара іс-қимылы

Default/Hover/Active/Disabled/Focus: айырмашылық тек түсінде ғана емес - мөлдірсіздікті/құюды/қалыңдықты/фон-таблетканы өзгертеміз, focus ring қосамыз.
Badges (санауыштар): санның қарама-қайшылығы ≥ 4. 5:1 плашкаға; сан өлшемі ≥ 10-11 px.
Toggle-иконалар (таңдаулы, лайк): тек түсін ғана емес, құйылған және/немесе ішкі нүктесін өзгертеміз.

6) Белгі + мәтін

Иконалар негізгі әрекеттердегі лейблдерді алмастырмайды. Ең кіші жұп: иконка + қысқа мәтін (немесе tooltip 'aria-label'). Тізімдер мен кестелердегі белгішелер мәтіннің және базалық сызықтың қисық биіктігі бойынша тегістеледі.

7) Қол жетімділік (A11y)

Сәндік белгішелер үшін:' role =» img» aria-hidden =» true» немесе қол жетімділік ағынынан алып тастау.
Мағыналылар үшін:' <svg role =» img» aria-labelledby =» id»>' +' <title id = «id «> Сипаттама </title>' немесе 'aria-label '.
Иконка мәртебенің жалғыз тасушысы болмауы тиіс: мәтінді/кеңесті/иконографиялық паттернді (пішін, штрих) қосыңыз.
Мәтін өлшемі мен қолтаңбаның қарама-қайшылығы WCAG (қалыпты ≥ 4 сәйкес келеді. 5:1).

8) SVG-пайплайн және өнімділігі

Неліктен SVG: векторлық айқындылық, CSS арқылы стильдеу, оңтайландырумен аз салмақ.

• 'viewBox' төлсипатымен әдепкі 'fill-rule', 'width/height' (CSS-те қайта анықтаймыз) параметрлерімен SVG экспорттау, Figma мастер-файлдарын сақтау.
• SVGO (жоба профилі) арқылы өту: метадеректерді жою, координаттарды қысқарту, жолдарды біріктіру.
• Иконалық қаріптерден бас тарту (icon fonts) - қол жетімділік және рендер проблемалары.

1. 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>

арзан қайталаулар, − кейбір пайплайндарда «stroke-width» оңай өзгертуге болмайды.
2. Инлайн-SVG (React компоненті): мәнерлер мен пропстардың икемділігі, tree-shaking.
3. External '<img>' - тек сәндік/иллюстрациялық.

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

9) Компоненттің API (React мысалы)

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»' және 'stroke = 1. 5`.
• Егер 'decorative' болса, 'aria-hidden =' true 'деп қосамыз.