Compartilhar via

Diretrizes para alvos 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 informados pelo digitalizador de toque é usado para determinar o destino pretendido (ou mais provável) pelo 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 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 Fluent Compact. O dimensionamento compacto alinha elementos de interface do usuário a um alvo de 32x32 epx, permitindo que se alinhem a uma grade mais compacta e dimensionem de forma apropriada conforme o escalonamento 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 do destino

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

Essas recomendações de tamanho de destino podem ser ajustadas conforme necessário pelo seu cenário específico. Veja alguns pontos a serem considerados:

  • Frequência de Toques – considere tornar os alvos que são pressionados repetida ou frequentemente maiores do que o tamanho mínimo.
  • Consequência do erro – alvos que têm consequências graves em caso de toque acidental devem ter maior espaçamento e ser posicionados mais distantes 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.
  • Formato e tamanho da tela.
  • Postura do dedo.
  • Visualizações de toque.

Samples

Amostras de arquivo

  • Last updated on