Vuốt trong ứng dụng di động — các loại cử chỉ và triển khai

Vuốt trong giao diện di động là gì

Vuốt (swipe) là cử chỉ người dùng lướt ngón tay trên màn hình theo một hướng nhất định để bắt đầu một hành động. Không giống như chạm (chạm ngắn), vuốt bao gồm chuyển động và tiếp xúc với màn hình trong suốt cử chỉ.

Lịch sử của vuốt bắt đầu với chiếc iPhone đầu tiên vào năm 2007 — cử chỉ “trượt để mở khóa” đã trở thành dấu ấn của giao diện di động. Ngày nay, vuốt được sử dụng trong hàng nghìn ứng dụng để điều hướng, quản lý nội dung và tổ chức thông tin.

Theo UX Planet (2025), các ứng dụng có điều khiển bằng cử chỉ (bao gồm vuốt) cho thấy mức độ tương tác của người dùng cao hơn 18%. Vuốt được coi là hành động tự nhiên hơn so với nhấn nút vì nó bắt chước chuyển động vật lý của các đối tượng.

Các tham số nhận dạng vuốt

Các tham số chính xác định cử chỉ có phải là vuốt hay không: khoảng cách tối thiểu (thường 30–50 pixel), độ lệch tối đa khỏi đường thẳng (không quá 15–20 độ) và thời gian tiếp xúc tối đa (lên đến 500 ms). Nếu ngón tay ở lại màn hình lâu hơn, cử chỉ được phân loại là kéo hoặc nhấn giữ.

Các loại vuốt theo hướng

Theo hướng chuyển động, vuốt được chia thành bốn loại chính: trái, phải, lên và xuống. Mỗi loại có mục đích và bối cảnh sử dụng riêng.

Vuốt ngang (trái/phải) thường được sử dụng để quản lý các mục riêng lẻ — xóa, lưu trữ, lật. Vuốt dọc (lên/xuống) — để điều hướng giữa các màn hình và làm mới nội dung. Theo Material Design Guidelines (2024), vuốt ngang thoải mái hơn cho người thuận tay phải: di chuyển ngón cái sang trái tự nhiên hơn ở tay phải.

Vuốt nhiều ngón tay

Vuốt bằng hai và ba ngón tay được sử dụng cho các hành động nâng cao. Hai ngón tay — chuyển đổi giữa các màn hình trên iPad, hoàn tác (vuốt ba ngón tay). Ba ngón tay — chụp màn hình trên một số thiết bị. Tuy nhiên, cử chỉ nhiều ngón tay ít trực quan hơn và cần người dùng học hỏi.

Triển khai vuốt trên iOS

Trên iOS, xử lý cử chỉ được xây dựng trên UIGestureRecognizer — một lớp trừu tượng phân tích chuỗi các sự kiện chạm và xác định xem chúng có khớp với một cử chỉ cụ thể hay không.

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("Vuốt sang trái")
    }
}

UISwipeGestureRecognizer hỗ trợ cấu hình hướng (direction) và số ngón tay (numberOfTouchesRequired). Theo mặc định, yêu cầu một ngón tay và hướng sang phải. Để nhận dạng các hướng khác, bạn cần chỉ định rõ ràng hướng: .left, .up, .down.

API cấp cao hơn — UICollectionViewLayout với hỗ trợ hành động vuốt. Kể từ iOS 11, bảng và bộ sưu tập hỗ trợ các hành động vuốt tích hợp thông qua UISwipeActionsConfiguration, cho phép thêm nút xóa hoặc lưu trữ mà không cần xử lý cử chỉ thủ công.

Triển khai vuốt trên Android

Trên Android, xử lý vuốt được xây dựng thông qua GestureDetector — một lớp phân tích MotionEvents và gọi các phương thức callback tương ứng.

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("Vuốt sang phải")
                }
                return true
            }
        })
    }
}

Phương thức onFling trong GestureDetector được gọi khi người dùng vuốt nhanh ngón tay trên màn hình. Nó nhận tọa độ bắt đầu và kết thúc (e1, e2) và tốc độ chuyển động (velocityX, velocityY). Để xác định hướng, sự khác biệt tọa độ dọc theo trục X hoặc Y được so sánh.

Thư viện AndroidX cung cấp API thuận tiện hơn: ViewCompat.setSwipeRefreshLayout cho kéo để làm mới, RecyclerView với ItemTouchHelper cho các hành động vuốt trong danh sách. ItemTouchHelper cho phép thêm chức năng vuốt với phản hồi trực quan — biểu tượng, màu nền và hoạt ảnh.

Vuốt trong ứng dụng web

Trong phát triển web, các sự kiện Touch Events API (touchstart, touchmove, touchend) và các thư viện bao bọc như Hammer.js hoặc Swiper.js được sử dụng để xử lý vuốt.

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 ? "Vuốt sang phải" : "Vuốt sang trái");
    }
});

Touch Events API — cách xử lý cử chỉ gốc trong trình duyệt. Sự kiện touchstart ghi lại tọa độ bắt đầu, touchmove theo dõi chuyển động, touchend xác định kết quả. Giá trị ngưỡng (threshold) lọc các chạm ngẫu nhiên.

Theo Can I Use (2026), Touch Events API được hỗ trợ bởi 98% trình duyệt. Đối với các kịch bản cử chỉ phức tạp (nhiều lần vuốt, nhận dạng hướng), nên sử dụng thư viện Hammer.js, giúp trừu tượng hóa xử lý cấp thấp và cung cấp API rõ ràng.

Các mẫu UX với vuốt

Các mẫu UX thành công với vuốt đã được hình thành qua nhiều năm phát triển của giao diện di động. Việc sử dụng chúng đảm bảo người dùng hiểu cách cử chỉ hoạt động mà không cần học thêm.

Mẫu “Vuốt để xóa” là phổ biến nhất. Vuốt sang trái trên một mục danh sách sẽ hiển thị nút xóa. Được tiêu chuẩn hóa trên iOS (SwipeActionsConfiguration) và Android (ItemTouchHelper). Người dùng mong đợi rằng vuốt sang trái sẽ xóa hoặc lưu trữ một mục.

Mẫu “Vuốt để quay lại” — vuốt từ mép trái màn hình để quay lại màn hình trước đó. Đã trở thành tiêu chuẩn trên iOS sau iPhone X. Trên Android, điều hướng tương tự hoạt động thông qua cử chỉ hệ thống. Điều quan trọng là không xung đột với cử chỉ hệ thống này trong ứng dụng của bạn.

Mẫu “Kéo để làm mới” — vuốt xuống để làm mới nội dung. Được phát minh bởi Loren Brichter cho Tweetie (2008), hiện được sử dụng trong hàng triệu ứng dụng. Được triển khai trong các thành phần tiêu chuẩn của cả hai nền tảng.

• Phản hồi — phần tử nên di chuyển theo ngón tay, hiển thị kết quả trước khi hoàn thành vuốt
• Xung đột cử chỉ — tránh hỗ trợ đồng thời vuốt ngang và cuộn trên cùng một phần tử
• Khả năng khám phá — các hành động vuốt đầu tiên nên được kèm theo gợi ý trực quan
• Hủy bỏ — người dùng có thể hủy vuốt bằng cách đưa ngón tay về vị trí ban đầu