Сенсордук түзмөктөрдө кыймыл жана UX

1) Эмне үчүн ишараттар жана алар ылайыктуу болгондо

• Алдын ала айтууга болот (платформалык күтүүлөргө жооп берет).
• Табылган (колдонуучу ишарат бар экенин болжолдойт).
• Кайтарым байланыш менен колдоого алынган (визуалдык/аудио/тактильдик).
• Туура эмес тийүү жана аппараттын ар кандай кармоо менен ишенимдүү.

Принциптер: биринчи ачык элементтер UI → андан кийин ишараттар → андан кийин өнүккөн жашыруун ишараттар. Критикалык иш-аракеттер - ар дайым ачык баскычтар менен кайталап.

2) Жаңдоо таксономиясы

Tap/Double-tap/Long-press - тандоо/кошумча. меню/кеңейтилген иш-аракеттер.
Swipe - навигация, алып салуу/архивдөө, иш-аракеттерди ачыкка чыгаруу.
Drag-and-drop - иреттөө, которуу, иерархияны өзгөртүү.
Pinch/Spread (zoom) - масштаб (галереялар, карталар, графиктер).
Rotate - сейрек редакторлор/көрүү үчүн ылайыктуу.
Pull-to-refresh/Release-to-action - жаңыртуу/экинчилик аракет.
Edge-swipe - системалык навигация (артка/менюга), вебвью боюнча этият.
Multi-touch - өнүккөн жагдайлар үчүн 2-3 манжалары менен кыймыл.
System gestures - скриншоттор, PiP, системалык "Артка" (Android) - конфликттерди эске алуу.

3) Эргономика жана баш бармак зоналары

Thumb-zones: жетүү аймагы - экрандын төмөнкү жарымы; негизги CTA, чип чыпкалар жана өтмөктөр - төмөнкү.
Hit-максат: 44 × 44 pt/48 × 48 dp. Майда элементтер үчүн хит-слоп (көзгө көрүнбөгөн таруу зонасын) кошуңуз.
Чектен четтөөлөр: жалган edge-swipe азайтуу; чектерине жакын эмес.
Багыт: портрет - демейки; ландшафт - эки чоң манжалар үчүн оптималдаштыруу (айрыкча оюндарда/видеодо).

4) Аныктоо жана окутуу

Affordance: ишарат боюнча кыйытма (жарым-көрүнгөн карта капталында, "туткасы" төмөнкү sheet үчүн).
Micro-Conbording: бир жолу колдонулуучу куралдар ("Алып салуу үчүн алып салыңыз"), obsesif эмес, менен "түшүндүм".
Пробалык ишарат: үлгү биринчи пайда көрсөтмө жандандыруу.
Кайталоо: ишараттар окшош мазмун менен бардык жерлерде бирдей иштеши керек.

5) пикир: көрүү, тактильдик, үн

Визуалдык: көлөкө, параллакс, жол көрсөтүүчүлөргө жабышуу, pull-to-refresh боюнча прогресс индикатору.
Тактиль (haptics): drag кармаганда жеңил импульс, "оор" - drop/ийгилик менен.
Аудио (орточо): оюндарда кыска басуу/басуу же олуттуу окуялар (утуп алуу/ката).
Жокко чыгаруу шарттары: destructive-swipe менен визуалдык "кызыл зона", алып салуу алдында vibro-кыйытма.

6) Жаңсоо чыр-чатактар жана артыкчылыктар

Таануу иерархиясы: ички scroll> swipe card> системалык edge-back (вебте - тескерисинче). gesture-arena/артыкчылыктарын орнотуу.
Vertical scroll vs horizontal swipe: 10-15 px кыймылынан кийин бир окту бөгөттөө.
Edge-swipe vs өздүк ишараттар: системалык тоскоолдук кылбоо үчүн ички артта калууну же "калем" жестын кошуу.
Global back-gesture (Android/IOS): күтүлгөн багыттоо бузууга эмес, - маанилүү иш-аракеттер "Артка" баскычы менен кайталап.

7) Сценарийлер боюнча үлгүлөр

7. 1 Тизмелер жана карталар

Swipe-actions: кыска Swipe - иш-аракеттер (сөлөкөтү), узун - заматта иш-аракет.
Undo-парадигма: destructive-ишарат кийин snackbar көрсөтүү "жокко чыгаруу".
Drag-reorder: "туткасы" боюнча тартуу; тик огун бекитүү.

7. 2 карталар, галереялар, сүрөттөр

Pinch-zoom + эки орундуу масштабдоо үчүн.
Inertia & bounds: ийкемдүү чек, жылмакай инерция.
Tap-hold үчүн "лупа "/пункту бөлүктөрү диаграмма.

7. 3 багыттоо жана тигүү

Bottom-sheet: калем, collapsed/partial/full абалын "сүйрөп" ишарат; жабуу үчүн swipe-down.
Tabs/Chips: прогресстин индикатору менен өтмөктөрдүн ортосундагы горизонталдык свайп.

7. 4 Оюн жана "тез" жагдайлар

One-hand ойноо: төмөнкү четинде ири чендерди/иш-аракеттер.
Кош ишараттар: кош тап катары "кайталап коюм" (haptic ырастоо).
destructive боюнча босого: "бекитүү" 300 ms бир манжа же аткаруу үчүн "кызыл зонаны" басып.

