Diretrizes para comentários visuais

Use comentários visuais para mostrar aos usuários quando suas interações são detectadas, interpretadas e tratadas. Os comentários visuais podem ajudar os usuários incentivando a interação. Indica o sucesso de uma interação, o que melhora o senso de controle do usuário. Ele também retransmite o status do sistema e reduz erros.

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

Recommendations

• Tente limitar as modificações de um modelo de controle para aquelas diretamente relacionadas à sua intenção de design, pois alterações abrangentes podem afetar o desempenho e a acessibilidade do controle e do aplicativo.
  • Consulte estilos XAML para obter mais informações sobre como personalizar as propriedades de um controle, incluindo propriedades de estado visual.
  • Consulte a Classe UserControl para obter detalhes sobre como fazer alterações em um modelo de controle
  • Considere criar seu próprio controle de modelo personalizado se você precisar fazer alterações significativas em um modelo de controle. Para obter um exemplo de um controle de modelo personalizado, consulte o exemplo de Controle de Edição Personalizado.
• Não use visualizações de toque em situações em que possam interferir no uso do aplicativo. Para obter mais informações, consulte ShowGestureFeedback.
• Não exiba comentários, a menos que seja absolutamente necessário. Mantenha a interface do usuário limpa e desordada não mostrando comentários visuais, a menos que você esteja adicionando um valor que não esteja disponível em outro lugar.
• ** Tente não personalizar drasticamente os comportamentos de feedback visual dos gestos integrados do Windows, pois isso pode criar uma experiência do usuário inconsistente e confusa.

Diretrizes de uso adicionais

As visualizações de contato são especialmente críticas para interações por toque que exigem exatidão e precisão. Por exemplo, seu aplicativo deve indicar claramente o local de um toque para informar ao usuário se ele errou o destino, quanto ele errou e quais ajustes ele deve fazer.

Usar os controles de plataforma XAML padrão disponíveis garante que seu aplicativo funcione corretamente em todos os dispositivos e em todas as situações de entrada. Se o aplicativo apresenta interações personalizadas que exigem comentários personalizados, você deve garantir que os comentários sejam apropriados, abranger dispositivos de entrada e não distrair um usuário de sua tarefa. Esse pode ser um problema específico em aplicativos de jogos ou de desenho, em que o feedback visual pode entrar em conflito com ou obscurecer a interface do usuário crítica.

Feedback em diferentes dispositivos

O feedback visual geralmente depende do dispositivo de entrada (touch, touchpad, mouse, caneta/stylus, teclado, entre outros). Por exemplo, o feedback integrado de um mouse geralmente envolve mover e alterar o cursor, enquanto toque e caneta necessitam de visualizações de contato, e a entrada e navegação do teclado utilizam retângulos de foco e realce.

Use ShowGestureFeedback para definir o feedback dos gestos da plataforma.

Se estiver personalizando a interface do usuário de comentários, certifique-se de fornecer comentários compatíveis e adequados para todos os modos de entrada.

Aqui estão alguns exemplos de visualizações de contato integradas no Windows.

Visualização por toque	Visualização de mouse/touchpad	Visualização de caneta	Visualização de teclado

Visuais de foco de alta visibilidade

Todos os aplicativos do Windows ostentam um visual de foco mais definido em torno de controles interacionáveis dentro do aplicativo. Esses novos visuais de foco são totalmente personalizáveis e podem ser desativados quando necessário.

Para a experiência de 3 metros típica do uso do Xbox e da TV, o Windows dá suporte ao Reveal Focus, um efeito de iluminação que anima a borda de elementos que podem ser focados, como um botão, quando eles obtêm foco por meio da entrada do gamepad ou teclado.

Identidade Visual e Personalização de Cores

Propriedades da Borda

Há duas partes dos visuais focais de alta visibilidade: a borda primária e a borda secundária. A borda primária tem 2px de espessura e passa ao redor do exterior da borda secundária. A borda secundária tem 1px de espessura e é executada ao redor do interior da borda primária.

Para alterar a espessura de qualquer tipo de borda (primário ou secundário), use FocusVisualPrimaryThickness ou FocusVisualSecondaryThickness, respectivamente:

<Slider Width="200" FocusVisualPrimaryThickness="5" FocusVisualSecondaryThickness="2"/>

A margem é uma propriedade do tipo Espessura e, portanto, a margem pode ser personalizada para aparecer apenas em determinados lados do controle. Veja abaixo:

A margem é o espaço entre os limites visuais do controle e o início da borda secundária dos visuais de foco. A margem padrão está a 1px dos limites de controle. Você pode editar essa margem por controle alterando a propriedade FocusVisualMargin :

<Slider Width="200" FocusVisualMargin="-5"/>

Uma margem negativa afastará a borda do centro do controle e uma margem positiva aproximará a borda do centro do controle.

Para desativar totalmente os visuais de foco no controle, simplesmente desabilite UseSystemFocusVisuals:

<Slider Width="200" UseSystemFocusVisuals="False"/>

A espessura, a margem ou se o desenvolvedor do aplicativo deseja ou não ter os visuais de foco são determinadas com base em cada controle.

Propriedades de cor

Há apenas duas propriedades de cor para os visuais de foco: a cor da borda primária e a cor da borda secundária. Essas cores de borda de foco visual podem ser alteradas por controle em nível de página e globalmente em todo o aplicativo.

Para exibir visuais de foco de marca em todo o aplicativo, substitua os pincéis do sistema:

<SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="DarkRed"/>
<SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="Pink"/>

Para alterar as cores por controle, basta editar as propriedades visuais de foco no controle desejado:

<Slider Width="200" FocusVisualPrimaryBrush="DarkRed" FocusVisualSecondaryBrush="Pink"/>

Artigos relacionados

Para designers

• Diretrizes para panorâmica

Para desenvolvedores

• Interações personalizadas do usuário

Samples

• Exemplo básico de entrada
• Exemplo de entrada de baixa latência
• Exemplo de modo de interação do usuário
• Exemplo de elementos visuais de foco

Amostras de arquivo

• Entrada: exemplo de eventos de entrada do usuário XAML
• Entrada: exemplo de funcionalidades do dispositivo
• Entrada: exemplo de teste de clique por toque
• Amostra de aplicação de rolagem, movimento panorâmico e zoom em XAML
• Entrada: amostra de tinta simplificada
• Entrada: exemplo de gestos do Windows 8
• Entrada: exemplo de manipulações e gestos
• Exemplo de entrada por toque do DirectX