Diretrizes para feedback visual

Use feedback visual para mostrar aos utilizadores quando as suas interações são detetadas, interpretadas e tratadas. O feedback visual pode ajudar os utilizadores ao incentivar a interação. Indica o sucesso de uma interação, o que melhora a sensação de controlo do utilizador. Também transmite o estado 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 controlo àquelas diretamente relacionadas com a sua intenção de design, pois alterações extensas podem afetar o desempenho e a acessibilidade tanto do controlo como da sua aplicação.
  • Consulte estilos XAML para mais informações sobre como personalizar as propriedades de um controlo, incluindo propriedades de estado visual.
  • Consulte a Classe UserControl para detalhes sobre como fazer alterações a um modelo de controlo
  • Considera criar o teu próprio controlo personalizado com template se precisares de fazer alterações significativas a um template de controlo. Para um exemplo de um controlo com template personalizado, veja o exemplo de Controlo de Edição Personalizado.
• Não uses visualizações táteis em situações onde possam interferir com o uso da aplicação. Para mais informações, consulte ShowGestureFeedback.
• Não mostre feedback a menos que seja absolutamente necessário. Mantém a interface limpa e desarrumada, não mostrando feedback visual, a menos que estejas a acrescentar valor que não está disponível noutros locais.
• Tente não personalizar drasticamente os comportamentos de feedback visual dos gestos incorporados no Windows, pois isso pode criar uma experiência de utilizador inconsistente e confusa.

Orientações de utilização adicionais

As visualizações de contacto são especialmente críticas para interações táteis que exigem precisão e exatidão. Por exemplo, a sua aplicação deve indicar claramente a localização de um toque para que o utilizador saiba se falhou o alvo, quanto falhou e que ajustes deve fazer.

Usar os controlos padrão da plataforma XAML disponíveis garante que a sua aplicação funciona corretamente em todos os dispositivos e em todas as situações de entrada. Se a sua aplicação apresentar interações personalizadas que exigem feedback personalizado, deve garantir que o feedback é adequado, abrange os dispositivos de entrada e não distrai o utilizador da sua tarefa. Isto pode ser um problema particular em aplicações de jogos ou desenho, onde o feedback visual pode entrar em conflito ou obscurecer a interface crítica.

Feedback através de dispositivos

O feedback visual depende geralmente do dispositivo de entrada (tátil, touchpad, rato, caneta/stylus, teclado, e assim por diante). Por exemplo, o feedback incorporado para um mouse normalmente envolve mover e alterar o cursor, enquanto o toque e a caneta requerem visualizações de toque, e a entrada e navegação do teclado usam retângulos de foco e realce.

Use ShowGestureFeedback para definir o comportamento de feedback para gestos da plataforma.

Ao personalizar a interface de feedback, certifique-se de fornecer feedback que suporte e seja adequado para todos os modos de entrada.

Aqui estão alguns exemplos de visualizações de contacto incorporadas no Windows.

Visualização tátil	Visualização com rato/touchpad	Renderização da caneta	Visualização do teclado

Visuais de Foco de Alta Visibilidade

Todas as aplicações Windows apresentam um foco visual mais definido em torno dos controlos interativos dentro da aplicação. Estes novos visuais de foco são totalmente personalizáveis e também desativáveis quando necessário.

Para a experiência de visualização a partir de 3 metros típica do uso na Xbox e na TV, o Windows suporta Reveal focus, um efeito de iluminação que anima a borda dos elementos focáveis, como um botão, quando estes são focados pelo comando de jogo ou pelo teclado.

Marca de Cor e Personalização

Propriedades Fronteiriças

Existem duas partes nos visuais de foco de alta visibilidade: a borda primária e a borda secundária. A borda primária tem 2px de espessura e corre ao redor da fora da borda secundária. A borda secundária tem 1px de espessura e corre ao redor do interior da borda primária.

Para alterar a espessura de qualquer tipo de borda (primária ou secundária), use o FocusVisualPrimaryThickness ou FocusVisualSecondaryThickness, respetivamente:

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

A margem é uma propriedade do tipo Espessura, e por isso a margem pode ser personalizada para aparecer apenas em certos lados do controlo. Veja abaixo:

A margem é o espaço entre os limites visuais do controlo e o início da borda secundária dos visuais de foco. A margem padrão encontra-se a 1px dos limites de controlo. Pode editar esta margem para cada controlo, alterando a propriedade FocusVisualMargin:

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

Uma margem negativa afastará a fronteira do centro do controlo, e uma margem positiva aproximará a fronteira do centro do controlo.

Para desligar completamente os visuais de foco no controlo, basta desativar UseSystemFocusVisuals:

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

A espessura, a margem ou a decisão sobre se o desenvolvedor da aplicação deseja ou não ter os visuais de foco, é determinada com base em cada controlo individualmente.

Propriedades de Cor

Existem apenas duas propriedades de cor para os visuais de foco: a cor principal da borda e a cor secundária da borda. Estas cores visuais das bordas de foco podem ser alteradas por controlo ao nível da página, e globalmente a nível de toda a aplicação:

Para focar os visuais da marca em toda a aplicação, substitua os pincéis do sistema:

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

Para alterar as cores de cada controlo, simplesmente modifique as propriedades visuais do foco no controlo pretendido:

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

Artigos relacionados

Para designers

• Diretrizes para panorâmica

Para desenvolvedores

• Interações personalizadas com o utilizador

Samples

• Amostra de entrada básica
• Amostra de entrada de baixa latência
• Exemplo de modo de interação do usuário
• Exemplo de visuais do Focus

Arquivar amostras

• Entrada: Exemplo de eventos de entrada de utilizador em XAML
• Entrada: Exemplo de recursos do dispositivo
• Entrada: Amostra de teste de acerto por toque
• Exemplo de rolagem, arrasto e zoom em XAML
• Entrada: Amostra de tinta simplificada
• Entrada: Exemplo de gestos do Windows 8
• Entrada: Amostra de manipulações e gestos
• Amostra de entrada tátil DirectX