Системаҳои тарроҳӣ ва ҳуҷҷатҳои онҳо

1) Системаи тарроҳӣ чист ва чаро он лозим аст

Системаи тарроҳӣ як манбаи ягонаи ҳақиқат барои интерфейс аст: маҷмӯи нишонаҳо, ҷузъҳо, амалия ва ҳуҷҷатгузорӣ, ки пешгӯии UX, суръати рушд ва миқёсро таъмин мекунад.

• Мувофиқати қабати визуалӣ ва рафторӣ дар тамоми маҳсулот.
• Суръат: истифодаи ҷузъҳои такрорӣ, хароҷоти камтар.
• Сифат: намунаҳои умумии A11y, маҳаллисозӣ, санҷишҳо, стандартҳои мундариҷа.
• Идоракунӣ: масъулияти возеҳ, релизҳо, харитаи роҳ.

2) Меъмории системаи тарроҳӣ (қабатҳо)

1. Нишонаҳои тарроҳӣ (таҳкурсӣ): рангҳо, типография, андозаҳо, радиӣ, сояҳо, ҳиндуҳо, ҳолатҳо, инчунин нишонаҳои семантикӣ ('ранг. сатҳи. огоҳӣ ',' фазо. xs ').
2. Компонентҳои UI: тугмаҳо, майдонҳои вуруд, тирезаҳои модалӣ, қатраҳо, мизҳо, тостҳо, баннерҳо, огоҳиҳо, ҳолати холӣ, скелетҳо.
3. Намунаҳо ва композитсияҳо: шаклҳои KYC, ҷараёни пардохт, натиҷаҳои сифр, устоҳои қадам, кортҳои мундариҷа.
4. Дастури мундариҷа (микрокопия): оҳанг, луғати истилоҳот, намунаҳои хатогӣ/муваффақият, тела/баннерҳо.
5. Инфраструктура: дастур оид ба A11y, озмоиш, маҳаллисозӣ, версияҳо, саҳмгузорон (саҳмгузорон).

3) Нишонаҳои тарроҳӣ: принсипҳо

Семантика> услуби "хом". Истифода баред 'ранг. матн. хомӯш 'ба ҷои' # 6B7280 '.
Фемизатсия ва платформаҳо. Токенҳои манбаъ → харитасозии платформа (Веб, IOS, Android, почтаи электронӣ).
Мавзӯи сабук/торик ва фарқияти WCAG дар сатҳи нишона.
Миқёси глобалӣ ва контекстӣ: 'фазо. 2 ',' радиус. md ',' баландӣ. 1 ',' шаффофият. маъюбон '.
Версияи токен: тағирот - тавассути сиёсати амортизатсия ва қайдҳои муҳоҷират.

4) Компонентҳо: талабот ва таркиби саҳифа дар ҳуҷҷатгузорӣ

• Тавсиф ва ҳадаф. Кай бояд истифода кард/истифода набарад.
• Вариантҳо/давлатҳо. Андозаҳо, намудҳо (ибтидоӣ/миёна/арвоҳ), маъюбон, боркунӣ, харобкунанда.
• Дастрасӣ. Нақш, паймоиши клавиатура, 'aria-', контраст, ҳалқаҳои фокусӣ.
• Матн ва намунаҳои микрокопӣ. Тамғакоғазҳо/ҷойгузинҳо, хатогиҳо, кӯмак.
• Намунаҳои рамзӣ. API-ҳои ҳадди аққал, идорашаванда/идоранашаванда.
• Интегратсия бо шаклҳо ва i18n. Ҳолатҳои хатти дароз, рақамҳо/асъорҳо/санаҳо.
• Анти-намунаҳо. Намунаҳои истифодаи хато.
• Матритсаи санҷишӣ. Суратҳои визуалӣ, воҳид/ҳамкорӣ, хонандагони экран.

5) Намунаҳои таркиб (меъ-)

