ინტერფეისის ერთი ენა

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

ინტერფეისის ერთიანი ენა (UNR) არის კონცეფციების, ვიზუალური წესებისა და ურთიერთქმედების ზოგადი სისტემა, რომელსაც იზიარებენ დიზაინერები, ინჟინრები, ანალიტიკოსები და შინაარსის ავტორები.

• კოორდინაცია: იგივე კომპონენტები და ტერმინები სხვადასხვა პროდუქტებსა და გუნდებში.
• სიჩქარე: სწრაფი შეკრება, ნაკლები ჰოლივარი, უფრო სწრაფად, ვიდრე ონბორდი.
• ხარისხი: UX კომპოზიციური ნიმუშები, „ნაგულისხმევი“ ხელმისაწვდომობა.
• მასშტაბურობა: უსაფრთხო ევოლუცია UI ზოოპარკში დაშლის გარეშე.

2) ერთი ენის ფენები

1. ნიშნები (ფერი, სტამბა, ზომები, ჩრდილები, უკან დახევა, რადიუსი, ანიმაცია).
2. კომპონენტები (ღილაკები, შეყვანის ველები, ცხრილები, გრაფიკა, მოდულები, სადღეგრძელოები, ჩანართები).
3. ნიმუშები (ფორმები, შესაბამისობა, ეტაპობრივი ოსტატები, სიები/ცხრილი, შეტყობინებები).
4. შინაარსი (მიკროკოპირაიტი, ტერმინოლოგია, შეცდომების შეტყობინებები).
5. იკონოგრაფია და ილუსტრაციები (ოჯახი, სტილი, ზომა და ხაზები).
6. წვდომა და i18n/RTL (A11y წესები, თარგმნა, ლოკალი).
7. პროცესები (ვერსიები, ჰაიდრილები, შურისძიება, ლინტერი, ფანჯრები და მაგალითები).

3) დიზაინის ნიშნები (გამოხატვის საფუძველი)

ნიშნები არის დასახელებული მნიშვნელობები, რომლებიც გამოიყენება ყველა პროდუქტში.

3. 1 ტოკენის სტრუქტურა (მაგალითი)

json
{
"color": {
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"accent": { "primary": "#2F6BFF", "warning": "#FF9F1A", "critical": "#E53935", "success": "#2EAE60" }
},
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 },
"radius": { "sm": 8, "md": 12, "lg": 16, "pill": 1000 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "sm": 12, "md": 14, "lg": 16, "xl": 20 } },
"motion": { "duration": { "fast": 120, "base": 200, "slow": 320 }, "curve": { "inout": "ease-in-out" } }
}

3. 2 ტოკენის ნეიმინგი

გენერალიდან კერძო: 'ფერი. accent. primary`, не `primaryBlue`.
ნეიმინგში ბრენდის მითითების გარეშე (ბრენდი არის თემა, არა ნიშნის სახელი).
გრადაცია: 'fg. muted`, `fg. primary`, `fg. inverse`. არ დაშიფროთ სიკაშკაშე სახელით ('blue500') სისტემის გარეშე.

3. 3 ნიშნის თემები

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

4) კომპონენტები: კონტრაქტი, მდგომარეობა, წვდომა

კომპონენტი = ვიზუალური + ქცევა + პროპორციული კონტრაქტი + A11y.

4. 1 ღილაკის ხელშეკრულების მაგალითი

ts type ButtonProps = {
kind: "primary"      "secondary"      "tertiary"      "danger";
size: "sm"      "md"      "lg";
icon?: "plus"      "download"      "trash";
disabled?: boolean;
loading?: boolean;
ariaLabel?: string;
onClick?: (e: MouseEvent) => void;
};

სახელმწიფოები: 'default/hover/active/focus/disabled/loading'.
ხელმისაწვდომობა: ფოკუსის რგოლი, ტარგეტის ზომები - 40-48 px, 'aria-pressed' toggle- ისთვის.

4. 2 კომპონენტების გარანტიები

სტაბილური ზომები (line-height, paddings).
ყუთის წვდომა (როლები/აარია, კლავიატურა, კონტრასტი).
ინვარიანტები: მოედნის შიგნით შეცდომა ყოველთვის ქვემოდან და 'aria-describedby'.

5) UX ნიმუშები (განმეორებითი ლოგიკა)

ფორმები: ეტიკეტი მარცხნივ/ზემოდან, placeholder - label, შეცდომები ახლომდებარე + ანგარიშში, შეყვანის ნიღბები და რჩევები.
მოდალები: ერთი მთავარი CTA, 'Esc' დახურავს, ხრიკის ხაფანგს, ფოკუსის დაბრუნებას.
ცხრილი/სიები: დახარისხება, სტილის სათაური, გვერდი, ექსპორტი.
ფილტრები: აშკარა ღილაკი „გამოყენება“, გამონადენი, შენახული პრესეტები.
შეტყობინებები: სადღეგრძელო - 3-5 წმ, პაუზა ყურადღების ცენტრში, 'role = „status/alert“'.
დაშბორდები: CTA გრაფიკის კონტექსტი.

