Иконалар жана пиктограммалар системасы

1) продукт иконалар ролу

Иконалар - маанинин жана абалынын компакт алып жүрүүчүсү. Алар сканерлөөнү тездетет, жерди үнөмдөөгө жардам берет жана үлгүлөрдүн таанылышын жогорулатат. Продукт интерфейстеринде сөлөкөт текстти жана түсүн толуктайт, аларды алмаштырбайт.

1. Мааниси> стили: ар бир сөлөкөт так колдонуу сценарийи болушу керек.

2. Консистенция: бирдиктүү тор, штрих, бурчтар, толтуруу ыргагы.

3. Жеткиликтүүлүк: белги гана сигнал эмес; ар дайым кол/tooltip/aria бар.

4. Аткаруу: бир SVG-Pipline, спрайттар жана түстүү/өлчөмдөгү токендер.

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 боюнча кейлинге бир аз жылытылат.
• Кружкалар жана чекиттер көбүнчө бирдей визуалдык масса үчүн диаметрине + 1 px талап кылат.

Басуу зоналары: ≥ 40 × 40 px (мобилдик), ≥ 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-Pipline жана аткаруу

Эмне үчүн SVG: вектордук тактык, CSS аркылуу стилдештирүү, оптималдаштыруу менен жеңил салмак.

• Figma мастер-файлдарды сактоо, параметрлери менен SVGге экспорттоо: ашыкча 'group' жок, 'fill-rule' жок, 'viewBox' атрибуту менен жана белгиленген 'width/height' жок (CSSде кайра аныктайбыз).
• 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>

арзан кайталап, − кээ бир payplayns 'stroke-width' өзгөртүү мүмкүн эмес.
2. Inline-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 'деп кошумчалайбыз.