حرکات و UX در دستگاه های لمسی

1) چرا حرکات و زمانی که مناسب هستند

• قابل پیش بینی (مطابق با انتظارات پلت فرم).
• قابل تشخیص (کاربر حدس می زند که ژست در دسترس است).
• پشتیبانی شده توسط بازخورد (بصری/صوتی/لمسی).
• قابل اعتماد با لمس اشتباه و گرفتن دستگاه های مختلف.

اصول: اولین عناصر UI صریح → سپس حرکات اشاره → سپس حرکات پنهان پیشرفته. اقدامات انتقادی - همیشه با دکمه های صریح تکرار کنید.

2) طبقه بندی ژست

Tap/Double-tap/Long-press - selection/add را انتخاب کنید. منوها/اقدامات پیشرفته

Swipe (mountain/vert) - ناوبری، حذف/بایگانی، افشای اقدامات.
کشیدن و رها کردن - مرتب سازی، انتقال، تغییر سلسله مراتب.
خرج کردن/گسترش (زوم) - مقیاس (گالری ها، نقشه ها، نمودار ها).
چرخش - نادر، مناسب در ویراستاران/نمایش ها.
Pull-to-refresh/Release-to-action - به روز رسانی/عمل ثانویه.
Edge-swipe - ناوبری سیستم (پشت/منو)، با دقت در وب.
چند لمسی - حرکات 2-3 انگشت برای سناریوهای پیشرفته.
حرکات سیستم - تصاویر، PiP، سیستم «بازگشت» (آندروید) - درگیری های حساب را در نظر بگیرید.

3) مناطق ارگونومی و انگشت شست

مناطق انگشت شست: رسیدن به منطقه - نیمه پایین صفحه نمایش ؛ CTA های کلیدی، فیلترهای تراشه و زبانه ها در پایین قرار دارند.
آمار هدف: حداقل 44 × 44 pt/48 × 48 dp. یک hit-slop برای موارد کوچک اضافه کنید.
لبه های لبه: کاهش لبه کاذب ؛ تعاملات بحرانی - نزدیک به لبه نیست.
جهت: پرتره - پیش فرض ؛ landscape - بهینه سازی برای دو انگشت (به ویژه در بازی ها/فیلم ها).

4) تشخیص و آموزش

قیمت: نکات ژست (کارت نیمه قابل مشاهده در سمت، «قلم» در پایین برای ورق).
Micro-onboarding: سرنخ های یک طرفه («Swipe to delete»)، نه مزاحم، با «Got it».
حرکت آزمایشی: انیمیشن نسخه ی نمایشی در اولین ظاهر الگوی.
تکرارپذیری: حرکات باید در همه مکان ها با محتوای مشابه کار کنند.

5) بازخورد: بصری، لمسی، صوتی

بصری: سایه، اختلاف منظر، چسبیده به راهنماها، نشانگر پیشرفت هنگام pull-to-refresh.
Haptics: ضربه سبک هنگام گرفتن کشیدن، بیشتر «سنگین» - هنگام رها کردن/موفقیت.
صدا (متوسط): کلیک های کوتاه/کلیک در بازی ها یا رویدادهای ملموس (پیروزی/خطا).
کشورهای لغو: بصری «منطقه قرمز» با کش رفتن مخرب، اشاره لرزش قبل از حذف.

6) اختلافات و اولویت های ژست

سلسله مراتب تشخیص: پیمایش داخلی> کارت کش رفتن> لبه سیستم (در وب - برعکس). پیکربندی حرکت-عرصه/اولویتها.
اسکرول عمودی در مقابل کش رفتن افقی: قفل یک محور پس از 10-15 پیکسل حرکت.
لبه کش رفتن در مقابل حرکات خود: اضافه کردن تورفتگی داخلی و یا یک «قلم» ژست به طوری که برای رهگیری سیستم نیست.
Global back-gesture (Android/iOS): ناوبری مورد انتظار را خراب نکنید - اقدامات مهم را با دکمه «Back» تکرار کنید.

7) الگوهای نوشته شده

7. 1 لیست ها و کارت ها

ضربه تند وشدید زدن اقدامات: کش رفتن کوتاه - اشاره از اقدامات (آیکون), long - اقدام فوری.
واگرد پارادایم: پس از نمایش حرکت مخرب snackbar «لغو».

کشیدن مرتب سازی: کشیدن بر روی «دسته» ؛ محور عمودی رو درست کن

7. 2 نقشه ها، گالری ها، نمودار ها

پینچ زوم + شیر دو برای پوسته پوسته شدن.
اینرسی & مرزهای: مرزهای الاستیک, اینرسی صاف.
شیر نگه دارید برای «ذره بین «/جزئیات نقطه بر روی نمودار.

7. 3 ناوبری و سپر

ورق پایین: ژست کشیدن از دسته، حالت سقوط/جزئی/کامل ؛ کشیدن به پایین برای بستن.
زبانه ها/تراشه ها: کش رفتن افقی بین زبانه ها با شاخص پیشرفت.

7. 4 بازی و سناریوهای سریع

بازی یک دست: شرط بندی های بزرگ/مناطق عمل در لبه پایین.
حرکات دوگانه: دوبار ضربه بزنید به عنوان «شرط تکرار» (تایید haptic).
آستانه تخریب: «قفل» انگشت خود را در 300ms یا رفتن از طریق «منطقه قرمز» برای اجرای.

8) در دسترس بودن (A11y)