8) Жеткиликтүүлүк (A11y)

Бардык ишараттар баскычтар же меню пункттары менен кайталанат.
VoiceOver/TalkBack: туура сүрөттөмөлөр жана фокус тартиби.
Motor accessibility: long-press альтернатива (сөлөкөтү "⋮"), көбүрөөк тийүү зоналары.
Контраст жана масштаб: ишараттар иш-аракет кылууга гана жол болушу керек.

9) Аткаруу жана ишенимдүүлүк

INP (Кийинки Paint үчүн Interaction) ≤ 200 ms негизги ишараттар үчүн.
Touch latency: максат <50-100 ms биринчи жооп чейин (көрүү кармоо/жарык).
60 FPS: drag/scroll үчүн жылмакай; кыймылдап жатканда оор көлөкө жана blur өчүрүү.
Hit-testing: тосмолорду качуу (z-index/overflow) - тузак "жылмакай".
Кармоо сыноолору: оң/сол, баш бармак, туруп/транспортто.

10) Web vs Native

Web/PWA: пассивдүү угуучулар ('passive: true') үчүн scroll, 'touch-action' үчүн окторду бөгөттөө, кереги жок системалык ишараттарды кармап калуудан алыс.
iOS/Android Nativa: Системалык таануучуларды колдонуу (UIGestureRecognizer/Android GestureDetector), штаттык haptics, алдын ала "Артка" (Android 14 +).
Вебвью: көпүрөлөр жана коопсуз аймактар, шиттерди алдын ала жабуу - системалык "Артка" бузбастан вебтин ичинде.

11) Multi-тач жана өнүккөн ишараттар

Эки манжа: zoom бөгөттөлгөндө панорамалоо; карталарда - кошумча катмар үчүн "эки бармак" ишараты.
Үч манжа: power-users үчүн гана; ар дайым альтернатива берели.
Айкалышы: узак-пресс + диапазону/топтук кыймылын тандоо drag.

12) Валидация, телеметрия, метрика

События: `gesture_start`, `gesture_commit`, `gesture_cancel`, `latency_ms`, `distance_px`, `overscroll`, `misfire` (ложный жест), `undo_used`.
KPI: Success Rate, Misfire Rate, Undo Rate, INP, Time-to-Action, Кыйроо-өчүрүү жаңсоонун кагылышуусунда.

13) Локализация жана маданий айырмачылыктар

RTL тилдери: горизонталдык кыймыл жана сөлөкөттөрдү күзгү.
Символика: "солго ыргытып = алып салуу" универсалдуу эмес - onbording тастыктоо.
Тактиль үлгүлөрү: системалык профилдерди колдонуңуз, алар колдонуучуга мурунтан эле тааныш.

14) Коопсуздук жана каталар

Destructive - гана undo/ырастоо менен.
Edge Swipes кокусунан оор жараяндарды жабуу керек (төлөм/CUS).
Титирөөдөн коргоо: кыймыл босогосу (5-10 px) жаңсоо башталганга чейин.
Бөгөт коюучу абалдарда ишараттарды өчүрүү (төлөм лоадери, тастыктоо модалы).

15) Сенсордук столдор/планшеттер үчүн үлгүлөр

Эки колдуу сценарийлер: башкаруу зоналарын бөлүү.
Көп колдонуучу режими: жаңсоолор карама-каршы келбейт, тийүү убактысы боюнча артыкчылык.
Ири hit-максаттары: 56-64 dp; drag иштери үчүн визуалдык багыттар.

16) Антипаттерндер

Жашыруун сын иш-аракеттер гана ишарат (баскычы жок).
Системалуу жаңсоолор (edge-back, notification shade).
Long-press эч кандай визуалдык "күрөш" жана үн/vibro.
Ось локтору жок тик скроллдун ичиндеги горизонталдык свайп.
"Оор" көлөкө/blur drag → артта жана FPS күзүндө.
Колдонмонун ар кайсы бөлүктөрүндө макулдашылбаган ишараттар.

17) Киргизүү чек-тизмеси (кадам сайын)

1. Ишараттар картасы: кайда жана кайсынысы - A11y үчүн альтернативалар менен.
2. Таануунун артыкчылыктары: октук лок, edge-safe зонасы, gesture-arena.
3. Пикир: визуалдык тузак, haptics профилдери, анимация ≤ 200 ms.
4. Аткаруу: INP/60 FPS, drag/scroll боюнча кароо.
5. Onbording: өчүрүү мүмкүнчүлүгү менен жардам жана сыноо ишараттар.
6. Телеметрия: success/misfire/undo, heatmap тийүү.
7. Test Matrix: түзмөктөр, тыгыздыгы, сол/оң, начар тармак учурларда.
8. Документация: дизайн системасындагы жаңсоолор, мисалдар жана анти-кейстер.

18) Жыйынтык

Компетенттүү ишарат - бул тез, түшүнүктүү жана ишенимдүү. Бул системалык күтүүлөрдү бузбай жана бардыгына жеткиликтүүлүктү камсыз кылуу менен максатка карай жолду кыскартат. Дизайн системасынын бир бөлүгү катары ишараттарды долбоорлоо: бирдиктүү үлгүлөр, так артыкчылыктар, бай пикир жана катуу аткаруу контролдоо - ошондо сенсордук UX ар кандай түзмөктө жана ар кандай жагдайда бирдей жагымдуу болот.