Guia do desenvolvedor de interações por toque

Projete seu aplicativo com a expectativa de que o toque seja o principal método de entrada de seus usuários. Se usares controlos do WinUI, o suporte para touchpad, rato e caneta/stylus não requer programação adicional, porque as aplicações WinUI fornecem isto gratuitamente.

No entanto, lembre-se de que uma interface do usuário otimizada para toque nem sempre é superior a uma interface do usuário tradicional. Ambos oferecem vantagens e desvantagens que são exclusivas de uma tecnologia e aplicação. Na mudança para a interface de utilizador com primazia ao toque, é importante entender as principais diferenças entre entrada por toque, touchpad, caneta/stilete, mouse e teclado.

APIs importantes: Microsoft. UI. Xaml.Input, Windows. UI. Core, Windows. Devices.Input

Muitos dispositivos têm telas multitoque que suportam o uso de um ou mais dedos (ou contatos de toque) como entrada. Os contatos de toque, e seu movimento, são interpretados como gestos de toque e manipulações para suportar várias interações do usuário.

A Windows app inclui vários mecanismos diferentes para lidar com input tátil, permitindo-lhe criar uma experiência imersiva que os seus utilizadores podem explorar com confiança. Aqui, abordamos o básico do uso de entrada tátil numa aplicação Windows.

As interações por toque exigem três coisas:

• Um ecrã sensível ao toque.
• O contacto direto (ou proximidade, se o ecrã tiver sensores de proximidade e suportar a deteção de foco) de um ou mais dedos nesse ecrã.
• Movimento dos contactos de toque (ou a ausência deles, com base num limite temporal).

Os dados de entrada fornecidos pelo sensor de toque podem ser:

• Interpretado como um gesto físico para manipulação direta de um ou mais elementos da interface do utilizador, como deslizamento, rotação, redimensionamento ou deslocamento. (Em contraste, interagir com um elemento através da sua properties window, caixa de diálogo ou outra possibilidade de interface é considerado manipulação indireta.)
• Reconhecido como um método de entrada alternativo, como mouse ou caneta.
• Usado para complementar ou modificar aspetos de outros métodos de entrada, como borrar um traço de tinta desenhado com uma caneta.

A entrada por toque normalmente envolve a manipulação direta de um elemento na tela. O elemento responde imediatamente a qualquer contato de toque dentro da sua área de teste de toque e reage adequadamente a qualquer movimento subsequente dos contatos de toque, incluindo a sua remoção.

Gestos e interações de toque personalizados devem ser projetados com cuidado. Eles devem ser intuitivos, responsivos e detetáveis, e devem permitir que os usuários explorem seu aplicativo com confiança.

Certifique-se de que a funcionalidade do aplicativo seja exposta de forma consistente em todos os tipos de dispositivo de entrada suportados. Se necessário, use alguma forma de modo de entrada indireta, como entrada de texto para interações com o teclado ou recursos de interface do usuário para mouse e caneta.

Lembre-se de que os dispositivos de entrada tradicionais (como mouse e teclado) são familiares e atraentes para muitos usuários. Eles podem oferecer velocidade, precisão e feedback tátil, algo que o toque não consegue proporcionar.

Fornecer experiências de interação únicas e distintas para todos os dispositivos de entrada suportará a mais ampla gama de recursos e preferências, atrairá o público mais amplo possível e atrairá mais clientes para seu aplicativo.

Compare os requisitos de interação por toque

A tabela a seguir mostra algumas das diferenças entre os dispositivos de entrada que você deve considerar ao projetar aplicativos do Windows otimizados para toque.

Usar resposta por toque

O feedback visual apropriado durante as interações com seu aplicativo ajuda os usuários a reconhecer, aprender e se adaptar à forma como suas interações são interpretadas pelo aplicativo e pela plataforma Windows. O feedback visual pode indicar interações bem-sucedidas, retransmitir o status do sistema, melhorar a sensação de controle, reduzir erros, ajudar os usuários a entender o sistema e o dispositivo de entrada e incentivar a interação.

