Diretrizes para a seleção de texto e imagens

Este tópico descreve a nova IU do Windows para a seleção e manipulação de texto, imagens e controles. Também fornece diretrizes para a experiência do usuário que devem ser consideradas ao usar esses novos mecanismos de seleção e manipulação no seu aplicativo da Windows Store.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, do início ao fim:  Interação do usuário: entrada por toque e muito mais

Otimização de toque

A seleção e manipulação de texto são particularmente suscetíveis aos desafios da experiência do usuário introduzidos pelas interações por toque. A entrada por mouse, caneta/stylus e teclado são altamente granulares: um clique do mouse ou contato da caneta/stylus é mapeado normalmente para um único pixel e uma tecla é ou não é pressionada. A entrada de toque não é granular; é difícil mapear toda a superfície da ponta de um dedo para especificar a localização x-y na tela para colocar o cursor de texto de forma precisa.

Considerações e recomendações

Use os controles internos expostos através das estruturas de idioma no Windows 8 para criar aplicativos que proporcionam a experiência de interação do usuário em plataforma inteira, incluindo comportamentos de seleção e manipulação. Você achará a funcionalidade de interação dos controles incorporados suficiente para a maioria dos aplicativos da Windows Store.

Ao usar controles de texto do Windows 8 padrão, os comportamentos de seleção e os recursos visuais descritos neste tópico não podem ser personalizados.

Seleção de texto

Se o aplicativo exige uma interface do usuário personalizada com suporte a seleção de texto, recomendamos seguir os comportamentos de seleção do Windows 8 descritos aqui.

Conteúdo editável e não editável

Para abranger o comportamento de direcionamento menos preciso de interações por toque, os elementos visuais de experiência do usuário para seleção e manipulação (como "garras" que indicam que uma seleção pode ser ajustada e identificam o destino da interação) foram completamente reprojetados para o Windows 8.

Com o toque, as interações de seleção são realizadas principalmente pelos gestos, como um toque rápido para definir um cursor de inserção ou selecionar uma palavra, e um movimento de deslizar para modificar a seleção. Assim como em outras interações por toque do Windows 8, as interações com tempo são limitadas aos gesto de pressionar e segurar para exibir uma interface do usuário informativa. Para saber mais, veja Diretrizes de resposta visual.

Não há mudanças no comportamento de seleção ao usar mouse, caneta/stylus e teclado no Windows 8.

O Windows 8 reconhece dois possíveis estados para interações de seleção, editável e não editável, e ajusta a interface de seleção, a resposta e a funcionalidade adequadamente.

Conteúdo editável

Tocar na metade esquerda de uma palavra desloca o cursor para a esquerda imediata da palavra, enquanto tocar na metade direita desloca o cursor para a direita imediata da palavra.

A seguinte imagem demonstra como colocar um cursor de inserção inicial com uma garra ao tocar rapidamente próximo ao início ou final de uma palavra.

Toque (ou pressione e mantenha pressionado) no lado esquerdo de uma palavra para colocar um acento circunflexo e uma garra no início dessa palavra. Toque (ou pressione e mantenha pressionado) no lado direito de uma palavra para colocar um acento circunflexo e uma garra no final dessa palavra.

A seguinte imagem demonstra como ajustar uma seleção ao arrastar a garra.

Arraste a garra em ambas as direções para ajustar a seleção (a primeira garra permanece ancorada e a segunda é exibida). Arraste qualquer uma das garras para fazer os ajustes subsequentes.

As imagens a seguir demonstram como invocar o menu de contexto ao tocar na seleção ou em uma garra (a ação de pressionar e segurar também pode ser usada).

Toque (ou pressione e mantenha pressionado) dentro da seleção ou em uma garra para invocar o menu de contexto.

Observação  Essas interações podem variar no caso de uma palavra com a ortografia errada. Tocar uma palavra que está marcada com a ortografia errada ressaltará toda a palavra e invocará o menu de contexto com a sugestão ortográfica.

