การนำทางด้วยท่าทาง — ทำงานอย่างไร ประเภทและการนำไปใช้

การนำทางด้วยท่าทางคืออะไร

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

การเปลี่ยนไปใช้การนำทางด้วยท่าทาง เริ่มต้นด้วย iPhone X (2017) ซึ่ง Apple ได้ลบปุ่ม Home ออกทั้งหมด แทนที่ด้วยการปัดจากขอบด้านล่าง Google ดำเนินตามแนวโน้มใน Android 10 (2020) โดยเสนอทางเลือกให้ผู้ใช้: การนำทางสามปุ่ม การนำทางสองปุ่ม และการนำทางด้วยท่าทางเต็มรูปแบบ ตามข้อมูลของ StatCounter (2025) อุปกรณ์ Android กว่า 75% และอุปกรณ์ iOS 95% ใช้การนำทางด้วยท่าทาง

ในทางสถาปัตยกรรม การจดจำท่าทาง ประกอบด้วยสามขั้นตอน: การจับภาพ (การจับเหตุการณ์สัมผัส) การจดจำ (การระบุรูปแบบการเคลื่อนไหว) และการดำเนินการ (การดำเนินการตามที่กำหนด) ในระดับระบบ Android และ iOS มีตัวจัดการในตัวสำหรับท่าทางนำทางพื้นฐาน — การปัดกลับ การไปที่หน้าจอหลัก การเปิดตัวสลับแอป นักพัฒนาเพียงแค่ต้องรวมท่าทางของตนเองเข้ากับระบบนี้อย่างถูกต้อง

ประเภทของท่าทางในการนำทางมือถือ

ท่าทางสัมผัสทั้งหมด สามารถแบ่งออกเป็นสามประเภทตามวัตถุประสงค์และวิธีการดำเนินการ แต่ละประเภทมีกฎการประมวลผลและคำแนะนำสำหรับการใช้งานในอินเทอร์เฟซของตนเอง

ท่าทางนำทาง

ท่าทางนำทาง ควบคุมการเคลื่อนที่ระหว่างหน้าจอ: การปัดจากขอบซ้ายเพื่อย้อนกลับ (iOS) การปัดขึ้นเพื่อเปิดตัวสลับแอป การปัดจากขอบด้านล่างเพื่อกลับไปที่หน้าจอหลัก ท่าทางเหล่านี้ถูกประมวลผลโดยระบบในระดับหน้าต่างและไม่ควรขัดแย้งกับท่าทางที่กำหนดเองภายในแอป

ท่าทางจัดการ

ท่าทางจัดการ เปลี่ยนตำแหน่ง ขนาด หรือทิศทางของวัตถุบนหน้าจอ การหยิก (ซูมด้วยสองนิ้ว) การหมุน การลาก การปัดเร็ว — ท่าทางเหล่านี้ทั้งหมดถูกประมวลผลในระดับ View หรือ Composable และไม่ส่งผลต่อการนำทางของระบบ

ท่าทางตามบริบท

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

การนำทางด้วยท่าทางบน Android: GestureDetector และ MotionEvent

Android SDK มีระบบประมวลผลท่าทางหลายระดับ ตั้งแต่ MotionEvent ระดับต่ำไปจนถึง GestureDetector และ GestureOverlayView ระดับสูง การเลือกระดับที่ถูกต้องขึ้นอยู่กับความซับซ้อนของท่าทางและข้อกำหนดด้านประสิทธิภาพ

GestureDetector — คลาสพื้นฐาน

GestureDetector เป็นคลาสระดับสูงที่แปลงลำดับของ MotionEvent เป็นท่าทางเฉพาะ: onDown, onShowPress, onSingleTapUp, onScroll, onLongPress, onFling นักพัฒนาสามารถแทนที่เมธอดที่จำเป็นของ GestureDetector.SimpleOnGestureListener และรับเหตุการณ์ที่จดจำแล้วพร้อมใช้งาน GestureDetector เหมาะสำหรับท่าทางมาตรฐานทั้งหมดยกเว้นการซูม — สำหรับการซูมมี ScaleGestureDetector

val gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {
    override fun onFling(
        e1: MotionEvent?, e2: MotionEvent,
        velocityX: Float, velocityY: Float
    ): Boolean {
        val deltaX = e2.x - (e1?.x ?: 0f)
        return if (Math.abs(deltaX) > Math.abs(e2.y - (e1?.y ?: 0f))) {
            if (deltaX > 0) onSwipeRight() else onSwipeLeft()
            true
        } else false
    }
})

view.setOnTouchListener { _, event -> gestureDetector.onTouchEvent(event) }

TouchDelegate สำหรับเป้าหมายที่กำหนดเอง

