Deslizar em aplicativos móveis — tipos de gestos e implementação

O que é deslizar em interfaces móveis

Deslizar (swipe) é um gesto em que o utilizador passa o dedo pelo ecrã numa direção específica, iniciando uma ação. Ao contrário do toque (toque curto), o deslizamento implica movimento e contacto com o ecrã durante todo o gesto.

A história do deslizamento começou com o primeiro iPhone em 2007 — o gesto “slide to unlock” tornou-se a marca das interfaces móveis. Hoje, o deslizamento é usado em milhares de aplicações para navegação, gestão de conteúdo e organização de informação.

De acordo com a UX Planet (2025), as aplicações com controlo gestual (incluindo deslizamento) mostram um envolvimento do utilizador 18% superior. O deslizamento é percebido como uma ação mais natural em comparação com pressionar um botão, pois imita o movimento físico dos objetos.

Parâmetros de reconhecimento do deslizamento

Os principais parâmetros que determinam se um gesto é um deslizamento são: distância mínima (normalmente 30–50 píxeis), desvio máximo de uma linha reta (não mais de 15–20 graus) e duração máxima de contacto (até 500 ms). Se o dedo permanecer no ecrã mais tempo, o gesto é classificado como arrasto ou pressão longa.

Tipos de deslizamento por direção

Por direção do movimento, os deslizamentos dividem-se em quatro tipos principais: esquerda, direita, cima e baixo. Cada tipo tem o seu próprio propósito e contexto de utilização.

Os deslizamentos horizontais (esquerda/direita) são mais frequentemente usados para gerir itens individuais — eliminação, arquivamento, virar páginas. Os deslizamentos verticais (cima/baixo) — para navegar entre ecrãs e atualizar conteúdo. De acordo com as Material Design Guidelines (2024), o deslizamento horizontal é mais confortável para destros: mover o polegar para a esquerda é mais natural na mão direita.

Deslizamentos com vários dedos

Os deslizamentos com dois e três dedos são usados para ações avançadas. Com dois dedos — alternar entre áreas de trabalho no iPad, desfazer (deslizar com três dedos). Com três dedos — captura de ecrã em alguns dispositivos. No entanto, os gestos com vários dedos são menos intuitivos e requerem aprendizagem do utilizador.

Implementação do deslizamento no iOS

No iOS, o processamento de gestos baseia-se no UIGestureRecognizer — uma classe abstrata que analisa a sequência de eventos táteis e determina se corresponde a um gesto específico.

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("Deslizar para a esquerda")
    }
}

UISwipeGestureRecognizer suporta a configuração da direção (direction) e do número de dedos (numberOfTouchesRequired). Por padrão, é necessário um dedo e direção para a direita. Para reconhecer outras direções, é necessário especificar explicitamente a direção: .left, .up, .down.

Uma API de nível superior — UICollectionViewLayout com suporte para ações de deslizamento. Desde o iOS 11, as tabelas e coleções suportam ações de deslizamento incorporadas através do UISwipeActionsConfiguration, permitindo adicionar botões de eliminação ou arquivamento sem processamento manual de gestos.

Implementação do deslizamento no Android

No Android, o processamento de deslizamentos é feito através do GestureDetector — uma classe que analisa MotionEvents e chama os métodos de retorno correspondentes.

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("Deslizar para a direita")
                }
                return true
            }
        })
    }
}

O método onFling no GestureDetector é chamado quando o utilizador desliza rapidamente o dedo pelo ecrã. Recebe as coordenadas iniciais e finais (e1, e2) e a velocidade do movimento (velocityX, velocityY). Para determinar a direção, compara-se a diferença de coordenadas no eixo X ou Y.

A biblioteca AndroidX fornece uma API mais conveniente: ViewCompat.setSwipeRefreshLayout para pull-to-refresh, RecyclerView com ItemTouchHelper para ações de deslizamento em listas. O ItemTouchHelper permite adicionar funcionalidade de deslizamento com feedback visual — ícone, cor de fundo e animação.

Deslizamento em aplicações web

No desenvolvimento web, para processar deslizamentos são usados os eventos Touch Events API (touchstart, touchmove, touchend) e bibliotecas envolventes como Hammer.js ou 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 ? "Deslizar para a direita" : "Deslizar para a esquerda");
    }
});

Touch Events API — uma forma nativa de processar gestos no navegador. O evento touchstart regista as coordenadas iniciais, o touchmove acompanha o movimento, o touchend determina o resultado. O valor limite (threshold) filtra toques acidentais.

De acordo com o Can I Use (2026), o Touch Events API é suportado por 98% dos navegadores. Para cenários gestuais complexos (múltiplos deslizamentos, reconhecimento de direção), recomenda-se usar a biblioteca Hammer.js, que abstrai o processamento de baixo nível e fornece uma API clara.

Padrões de UX com deslizamento

Os padrões de UX bem-sucedidos com deslizamento formaram-se ao longo de anos de evolução das interfaces móveis. A sua utilização garante que o utilizador compreende como o gesto funciona sem aprendizagem adicional.

O padrão “Swipe to Delete” é o mais comum. Deslizar para a esquerda num item da lista revela um botão de eliminação. Padronizado no iOS (SwipeActionsConfiguration) e Android (ItemTouchHelper). Os utilizadores esperam que deslizar para a esquerda elimine ou arquive um item.

O padrão “Swipe to Go Back” — deslizar a partir do bordo esquerdo do ecrã para voltar ao ecrã anterior. Tornou-se padrão no iOS após o iPhone X. No Android, uma navegação semelhante funciona através do gesto do sistema. É importante não entrar em conflito com este gesto do sistema nas suas próprias aplicações.

O padrão “Pull to Refresh” — deslizar para baixo para atualizar conteúdo. Inventado por Loren Brichter para o Tweetie (2008), agora usado em milhões de aplicações. Implementado nos componentes padrão de ambas as plataformas.

• Feedback — o elemento deve mover-se com o dedo, mostrando o resultado antes de o deslizamento ser concluído
• Conflitos de gestos — evite suportar simultaneamente deslizamento horizontal e deslocamento no mesmo elemento
• Facilidade de descoberta — as primeiras ações de deslizamento devem ser acompanhadas por uma dica visual
• Cancelamento — o utilizador deve poder cancelar o deslizamento devolvendo o dedo à posição original