Варақаҳои бақайдгирӣ/CUS: устоди зина ба зина, пешрафт, санҷиши дохилӣ + хулоса, намунаҳои хатогӣ.
Ҷараёни пардохт: интихоби метод, пардохтҳо, санаҳо, қоидаҳои якхела, тасдиқ ва вазъ.
Ҳолати холӣ: контекст + арзиш + CTA, натиҷаҳои ҷустуҷӯи сифр.
Паёмҳои муваффақият/хатогӣ: иерархияи вазъ, нишонаҳои визуалӣ, тост/баннерҳо/модалҳо.
Паймоиш ва филтрҳо: ҷустуҷӯи глобалӣ, пешнамоиши зуд, барчаспҳо.
Саҳифаҳои намуна бояд таркиби ҷузъҳои барои нусхабардорӣ тайёршударо бо микрокопия ва қайдҳои A11y нишон диҳанд.

6) Дастури мундариҷа (овоз ва оҳанг, микрокопия)

Овоз: касбӣ, равшан; оҳанг аз контекст (боркунӣ, пардохт, амният) вобаста аст.
Луғати ягонаи истилоҳот: пардохтҳо, мукофотпулӣ, маҳдудиятҳо, KYC - як арзиш барои як маҳсулот.
Қолибҳо: CTA, хатогиҳо, огоҳиҳо, муваффақиятҳо, ҳолати холӣ, огоҳиҳо.
Маҳаллисозӣ - аввал: захира барои дарозии хатҳо, рақамҳо/асъор/санаҳо аз рӯи минтақа.
A11y-vocabulary: тамғакоғазҳои равшан, ария-тасвирҳо, бидуни номуайянӣ.

7) Дастрасӣ (A11y) ҳамчун стандарти система

Меъёрҳои асосӣ: WCAG 2. 1 АА барои контраст, фокус ҳамеша намоён аст, паймоиши клавиатура.
Нақшҳо ва хусусиятҳо: ҷузъҳо 'нақш', 'aria-label', 'aria-describby', минтақаҳои зинда барои тостҳо/огоҳиҳоро тавсиф мекунанд.
Хонандагони экран: намунаҳои ибораҳо, тартиби хониш, ҳолати дуруст ('боэътимод/хушмуомила').
Тартиби санҷиш: чекҳои худкор + скриптҳои дастӣ.

8) Маҳаллисозӣ ва интернационализатсия

i18n калидҳо дар назди рамзи компонент + тавсифи контекст.
Рақамҳо/асъорҳо/санаҳо тавассути хизматрасонии форматкунӣ; матнро дар қолибҳо сахт надиҳед.
Озмоишҳои дарозӣ: "Олмони дароз", "мобилии танг", вариантҳои RTL.
Оҳанг бо забонҳо: харитаи оҳанг барои қадамҳои муҳим (пардохт/амният).

9) Ҳуҷҷатгузорӣ: сохтор ва навигатсия

1. Муқаддима: рисолат, принсипҳо, соҳаҳои масъулият.

2. Токенҳо: рангҳо, типография, шабака, андозаҳо, сояҳо, ҳолатҳо, мавзӯъҳо.

3. Компонентҳо: каталог бо филтрҳо (аз рӯи нақш, аз рӯи платформа, аз ҷониби A11y).

4. Намунаҳо: сенарияҳо (шаклҳо, пардохтҳо, ҳолати холӣ, муваффақият/хатогиҳо).

5. Дастури муҳтаво: овоз ва оҳанг, луғат, қолабҳои микрокопӣ.

6. Дастрасӣ: стандартҳо, рӯйхатҳои назоратӣ, парвандаҳои санҷишӣ.

7. Маҳаллисозӣ: принсипҳо, намунаҳо, луғатҳо аз рӯи бозор.

8. Интегратсия ва рамз: насб, версияҳо, намунаҳо, чӣ гуна муҳоҷират кардан.

9. Мусоидат: равандҳои саҳмгузорӣ, баррасии тарроҳӣ, баррасии код, таърифи иҷрошуда.

10. Changelog ва харитаи роҳ: релизҳо, амортизатсия, нақшаи рушд, масъалаҳои маълум.

10) Идоракунӣ ва равандҳо

