Ժեստերը և UX-ը սենսորային սարքերում

1) Ինչո՞ ւ են ժեստերը և երբ դրանք տեղին են։

Ժեստերը նվազեցնում են օգտագործողի ուղին դեպի գործողություն 'մեկ սվայպ' երեք տուփի փոխարեն։ Նրանք բարձրացնում են արագությունն ու պահպանումը, եթե

Կանխատեսելի (համապատասխանում է պլատֆորմային սպասումներին)։

Հայտնաբերումները (օգտագործողը կռահում է, որ ժեստը հասանելի է)։

Ապահովված է հետադարձ կապով (տեսողական/աուդիո/մարտավարական)։

Վստահելի են սարքի սխալների և տարբեր պահանջների դեպքում։

Սկզբունքներ. Նախ ՝ UI-ի ակնհայտ տարրերը, այնուհետև ժեստեր-հուշումներ, ապա առաջադեմ թաքնված ժեստեր։ Կրիտիկական գործողությունները միշտ կրկնօրինակում են ակնհայտ կոճակները։

2) ժեստերի տաքսոնոմիա

Tap/Double-tap/Long-press - ընտրություն/dop / ընդլայնված գործողություններ։

Swipe (լեռ ./vert.) - լուծարումը, հեռացումը/արխիվացումը, գործողությունների բացահայտումը։

Delag-and-drop - տեսակավորում, փոխանցում, հիերարխիայի փոփոխություն։

Pinch/Spread (zoom) - մասշտաբը (պատկերասրահներ, քարտեզներ, գրաֆիկներ)։

Rotate-ը հազվադեպ է, տեղավորվում է խմբագրություններում/դիտումներում։

Pox-to-refresh/Releant-to-action - նորարարություն/ստացիոնար գործողություն։

Edge-swipe-ը համակարգային ռոտացիա է (ետ/մենյու), զգուշորեն վեբվուում։

Multi-touch-ը 2-3 մատներով ժեստեր են առաջադեմ կոմպոզիցիաների համար։

Disgestures-ը, PiP-ը, համակարգային «Առաջ» (Android), հաշվի առեք հակամարտությունները։

3) Էրգոնոմիկան և մեծ մատի գոտիները

Thumb-zones: Ստացված տարածքը էկրանի ներքևի մասն է։ Հիմնական CTA, չիպ ֆիլտրեր և ներդրումներ 'ներքևում։

Hit-target: առնվազն 44-44 pt/48-48 dp։ Ավելացրեք hit-slop (անտեսանելի կարծրացման գոտի) փոքր տարրերի համար։

Ծայրերից նահանջները 'նվազեցնում են կեղծ edge-swipe; քննադատական ինտերացիաները մոտ չեն եզրին։

Կողմնորոշումը 'դիմանկարը լռելյայն է։ լանդշաֆտը լավատեսություն է երկու մեծ մատների համար (հատկապես խաղերում/վիդեո)։

4) Հայտնաբերումը և ուսուցումը

Afford.ru: ժեստերի ակնարկներ (հատակին-տեսանելի քարտ կողքի, «գրիչ» ներքևում sheet-ի համար)։

Micro-onbording: Միանվագ հուշումներ («Smahite, հեռացնելու համար»), որոնք չեն պարտադրում, «Հասկացա»։

Փորձարկման ժեստը 'ցուցադրական անիմացիան առաջին պաթերտոնի հայտնվելուն պես։

Կրկնությունը 'ժեստերը պետք է նույն կերպ աշխատեն բոլոր վայրերում, որոնք ունեն նման բովանդակություն։

5) Հետադարձ կապ 'տեսողական, նրբանկատ, ձայնային, ձայնային։

Տեսողական 'ստվեր, զուգահեռներ, ուղղորդող, առաջընթացային ցուցիչ port-to-refresh-ում։

