დიზაინის სისტემები და მათი დოკუმენტაცია

1) რა არის დიზაინის სისტემა და რატომ არის ეს საჭირო

დიზაინის სისტემა არის ინტერფეისის ჭეშმარიტების ერთი წყარო: ნიშნების, კომპონენტების, პრაქტიკისა და დოკუმენტაციის ერთობლიობა, რომელიც უზრუნველყოფს UX პროგნოზირებას, განვითარების სიჩქარეს და მასშტაბურობას.

• ვიზუალური და ქცევითი ფენის კოორდინაცია ყველა პროდუქტში.
• სიჩქარე: კომპონენტების ჭარბი გამოყენება, ჭრის ნაკლები ხარჯები.
• ხარისხი: ზოგადი A11y ნიმუშები, ლოკალიზაცია, ტესტები, შინაარსის სტანდარტები.
• მართვა: მკაფიო პასუხისმგებლობა, გამოშვებები, საგზაო რუკა.

2) დიზაინის სისტემის არქიტექტურა (ფენები)

1. დიზაინის ნიშნები (foundation): ფერები, ტიპოგრაფია, ზომები, რადიუსი, ჩრდილები, უკან დახევა, სახელმწიფოები, აგრეთვე სემანტიკური ნიშნები ('color. surface. warning`, `space. xs`).
2. UI კომპონენტები: ღილაკები, შეყვანის ველები, მოდალური ფანჯრები, dropdowns, მაგიდები, სადღეგრძელოები, ბანერები, ალერტები, ცარიელი სახელმწიფოები, ჩონჩხი.
3. ნიმუშები და კომპოზიციები: KYC ფორმები, გადახდის ფლეშ, ნულოვანი შედეგები, ეტაპობრივი ოსტატები, შინაარსის ბარათები.
4. შინაარსის ჰაიდი: ტონი, ტერმინების ლექსიკონი, შეცდომის/წარმატების შაბლონები, push/ბანერები.
5. ინფრასტრუქტურა: ჰაიდი A11y- ზე, ტესტირება, ლოკალიზაცია, ვერსიები, ინვესტორები.

3) დიზაინის ნიშნები: პრინციპები

სემანტიკა> „ნედლეული“ სტილი. გამოიყენეთ 'ფერი. text. '# 6B7280' ნაცვლად.
თემიზაცია და პლატფორმები. ნიშნების წყარო - პლატფორმის mappings (Web, iOS, Android, email).
მსუბუქი/მუქი თემა და WCAG- ს კონტრასტი ტოქსინების დონეზე.
გლობალური და კონტექსტური მასშტაბები: 'space. 2`, `radius. md`, `elevation. 1`, `opacity. disabled`.
ნიშნების ვერსია: ცვლილებები - დეპრესიის პოლიტიკის და მიგრაციის ნოტების საშუალებით.

4) კომპონენტები: მოთხოვნები და გვერდის შემადგენლობა დოკუმენტაციაში

• აღწერა და დანიშნულება. როდის გამოიყენოთ/არ გამოიყენოთ.
• პარამეტრები/მდგომარეობა. ზომები, სახეობები (primary/secondary/ghost), disabled, loading, destructive.
• ხელმისაწვდომობა. როლი, კლავიატურის ნავიგაცია, 'aria', კონტრასტი, ფოკუს რგოლები.
• ტექსტი და მაგალითები microcopy. მოქმედი ეტიკეტები/პლეიშოლდერები, შეცდომები, დახმარება.
• კოდის მაგალითები. მინიმალური API, კონტროლირებადი/არაკონტროლირებული.
• ინტეგრაცია ფორმებთან და i18n. გრძელი ხაზების შემთხვევები, ნომრები/ვალუტა/თარიღები.
• Anti მაგალითები. არასწორი გამოყენების ნიმუშები.
• ტესტის მატრიცა. ვიზუალური დარტყმები, unit/interaction, scrinriders.

5) კომპოზიციის ნიმუშები (ჩანაწერები)

