Сенсорлық құрылғылардағы қимылдар мен 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-target: ең аз 44 × 44 pt/48 × 48 dp. Ұсақ элементтер үшін hit-slop (көрінбейтін созылу аймағы) қосыңыз.
Шеттерден шегіністер: жалған edge-swipe; сыни интеракциялар - шетіне жақын емес.
Бағдары: портрет - әдепкі; ландшафт - екі үлкен саусақ үшін оңтайландыру (әсіресе ойындар/бейне).

4) Анықталу және оқыту

Affordance: ишарат (бүйірінен жартылай көрінетін карточка, төменгі жағынан sheet үшін «тұтқа»).
Микро-онбординг: бір рет қолданылатын кеңестер («Жою үшін лақтырыңыз»), «Түсінікті».
Сынама ишарат: паттерн алғаш рет пайда болғанда көрсету анимациясы.
Қайталануы: әрекеттер ұқсас мазмұнды барлық жерлерде бірдей жұмыс істеуі керек.

5) Кері байланыс: визуалды, тактильді, дыбыстық

Визуалды: көлеңке, параллакс, бағыттаушыларға жабысу, pull-to-refresh кезіндегі прогресс-индикатор.
Тактильді (haptics): drag ұстағанда жеңіл импульс, «ауыр» - drop/табыста.
Аудио (орташа): ойындағы қысқа басу/шерту немесе маңызды оқиғалар (ұтыс/қате).
Болдырмау жағдайлары: destructive-свайпта көзбен шолып «қызыл аймақ», жою алдындағы діріл-белгі.

6) Ымдау қайшылықтары және басымдықтар

Тану иерархиясы: ішкі скролл> свайп картасы> жүйелік edge-back (вебте - керісінше). gesture-arena/басымдықтарын теңшеңіз.
Тік скролл vs көлденең свайп: 10-15 px қозғалыстан кейін бір білікті бұғаттаңыз.
Edge-swipe vs жеке қимылдар: жүйелік қимылдарды ұстап қалмау үшін ішкі шегіністі немесе «тұтқа» қимылын қосыңыз.
Global back-gesture (Android/iOS): күтілетін навигацияны бұзбаңыз - маңызды әрекеттерді «Артқа» түймешігімен қайталаңыз.

7) Сценарийлер бойынша паттерндер

7. 1 Тізімдер мен карточкалар

Swipe-actions: қысқа свайп - әрекеттер (иконалар), ұзын - жедел әрекет.
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 play: төменгі шетіндегі ірі ставкалар/әрекеттер аймақтары.
Қос қимылдар: «ставканы қайталау» ретінде қос тап (haptic растауы).
Destructive табалдырығы: саусақты 300 мс «бекітіңіз» немесе орындау үшін «қызыл аймақтан» өтіңіз.

8) Қол жетімділік (A11y)

Барлық қимылдар түймешіктермен немесе мәзір тармақтарымен қайталанады.
VoiceOver/TalkBack: дұрыс сипаттамалар және фокус тәртібі.
Motor accessibility: long-press баламалары («⋮» белгісі), ұлғайтылған жанасу аймақтары.
Қарама-қарсылық пен масштаб: қимылдар әрекетке түсудің жалғыз тәсілі болмауы тиіс.

9) Спектакль және сенімділік

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

10) Web vs Native

Web/PWA: пассивті тыңдаушылар ('passive: true') скролл үшін, 'touch-action' біліктерді бұғаттау үшін, жүйелік ишараларды қажетсіз ұстап қалудан аулақ болыңыз.
iOS/Android натив: жүйелік танғыштарды (UIGestureRecognizer/Android GestureDetector), штаттық haptics, болжамды «Артқа» (Android 14 +) пайдаланыңыз.
Вебвью: көпірлер мен қауіпсіз аймақтар, шеттердің алдын ала жабылуы - жүйелік «Артқа» сындырмай, вебтің ішінде.

11) Мульти-тач және ілгері қимылдар

Екі саусақ: бұғатталған zoom кезінде панорамалау; карталарда - қосымша қабат үшін «екі саусақ төмен» ишараты.
Үш саусақ: тек power-users үшін; әрқашан балама беріңіз.
Комбинациялар: ауқым/топтық орын ауыстыруды таңдау үшін long-press + 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, Drop-off.

13) Оқшаулау және мәдени айырмашылықтар

RTL тілдері: көлденең қимылдар мен иконаларды бейнелеңіз.
Таңба: «солға сүрту = жою» әмбебап емес - онбордингте растаңыз.
Тактильдік үлгілер: жүйелік профильдерді пайдаланыңыз, олар пайдаланушыға таныс.

14) Қауіпсіздік және қателер

Destructive қимылдары - тек undo/құптаумен.
Edge-свайптар сыни процестерді (ақы төлеу/АЖК) кездейсоқ жабуға тиіс емес.
Дірілден қорғау: қимылдың алдында қозғалыс шегі (5-10 px).
Бұғаттау күйінде қимылды ажырату (төлем лоадері, растау модалы).

15) Сенсорлық үстелдерге/планшеттерге арналған паттерндер

Екі қолды сценарийлер: басқару аймақтарын бөлу.
Мультипользовательтік режим: қимылдар қайшы келмейді, жанасу уақыты бойынша басымдық.
Ірі hit-targets: 56-64 dp; drag-операциялары үшін визуалды бағыттағыштар.

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

Жасырын сыни әрекеттер тек қимылмен (түймешіксіз).
Жүйелік қимылмен қайшы келетін қимылдар (edge-back, notification shade).
Long-press көзбен шолу және дыбыс/діріл жоқ.
Осьтік қақпағы жоқ тік скролл ішіндегі көлденең свайп.
drag → лаг және FPS құлау кезінде «ауыр» көлеңкелер/blur.
Бағдарламаның әр бөлігіндегі келісілмеген қимылдар.

17) Енгізу чек-парағы (қадамдық)

1. Ымдау картасы: қайда және қандай - A11y үшін баламалармен.
2. Танудың басымдықтары: осьтік лок, edge-safe аймағы, gesture-arena.
3. Кері байланыс: визуалды тұзақ, haptics-профильдер, анимациялар ≤ 200 мс.
4. Орындау: INP/60 FPS, drag/scroll кезінде профильдеу.
5. Онбординг: сөндіру мүмкіндігі бар кеңестер мен сынақ қимылдары.
6. Телеметрия: success/misfire/undo, жанасу heatmap.
7. Тест-матрица: девайстар, тығыздықтар, сол/оң жақ, нашар желі кейстері.
8. Құжаттама: дизайн-жүйедегі ишараттар бойынша гайд, мысалдар және анти-кейстер.

18) Қорытынды

Сауатты ишарат - бұл тез, түсінікті және сенімді. Ол жүйелік күтулерді бұзбай және барлығына қолжетімділікті қамтамасыз ете отырып, мақсатқа жету жолын қысқартады. Дизайн-жүйенің бір бөлігі ретінде қимылды жобалаңыз: бірыңғай үлгілер, айқын басымдықтар, бай кері байланыс және спектакльді қатаң бақылау - онда сенсорлық UX кез келген құрылғыда және кез келген сценарийде бірдей жағымды болады.