Нақшҳо: дорандаи система (DesigN/UX Platform), нигоҳдорандагон (тарроҳӣ/FE), мушовирон (BE, A11y, маҳаллисозӣ).
Кумитаи тағирот: Арзёбии дархост, афзалият, ҳамоҳангсозии API/токен.
Равандҳо: RFC барои ҷузъҳои нав, шаклҳои барориши дохилӣ, SLA барои иштибоҳҳо.
Таърифи иҷро: тарроҳӣ (Figma) ↔ рамз (бастаи UI) ↔ док (мисол + дастур) ↔ санҷишҳо.

11) Саҳм: чӣ гуна илова/тағир додан

Қолаби RFC: проблема → опсия → қарори интихобшуда → A11y → i18n → муҳоҷират → хатар.
Flow PR: баррасии тарроҳӣ → баррасии код → UX копирайтер → A11y чек → қайдҳо.
Қоидаҳои мутобиқати қафо: ночиз/ячейка барои вайроннашаванда, асосӣ - бо амортизатсия ва муҳоҷирати автоматӣ, то ҳадди имкон.

12) Версия, релизҳо, муҳоҷират

Semver барои бастаҳо ('@ company/ds-core', '@ company/ds-forms', '@ company/ds-charts').
Қайдҳои нашр: тағироти нишона, ҷузъи API, рафтори пешфарз, тағироти вайроншуда, дастурҳои муҳоҷират.
Амортизатсия: нишонаҳои док, қоидаҳои линтер, модулҳои код барои ивазкунии омма.
Лӯлаи тарроҳӣ-нишонаҳо: манбаи ягона (JSON/YAML) → платформаи сохташуда (CSS vars, IOS, Android).

13) Санҷиши сифат

Санҷишҳои воҳиди рафтор ва шароит.
Суратҳои визуалӣ (мавзӯъ/регрессияи давлатӣ).
A11y санҷишҳо: дастнависҳои худкор + дастии хонандаи экран.
E2E ҳолатҳо барои ҷараёни интиқодӣ (бақайдгирӣ, пардохтҳо, KYC).
Буҷаҳои Perf: маҳдудиятҳо/бастаҳо ва манъи нашъамандӣ.

14) Нишондиҳандаҳои камолоти система

Қабул:% экранҳо/анборҳо бо истифодаи DS.
Суръат: Вақт аз тарҳ то таҳвил.
Сифат: камбудиҳо UI/A11y ба 1 озод кардан.
Мутобиқат: шумораи ҷузъҳои/услубҳои "якдафъаина" берун аз DS.
Ҳуҷҷатҳо: фарогирии компонентҳои док, аудиторияи дохилии NPS (таҳиягарон/таҳиягарон/таҳлилгарон).

15) Анти-намунаҳо

Токенҳо ҳамчун палитра бе семантика ("танҳо ранг").
Компонентҳо бидуни ҳуҷҷатгузорӣ ва бе намунаҳои ҳолатҳои шадид.
Нодида гирифтани A11y (фокус, контрасти кам, "ария" нест).
Шикастани версия бе амортизатсия ва роҳнамои муҳоҷират.
Мантиқи пинҳон дар ҷузъҳо (қоидаҳои тиҷорат ба ҷои рафтори UI).
Такрори ҷузъҳо барои парвандаҳои танг ба ҷои тамдиди API.

16) Рӯйхати санҷишҳо

• Номҳо ва мақсадҳои семантикӣ.
• Муқоисаи АА дар ҳарду мавзӯъ.
• Skales ва истифода ҳуҷҷатгузорӣ карда мешаванд.

• Имконот/давлатҳо фаро гирифта шудаанд.
• A11y-description, 'aria-', фокус.
• Намунаҳои микрокопӣ (тамғакоғазҳо, хатогиҳо, маслиҳатҳо).
• Намунаҳои рамзӣ ва ҳолатҳои канорӣ (хатҳои дароз, сарборӣ, холӣ).
• Санҷишҳои Unit/visual/A11y сабз мебошанд.

• Қайдҳоро бо намунаҳои пеш/баъд аз нашр.
• Роҳнамои муҳоҷират.
• Ҳикояҳо/намоишҳои нав, пайвандҳо дар бандар.

17) Пеш аз/баъд аз намунаҳо

• Тугмаҳои гуногуни ибтидоӣ: рангҳо/radii/indents мувофиқат намекунанд; матнҳои гуногуни CTA.