Մարտավարական (hapt.ru) 'թեթև իմպուլս, երբ վերցնում է www.ag, ավելի «ծանր»' drop/հաջողության ժամանակ։

Աուդիո (չափավոր) 'կարճ տեսահոլովակներ/ալկալներ խաղերում կամ շոշափելի իրադարձություններով (հաղթանակներ/սխալ)։

Միգրանցների վիճակը 'տեսողական «կարմիր գոտի» destructive-swipe-ի ժամանակ, վիբրո ակնարկը հեռացնելուց առաջ։

6) Ժեստերի և առաջնահերթությունների բախումները

Ճանաչման հիերարխիա 'ներքին սկրոլ> սվայփի քարտ> համակարգային edge-back (web-հակառակը)։ Պարեք gesture-arena/գերակայությունները։

Ուղղահայաց ժայռը հորիզոնական սվայպ է '10-15 px շարժումից հետո մեկ առանցք։

Edge-swipe-swipe-ը սեփական ժեստերը 'ավելացրեք ներքին տրամագիծը կամ ժեստը' «բռնակը», որպեսզի չփորձեն։

Գլոբալ back-gesture (Android/iOS), մի կոտրեք սպասվող ռոտացիան, կարևոր գործողություններ կրկնօրինակեք «Ետ» կոճակը։

7) Patterns-ը սցենարներով

7. 1 Ցուցակներ և քարտեր

Swipe-acions: կարճ swayp - գործողությունների հուշում (iconks), երկար - ակնթարթային գործողություն։

Undo-պարադիգմա 'destructive-ժեստից հետո ցույց տվեք www.ackbar «Չեղարկեք»։

Delag-reorder 'ձգում «բռնակով»; արձանագրել ուղղահայաց առանցքը։

7. 2 Քարտեզներ, պատկերասրահներ, գրաֆիկներ

Pinch-zoom + կրկնակի tap մեծացման համար։

Inertia & bounds: կադրային սահմաններ, լողացող իներցիա։

Tap-hold-ը «lupa «/կետային մասերի համար գրաֆիկայի վրա։

7. 3 Ռոտացիան և շիտերը

Bottium-sheet 'գրիչի ժեստը, collapsed/partial/fox վիճակը։ swipe-down փակելու համար։

Tast/Chips: հորիզոնական սվայպը առաջընթացի լուծիչի հետ ավանդների միջև։

7. 4 Խաղային և արագ սցենարներ

One-hand play: Մեծ տարածքներ/գործողություններ ստորին տարածքում։

Կրկնակի ժեստեր 'կրկնակի tap որպես «կրկնել տոկոսադրույքը» (haptic)։

Destructive '«ամրացրեք» մատը 300 մզ կամ անցեք «կարմիր գոտի»' կատարելու համար։

8) Հասանելիություն (A11y)

Բոլոր ժեստերը կրկնօրինակվում են կոճակներով կամ կետերով։

VoicOver/TalkBack: ճիշտ նկարագրություններ և ֆոկուսի կարգը։

Motor accessibility: long-press-ի այլընտրանք (iconca «108»), ավելացված կասեցման գոտիներ։

Հակադրություն և մասշտաբներ. Ժեստերը չպետք է լինեն գործողության միակ միջոցը։

9) Պերֆորանսը և Իսպանիան

INP (Interaction to Next Paint) 200 մզ է հիմնական ժեստերի համար։

Touch latency: Նպատակը <50-100 ms մինչև առաջին արձագանքը (տեսողական գրավումը/լուսավորությունը)։

60 FPS 'լող www.ag/scro.ru; անջատեք ծանր ստվերը և բլուրը շարժվելիս։

Hit-testing: խուսափեք համընկնումներից (z-index/overflow) - թակարդները «ոչ»։

Բավարար թեստեր 'աջ/ձախ, մեծ/փոքր մատը, կանգնելով/տրանսպորտում։

10) Web vs Native