O feedback visual é fundamental quando o usuário depende da entrada por toque para atividades que exigem precisão e precisão com base na localização. Exiba comentários quando e onde a entrada por toque for detetada, para ajudar o usuário a entender quaisquer regras de segmentação personalizadas definidas pelo seu aplicativo e seus controles.

Segmentação

A segmentação é otimizada através de:

• Tamanhos de alvo de toque

  Diretrizes de tamanho claras garantem que os aplicativos forneçam uma interface do utilizador confortável que contenha objetos e controlos fáceis e seguros de alcançar.

• Geometria de contato

  Toda a área de contato do dedo determina o objeto alvo mais provável.

• Lavagem

  Os itens dentro de um grupo são facilmente redirecionados arrastando o dedo entre eles (por exemplo, botões de opção). O item atual é ativado quando o toque é liberado.

• A balançar

  Itens densamente agrupados (por exemplo, hiperlinks) são facilmente re-selecionados pressionando o dedo para baixo e, sem deslizar, balançando-o de um lado para o outro sobre os itens. Devido à oclusão, o item atual é identificado através de uma dica de ferramenta ou da barra de status e é ativado quando o toque é levantado.

Exatidão

Projete para interações improvisadas usando:

• Pontos de encaixe que tornam mais fácil parar nos locais desejados quando os utilizadores interagem com o conteúdo.
• "Trilhos" direcionais que podem ajudar com movimento panorâmico vertical ou horizontal, mesmo quando a mão se move em um leve arco. Para obter mais informações, consulte Diretrizes para movimento panorâmico.

Oclusão

A oclusão dos dedos e das mãos é evitada através de:

• Tamanho e posicionamento da interface do usuário

  Torne os elementos da interface do usuário grandes o suficiente para que não possam ser completamente cobertos por uma área de contato na ponta do dedo.

  Posicione menus e pop-ups acima da área de contato sempre que possível.

• Tooltips

  Mostrar dicas de ferramentas quando um usuário mantém contato com o dedo em um objeto. Isso é útil para descrever a funcionalidade do objeto. O usuário pode arrastar a ponta do dedo para fora do objeto para evitar invocar a dica de ferramenta.

  Para objetos pequenos, desloque os tooltips para que não sejam cobertos pela área de contacto da ponta do dedo. Isso é útil para segmentação.

• Manípulos para precisão

  Quando for necessária precisão (por exemplo, seleção de texto), forneça alças de seleção deslocadas para melhorar a precisão. Para mais informações, consulte Diretrizes para seleção de texto e imagens (Windows Runtime apps).

Agendamento

Evite alterações no modo cronometrado em favor da manipulação direta. A manipulação direta simula o manuseio físico direto e em tempo real de um objeto. O objeto responde à medida que os dedos são movidos.

Uma interação cronometrada, por outro lado, ocorre após uma interação por toque. As interações cronometradas normalmente dependem de limites invisíveis, como tempo, distância ou velocidade, para determinar qual comando executar. As interações cronometradas não têm feedback visual até que o sistema execute a ação.

A manipulação direta fornece uma série de benefícios ao longo de interações temporizadas:

• O feedback visual instantâneo durante as interações faz com que os usuários se sintam mais envolvidos, confiantes e no controle.
• As manipulações diretas tornam mais seguro explorar um sistema porque são reversíveis — os usuários podem facilmente recuar em suas ações de maneira lógica e intuitiva.
• As interações que afetam diretamente objetos e imitam interações do mundo real são mais intuitivas, detetáveis e memoráveis. Eles não dependem de interações obscuras ou abstratas.
• Interações cronometradas podem ser difíceis de executar, pois os usuários devem atingir limites arbitrários e invisíveis.

Além disso, recomenda-se vivamente o seguinte:

• As manipulações não devem ser distinguidas pelo número de dedos utilizados.
• As interações devem suportar manipulações compostas. Por exemplo, faça pinça para ampliar enquanto arrasta os dedos para deslocar a imagem.
• As interações não devem ser distinguidas pelo tempo. A mesma interação deve ter o mesmo resultado, independentemente do tempo necessário para realizá-la. As ativações baseadas no tempo introduzem atrasos obrigatórios para os utilizadores e prejudicam tanto a natureza imersiva da manipulação direta como a perceção da capacidade de resposta do sistema.

  Observação

  Uma exceção a isso é quando você usa interações cronometradas específicas para ajudar na aprendizagem e exploração (por exemplo, pressionar e segurar).

