UX-гайдлайн жана интерфейс стандарттары
1) Принциптер
сулуулук алдында тактык. Мааниси жана иш-аракет 1-2 секунданын ичинде көрүнүп турат.
экранда бир максат. Бардык башка - экинчи же жашыруун.
ырааттуулугу. Ошол эле үлгүлөр = ошол эле күтүүлөр.
демейки жеткиликтүүлүгү. Контраст, фокус, клавиатура, үн.
Контекст. Кеңештер жана тексттер - так керектүү жерде.
Локализация-first. Саптардын узундугу, форматтары, маданияты - башында дизайнда.
Кайтарымдуулугу. Ар кандай кооптуу иш-аракет жокко чыгарылышы/тастыкталышы мүмкүн.
Өлчөө. Ар бир эреже - метрика менен (кадам которуу, убакыт, каталар).
2) тор, чегинүү жана ритм
тор: 4/8-pt кадам; рубрикалар: 12 (desktop), 6 (tablet), 4 (mobile).
Ички компоненттери: 4 эсе; тышкы - 8/ 12/16/24.
Тик ритм: баш → субтитр → мазмун → аракет (CTA).
Чек аралар жана бөлгүчтөр: үнөмдүү; "аба" жана типографиянын иерархиясын артык көрүшөт.
3) Типография
Кеглей шкаласы: 12/14/ 16/20/24/32/40 (body 16).
Саптын бийиктиги: 1. 4–1. 6 текст үчүн, 1. 2–1. 3 аталыштары үчүн.
Саптын узундугу: 45-75 белги (desktop), 35-55 (мобилдик).
Тандоо: семантикалык басым үчүн майлуу; Капс - белгилерде гана.
Үн менен окуу жөндөмдүүлүгү: тексттер табигый угулушу керек.
4) Түсү жана контраст
Семантика: 'success/info/warning/error/neutral'.
Контраст: минималдуу WCAG 2. 1 AA (текст/фон ≥ 4. 5:1; ири ≥ 3:1).
түс ≠ гана белги. Сөлөкөт/текст/форма кошуу.
Focus Ring: ар дайым көрүнүп турат (CSS өчүрүү жок).
5) Навигация жана маалыматтык архитектура
Колдонуучунун жолу: "Мен кайда? Бул жерде эмне? Мындан ары эмне болот?" - Албетте.
Меню иерархиясы: ≤ негизги багыттоо боюнча 2 деңгээл.
Нан сыныктары: терең бөлүмдөр үчүн.
Издөө: татаал каталогдордо дүйнөлүк жеткиликтүү; ысык баскычы '/'.
Навигация шарттары: Активдүү өтмөк/бет белгилер менен жарыктандырылды.
6) компоненттери жана үлгүлөрү
Дизайн системасынын компоненттерин колдонобуз ("үй жасалгалары" жок).
экранда бир primary-CTA; калгандары - secondary/tertiary.
Шарттар: default/hover/focus/active/disabled/loading - ар бир өз ара милдеттүү.
Бош шарттар: контекст + баалуулук + CTA (+ экинчилик байланыш).
Жалпы Алерт: экранда бир page-alert + жергиликтүү inline.
7) Формалар, валидация жана каталар
Лейбл милдеттүү болуп саналат. Placeholder - үлгү формат эмес, алмаштыруу.
blur боюнча Inline-валидация, submit боюнча summary-каталар.
ката билдирүү: эмне туура эмес + кантип + чектөө/формат.
Auto-scroll жана биринчи ката багытталган; 'aria-invalid', 'aria-describedby'.
Маскалар жана форматтар: сунуш, бирок киришүүнү бузбайт (мүмкүн пэйст).
Маалыматтардын коопсуздугу: кайра жүктөөдө/ката кетиргенде эч нерсени жоготпойбуз.
8) Шарттар жана фидбек
Ийгилик: тост 2-4 с, нейтралдуу-оң тон, CTA "кийинки".
Info/notice: жумшак баннер/тултип, агымын бөгөттөп жок.
Warning/Error/Critical: иерархия визуалдык/семантикалык; критикалык - ачык-айкын иш-аракет менен модалка/баннер.
жүктөп алуу: skeleton> spinner; күтүү убактысы баа> 3 с.
9) Мазмун жана microcopy
Үч жооп эрежеси: эмне болуп жатат → эмне үчүн → эмне кылуу керек.
CTA: иш-аракет этиш + объект ("өзгөртүү сактоо", "текшерүү").
Сандар/даталар/валюталар: жергиликтүү форматтар.
Тон: достук; стресстик кадамдарда (төлөм/коопсуздук) - нейтралдуу.
10) Жеткиликтүүлүк (A11y)
Клавиатурадан толук навигация; логикалык тартиби.
Ролдору жана 'aria-' interaktives үчүн, тост/статустар үчүн Live региондор.
Контрасттар, фокус шакектери, интерактив өлчөмдөрү ≥ 44 × 44 px.
Сөлөкөттөрдүн/сүрөттөрдүн тексттик альтернативалары; таблицалар 'th '/' scope'.
Текшерүү: автоматтык (Линтер/сканер) + кол Screen Screen.
11) Локалдаштыруу жана интернационалдаштыруу
Бардык саптар контекстте i18n-ачкычтарында.
Тест "узун тилдер" (DE/TR), RTL режимдери.
Сандар/валюталар/мезгилдер - форматтоо утилиттери.
Tone-map: сценарийлер боюнча формалдуулуктун/эмоциянын даражасы (онбординг/төлөмдөр/коопсуздук).
12) Респонсивдүүлүк жана адаптивдүүлүк
Breakpoint: 360 / 768 / 1024/1280 +.
Mobile-биринчи: критикалык жол бир колу менен жеткиликтүү, баш бармак зонасында CTA.
Гесталар жана клавиатура: жаңсоолор баскычтар менен кайталанат; desktop боюнча - hotkey.
тыгыздыгы: боюнча desktop - "аба", мобилдик - кликабилдүүлүк зыян жок тик үнөмдөө.
13) Караңгы тема
WCAG боюнча карама-каршылык сакталат; фон үчүн "таза кара" (кочкул боз).
Жарык/көлөкө - алсыраган; фокус-шакек карама-каршы.
Иллюстрациялар жана логотиптер - инвертацияланган версиялар менен.
Өтүү саясаты: колдонуучунун тандоосун сактоо (system/light/dark).
14) Анимация жана кыймыл
Узундугу: 120-200 мс (кичине), 200-300 мс (өткөөл).
Ылдамдатуу функциялары - табигый (кубик-безиер бир аз жайлоо менен).
Анимациялар агымды бөгөттөп, окулууну начарлатпашы керек.
сыйлоо 'prefers-reduced-motion'.
15) Аткаруу
LCP ≤ 2. 5 с, TTI/TBT жашыл зонада; код-сплитинг; жалкоо медиа жүктөө.
узун тизме Virtualization; маалыматтарды кэштөө.
Skeleton ылдамдыгын кабылдоо үчүн; минималдаштыруу "jank" макети.
16) UI коопсуздук жана купуялык
суроо-себептерин так түшүндүрмө (камера, KYC, гео).
Ачык мөөнөттөр/комиссиялар/лимиттер; кечигүү мүмкүн болсо, "заматта".
Жашыруун маалыматтар - жашыруу, ачык "көрсөтүү/жашыруу".
кайтарылгыс иш-аракеттер үчүн ырастоо; иш-аракеттер/кирүү жөнүндө билдирүүлөр журналы.
17) UX сапатын өлчөө
Этап конверсиясы жана аяктаганга чейинки убакыт.
талаалар/кадамдар жана Time-to-Fix боюнча ката.
CTR CTA жана кайталанышы.
ката кийин Drop-off/жүктөп кийин> N секунд.
Темалар боюнча колдоого кайрылуулар (өзгөртүүлөргө чейин/кийин).
A11y-бошотуу кемчиликтер (максаты - 0 оор).
18) Чек баракчалары
Чыгаруу алдындагы экран
- Бир негизги максаты жана бир негизги-CTA.
- Багыттоо жана абалы "Мен кайда" ачык.
- Мазмуну кыскача: 1-2 бирдигине сунуштар.
- Шарттар: loading/empty/error/success капталган.
- A11y: контраст AA, фокус көрүнүп турат, 'aria-' интерактивдүү.
- Локализация: саптардын узундугу/форматтары/RTL текшерилген.
- аткаруу: эч кандай "оор" кереги жок блоктор.
чыгаруу алдында түрү
- Лейблдер жана үлгүлөрү бар.
- Inline-validation + summary боюнча submit.
- биринчи ката Scroll, талаада басым.
- Билдирүүлөр: эмне/кантип/эмне үчүн; колдонуучу үчүн 500/400 коддору жок.
- Маалыматтар ката/кайра жүктөлгөндө жоголбойт.
19) Анти-үлгүлөрү
семантикалык кадамдарда CTA катары "OK".
Pleysholder ордуна лейбл.
Түс статусу гана белги болуп саналат.
Spinner эч кандай убакыт баа жана эч кандай альтернатива.
Модалдык терезелер фокус-трэп жана ESC-жабуу жок.
Стилдерди/иконаларды аралаштыруу, дизайн системасынан тышкары компоненттерди кайталоо.
критикалык жагдайларда юмор/эмодзи (төлөм/коопсуздук).
20) мисалдар "чейин/кийин"
Форманын катасы
Чейин: "Ката 400"
Андан кийин: "Датанын туура эмес форматы. DD колдонуу. ММ. GGGG"
Бош абал
Чейин: "Бул бош"
Андан кийин: "Бул жерде биринчи толуктоодон кийинки операциялардын тарыхы пайда болот. [Эсеп толукталсын]"
Ийгилик билдирүү
Чейин: "даяр"
Кийин: "Төлөм кабыл алынды. Баланс жаңыланды. [Тарыхты кароо]"
Навигация
Чейин: колдонуучу кайда экени белгисиз
Андан кийин: активдүү өтмөк + нан сыныктары + ачык бет аталышы
21) Дизайн-ревю үчүн үлгүлөр
Экран алкагы
аталышы → кыскача баяндамасы → мазмун/тизме → fidbek/статустар → иш-аракеттер.
Форма алкагы
аталышы → маалымдама → талаа (белги + жардам + ката) → CTA → экинчилик иш-аракеттер → эскертүүлөр (комиссия/мөөнөттөр).
Microcopy үлгүсү
Аталышы (опц.)
1-2 сунуштар: контекст + кийинки кадам
CTA: аракет + объект
Экинчилик байланыш: жардам/эрежелер
22) Процесстер жана стандарттарды сактоо
Definition of Done (UX): макети + текст + абалы + A11y + i18n + метрика.
PR UX-review: 18-21 бөлүмдөрүнүн чек тизмеси.
Документация: Ар бир көрүнүш wiki/Storybook гидди кошот/жаңыртат.
Чейректе бир жолу аудит: мазмун, A11y, аткаруу, консистенттүүлүк.
Акыркы шпаргалка
Бир максат, бир негизги CTA.
Шарттар жана фидбек алдын ала иштелип чыккан.
A11y жана локалдаштыруу - нөлдөн баштап, "кийин" эмес.
Аз түстөр - көбүрөөк семантика жана ритм.
Өлчөө: конверсия, каталар, убакыт, жүгүртүү.
Бардык дизайн системасы аркылуу: ошол эле эрежелер → ошол эле күтүүлөр → алдын ала UX.
Мен негизги жагдайлар (каттоо/CUS, депозиттик/алып салуу, бонустар/турнирлер) үчүн даяр үлгүлөрү менен бул колдонмо толуктап, сиздин жараяны үчүн чек барактарды чогулта алат.