TouchDelegate เป็นกลไกสำหรับขยายพื้นที่สัมผัสของ View ใช้เมื่อองค์ประกอบเป้าหมายมีขนาดเล็กกว่าขนาดสัมผัสขั้นต่ำ 48dp ตัวอย่างเช่น ปุ่ม "ปิด" เล็กๆ ที่มุมหน้าจอจะได้รับ TouchDelegate ที่ขยายพื้นที่การกดโดยไม่เปลี่ยนขนาดที่มองเห็น Google แนะนำ TouchDelegate สำหรับองค์ประกอบเชิงโต้ตอบทั้งหมดที่เล็กกว่า 48x48dp

ท่าทางใน Jetpack Compose

Compose มีตัวปรับแต่งสำหรับการจัดการท่าทาง: clickable, draggable, swipeable, combinedClickable (สำหรับการแตะสองครั้งและการกดค้าง) ภายใน Compose ใช้ PointerInputScope สำหรับการประมวลผลระดับต่ำ แต่นักพัฒนาส่วนใหญ่ต้องการเพียงตัวปรับแต่งระดับสูง สำหรับท่าทางที่กำหนดเอง ให้ใช้ pointerInput กับ awaitPointerEvent

การนำทางด้วยท่าทางบน iOS: UIGestureRecognizer และ SwiftUI

iOS SDK ใช้สถาปัตยกรรม UIGestureRecognizer — คลาสพื้นฐานนามธรรมที่วิเคราะห์ลำดับของ UITouch และตรวจสอบว่าตรงกับท่าทางที่รู้จักหรือไม่ Apple แนะนำให้ใช้ตัวจดจำมาตรฐานทุกครั้งที่ทำได้ และสร้างคลาสย่อยที่กำหนดเองเฉพาะสำหรับท่าทางที่ไม่ซ้ำใคร

UIGestureRecognizer ใน UIKit

UIKit มีชุดตัวจดจำพร้อมใช้งาน: UITapGestureRecognizer, UISwipeGestureRecognizer, UIPanGestureRecognizer, UIPinchGestureRecognizer, UIRotationGestureRecognizer, UILongPressGestureRecognizer ตัวจดจำแต่ละตัวมีสถานะ (possible, began, changed, ended, cancelled, failed) — นักพัฒนาติดตามสถานะเพื่อตอบสนองในขั้นตอนต่างๆ ของท่าทาง

let swipeBack = UISwipeGestureRecognizer(
    target: self,
    action: #selector(handleSwipeBack)
)
swipeBack.direction = .right
view.addGestureRecognizer(swipeBack)

@objc func handleSwipeBack() {
    navigationController?.popViewController(animated: true)
}

ท่าทางใน SwiftUI

SwiftUI ใช้ตัวปรับแต่งท่าทางแบบประกาศ คล้ายกับ Compose: onTapGesture, onLongPressGesture, MagnificationGesture, RotationGesture, DragGesture SwiftUI จัดการความขัดแย้งระหว่างท่าทางโดยอัตโนมัติผ่าน simultaneousGesture, sequencedGesture และ exclusiveGesture — ตัวปรับแต่งที่กำหนดลำดับความสำคัญของท่าทางเมื่อถูกเรียกใช้พร้อมกัน

Image("photo")
    .gesture(
        MagnificationGesture()
            .onChanged { scale in
                self.currentScale = scale
            }
            .sequenced(before: DragGesture())
    )

InteractivePopGestureRecognizer

InteractivePopGestureRecognizer เป็นตัวจดจำของระบบที่ควบคุมท่าทางการปัดกลับใน UINavigationController โดยค่าเริ่มต้น ทำงานสำหรับทุกหน้าจอยกเว้นหน้าจอหลัก หากแอปของคุณใช้ NavigationBar ที่กำหนดเอง interactivePopGestureRecognizer อาจหยุดทำงาน — จะต้องเปิดใช้งานโดยโปรแกรมผ่าน navigationController.interactivePopGestureRecognizer?.delegate

ความขัดแย้งระหว่างท่าทางระบบและท่าทางที่กำหนดเอง

ความขัดแย้งของท่าทาง เป็นหนึ่งในปัญหาที่ยากที่สุดในการนำทางด้วยท่าทาง เมื่อท่าทางที่กำหนดเอง (เช่น การเปิด Drawer โดยการปัดจากขอบซ้าย) ตรงกับท่าทางของระบบ (การปัดกลับบน iOS หรือ Android) ระบบต้องพิจารณาว่าท่าทางใดมีลำดับความสำคัญ การจัดการความขัดแย้งนี้อย่างถูกต้องมีความสำคัญต่อประสบการณ์การใช้งาน