• Descrições apropriadas e pistas visuais têm um grande efeito no uso de interações avançadas.

Visualizações do aplicativo

Ajuste a experiência de interação do usuário por meio das configurações de panorâmica/rolagem e zoom das visualizações do aplicativo. Uma exibição de aplicativo dita como um usuário acessa e manipula seu aplicativo e seu conteúdo. As visualizações também fornecem comportamentos como inércia, rebote de limite de conteúdo e pontos de encaixe.

As configurações de panorâmica e rolagem do ScrollViewer ditam como os usuários navegam em uma única vista, quando o conteúdo da vista não cabe na janela de visualização. Uma única visualização, por exemplo, pode ser uma página de uma revista ou livro, a estrutura de pastas de um computador, uma biblioteca de documentos ou um álbum de fotos.

As configurações de zoom se aplicam ao zoom ótico (suportado pelo controle ScrollViewer ) e ao controle Zoom Semântico . O Zoom Semântico é uma técnica otimizada para toque para apresentar e navegar em grandes conjuntos de dados ou conteúdo relacionados em uma única visualização. Ele funciona usando dois modos distintos de classificação, ou níveis de zoom. Isso é análogo ao movimento panorâmico e à rolagem dentro de uma única visualização. O deslocamento e a rolagem podem ser usados em conjunto com o Zoom Semântico.

Use exibições e eventos do aplicativo para modificar os comportamentos de panorâmica/rolagem e zoom. Isso pode proporcionar uma experiência de interação mais suave do que a possível por meio da manipulação de eventos de ponteiro e gesto.

Para saber mais sobre modos de exibição de aplicativos, veja Controles, layouts e texto.

Interações por toque personalizadas

Se você implementar seu próprio suporte de interação, lembre-se de que os usuários esperam uma experiência intuitiva envolvendo interação direta com os elementos da interface do usuário em seu aplicativo. Recomendamos que você modele suas interações personalizadas nas bibliotecas de controle da plataforma para manter as coisas consistentes e detetáveis. Os controles nessas bibliotecas fornecem a experiência completa de interação do usuário, incluindo interações padrão, efeitos físicos animados, feedback visual e acessibilidade. Crie interações personalizadas somente se houver um requisito claro e bem definido e as interações básicas não suportarem seu cenário.

Para fornecer suporte de toque personalizado, você pode lidar com vários eventos UIElement. Esses eventos são agrupados em três níveis de abstração.

• Os eventos de gestos estáticos são acionados após a conclusão de uma interação. Os eventos de gestos incluem Toque, Duplo Toque, Toque com o Botão Direitoe Pressionar e Manter.

  Você pode desativar eventos de gesto em elementos específicos ao definir IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabled, e IsHoldingEnabled como false.

• Eventos de ponteiro como PointerPressed e PointerMoved fornecem detalhes de baixo nível para cada contato de toque, incluindo a movimentação do ponteiro e a capacidade de distinguir eventos de pressão e soltura.

  Um ponteiro é um tipo de entrada genérico com um mecanismo de evento unificado. Ele expõe informações básicas, como a posição da tela, na fonte de entrada ativa, que pode ser toque, touchpad, mouse ou caneta.

• Eventos de gestos de manipulação, como ManipulationStarted, indicam uma interação contínua. Eles começam a disparar quando o usuário toca em um elemento e continuam até que o usuário levante o(s) dedo(s), ou a manipulação seja cancelada.

  Os eventos de manipulação incluem interações multitoque, como fazer zoom, panoramizar ou rodar, e interações que utilizam dados de inércia e velocidade, como arrastar. As informações fornecidas pelos eventos de manipulação não identificam a forma da interação que foi realizada, mas incluem dados como posição, delta de tradução e velocidade. Você pode usar esses dados de toque para determinar o tipo de interação que deve ser executada.

