Compartilhar via

Diretrizes para destinos de toque

  • Artigo

Todos os elementos interativos da interface do usuário em seu aplicativo Windows devem ser grandes o suficiente para que os usuários acessem e usem com precisão, independentemente do tipo de dispositivo ou método de entrada.

O suporte à entrada por toque (e a natureza relativamente imprecisa da área de contato por toque) requer otimização adicional em relação ao tamanho do alvo e ao layout de controle, pois o conjunto maior e mais complexo de dados de entrada relatados pelo digitalizador de toque é usado para determinar o destino pretendido (ou mais provável) do usuário.

Todos os controles UWP foram projetados com tamanhos e layouts de destino de toque padrão que permitem criar aplicativos visualmente equilibrados e atraentes que são confortáveis, fáceis de usar e inspiram confiança.

Neste tópico, descrevemos esses comportamentos padrão para que você possa projetar seu aplicativo para máxima usabilidade usando controles de plataforma e controles personalizados (caso seu aplicativo os exija).

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

Dimensionamento Fluent padrão

O Dimensionamento Fluent padrão foi criado para fornecer um equilíbrio entre densidade de informações e conforto do usuário. Na verdade, todos os itens na tela se alinham a um alvo de 40 px x 40 px efetivos (epx), o que permite que os elementos da interface do usuário se alinhem com uma grade e sejam dimensionados de forma adequada com base no nível do sistema.

Observação

Para obter mais informações sobre pixels efetivos e dimensionamento, consulte Tamanhos de tela e pontos de interrupção

Para saber mais sobre o dimensionamento no nível de sistema, confira Alinhamento, margem, preenchimento.

Dimensionamento Fluent compacto

Os aplicativos podem exibir um nível mais alto de densidade de informações com o dimensionamento do Fluent Compact. O dimensionamento compacto alinha os elementos da interface do usuário a um destino epx de 32 x 32, o que permite que os elementos da interface do usuário se alinhem a uma grade mais rígida e sejam dimensionados adequadamente com base no dimensionamento no nível do sistema.

Exemplos

O dimensionamento compacto pode ser aplicado no nível da página ou da grade.

Nível da página

<Page.Resources>
    <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Page.Resources>

Nível de grade

<Grid>
    <Grid.Resources>
        <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
    </Grid.Resources>
</Grid>

Tamanho de destino

Em geral, defina o tamanho da área de toque para um intervalo quadrado de 7,5 mm (40 x 40 pixels em uma tela de 135 PPI em um nível de escala de 1,0x). Normalmente, os controles UWP se alinham com o destino de toque de 7,5 mm (isso pode variar com base no controle específico e em quaisquer padrões de uso comuns). Consulte Tamanho e densidade do controle para obter mais detalhes.

Essas recomendações de tamanho de destino podem ser ajustadas conforme exigido pelo seu cenário específico. Veja a seguir algumas questões a serem consideradas:

  • Frequência de toques - considere fazer alvos que são pressionados repetidamente ou frequentemente maiores do que o tamanho mínimo.
  • Consequência do erro - os alvos que têm consequências graves se tocados por engano devem ter um preenchimento maior e ser colocados mais longe da borda da área de conteúdo. Isso é especialmente verdadeiro para alvos que são tocados com frequência.
  • Posição na área de conteúdo.
  • Fator de forma e tamanho da tela.
  • Postura dos dedos.
  • Visualizações de toque.

Amostras

Exemplos de arquivos