تمام حرکات با دکمه ها یا آیتم های منو تکرار می شوند.
VoiceOver/TalkBack: توضیحات صحیح و ترتیب تمرکز.
دسترسی موتور: جایگزین برای مطبوعات طولانی (آیکون «⋮»)، افزایش مناطق لمسی.
کنتراست و مقیاس: حرکات نباید تنها راه برای رسیدن به عمل باشد.

9) عملکرد و قابلیت اطمینان

INP (تعامل با رنگ بعدی) ≤ 200ms برای حرکات کلیدی.
تاخیر لمسی: هدف <50-100ms قبل از اولین پاسخ (ضبط بصری/روشنایی).
60 FPS: صاف بودن برای کشیدن/پیمایش ؛ خاموش سایه های سنگین و تاری در هنگام حرکت.
تست ضربه: اجتناب از همپوشانی (z-index/overflow) - تله ها «نرم» هستند.
آزمون گرفتن: راست دست/چپ دست، انگشت شست/انگشت کوچک، ایستاده/در حمل و نقل.

10) وب در مقابل بومی

وب/PWA: شنوندگان منفعل («منفعل: درست») برای پیمایش، «لمس عمل» برای قفل کردن محورها، جلوگیری از متوقف کردن حرکات سیستم غیر ضروری.
iOS/Android بومی: استفاده از تشخیص سیستم (UIGestureRecognizer/Android GestureDetector)، haptics استاندارد، پیش بینی «بازگشت» (آندروید 14 +).
نمای وب: پل ها و مناطق امن، بسته شدن پیش بینی سپر - در داخل وب، بدون شکستن سیستم «بازگشت».

11) حرکات چند لمسی و پیشرفته

دو انگشت: پنینگ در حالی که زوم قفل شده است ؛ بر روی کارت - یک ژست «دو انگشت پایین» برای اضافه. لایه.
سه انگشت: فقط برای کاربران قدرت ؛ همیشه یک جایگزین بدهید.
ترکیبات: طولانی فشار + کشیدن برای انتخاب محدوده/حرکت گروه.

12) اعتبار سنجی، تله متری، معیارها

События: 'gesture _ start'، 'gesture _ commit'، 'gesture _ cancel'، 'latency _ ms'، 'distance _ px'، 'overscroll'، 'misfire' (ложный жест)، 'undo _ used'.
KPI: میزان موفقیت، میزان Misfire، Undo Rate، INP، زمان به عمل، رها کردن برای درگیری ژست.

13) بومی سازی و تفاوت های فرهنگی

زبان RTL: حرکات افقی آینه و آیکون.
نماد: «کش رفتن سمت چپ = حذف» جهانی نیست - تایید در onboarding.
الگوهای لمسی: استفاده از پروفایل های سیستم، آنها در حال حاضر به کاربر آشنا هستند.

14) امنیت و اشکالات

حرکات مخرب - فقط با لغو/تایید.
سوایپ های لبه نباید به طور تصادفی فرآیندهای بحرانی (پرداخت/CCM) را ببندند.
حفاظت از لرزش: آستانه حرکت (5-10 پیکسل) قبل از شروع ژست.
حرکات غیر فعال کردن در حالت مسدود کردن (لودر پرداخت، مودال تایید).

15) جدول لمسی/الگوهای قرص

سناریوهای دو دستی: جداسازی مناطق کنترل

حالت چند کاربر: حرکات تضاد ندارند، اولویت زمان را لمس کنید.
اهداف بزرگ ضربه: 56-64 dp ؛ راهنماهای بصری برای عملیات کشیدن.

16) ضد گلوله

اقدامات انتقادی پنهان تنها با ژست (بدون دکمه).
حرکاتی که با سیستم در تضاد هستند (edge-back, notification shadow).
طولانی مطبوعات بدون بصری «تقلا» و صدا/پرنیان.
کش رفتن افقی در داخل پیمایش عمودی بدون قفل محوری.
«سنگین» سایه/تاری زمانی که کشیدن → تاخیر و افت FPS.
حرکات متناقض در قسمت های مختلف برنامه.

17) چک لیست پیاده سازی (گام به گام)

1. نقشه حرکت: کجا و چه - با جایگزین برای A11y.
2. اولویت های شناخت: قفل محوری، مناطق لبه امن، عرصه ژست.
3. بازخورد: تله بصری، پروفایل های لمسی، انیمیشن ها ≤ 200 میلی ثانیه.
4. عملکرد: INP/60 FPS، کشیدن/پیمایش پروفایل.
5. Onboarding: پیشنهادات و حرکات محاکمه با توانایی خاموش کردن.
6. تله متری: موفقیت/آتش سوزی/خنثی کردن، لمس گرما.
7. ماتریس تست: دستگاه ها، تراکم، چپ دست/راست دست، موارد بد شبکه.
8. مستندات: راهنمای ژست در سیستم طراحی، نمونه ها و ضد موارد.

18) خط پایین

یک ژست شایسته سریع، قابل فهم و قابل اعتماد است. این مسیر را به هدف کاهش می دهد بدون شکستن انتظارات سیستم و اطمینان از دسترسی برای همه. حرکات طراحی به عنوان بخشی از سیستم طراحی: الگوهای یکنواخت، اولویت های روشن، بازخورد غنی و کنترل عملکرد دقیق - پس از آن UX لمس خواهد شد به همان اندازه در هر دستگاه و در هر سناریو لذت بخش است.