რეგისტრაციის ფორმები/KUS: ეტაპობრივი ოსტატი, პროგრესი, ინლაინ + მამრობითი, შეცდომის შაბლონები.
გადახდის flow: მეთოდის არჩევა, საკომისიო, ვადები, same-method წესი, დადასტურება და სტატუსი.
ცარიელი სახელმწიფოები: კონტექსტი + ღირებულება + CTA, ნულოვანი ძიების შედეგები.
წარმატების/შეცდომების შეტყობინებები: სტატუსის იერარქია, ვიზუალური ნიშნები, სადღეგრძელოები/ბანერები/მოდალები.
ნავიგაცია და ფილტრები: გლობალური ძებნა, სწრაფი პრესეტები, ჭდეები.
ნიმუშების გვერდებზე უნდა იყოს ნაჩვენები კომპოზიცია კოპირებისთვის მომზადებული კომპონენტებისგან, მიკროკოპითა და A11y ნოტებით.

6) შინაარსის ჰაიდი (voice & tone, microcopy)

ხმა: პროფესიონალი, ნათელი; ტონი დამოკიდებულია კონტექსტზე (ონბორდი, გადახდა, უსაფრთხოება).
ტერმინების ერთი ლექსიკონი: გადახდები, პრემიები, ლიმიტები, KYC - პროდუქტის ერთი მნიშვნელობა.
შაბლონები: CTA, შეცდომები, გაფრთხილებები, წარმატებები, ცარიელი სახელმწიფოები, შეტყობინებები.
ლოკალიზაცია-პირველი: რეზერვი ხაზების სიგრძისთვის, ნომერი/ვალუტა/თარიღით რეგიონში.
A11y ლექსიკა: მკაფიო ეტიკეტები, aria აღწერილობები, ორაზროვნების გარეშე.

7) Accessibility (A11y), როგორც სისტემის სტანდარტი

ძირითადი კრიტერიუმები: WCAG 2. 1 AA კონტრასტისთვის, ფოკუსი ყოველთვის ჩანს, კლავიატურაზე ნავიგაცია.
როლები და ატრიბუტები: კომპონენტები აღწერილია 'role', 'aria-label', 'aria-describedby', ლაივ რეგიონები სადღესასწაულო/ალერტებისთვის.
ეკრანული მკითხველები: ფრაზის მაგალითები, კითხვის რიგი, სწორი სტატუსები ('assertive/polite').
ტესტის პროცედურები: ავტომატური შემოწმება + სახელმძღვანელო სცენარები.

8) ლოკალიზაცია და ინტერნაციონალიზაცია

i18n გასაღებები კომპონენტის კოდის გვერდით + კონტექსტის აღწერა.
რიცხვები/ვალუტა/თარიღები ფორმატის კომუნალური საშუალებით; არ დააკოპიროთ ტექსტი შაბლონებში.
სიგრძის ტესტები: „გრძელი გერმანული“, „ვიწრო მობილური“, RTL ვარიანტები.
ტონი ენებზე: tone-map კრიტიკული ნაბიჯებისთვის (გადახდა/უსაფრთხოება).

9) დოკუმენტაცია: სტრუქტურა და ნავიგაცია

1. შემოღება: მისია, პრინციპები, პასუხისმგებლობის სფეროები.

2. ნიშნები: ფერები, ტიპოგრაფია, ქსელი, ზომები, ჩრდილები, მდგომარეობა, თემები.

3. კომპონენტები: კატალოგი ფილტრებით (როლზე, პლატფორმაზე, A11y- ზე).

4. ნიმუშები: სკრიპტები (ფორმები, გადასახადები, ცარიელი სახელმწიფოები, წარმატება/შეცდომები).

5. შინაარსის ჰაიდი: ხმა და ტონი, ლექსიკონი, მიკროკოპის შაბლონები.

6. Accessibility: სტანდარტები, შემოწმების ფურცლები, ტესტის შემთხვევები.

7. ლოკალიზაცია: პრინციპები, მაგალითები, სასაქონლო ბაზრები.

8. ინტეგრაცია და კოდი: ინსტალაცია, ვერსიები, მაგალითები, „რაც შეიძლება მეტი“.

9. კონტრიბუტინგი: ანაბრის პროცესები, დიზაინის რევიზია, კოდირება, done- ის დეფინიცია.

10. Changelog და Roadmap: გამოშვებები, დეპრესიები, განვითარების გეგმა, known issues.

10) მმართველობა და პროცესები

