Системаи нишонаҳо ва пиктограммаҳо

1) Нақши нишонаҳо дар маҳсулот

Нишонаҳо як интиқолдиҳандаи паймоне аз маъно ва ҳолат мебошанд. Онҳо сканингро суръат мебахшанд, фазоро сарфа мекунанд ва шинохти намунаро зиёд мекунанд. Дар интерфейси маҳсулот, нишона матн ва рангро ба ҷои иваз кардани онҳо пурра мекунад.

1. Маънӣ> услуб: ҳар як нишона бояд сенарияи возеҳи барномаро дошта бошад.

2. Мутобиқат: шабакаи ягона, зарба, кунҷҳо, ритми пур.

3. Мавҷудият: нишона ягона сигнал нест; ҳамеша имзо/абзор/ария вуҷуд дорад.

4. Иҷро: як лӯлаи SVG, спритҳо ва нишонаҳои рангӣ/андоза.

2) Хатҳои шабакавӣ ва калидӣ

Санъатҳои асосӣ: 16 × 16, 20 × 20, 24 × 24 (асосӣ), 32 × 32.
Keyline-A доира/мураббаъ барои тавозуни оптикӣ дар 1-2 px навишта шудааст.
Қатори пиксел: координатаҳои бутунро кашед; зарбаи чандинкаратаи 0 аст. 5 px (одатан 1). 5 px дар 24 × 24).

• Диагоналҳои "ғафс" лоғартар мешаванд - илова 0. 25 px ба зарба дар нуқтаҳои душворӣ.
• Мо қуллаҳои кунҷҳои тезро дар дохили хати калидӣ бо 1 px каме ғарқ мекунем, то ки "садо надиҳем".
• Доираҳо ва нуқтаҳо аксар вақт диаметри + 1 px барои массаи визуалии баробарро талаб мекунанд.

Минтақаҳои ангуштзанӣ: минтақаи интерактивӣ ≥ 40 × 40 px (мобилӣ), ≥ 32 × 32 px (мизи корӣ); нишона марказонида шудааст.

3) Услуби ҳуруфчинӣ

• зарба: 1. 5 px (24 × 24), 1. 25 px (20 × 20), 1 px (16 × 16).
• linecap/linejoin: 'мудаввар' барои дӯстӣ ё 'miter' барои услуби техникӣ (дар дастур собит шудааст).
• Кунҷҳои радиус дар геометрия: 2-3 px (аз 24 × 24).

Барои минтақаҳои зич ва нишонаҳои вазъ.
Duotone барои ҳолатҳои холии тасвирӣ иҷозат дода мешавад, аммо на барои сигналҳои танқидии UI.

• Контур - ҳолати асосӣ.
• Пур карда шудааст - дороӣ/тақсимот.
• Ду оҳанг - ороишӣ/дар кӯмак.

4) Ранг ва контраст (WCAG)

Ҳолати асосӣ монохром тавассути 'current' аст: нишона ранги матн/контекстро мерос мегирад.

• 'икон. хато '↔ замина ≥ 3:1, бо матн имзо шудааст (на танҳо ранг).
• 'икон. дар рӯи замин '↔ замина ≥ 3:1; барои андозаҳои хурд ба 4 нигаронида шудааст. 5:1.
• Дар ранг мемирад, рангҳои 'on-' -ро истифода баред (контрасти худкор аз системаи рангҳо).

5) Давлатҳо ва робитаҳои муштарак

Пешфарз/Hover/Фаъол/Маъюбон/Фокус: фарқият на танҳо дар ранг аст - тағир додани шаффофият/пуркунӣ/ғафсӣ/ҳабҳои пасзамина, илова кардани ҳалқаи фокус.
Нишонаҳо - Контрасти рақам ≥ 4. 5:1 ба марг; андозаи рақам ≥ 10-11 px.
Тумблери нишонаҳо (мунтахаб, монанди): пуркунӣ ва/ё нуқтаи дохилиро иваз кунед, на танҳо рангро.

6) Нишона + матн

Нишонаҳо дар амалҳои калидӣ нишонаҳоро иваз намекунанд. Ҷуфти ҳадди аққал: нишона + матни кӯтоҳ (ё абзор аз ҷониби 'aria-label'). Дар рӯйхатҳо ва ҷадвалҳо, нишона бо баландии ҳадди матн ва заминаи он ҳамоҳанг карда шудааст.

7) Дастрасӣ (A11y)

Барои нишонаҳои ороишӣ:' нақш =" img" aria-пинҳон =" ҳақиқӣ"' ё дастрасиро аз ҷараён хориҷ кунед.
Барои семантикӣ:' <svg нақш =" img" aria-labelledby =" id ">' +' <title id = "id "> Тавсиф </title> 'ё 'aria-label '.
Нишона набояд ягона интиқолдиҳандаи ҳолат бошад: илова кардани матн/ишора/иконографӣ (шакл, зарба).
Андозаи матн ва контрасти имзо ба WCAG (≥ муқаррарии 4) мувофиқат мекунад. 5:1).

8) Қубур ва иҷрои SVG

Чаро SVG: возеҳии векторӣ, ороиши тавассути CSS, вазни сабук бо оптимизатсия.

• Нигоҳ доштани файлҳои усто дар Figma, содирот ба SVG бо имконот: бе 'гурӯҳи' иловагӣ, бе 'пур кардани қоида' бо пешфарз, бо атрибути 'view- box' ва бе 'паҳнои/баландии' собит (аз нав дар CSS).
• Ба воситаи SVGO (профили лоиҳа) кор кунед: нест кардани метамаълумот, кам кардани координатҳо, якҷоя кардани роҳҳо.
• Даст кашидан аз ҳуруфҳои нишона - дастрасӣ ва пешниҳоди масъалаҳо.

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>

такрори арзон, − шумо наметавонед ба осонӣ 'паҳнои зарба' -ро дар баъзе қубурҳо иваз кунед.
2. Inline-SVG (Компоненти реаксия): чандирии услубҳо ва танбаҳо, ларзиши дарахтон.
3. '<img>' - танҳо барои ороишӣ/тасвирӣ.

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

9) Компоненти API (Мисоли вокуниш)

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

• Бо нобаёнӣ,' андоза =" 1em" ва' strok = 1. 5`.
• Агар' ороишӣ' илова кунед 'aria-пинҳон =" ҳақиқӣ"'.