6) ერთიანი ტერმინოლოგია და მიკროკოპირაიტინგი

6. 1 გლოსარიუმი

ჩაატარეთ ბიზნესისა და UX ტერმინების ერთი ტერმინები. ინტერფეისის თითოეული სტატია ეხება მას.
დუბლებისთვის - აირჩიოთ ერთი სიტყვა („საფულე“ vs „ბალანსი“), მეორე - როგორც სინონიმი ძებნაში.

6. 2 ტექსტის წესები

მოკლედ და საქმეში; ჟარგონის თავიდან აცილება.
შეცდომები - იმის ახსნა, თუ რა უნდა გააკეთოთ: „მიუთითეთ თარიღი GGG-MM-DD ფორმატით“.
სათაურები - არსებითი სახელები; ღილაკები - ზმნები („შენახვა“, „გაუქმება“).
თანმიმდევრული ერთეულები: თარიღი/დრო UTC ან ლოკალი, ვალუტა კოდით (EUR, აშშ დოლარი).

7) იკონოგრაფია და ილუსტრაციები

ოჯახი იზომორფულია: ერთი კუთხე, ხაზის სისქე, ქსელი 24 × 24.
სტატუსები და სემანტიკა: ფერი მეორეხარისხოვანია; ფორმა/ხატი + ტექსტი პირველადი.
სკალირება: პიქტოგრამები არ „ბანაობენ“ სხვადასხვა სიმკვრივეში (1 ×/2 ×/3 ×).

8) წვდომა (A11y) და ლოკალიზაცია (i18n/RTL)

კომპონენტები გადის WCAG AA: კონტრასტი, კლავიატურაზე ნავიგაცია, ფოკუსი, 'prefers-reduced-motion'.
თარგმნილი ხაზები - რესურსებში, არა კოდით. პლეიშოლდერები და რიცხვების/თარიღების ფორმატი ლოკალიზებულია.
RTL: ხატების მარცვალი, სწორი Tab ბრძანება, DnD ლოგიკა კლავიატურადან.

9) რიცხვები, თარიღები, ვალუტა და ფორმატები

თარიღები/დრო: ISO-8601, ნამდვილი დროის წერტილი - UTC; მომხმარებელი - ლოკალი.
ვალუტა: მცირე ერთეულები/ათობითი ხაზები; ყოველთვის მიუთითეთ კოდი (მაგალითად, „12.34“ ან „12“). 34 EUR" - იდაყვის გასწვრივ).
პროცენტი: '12.3%' და პუნქტები „+ 1.2 პროცენტული პუნქტი“ აშკარად განასხვავებს.
დამრგვალება: მნიშვნელოვან კატეგორიებამდე; „კ/მ“ დიდი რიცხვებისთვის.

10) ჰოვერნანსი: როლები, არტეფაქტები, არხები

დიზაინის ენის საბჭო (DLC): ტოქსინების/კომპონენტების მფლობელები, ამტკიცებენ RFC.

• კომპონენტების ბიბლიოთეკა (Figma/კოდი) + ცოცხალი კატალოგი მაგალითებით.
• დოკუმენტაცია: ჰაიდრილები, ნიმუშები, A11y, შინაარსის ჰაიდი.
• ჩეინჯლოგი თარიღებით, დონეზე (added/changed/deprecated/removed/fixed).
• არხები: ყოველკვირეული დიზაინის ლურჯი, Slack არხი, განხორციელების შოკები.

11) ვერსია და ევოლუცია

SemVer კომპონენტების პაკეტისთვის: 'MAJOR. MINOR. PATCH`.
MINOR - დანამატი: ახალი ნიშნები, ნაგულისხმევი ხარვეზები, ახალი კომპონენტები.
MAJOR - breaking: პროპორციების მოხსნა, სემანტიკის შეცვლა და მიგრაციის ჰაიდები.
დეპრესიები: გაფრთხილებები, ფანჯარა 90 დღე, თავსებადობის დროშები.

12) ლინტერები და ავტომატური შემოწმებები

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

13) კომპონენტების ვიტრინა (storybook/ქვიშის ყუთი)

ცოცხალი მაგალითები პროპორციული კონტროლის, კოდის, პირობების, A11y ჩეკერის მიერ.
„რეცეპტები“: რეგისტრაციის ფორმა, 3 ნაბიჯის ოსტატი, ცხრილი + ფილტრები, მოდალა + სადღეგრძელო.
„ლოკალების ქვიშის ყუთი“: ენის/ფორმატის გადართვა/RTL.