როლები: სისტემის მფლობელი (DesignOps/UX პლატფორმა), მთავარი (დიზაინი/FE), კონსულტანტები (BE, A11y, ლოკალიზაცია).
ცვლილებების კომიტეტი: მოთხოვნის შეფასება, პრიორიტეტიზაცია, API/token- ის კოორდინაცია.
პროცესები: RFC ახალ კომპონენტებზე, შიდა issue ფორმებზე, SLA შეცდომებზე.
Done Done: დიზაინი (Figma) - კოდი (UI პაკეტი) - დოქი (მაგალითი + ჰაიდი) - ტესტები.

11) კონტრიბუტინგი: როგორ დაამატოთ/შეცვალეთ

RFC შაბლონი: პრობლემა - ვარიანტები შერჩეული გამოსავალი - A11y - i18n - მიგრაცია და რისკები.
Flow PR: დიზაინის მიმოხილვა და კოდის მიმოხილვა UX საავტორო უფლებების დაცვა A11y ჩეკის გამოშვება.
საპირისპირო თავსებადობის წესები: მცირე/პატჩი არა დესტრუქციისთვის, მაიორი - დეფექტით და ავტომატური მიგრაციით, სადაც შესაძლებელია.

12) ვერსიები, გამოშვებები, მიგრაცია

SemVer პაკეტებისთვის ('@ company/ds-core', '@ company/ds-forms', '@ company/ds-charts').
Release notes: ტოქსინების ცვლილებები, კომპონენტების API, ნაგულისხმევი ქცევა, breaking changes, მიგრაციის ჰაიდები.
Deprecations: შენიშვნები დოქში, ლინტერის წესები, მასობრივი ჩანაცვლების კოდი.
Design-tokens pipeline: ერთი წყარო (JSON/YAML) - პლატფორმის ბილეთები (CSS vars, iOS, Android).

13) ხარისხის ტესტირება

ქცევის და სახელმწიფოების ერთეულის ტესტები.
ვიზუალური სლაიდები (თემების/სახელმწიფოების რეგრესია).
A11y ტესტები: ავტომატური + სახელმძღვანელო სკრიპტის სკრიპტები.
E2E შემთხვევები კრიტიკული flow- სთვის (რეგისტრაცია, გადახდა, KYC).
Perf ბიუჯეტები: bandle/Render- ის შეზღუდვები და მძიმე დამოკიდებულების აკრძალვები.

14) დიზაინის სისტემის სიმწიფის მეტრიკა

Adoption: ეკრანების %/საცავი DS- ის გამოყენებით.
Velocity: დრო განლაგებიდან მიწოდებამდე.
Quality: UI/A11y დეფექტები 1 გამოშვებისთვის.
Consistence: DS- ის გარეთ „ერთჯერადი“ კომპონენტების/სტილის რაოდენობა.
Docs: Dock კომპონენტების საფარი, NPS შიდა აუდიტორია (დიზაინერები/დეველოპერები/ანალიტიკოსები).

15) ანტი შაბლონები

ნიშნები, როგორც პალიტრა სემანტიკის გარეშე („უბრალოდ ფერი“).
კომპონენტები დოკუმენტაციის გარეშე და ექსტრემალური შემთხვევების მაგალითების გარეშე.
A11y- ს უგულებელყოფა (არ არსებობს ფოკუსი, დაბალი კონტრასტი, არა 'aria').
დაშლილი ვერსია დეპრესიისა და მიგრაციის სახელმძღვანელოს გარეშე.
კომპონენტებში ფარული ლოგიკა (ბიზნეს წესები UI ქცევის ნაცვლად).
კომპონენტების დუბლირება ვიწრო შემთხვევებისთვის, API გაფართოების ნაცვლად.

16) ჩეკის ფურცლები

• სემანტიკური სახელები და დანიშნულება.
• AA- ს კონტრასტი ორივე თემაში.
• დოკუმენტირებულია სკეილები და გამოყენების პრინციპები.

• პარამეტრები/მდგომარეობა დაფარულია.
• A11y აღწერა, 'aria', ხრიკი.
• მიკროკოპის მაგალითები (ეტიკეტები, შეცდომები, მინიშნებები).
• კოდისა და edge შემთხვევების მაგალითები (გრძელი ხაზები, დატვირთვა, ცარიელი).
• Unit/visual/A11y ტესტები მწვანეა.

• Release notes მაგალითებით ადრე/შემდეგ.
• Migration guide и deprecations.
• განახლებულია ნაკადები/დემო, ბმულები დოქში.

17) მაგალითები „წინ/შემდეგ“

