Diretrizes para destinos de toque
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.
Artigos relacionados
- Noções básicas de design para aplicativos do Windows
- Tamanhos de tela e pontos de interrupção
- Controle o tamanho e a densidade
- Alinhamento, margem, preenchimento
Amostras
- Exemplo de entrada básica
- Exemplo de entrada de baixa latência
- Exemplo de modo de interação do usuário
- Amostra de visuais de foco
Exemplos de arquivos
Windows developer