Conteúdo não editável

A imagem a seguir demonstra como selecionar uma palavra ao tocar dentro da palavra (espaços não são incluídos na seleção inicial).

Toque dentro da palavra para selecioná-la (espaços não são incluídos na seleção inicial).

Siga os mesmos procedimentos para textos editáveis para ajustar a seleção e exibir o menu de contexto.

Manipulação de objetos

Sempre que possível, use os mesmos recursos de garra (ou semelhantes) da seleção de texto ao implementar manipulação personalizada de objetos em um aplicativo da Windows Store. Isso ajuda a proporcionar uma experiência de interação constante na plataforma.

Por exemplo, as garras também podem ser usadas em aplicativos de processamento de imagens que dão suporte a redimensionamento e corte ou aplicativos de reprodução de mídia que fornecem barras de progresso ajustáveis, conforme mostram as imagens a seguir.

Media player com garra de progresso

Media player com garra de progresso ajustável.

Imagem com garras de corte

Editor de imagens com garras de corte.

Ações permitidas e proibidas

A seguir estão ações permitidas e proibidas que ajudarão a criar uma experiência de interação do usuário bem-sucedida para os seus clientes.

Ações permitidas

Use glifos de fonte ao implementar a interface do usuário da garra.

A garra é uma combinação das duas fontes Segoe da interface do usuário disponíveis em todo o sistema. O uso de recursos de fonte simplifica problemas de renderização em diferentes dpis e funciona bem com os vários níveis de escala da interface do usuário.

Ao implementar suas próprias garras, elas devem compartilhar as seguintes características da interface do usuário:

  • Forma circular
  • Visível contra qualquer tela de fundo
  • Tamanho uniforme
Acrescente uma margem ao redor do conteúdo selecionável para acomodar a interface do usuário da garra.

Se o aplicativo permitir seleção de texto em uma região que não oferece panorâmica/rolagem, deixe uma margem de 1/2 garra nos lados esquerdo e direito da área de texto e uma altura de 1 garra nos lados superior e inferior da área de texto (como mostram as seguintes imagens). Isso garante que toda a interface do usuário da garra seja exposta ao usuário e minimiza interações não pretendidas com outras partes de interface do usuário baseadas em borda.

Margens da garra de seleção de texto

Oculte a interface do usuário das garras durante a interação.

Elimina a obstrução causada pelas garras durante a interação. Isso é útil quando uma garra não está totalmente oculta pelo dedo ou há várias garras de seleção de texto.

Elimina artefatos visuais ao exibir janelas filho.

Tópicos relacionados

Conceitual
Diretrizes para interações comuns do usuário
Design da interação por toque
Tutorial (aplicativos da Windows Store usando JavaScript)
Guia de início rápido: ponteiros
Guia de início rápido: gestos e manipulações DOM
Guia de início rápido: gestos estáticos
Guia de início rápido: gestos de manipulação
Tutorial (aplicativos da Windows Store usando C#/VB/C++ e XAML)
Guia de início rápido: entrada por toque
Guia de início rápido: ponteiros
Tutorial (aplicativos da Windows Store em C++ e DirectX)
Respondendo à entrada por toque (DirectX e C++)
Amostras (DOM)
Amostra de rolagem, movimento panorâmico e aplicação de zoom em HTML
Entrada: amostra de gestos instanciáveis
Amostras (APIs de aplicativos da Windows Store )
Entrada: amostra de manipulações e gestos (JavaScript)
Entrada: amostra de gestos no Windows 8
Entrada: amostra de eventos de entrada do usuário XAML
Amostra de rolagem, movimento panorâmico e aplicação de zoom em XAML
Amostras (DirectX)
Amostra de entrada por toque do DirectX
Entrada: amostra de manipulações e gestos (C++)
Referência
Windows.UI.Input
Windows.UI.Xaml.Input

 

 

Mostrar:
© 2014 Microsoft