การปัดในแอปมือถือ — ประเภทของท่าทางและการนำไปใช้

การปัดในอินเทอร์เฟซมือถือคืออะไร

การปัด (swipe) เป็นท่าทางที่ผู้ใช้เลื่อนนิ้วบนหน้าจอในทิศทางที่กำหนดเพื่อเริ่มการกระทำ ต่างจากการแตะ (การสัมผัสสั้นๆ) การปัดเกี่ยวข้องกับการเคลื่อนไหวและการสัมผัสกับหน้าจอตลอดทั้งท่าทาง

ประวัติของการปัดเริ่มต้นด้วย iPhone รุ่นแรกในปี 2007 — ท่าทาง “เลื่อนเพื่อปลดล็อค” กลายเป็นจุดเด่นของอินเทอร์เฟซมือถือ ปัจจุบัน การปัดถูกใช้ในแอปพลิเคชันนับพันสำหรับการนำทาง การจัดการเนื้อหา และการจัดระเบียบข้อมูล

ตาม 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

API ระดับสูงกว่า — UICollectionViewLayout ที่รองรับการปัด ตั้งแต่ iOS 11 ตารางและคอลเล็กชันรองรับการปัดในตัวผ่าน UISwipeActionsConfiguration ซึ่งช่วยให้เพิ่มปุ่มลบหรือเก็บถาวรได้โดยไม่ต้องจัดการท่าทางด้วยตนเอง

การนำไปใช้การปัดบน Android

บน Android การจัดการการปัดสร้างขึ้นผ่าน GestureDetector — คลาสที่วิเคราะห์ MotionEvents และเรียกใช้เมธอด callback ที่เกี่ยวข้อง

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 มี API ที่สะดวกกว่า: 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 ซึ่งจัดการระดับต่ำและมี API ที่ชัดเจน

รูปแบบ UX ด้วยการปัด

รูปแบบ UX ที่ประสบความสำเร็จ ด้วยการปัดเกิดขึ้นจากวิวัฒนาการของอินเทอร์เฟซมือถือหลายปี การใช้งานช่วยให้ผู้ใช้เข้าใจว่าท่าทางทำงานอย่างไรโดยไม่ต้องเรียนรู้เพิ่มเติม

รูปแบบ “ปัดเพื่อลบ” พบบ่อยที่สุด การปัดไปทางซ้ายบนรายการจะแสดงปุ่มลบ มาตรฐานบน iOS (SwipeActionsConfiguration) และ Android (ItemTouchHelper) ผู้ใช้คาดหวังว่าการปัดไปทางซ้ายจะลบหรือเก็บถาวรรายการ

รูปแบบ “ปัดเพื่อกลับ” — การปัดจากขอบซ้ายของหน้าจอเพื่อกลับไปยังหน้าจอก่อนหน้า กลายเป็นมาตรฐานบน iOS หลังจาก iPhone X บน Android การนำทางที่คล้ายกันทำงานผ่านท่าทางของระบบ สิ่งสำคัญคือต้องไม่ขัดแย้งกับท่าทางระบบนี้ในแอปพลิเคชันของคุณ

รูปแบบ “ดึงเพื่อรีเฟรช” — การปัดลงเพื่อรีเฟรชเนื้อหา คิดค้นโดย Loren Brichter สำหรับ Tweetie (2008) ปัจจุบันใช้ในแอปพลิเคชันนับล้าน นำไปใช้ในคอมโพเนนต์มาตรฐานของทั้งสองแพลตฟอร์ม

• การตอบกลับ — องค์ประกอบควรเคลื่อนที่ตามนิ้ว แสดงผลลัพธ์ก่อนที่การปัดจะเสร็จสมบูรณ์
• ความขัดแย้งของท่าทาง — หลีกเลี่ยงการรองรับการปัดแนวนอนและการเลื่อนพร้อมกันบนองค์ประกอบเดียวกัน
• การค้นพบ — การปัดครั้งแรกควรมีคำแนะนำด้วยภาพ
• การยกเลิก — ผู้ใช้ควรสามารถยกเลิกการปัดได้โดยการนำนิ้วกลับไปยังตำแหน่งเดิม