• Ягона 'Тугма' бо нишонаҳо: 'андоза = md', 'вариант = ибтидоӣ', 'радиус = lg', 'фосила = md', матн бо услуби "амал + объект".

• Паёмҳои техникӣ, ҳеҷ гуна дархост.

• Компоненти ' Формати санаи нодуруст. ДД-ро истифода баред. М.М. YYYY. '+ худкори фокус.

18) Қолаби саҳифаи компонентӣ (скелет)

Ном: тугма

Тавсиф: амалро оғоз мекунад; 1 экрани асосӣ.
Вариантҳо: ибтидоӣ, дуюмдараҷа, арвоҳ, харобкунанда; андозаҳои sm/md/lg.
Давлатҳо: hover, focus, фаъол, боркунӣ, маъюбон.
A11y: аз клавиатура дастрас аст; 'aria-pressed' барои ивазшаванда.

Микрокопия: "Тағиротро захира кунед", "Санҷишро идома диҳед. "Нагузоред "Хуб"

Рамз (мисоли API): 'Тугмаи {вариант, андоза, нишона, боркунӣ}'.
Анти-мисолҳо: ду баробар ибтидоӣ дар ҳамон зинанизом.
Санҷишҳо: лаҳзаҳои визуалӣ, контраст, фокус-ҳалқа.

19) Китоби бозикунии татбиқи системаи тарроҳӣ (нақшакашӣ)

1. Аудити интерфейс: инвентаризатсияи рангҳо/типография/ҷузъҳо/намунаҳо.
2. Нишонаҳои MVP ва ҷузъҳои асосӣ: Тугма, вуруд, интихоб, модал, ҳушдор, холӣ, тост.
3. Ҳуҷҷатгузорӣ ва китоби ҳикояҳо: намунаҳои зинда, порчаҳои рамзӣ, роҳнамо.
4. Маҳсулоти озмоишӣ: иваз кардани виджетҳо, ҷамъоварии фикру мулоҳизаҳо.
5. Дастури муҳоҷират: рамз-модҳо, қоидаҳои фарсудашавӣ.
6. Тамдиди маҷмӯа: ҷадвалҳо, пагоҳирӯзӣ, форумҳо, қадамҳои устод.
7. Миқёс: шакли маҳсулот (пардохтҳо, KYC), ҳамгироӣ бо таҳлил ва A/B.
8. Дастгирӣ: канали саволҳо, SLA, семинарҳои дохилӣ.

20) Қолибҳои ҳуҷҷатгузории тез

• Ном: 'ранг. сарҳад. огоҳ кунед '
• Мақсад: чорчӯбаҳои огоҳкунанда ва баннерҳо Огоҳӣ/Огоҳӣ
• Муқоиса: АА бар зидди 'ранг. сатҳи. пешпардохт '
• Накунед: барои матни андозаи хурд истифода баред
• Алоқаманд: 'ранг. сатҳи. огоҳӣ ',' нишона. огоҳ кунед '

Намунаи намуна: Ҳолати холӣ (натиҷаҳо нест)

Мақсад: Ислоҳ кардани дархост бидуни эҳсоси "нодуруст"

Таркиб: сарлавҳа (яклухт), матн (1-2 ҳукм), CTA, CTA дуюм, нишона/тасвир

Микрокопия: "Ҳеҷ чиз бо "{query}" ёфт нашуд Филтрҳоро аз нав барқарор кунед ё дархостро тоза кунед"

A11y: 'reg = "status"', 'aria-live = "хушмуомила"'

Варақаи ниҳоии фиреб

Нишонаҳои семантикӣ + интизоми A11y = пойгоҳ.
Саҳифаҳои пурраи компонентҳо: мақсад, вариантҳо, A11y, микрокопия, код, санҷишҳо.
Намунаҳо = таркиби ҷузъҳо бо матнҳо ва қоидаҳои тайёр.
Ҳуҷҷатҳо - маҳсулот: версия, релизҳо, муҳоҷират, раванди саҳм.
Камолоти андоза: қабул, суръат, нуқсонҳо, пайдарҳамӣ, NPS фармонҳои дохилӣ.