วิธีแก้ปัญหาบน Android: Insets และ SystemGestureExclusionRects

Android 10+ อนุญาตให้แอปสำรองพื้นที่หน้าจอสำหรับท่าทางของตัวเองผ่าน WindowInsets ใช้ ViewCompat.setSystemGestureExclusionRects เพื่อระบุบริเวณที่ท่าทางของระบบไม่ควรทำงาน ตัวอย่างเช่น สำหรับ Drawer ด้านซ้าย คุณสามารถยกเว้นขอบซ้ายของหน้าจอ (กว้างถึง 200dp) จากการปัดกลับของระบบ Google กำหนดขีดจำกัด: สามารถยกเว้นได้ถึง 200dp ในแต่ละด้าน

val exclusionRect = Rect(0, 0, 200, height)
ViewCompat.setSystemGestureExclusionRects(
    drawerView,
    listOf(SystemGestureExclusionRect(exclusionRect))
)

วิธีแก้ปัญหาบน iOS: UIGestureRecognizerDelegate

iOS มีเมธอด gestureRecognizerShouldBegin ใน UIGestureRecognizerDelegate ซึ่งช่วยให้ตัวจดจำที่กำหนดเองตัดสินใจว่าจะเริ่มการจดจำหรือไม่ สำหรับการปัด Drawer จากขอบซ้าย คุณสามารถตรวจสอบตำแหน่งสัมผัส: หากผู้ใช้กำลังลาก Drawer (ระยะทางเกินเกณฑ์) ท่าทางที่กำหนดเองจะเข้าควบคุม หากไม่จดจำท่าทาง ระบบจะคืนการควบคุมให้ InteractivePopGestureRecognizer

ข้อผิดพลาดทั่วไปและแนวทางปฏิบัติที่ดีที่สุด

การนำทางด้วยท่าทาง ต้องการการออกแบบอย่างระมัดระวัง โดยเฉพาะบนอุปกรณ์ที่มีการนำทางด้วยท่าทางของระบบ มาดูข้อผิดพลาดทั่วไปและคำแนะนำในการแก้ไขกัน

ข้อผิดพลาด: การละเลยบริเวณความขัดแย้งที่ขอบหน้าจอ

ข้อผิดพลาดที่พบบ่อยที่สุดคือการวาง องค์ประกอบเชิงโต้ตอบ หรือการใช้การปัดแบบกำหนดเองในบริเวณท่าทางของระบบ (ขอบซ้ายและขวา ขอบล่าง) ผู้ใช้พยายามดำเนินการ แต่การนำทางของระบบกลับถูกเรียกใช้แทน จงเตรียมระยะห่างสำหรับท่าทางของระบบเสมอและจัดการความขัดแย้งผ่าน exclusion rects

ข้อผิดพลาด: ความเร็วการจดจำที่แตกต่างกันบน Android และ iOS

พารามิเตอร์ท่าทาง (เกณฑ์ความเร็ว ระยะทางขั้นต่ำ) แตกต่างกันโดยค่าเริ่มต้นระหว่างแพลตฟอร์ม หากแอปของคุณเป็นข้ามแพลตฟอร์ม อย่าคัดลอกพารามิเตอร์จากแพลตฟอร์มหนึ่งไปยังอีกแพลตฟอร์ม — ทดสอบแต่ละท่าทางแยกกันบน Android และ iOS Flutter และ React Native ปรับพารามิเตอร์บางอย่างโดยอัตโนมัติ แต่ไม่ใช่ทั้งหมด

แนวทางปฏิบัติที่ดีที่สุด: การตอบกลับด้วยภาพ

ทุกท่าทาง ควรมาพร้อมกับการตอบกลับด้วยภาพ: การเปลี่ยนสี การเปลี่ยนรูปแบบ ภาพเคลื่อนไหว ผู้ใช้ควรเข้าใจว่าท่าทางได้รับการจดจำแล้วและการดำเนินการกำลังทำงานอยู่ บน iOS ตัวจดจำของระบบให้การตอบสนองแบบสัมผัสโดยอัตโนมัติ บน Android ต้องเพิ่มผ่าน HapticFeedbackConstants

แนวทางปฏิบัติที่ดีที่สุด: การเข้าถึงสำหรับท่าทาง

ผู้ใช้ทุกคนไม่สามารถ ทำท่าทางได้ — ผู้ที่มีทักษะการเคลื่อนไหวจำกัดใช้ VoiceOver และ TalkBack สำหรับการนำทาง ทุกท่าทางควรมีทางเลือกเป็นปุ่ม Google และ Apple กำหนดให้การดำเนินการท่าทางทั้งหมดต้องถูกทำซ้ำด้วยตัวควบคุมที่สามารถเข้าถึงได้