Aqui está o conjunto básico de gestos táteis suportados pelo WinUI.

Eventos de gestos

Para obter detalhes sobre controles individuais, consulte Lista de controles.

Eventos de ponteiro

Os eventos de apontador são gerados por uma variedade de fontes de entrada ativas, incluindo toque, touchpad, caneta e rato, substituindo assim os eventos tradicionais do rato.

Os eventos de ponteiro baseiam-se num único ponto de entrada (dedo, ponta da caneta, cursor do rato) e não suportam interações baseadas na velocidade.

Aqui está uma lista de eventos de ponteiro e seus argumentos de evento relacionados.

O exemplo a seguir mostra como usar os eventos PointerPressed, PointerReleasede PointerExited para manipular uma interação de toque em um Rectangle objeto.

Primeiro, um retângulo chamado touchRectangle é criado em Extensible Application Markup Language (XAML).

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
           Height="100" Width="200" Fill="Blue" />
</Grid>

Em seguida, são especificados os ouvintes para os eventos PointerPressed, PointerReleasede PointerExited.

MainPage::MainPage()
{
    InitializeComponent();

    // Pointer event listeners.
    touchRectangle->PointerPressed += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerPressed);
    touchRectangle->PointerReleased += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerReleased);
    touchRectangle->PointerExited += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerExited);
}

