التمرير في التطبيقات المحمولة — أنواع الإيماءات والتنفيذ

ما هو التمرير في الواجهات المحمولة

التمرير (swipe) هو إيماءة يمرر فيها المستخدم إصبعه عبر الشاشة في اتجاه معين، لبدء إجراء. على عكس النقر (لمسة قصيرة)، فإن التمرير يتضمن الحركة والاتصال بالشاشة طوال الإيماءة بأكملها.

بدأ تاريخ التمرير مع أول iPhone في عام 2007 — أصبحت إيماءة «slide to unlock» السمة المميزة للواجهات المحمولة. اليوم، يُستخدم التمرير في آلاف التطبيقات للتنقل وإدارة المحتوى وتنظيم المعلومات.

وفقًا لـ UX Planet (2025)، فإن التطبيقات ذات التحكم بالإيماءات (بما في ذلك التمرير) تظهر تفاعل مستخدمين أعلى بنسبة 18%. يُنظر إلى التمرير كإجراء أكثر طبيعية مقارنة بالضغط على زر، لأنه يحاكي الحركة الفيزيائية للأشياء.

معايير التعرف على التمرير

المعايير الرئيسية التي تحدد ما إذا كانت الإيماءة تمريرًا هي: المسافة الدنيا (عادة 30–50 بكسل)، أقصى انحراف عن الخط المستقيم (لا يزيد عن 15–20 درجة)، وأقصى مدة للاتصال (حتى 500 مللي ثانية). إذا بقي الإصبع على الشاشة لفترة أطول، تُصنف الإيماءة كسحب أو ضغط طويل.

أنواع التمرير حسب الاتجاه

حسب اتجاه الحركة، تنقسم التمريرات إلى أربعة أنواع رئيسية: يسار، يمين، أعلى وأسفل. كل نوع له غرضه وسياق استخدامه الخاص.

التمريرات الأفقية (يسار/يمين) تُستخدم غالبًا لإدارة العناصر الفردية — الحذف، الأرشفة، التقليب. التمريرات العمودية (أعلى/أسفل) — للتنقل بين الشاشات وتحديث المحتوى. وفقًا لـ Material Design Guidelines (2024)، التمرير الأفقي أكثر راحة للأشخاص الذين يستخدمون اليد اليمنى: تحريك الإبهام لليسار أكثر طبيعية في اليد اليمنى.

التمرير بعدة أصابع

التمرير بإصبعين وثلاثة أصابع يُستخدم للإجراءات المتقدمة. بإصبعين — التبديل بين أسطح المكتب على iPad، التراجع (التمرير بثلاثة أصابع). بثلاثة أصابع — لقطة شاشة على بعض الأجهزة. ومع ذلك، فإن الإيماءات متعددة الأصابع أقل بديهية وتتطلب تعلم المستخدم.

تنفيذ التمرير على iOS

على iOS، يتم بناء معالجة الإيماءات على UIGestureRecognizer — فئة مجردة تحلل تسلسل أحداث اللمس وتحدد ما إذا كانت تتطابق مع إيماءة معينة.

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let swipeLeft = UISwipeGestureRecognizer(
            target: self,
            action: #selector(handleSwipe)
        )
        swipeLeft.direction = .left
        view.addGestureRecognizer(swipeLeft)
    }

    @objc func handleSwipe(sender: UISwipeGestureRecognizer) {
        print("التمرير لليسار")
    }
}

UISwipeGestureRecognizer يدعم تكوين الاتجاه (direction) وعدد الأصابع (numberOfTouchesRequired). افتراضيًا، يتطلب إصبعًا واحدًا واتجاهًا لليمين. للتعرف على الاتجاهات الأخرى، يجب تحديد الاتجاه صراحة: .left، .up، .down.

واجهة برمجة تطبيقات ذات مستوى أعلى — UICollectionViewLayout مع دعم إجراءات التمرير. منذ iOS 11، تدعم الجداول والمجموعات إجراءات التمرير المضمنة عبر UISwipeActionsConfiguration، مما يسمح بإضافة أزرار حذف أو أرشفة دون معالجة يدوية للإيماءات.

تنفيذ التمرير على Android

على Android، يتم بناء معالجة التمرير عبر GestureDetector — فئة تحلل MotionEvents وتستدعي طرق الاستدعاء المقابلة.

