ხატებისა და პიქტოგრამების სისტემა

1) ხატების როლი პროდუქტში

ხატები მნიშვნელობისა და მდგომარეობის კომპაქტური მატარებელია. ისინი აჩქარებენ სკანირებას, ეხმარებიან ადგილის დაზოგვას და ზრდის ნიმუშების აღიარებას. პროდუქტის ინტერფეისებში ხატი ავსებს ტექსტს და ფერს და არ ცვლის მათ.

1. მნიშვნელობა> სტილი: თითოეულ ხატს უნდა ჰქონდეს მკაფიო გამოყენების სცენარი.

2. თანმიმდევრულობა: ერთი ბადე, შეხება, კუთხეები, შევსების რიტმი.

3. წვდომა: ხატი არ არის ერთადერთი სიგნალი; ყოველთვის არის ხელმოწერა/tooltip/aria.

4. პროდუქტიულობა: ერთი SVG pipline, sprites და ფერების/ზომის ნიშნები.

2) ბადე და საკვანძო ხაზები

ძირითადი არტბორდი: 16 × 16, 20 × 20, 24 × 24 (ძირითადი), 32 × 32.
საკვანძო ხაზი (keyline): წრე/მოედანი, რომელიც იწერება 1-2 px უკან დახევით ოპტიკური ბალანსისთვის.
პიქსელის ნაბიჯი: ხატვა მთელ კოორდინატებზე; stroke kraten 0. 5 px (ჩვეულებრივ 1. 5 px 24 × 24).

• დიაგონალები „სქელი“ გამოიყურება თხელი - დაამატეთ 0. 25 px გაჩერება პრობლემურ ადგილებში.
• მკვეთრი კუთხეების მწვერვალები ოდნავ გაცხელებულია keyline შიგნით 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 (duotone) - ნებადართულია ილუსტრაციული ცარიელი სახელმწიფოებისთვის, მაგრამ არა კრიტიკული UI სიგნალებისთვის.

• Outline არის ძირითადი მდგომარეობა.
• Filled - აქტივი/გამოყოფა.
• ორი - ერთი - დეკორატიული/სერთიფიკატში.

4) ფერი და კონტრასტი (WCAG)

ძირითადი რეჟიმი არის მონოქრომი 'currentColor' - ის საშუალებით: ხატი მემკვიდრეობით იღებს ტექსტის/კონტექსტის ფერს.

• `icon. ერორი 'ფონ 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 =“ ნამდვილი“ ან ამოღებულია წვდომისგან.
სემანტიკისთვის: '<svg role = "img" aria-labelledby = "id">' + '<title id = "id"> აღწერა </title>' ან 'aria-label ".
იკონკა არ უნდა იყოს სტატუსის ერთადერთი მატარებელი: დაამატეთ ტექსტი/მინიშნება/იკონოგრაფიული ნიმუში (ფორმა, შეხება).
ტექსტის ზომა და ხელმოწერის კონტრასტი შეესაბამება WCAG- ს (ჩვეულებრივ, 4. 5:1).

8) SVG თამაში და შესრულება

რატომ SVG: ვექტორული სიცხადე, CSS- ის საშუალებით სტილიზაცია, დაბალი წონა ოპტიმიზაციით.

• შეინახეთ მასტერ ფაილები Figma- ში, ექსპორტზე SVG- ში: დამატებითი 'ჯგუფის' გარეშე, ნაგულისხმევი 'ფილმის გარეშე,' vivBox 'ატრიბუტით და ფიქსირებული' width/height- ის "გარეშე (განსაზღვრეთ CSS- ში).
• პროგონი SVGO- ს მეშვეობით (პროექტის პროფილი): მეტამონაცემების მოცილება, კოორდინატების შემცირება, ბილიკების გაერთიანება.
• Icon fonts (icon fonts) უარი არის წვდომის პრობლემები და render.

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. Inline-SVG (React კომპონენტი): სტილისა და პროპაგანდის მოქნილობა, სამების დარტყმა.
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 = "ნამდვილი" ".