إيماءات و UX على أجهزة اللمس

1) لماذا الإيماءات ومتى تكون مناسبة

• يمكن التنبؤ به (بما يتماشى مع توقعات المنصة).
• يمكن اكتشافه (يخمن المستخدم أن الإيماءة متاحة).
• مدعومة بتعليقات (بصرية/سمعية/لمسية).
• موثوق به مع لمسات خاطئة ومسكات مختلفة للأجهزة.

المبادئ: أولاً عناصر واجهة المستخدم الصريحة → ثم تلمح إلى الإيماءات → ثم تقدم إيماءات خفية. الإجراءات الحاسمة - مكررة دائمًا بأزرار صريحة.

2) تصنيف الإيماءات

اضغط/اضغط مزدوج/ضغط طويل - اختيار/إضافة. القوائم/الإجراءات المتقدمة.
Swipe (mountain/vert) - الملاحة والحذف/الأرشفة والكشف عن الإجراءات.
السحب والإسقاط - الفرز، النقل، تغيير التسلسل الهرمي.
قرصة/انتشار (تكبير) - مقياس (صالات العرض والخرائط والرسوم البيانية).
تناوب - نادر، مناسب في المحررين/الآراء.
Pull-to-refresh/Release-to-action - update/secendary action.
Edge-swipe - التنقل في النظام (ظهر/قائمة)، بعناية على الويب.
اللمس المتعدد - 2-3 إيماءات أصابع لسيناريوهات متقدمة.
تأخذ إيماءات النظام - لقطات الشاشة، PiP، نظام «Back» (Android) - في الاعتبار التضارب.

3) مناطق بيئة العمل والإبهام

مناطق الإبهام: منطقة الوصول - النصف السفلي من الشاشة ؛ توجد CTAs الرئيسية ومرشحات الرقائق وعلامات التبويب في الأسفل.
هدف الضرب: 44 × 44 رطل/48 × 48 رطل. أضف منحدر ضرب للأشياء الصغيرة.
فواصل الحافة: تقليل تمرير الحافة الزائف ؛ التفاعلات الحرجة - ليست قريبة من الحافة.
التوجه: صورة - افتراضي ؛ المشهد - التحسين لاثنين من الإبهام (خاصة في الألعاب/مقاطع الفيديو).

4) إمكانية الكشف والتدريب

التكلفة: تلميحات للإيماءات (بطاقة شبه مرئية على الجانب، «قلم» في الأسفل للورقة).
Micro-onlinging: أدلة لمرة واحدة ("Swipe to delete")، ليست تدخلية، مع "Got it'.
إيماءة تجريبية: الرسوم المتحركة التجريبية في أول ظهور للنمط.
التكرار: يجب أن تعمل الإيماءات بنفس الطريقة في جميع الأماكن ذات المحتوى المماثل.

5) التعليقات: بصرية، لمسية، صوتية

المرئي: الظل، التشابه، التمسك بالأدلة، مؤشر التقدم عند السحب إلى التحديث.
اللمسات: دافع خفيف عند الإمساك بالسحب، أكثر «ثقلاً» - عند السقوط/النجاح.
الصوت (معتدل): نقرات/نقرات قصيرة في الألعاب أو أحداث ملموسة (فوز/خطأ).
ينص الإلغاء على: «المنطقة الحمراء» المرئية مع التمرير المدمر، تلميح الاهتزاز قبل الإزالة.

6) إيماءات النزاعات والأولويات

التسلسل الهرمي للتعرف: التمرير الداخلي> بطاقة التمرير> حافة النظام (على الويب - العكس). تكوين إيماءة/ساحة/أولويات.
التمرير العمودي مقابل التمرير الأفقي: اقفل محورًا واحدًا بعد حركة 10-15 بكسل.
Edge-swipe مقابل الإيماءات الخاصة: أضف بادئًا داخليًا أو إيماءة «قلم» حتى لا تعترض النظام.
الإيماءة الخلفية العالمية (Android/iOS): لا تكسر التنقل المتوقع - قم بتكرار الإجراءات المهمة باستخدام زر «Back».

7) أنماط مكتوبة

7. 1 القوائم والبطاقات

إجراءات التمرير السريع: تمرير قصير - تلميح من الأفعال (أيقونات)، عمل فوري طويل.
نموذج التراجع: بعد إيماءة مدمرة عرض شريط خفيف «إلغاء».
إعادة ترتيب السحب: السحب على «المقبض» ؛ أصلح المحور العمودي.

7. 2 خرائط وصالات عرض ورسوم بيانية

قرصة تكبير + نقرة مزدوجة للتحجيم.
الجمود والحدود: حدود مرنة، جمود سلس.
اضغط على «تكبير الزجاج «/تفاصيل النقطة على الرسم البياني.

7. ٣ الملاحة والدروع

الصفيحة السفلية: إيماءة سحب من المقبض، حالة انهيار/جزئية/كاملة ؛ تمرير لأسفل لإغلاق.
علامات التبويب/الرقائق: تمرير أفقي بين علامات التبويب مع مؤشر التقدم.

7. 4 اللعبة والسيناريوهات السريعة

اللعب بيد واحدة: مناطق رهان/حركة كبيرة في الحافة السفلية.
الإيماءات المزدوجة: اضغط مرتين كـ «رهان متكرر» (تأكيد لمسي).
عتبة مدمرة: «اقفل» إصبعك عند 300 م أو اذهب عبر «المنطقة الحمراء» للتنفيذ.

8) التوافر (A11y)