class SwipeActivity : AppCompatActivity() {
    private val swipeThreshold = 100

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {
            override fun onFling(
                e1: MotionEvent, e2: MotionEvent,
                velocityX: Float, velocityY: Float
            ): Boolean {
                val dx = e2.x - e1.x
                if (dx > swipeThreshold) {
                    println("التمرير لليمين")
                }
                return true
            }
        })
    }
}

طريقة onFling في GestureDetector تُستدعى عندما يمرر المستخدم إصبعه بسرعة عبر الشاشة. تستقبل الإحداثيات الأولية والنهائية (e1، e2) وسرعة الحركة (velocityX، velocityY). لتحديد الاتجاه، يُقارن فرق الإحداثيات على المحور X أو Y.

مكتبة AndroidX توفر واجهة برمجة تطبيقات أكثر ملاءمة: ViewCompat.setSwipeRefreshLayout للسحب للتحديث، RecyclerView مع ItemTouchHelper لإجراءات التمرير في القوائم. يتيح ItemTouchHelper إضافة وظيفة التمرير مع ردود فعل بصرية — أيقونة ولون خلفية ورسوم متحركة.

التمرير في تطبيقات الويب

في تطوير الويب، تُستخدم أحداث Touch Events API (touchstart، touchmove، touchend) والمكتبات المغلفة مثل Hammer.js أو Swiper.js لمعالجة التمريرات.

let startX = 0;
let startY = 0;
const threshold = 50;

element.addEventListener("touchstart", (e) => {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
});

element.addEventListener("touchend", (e) => {
    const dx = e.changedTouches[0].clientX - startX;
    const dy = e.changedTouches[0].clientY - startY;
    if (Math.abs(dx) > threshold) {
        console.log(dx > 0 ? "التمرير لليمين" : "التمرير لليسار");
    }
});

Touch Events API — طريقة أصلية لمعالجة الإيماءات في المتصفح. يسجل حدث touchstart الإحداثيات الأولية، ويتابع touchmove الحركة، ويحدد touchend النتيجة. قيمة العتبة (threshold) تصفي اللمسات العشوائية.

وفقًا لـ Can I Use (2026)، Touch Events API مدعوم من 98% من المتصفحات. للسيناريوهات المعقدة للإيماءات (تمريرات متعددة، التعرف على الاتجاه)، يُوصى باستخدام مكتبة Hammer.js، التي تُجرد المعالجة منخفضة المستوى وتوفر واجهة برمجة تطبيقات واضحة.

أنماط تجربة المستخدم مع التمرير

أنماط تجربة المستخدم الناجحة مع التمرير تشكلت على مر السنين من تطور الواجهات المحمولة. استخدامها يضمن أن المستخدم سيفهم كيف تعمل الإيماءة دون تعلم إضافي.

نمط «التمرير للحذف» هو الأكثر شيوعًا. التمرير لليسار على عنصر قائمة يكشف زر الحذف. موحد على iOS (SwipeActionsConfiguration) وAndroid (ItemTouchHelper). يتوقع المستخدمون أن التمرير لليسار يحذف أو يؤرشف العنصر.

نمط «التمرير للعودة» — التمرير من الحافة اليسرى للشاشة للعودة إلى الشاشة السابقة. أصبح معيارًا في iOS بعد iPhone X. على Android، يعمل التنقل المماثل عبر إيماءة النظام. من المهم عدم التعارض مع إيماءة النظام هذه في تطبيقاتك.

نمط «السحب للتحديث» — التمرير لأسفل لتحديث المحتوى. ابتكره Loren Brichter لتطبيق Tweetie (2008)، يُستخدم الآن في ملايين التطبيقات. مطبق في المكونات القياسية لكلا المنصتين.

• ردود الفعل — يجب أن يتحرك العنصر مع الإصبع، مع إظهار النتيجة قبل اكتمال التمرير
• تعارضات الإيماءات — تجنب الدعم المتزامن للتمرير الأفقي والتمرير العمودي على نفس العنصر
• قابلية الاكتشاف — يجب أن تكون إجراءات التمرير الأولى مصحوبة بتلميح بصري
• الإلغاء — يجب أن يكون المستخدم قادرًا على إلغاء التمرير بإعادة الإصبع إلى موضعه الأصلي