public MainPage()
{
    this.InitializeComponent();

    // Pointer event listeners.
    touchRectangle.PointerPressed += touchRectangle_PointerPressed;
    touchRectangle.PointerReleased += touchRectangle_PointerReleased;
    touchRectangle.PointerExited += touchRectangle_PointerExited;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Pointer event listeners.
    AddHandler touchRectangle.PointerPressed, AddressOf touchRectangle_PointerPressed
    AddHandler touchRectangle.PointerReleased, AddressOf Me.touchRectangle_PointerReleased
    AddHandler touchRectangle.PointerExited, AddressOf touchRectangle_PointerExited

End Sub

Finalmente, o manipulador de eventos PonteiroPressionado aumenta a Altura e a Largura do Retângulo, enquanto os manipuladores de eventos PonteiroLiberado e PonteiroSaído restauram a Altura e a Largura aos seus valores iniciais.

// Handler for pointer exited event.
void MainPage::touchRectangle_PointerExited(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer released event.
void MainPage::touchRectangle_PointerReleased(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer pressed event.
void MainPage::touchRectangle_PointerPressed(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Change the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 250;
        rect->Height = 150;
    }
}

// Handler for pointer exited event.
private void touchRectangle_PointerExited(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}
// Handler for pointer released event.
private void touchRectangle_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

// Handler for pointer pressed event.
private void touchRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Change the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}

' Handler for pointer exited event.
Private Sub touchRectangle_PointerExited(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Pointer moved outside Rectangle hit test area.
    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer released event.
Private Sub touchRectangle_PointerReleased(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer pressed event.
Private Sub touchRectangle_PointerPressed(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Change the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 250
        rect.Height = 150
    End If
End Sub

Eventos de manipulação

Use eventos de manipulação em seu aplicativo se precisar dar suporte a interações com vários dedos ou interações que exijam dados de velocidade.

Você pode usar eventos de manipulação para detetar interações como arrastar, ampliar e segurar.

Aqui está uma lista de eventos de manipulação e argumentos de eventos relacionados.

Um gesto consiste numa série de eventos de manipulação. Cada gesto começa com um evento ManipulationStarted, como quando um utilizador toca na tela.

Em seguida, um ou mais eventos ManipulationDelta são disparados. Por exemplo, se tocar no ecrã e, em seguida, arrastar o dedo pelo ecrã. Finalmente, um evento ManipulationCompleted é gerado quando a interação termina.

O exemplo a seguir mostra como usar os eventos ManipulationDelta para lidar com uma interação de slide em um retângulo e movê-lo pela tela.

Primeiro, um Retângulo chamado touchRectangle é criado em XAML com uma Altura e Largura de 200.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
               Width="200" Height="200" Fill="Blue" 
               ManipulationMode="All"/>
</Grid>

Em seguida, um global TranslateTransform chamado é criado para traduzir o Retângulo. Um ouvinte de eventos ManipulationDelta é especificado no Rectângulo, e dragTranslation é adicionado ao RenderTransform do Rectângulo.

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
Windows::UI::Xaml::Media::TranslateTransform^ dragTranslation;

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
private TranslateTransform dragTranslation;

' Global translation transform used for changing the position of 
' the Rectangle based on input data from the touch contact.
Private dragTranslation As TranslateTransform

MainPage::MainPage()
{
    InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle->ManipulationDelta += 
        ref new ManipulationDeltaEventHandler(
            this, 
            &MainPage::touchRectangle_ManipulationDelta);
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = ref new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle->RenderTransform = dragTranslation;
}

public MainPage()
{
    this.InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle.ManipulationDelta += touchRectangle_ManipulationDelta;
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = this.dragTranslation;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Listener for the ManipulationDelta event.
    AddHandler touchRectangle.ManipulationDelta,
        AddressOf testRectangle_ManipulationDelta
    ' New translation transform populated in 
    ' the ManipulationDelta handler.
    dragTranslation = New TranslateTransform()
    ' Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = dragTranslation

End Sub

Finalmente, no manipulador de eventos ManipulationDelta, a posição do Rectangle é atualizada utilizando o TranslateTransform na propriedade Delta.

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void MainPage::touchRectangle_ManipulationDelta(Object^ sender,
    ManipulationDeltaRoutedEventArgs^ e)
{
    // Move the rectangle.
    dragTranslation->X += e->Delta.Translation.X;
    dragTranslation->Y += e->Delta.Translation.Y;
    
}

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void touchRectangle_ManipulationDelta(object sender,
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

' Handler for the ManipulationDelta event.
' ManipulationDelta data Is loaded into the
' translation transform And applied to the Rectangle.
Private Sub testRectangle_ManipulationDelta(
    sender As Object,
    e As ManipulationDeltaRoutedEventArgs)

    ' Move the rectangle.
    dragTranslation.X = (dragTranslation.X + e.Delta.Translation.X)
    dragTranslation.Y = (dragTranslation.Y + e.Delta.Translation.Y)

End Sub

Eventos encaminhados

Todos os eventos de apontador, eventos de gestual e eventos de manipulação mencionados aqui são implementados como eventos encaminhados. Isso significa que o evento pode ser manipulado por objetos diferentes daquele que originalmente gerou o evento. Pais sucessivos numa árvore de objetos, como os contêineres pai de um UIElement ou a página raiz do seu aplicativo, podem escolher lidar com estes eventos, mesmo que o elemento original não o faça. Por outro lado, qualquer objeto que manipule o evento pode marcar o evento manipulado para que ele não atinja mais nenhum elemento pai. Para saber mais sobre o conceito de evento roteado e como ele afeta a forma como você escreve manipuladores para eventos roteados, veja Visão geral de eventos e eventos roteados.

O que fazer e o que não fazer

• Projete aplicativos com interação por toque como o principal método de entrada esperado.
• Fornecer feedback visual para interações de todos os tipos (toque, caneta, estilete, mouse, etc.)
• Otimize a segmentação ajustando o tamanho do alvo de toque, a geometria do contato, o arrastamento e as oscilações.
• Otimize a precisão através do uso de pontos de encaixe e "trilhos" direcionais.
• Forneça dicas de ferramentas e alças para ajudar a melhorar a precisão de toque para itens de interface do usuário compactados.
• Não use interações cronometradas sempre que possível (exemplo de uso apropriado: toque e segure).
• Não use o número de dedos usado para distinguir a manipulação sempre que possível.

Artigos relacionados

• Manipular entrada de ponteiro
• Identificar dispositivos de entrada

Samples

• Amostra básica de entrada
• Amostra de entrada de baixa latência
• Modo de interação do utilizador exemplo
• Amostra de visuais de foco

Arquivar amostras

• Input: Amostra de capacidades do dispositivo
• Input: Exemplo de eventos de entrada do utilizador XAML
• Exemplo de rolagem, navegação e zoom no XAML
• Input: Gestos e manipulações com GestureRecognizer