• სხვადასხვა პირველადი ღილაკები: ფერები/რადიუსი/გამორთვა არ ემთხვევა; სხვადასხვა CTA ტექსტები.

• ერთი 'Button' ნიშნით: 'size = md', 'variant = primary', 'radius = lg', 'spacing = md', ტექსტი „მოქმედება + ობიექტი“ სტილში.

• ტექნიკური შეტყობინებები, მინიშნებების გარეშე.

• კომპონენტი ' არასწორი თარიღის ფორმატი. გამოიყენეთ DD. მმ. GGG. '+ მანქანის ფოკუსი.

18) კომპონენტის გვერდის შაბლონი (ჩონჩხი)

სახელი: Button

აღწერა: იწყებს მოქმედებას; 1 მთავარი ეკრანზე.
პარამეტრები: primary, secondary, ghost, destructive; ზომები sm/md/lg.
სახელმწიფოები: hover, focus, active, loading, disabled.
A11y: ხელმისაწვდომია კლავიატურადან; 'aria-pressed' გადართვისთვის.
მიკროკოპი: „შეინახეთ ცვლილებები“, „გააგრძელეთ გადამოწმება“. თავიდან აიცილეთ „OK“.
კოდი (API მაგალითი): 'Button {variant, size, icon, loading} ".
ანტი მაგალითები: ორმაგი პრემია იერარქიის იმავე დონეზე.
ტესტები: ვიზუალური სლაიდები, კონტრასტი, focus-ring.

19) დიზაინის სისტემის დანერგვის ფლეიბუკი (rollout)

1. ინტერფეისის აუდიტი: ფერის ინვენტარიზაცია/ტიპოგრაფია/კომპონენტები/ნიმუშები.
2. MVP ნიშნები და ძირითადი კომპონენტები: Button, Input, Select, Modal, Alert, EmptyState, Toast.
3. დოკუმენტაცია და სტორიბუკი: ცოცხალი მაგალითები, კოდი-სნიპეტები, ჰაიდები.
4. საპილოტე პროდუქტი: ვიჯეტების შეცვლა, უკუკავშირის შეგროვება.
5. მიგრაციის ჰაიდი: კოდი მოდის, დეპრესიის წესები.
6. ნაკრების გაფართოება: ცხრილები, პაგინაცია, ფორმების ფორუმები, სამაგისტრო ნაბიჯები.
7. სკალირება: პროდუქტის ნიმუშები (გადახდები, KYC), ინტეგრაცია ანალიტიკასთან და A/B.
8. მხარდაჭერა: კითხვების არხი, SLA, შიდა ვარჯიშები.

20) სწრაფი დოკუმენტაციის შაბლონები

• სახელი: 'color. border. warning`
• დანიშვნა: გაფრთხილებების ჩარჩო და ბანერები Notice/Warning
• კონტრასტი: AA 'color- ის ფონზე. surface. default`
• თქვენ არ შეგიძლიათ: გამოიყენოთ პატარა კრეკი ტექსტისთვის
• დაკავშირებული: 'ფერი. surface. warning`, `icon. warning`

შაბლონის შაბლონი: ცარიელი მდგომარეობა

მიზანი: მოთხოვნის კორექტირება „შეცდომის“ გრძნობის გარეშე

შემადგენლობა: სათაური (ოპერა) , ტექსტი (1-2 წინადადება), CTA, მეორადი CTA, ხატი/ილუსტრაცია

მიკროკოპი: "თითო "{query}" ვერაფერი იპოვნეს. ჩამოიბანეთ ფილტრები ან დააკონკრეტეთ მოთხოვნა"

A11y: `role="status"`, `aria-live="polite"`

საბოლოო ყალბი ფურცელი

სემანტიკური ნიშნები + დისციპლინა A11y = ბაზა.
კომპონენტების გვერდები სავსეა: დანიშნულება, პარამეტრები, A11y, მიკროკოპი, კოდი, ტესტები.
ნიმუშები = კომპოზიციები კომპონენტებიდან მზა ტექსტებითა და წესებით.
Docs - პროდუქტი: ვერსია, გამოშვებები, მიგრაცია, ანაბრის პროცესი.
გაზომეთ სიმწიფე: adoption, სიჩქარე, დეფექტები, თანმიმდევრულობა, შინაგანი ბრძანებების NPS.