14) ნეიმინგის შაბლონები და სტრუქტურები

14. 1 კომპონენტები (VEM/სემანტიკა, CSS მაგალითი)

.btn/basic/
.btn--primary/view/
.btn--danger
.btn--lg/size/
.btn __ icon/part/

კოდი შეიცავს რეპრესიების ერთფეროვან სახელებს: 'size', 'kind', 'disabled', 'onClick'.

14. 2 ბიბლიოთეკის ფაილური სტრუქტურა

/tokens
/components
/button
/input
/modal
/patterns
/docs
/changelog

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

„თავისუფალი“ ფერები/უკან დახევა.
კომპონენტების დუბლები: „ButtonV2“, „PrimaraButtonNew“.
პლეიშოლდერი, როგორც ველის ერთადერთი ეტიკეტი.
გამორთვა outline და div ღილაკები.
არაპროგნოზირებადი hover/active/disabled.
თარგმნილი ტერმინები ნორმალური თარგმანის ნაცვლად.
განახლებების დროს მიგრაციის ჰიდების არარსებობა.

16) ერთი ენის ხარისხის მეტრიკა

Coverage: ეკრანების წილი კომპონენტების ბიბლიოთეკის გამოყენებით.
Consistence Index: ნიშნების ხელახალი გამოყენება „სახელმძღვანელო“ სტილები.
A11y Pass Rate: კომპონენტების პროცენტი WCAG AA.
Escape Escape: UI/შინაარსის დეფექტები გაყიდვაში 1k კომიტისთვის.
Time-to-Ship: DLS- ის შემდეგ ტიპის ეკრანის გაყიდვის დრო.
Adoption: DAU ვიტრინები, PR ნომერი კომპონენტებით/ნიმუშებით.

17) ეკრანის ჩეკის სია

• გამოიყენებოდა ნიშნები (ფერი/გამორთვა/რადიუსი) და არა „მკაცრი“ მნიშვნელობები.
• კომპონენტები ბიბლიოთეკიდან; კასტა - მხოლოდ RFC- ში.
• წვდომა: კლავიატურა/ფოკუსი/კონტრასტი/როლები/aria.
• ერთეულები: თარიღები/ვალუტა/პროცენტი - ფორმატის ჰაიდის მიხედვით.
• მიკროკოპი: ღილაკები = ზმნები, შეცდომები = გამოსწორების მოქმედება.
• ლოკალი/RTL არ არღვევს განლაგებას.
• სახელმწიფოები: loading/empty/error გათვალისწინებულია.
• ვიზუალური რეგრესიის ტესტები განახლებულია.

18) განხორციელების გეგმა (3 გამეორება)

Iteration 1 - საძირკველი (2-3 კვირა)

ნიშნები (ფერი/სტამბა/სიჩქარე/მოძრაობა), ძირითადი კომპონენტები (Button, Input, Select, Tooltip, Modal), შინაარსის ჰაიდი (ტონი, ეტიკეტი, შეცდომები).
ვიტრინა (storybook) და A11y Checker, ტოკენის ლინტერი.

განმეორება 2 - პატერნები და ლოკალიზაცია (3-4 კვირა)

ფორმების/ცხრილების/ფილტრების ნიმუშები, იკონპაკი 24 × 24, RTL/i18n ქვიშის ყუთები, რიცხვების/თარიღების/ვალუტების წესები.
SemVer, Chainglogo, RFC/მიგრაციის პროცესი, ავტოსადგურები (ვიზუალური + A11y).

გამეორება 3 - მასშტაბები და ევოლუცია (მუდმივად)

კომპოზიციური კომპონენტები (Wizard, DataGrid, Chart primitives), temization (მსუბუქი/მუქი/კონტრასტული), მოხსენებები ხარისხის მეტრიკის შესახებ, რეგულარული UX აუდიტი.

19) მინი-FAQ

დაუყოვნებლივ უნდა „ყველაფერი დაუყოვნებლივ“?
არა. დაიწყეთ ნიშნები და ძირითადი კომპონენტები, შემდეგ დაამატეთ ნიმუშები და პროცესები.

როგორ დავარწმუნოთ გუნდები გამოიყენონ UNR?
აჩვენეთ მოგება: სიჩქარე, ნაკლები დეფექტი, მზა ეკრანების რეცეპტები და A11y „ყუთიდან“.

რა უნდა გავაკეთოთ ლეგაციურ ეკრანებთან?
მიგრაციის გეგმა, ხიდის სტილები ნიშნების მეშვეობით, პრიორიტეტული ეკრანები პირველია.

შედეგი

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