Web/PWA: պասիվ լսողներ («passive: 108»), «touch-action» օսերը արգելափակելու համար, խուսափեք ժեստերի ավելացումից առանց կարիքների։

IOS/Android naive: օգտագործեք ռուսական ճանաչողներ (UIGestom Recognizer/Android Gestert Detector), ստանդարտ haptom, նախատիպային «Ետ» (Android 14 +)։

Ուեբվյու 'կամուրջներ և անվտանգ տարածքներ, շիտների նախապատմական լուծույթ' վեբի ներսում, առանց կոտրելու համակարգային «Ետ»։

11) Multi-tach և առաջադեմ ժեստեր

Երկու մատներ 'պանորամացիա արգելափակված zoom; քարտեզների վրա '«երկու մատի ներքև» ժեստը շերտի դոզայի համար։

Երեք մատներ 'միայն ռուսական-users-ի համար։ միշտ այլընտրանք։

Համադրություններ ՝ long-press + www.ag ընտրելու համար։

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-swyps-ը չպետք է պատահականորեն փակի կրիտիկական գործընթացները (վճարումը/CUS)։

Պաշտպանությունը 'շարժման շեմն (5-10 px) նախքան ժեստը սկսելը։

Ժեստերի անջատումը արգելափակող կետերում (վճարման լոկադեր, հաստատման մոդելը)։

15) Սենսորային սեղանների/պլանշետների համար

Երկկողմանի սցենարներ 'կառավարման գոտիների բաժանումը։

Մուլտիպլիկացիոն ռեժիմ. Ժեստերը չեն բախվում, գերակայություն են տալիս։

Մեծ hit-targets: 56-64 dp; տեսողական ճամփորդություններ ag վիրահատությունների համար։

16) Անտիպատերնի

Թաքնված կրիտիկական գործողությունները միայն ժեստով (առանց կոճակի)։

Ժեստերը, որոնք բախվում են համակարգային (edge-back, notifox shade) հետ։

Long-press-ը առանց տեսողական «պայքարի» և ձայնի/վիբրոյի։

Հորիզոնական սվայպը ուղղահայաց ժայռի ներսում առանց առանցքի։

«Ծանր» ստվերը/բլուրը, երբ ag-lag-ը և FPS-ի անկումը։

Չհամաձայնեցված ժեստերը տարբեր մասերում։

17) Chek-Show-( Suchagovo)

1. Ժեստերի քարտեզը 'որտեղ և որո՞ նք են A11y-ի այլընտրանքները։

2. Ճանաչման գերակայությունները 'առանցքային ճառագայթը, edge-safe գոտիները, gesture-arena։

3. Հակառակը 'տեսողական թակարդը, haptom-պրոֆիլները, անիմացիաները ՝ 200 մզ։

4. Պերֆորանսը ՝ INP/60 FPS, ավելացումը www.ag/scrope-ում։

5. Onbording 'հուշումներ և փորձարկման ժեստեր անջատելու հնարավորությամբ։

6. Թելեմետրիա ՝ success/misfire/undo, heatmap-ը։

7. Թեստ-մատրիցա 'dewiss, խտություն, ձախ/աջ, վատ ցանցի դեպքեր։

8. Տե՛ ս ՝ դիզայնի համակարգում ժեստերի, օրինակների և հակատիպերի։

18) Արդյունքը

Գրագետ ժեստը արագ է, հասկանալի և հուսալի։ Այն նվազեցնում է նպատակին հասնելու ճանապարհը ՝ առանց կանխելու սպասումները և ապահովելով բոլորի համար հասանելիությունը։ Նախագծեք ժեստերը որպես դիզայնի համակարգի մի մաս 'մեկ փամփուշտներ, հստակ առաջնահերթություններ, հարուստ հետադարձ կապ և պերֆորանսի խիստ վերահսկողություն, այդ ժամանակ սենսորային UX-ը նույնքան հաճելի կլինի ցանկացած սարքի և ցանկացած սցենարի վրա։