Compartilhar via

Diretrizes para áreas de toque

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

O suporte à entrada por toque (e à natureza relativamente imprecisa da área de contato por toque) requer otimização adicional em relação ao tamanho do alvo e à disposição dos controles, pois o conjunto maior e mais complexo de dados de entrada relatados pelo sensor de toque é usado para determinar o alvo pretendido (ou alvo 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 obter o máximo de usabilidade usando controles de plataforma e controles personalizados (caso seu aplicativo exija deles).

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

Dimensionamento do Fluent Standard

Dimensionamento padrão fluente foi criado para proporcionar um equilíbrio entre a densidade de informações e o conforto do usuário. De forma eficaz, todos os itens na tela se alinham a um alvo de 40 x 40 pixels efetivos (epx), o que permite que os elementos da interface do usuário se alinhem a uma grade e se dimensionem adequadamente com base no dimensionamento do nível do sistema.

Observação

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

Para obter mais informações sobre o dimensionamento no nível do sistema, consulte Alinhamento, margem, recheio.

Dimensionamento do Fluent Compact

Os aplicativos podem exibir um nível mais alto de densidade de informações com o dimensionamento Fluent Compact . O dimensionamento compacto alinha elementos de interface do usuário a um destino epx 32x32, que permite que os elementos da interface do usuário se alinhem a uma grade mais apertada e dimensionem adequadamente com base no dimensionamento do 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 alvo

Em geral, defina o tamanho de seu alvo de toque como uma dimensão quadrada de 7,5 mm (de 40 x 40 pixels na exibição de 135 PPI em um nível de escala de 1,0x). Normalmente, os controles UWP se alinham com o alvo de toque de 7,5 mm (isso pode variar de acordo com o controle específico e padrões de uso comuns). Consulte tamanho do controle e de densidade para obter mais detalhes.

Essas recomendações de tamanho de destino podem ser ajustadas de acordo com o seu cenário específico. Aqui estão algumas coisas a serem consideradas:

  • Frequência de Toques – considere tornar os alvos que são pressionados repetidamente ou com frequência maiores do que o tamanho mínimo.
  • Consequência do erro – destinos que têm consequências graves se forem tocados acidentalmente devem ter maior espaçamento e ser colocados mais longe da borda da área de conteúdo. Isso é particularmente verdadeiro para superfícies que são tocadas com frequência.
  • Posição na área de conteúdo.
  • Fator de forma e tamanho da tela.
  • Postura do dedo.
  • Visualizações de toque.

Exemplos

Amostras de arquivo