يتم تكرار جميع الإيماءات بالأزرار أو عناصر القائمة.
VoiceOver/TalkBack: الأوصاف الصحيحة وترتيب التركيز.
إمكانية الوصول إلى المحركات: بدائل الضغط الطويل (أيقونة «⋮»)، مناطق اللمس المتزايدة.
التباين والحجم: لا ينبغي أن تكون الإيماءات هي الطريقة الوحيدة للوصول إلى الحدث.

9) الأداء والموثوقية

INP (التفاعل مع الطلاء التالي) ≤ 200 متر للإيماءات الرئيسية.
كمون اللمس: الهدف <50-100 م قبل الاستجابة الأولى (التقاط بصري/إضاءة).
60 FPS: سلاسة السحب/التمرير ؛ أطفئ الظلال الثقيلة والضبابية عند الحركة.
اختبار الضربة: تجنب التداخل (z-index/overflow) - المصائد «ناعمة».
اختبارات القبضة: اليد اليمنى/اليسرى، الإبهام/الإصبع الصغير، الوقوف/في النقل.

10) الويب مقابل السكان الأصليين

الويب/PWA: المستمعون السلبيون («سلبيون: حقيقيون») للتمرير، «حركة اللمس» لقفل المحاور، تجنب إيماءات النظام الاعتراضية دون داع.
iOS/Android الأصلي: معرفات نظام الاستخدام (UIGestureCommercizer/Android GestureDetector)، اللمسات القياسية، «العودة» التنبؤية (Android 14 +).
Webview: الجسور والمناطق الآمنة، الإغلاق التنبؤي للدروع - داخل الويب، دون كسر نظام «العودة».

11) إيماءات متعددة اللمسات ومتقدمة

إصبعان: الحلق أثناء التكبير ؛ على البطاقات - لفتة «إصبعين لأسفل» للإضافة. طبقة.
ثلاثة أصابع: لمستخدمي الطاقة فقط ؛ دائما تعطي بديلا.
التركيبات: الضغط الطويل + السحب لاختيار النطاق/حركة المجموعة.

12) التحقق والقياس عن بعد والمقاييس

События: "إيماءة _ بداية"، "إيماءة _ التزام"، "إيماءة _ إلغاء"، "زمن الوصول _ ms'،" المسافة _ px "،" التمرير الزائد "،" عدم إطلاق النار "(ложный жест)،" التراجع _ المستخدم ".
KPI: معدل النجاح، معدل الاختلال، معدل التراجع، INP، وقت العمل، التسليم بسبب صراع الإيماءات.

13) التوطين والاختلافات الثقافية

لغات RTL: إيماءات وأيقونات أفقية مرآة.
الرمزية: «swipe left = remove» ليست عالمية - تأكد من الصعود على متن الطائرة.
أنماط اللمس: تستخدم ملفات تعريف النظام، فهي مألوفة بالفعل للمستخدم.

14) الأمن والحشرات

إيماءات مدمرة - فقط مع التراجع/التأكيد.
يجب ألا تغلق الضربات الشديدة عن طريق الخطأ العمليات الحرجة (الدفع/CCM).
الحماية من الرعشة: عتبة الحركة (5-10 px) قبل بدء الإيماءة.
تعطيل الإيماءات في حالات الحظر (محمل الدفع، وسيلة التأكيد).

15) لمس أنماط الطاولة/الجهاز اللوحي

السيناريوهات ذات اليدين: فصل مناطق السيطرة.
وضع متعدد المستخدمين: الإيماءات لا تتعارض، أولوية وقت اللمس.
الأهداف الكبيرة: 56-64 dp ؛ أدلة بصرية لعمليات السحب.

16) أنتيباترن

الإجراءات الحرجة المخفية بالإيماءات فقط (بدون زر).
إيماءات تتعارض مع النظام (الحافة الخلفية، ظل الإخطار).
ضغط طويل بدون «تدافع» بصري وصوت/أجواء.
تمرير أفقي داخل التمرير العمودي بدون قفل محوري.
ظلال/ضبابية «ثقيلة» عند السحب → التأخر وانخفاض FPS.
إيماءات غير متسقة في أجزاء مختلفة من التطبيق.

17) قائمة التنفيذ المرجعية (خطوة بخطوة)

1. خريطة الإيماءات: أين وماذا - مع بدائل A11y.
2. أولويات التعرف: قفل محوري، مناطق آمنة من الحافة، ساحة الإيماءات.
3. التعليقات: فخ بصري، ملفات تعريف اللمسات، الرسوم المتحركة ≤ 200 مللي ثانية.
4. الأداء: INP/60 FPS، السحب/التمرير.
5. الصعود على متن الطائرة: مطالبات وإيماءات تجريبية مع القدرة على الإيقاف.
6. القياس عن بعد: النجاح/عدم إطلاق النار/التراجع، لمسات خريطة الحرارة.
7. مصفوفة الاختبار: الأجهزة، الكثافة، حالات الشبكة اليسرى/اليمنى، السيئة.
8. الوثائق: دليل الإيماءات في نظام التصميم، والأمثلة والحالات المضادة.

18) خلاصة القول

بادرة كفؤة سريعة ومفهومة وموثوقة. إنه يقلل الطريق إلى الهدف دون كسر توقعات النظام وضمان إمكانية الوصول للجميع. إيماءات التصميم كجزء من نظام التصميم: أنماط موحدة، وأولويات واضحة، وتعليقات غنية، ومراقبة صارمة للأداء - ثم لمس UX سيكون ممتعًا بنفس القدر على أي جهاز وفي أي سيناريو.