Seleção de texto e imagens

Este artigo descreve a seleção e manipulação de texto, imagens e controlos e fornece orientações de experiência do utilizador que devem ser consideradas ao utilizar estes mecanismos nas suas aplicações.

APIs importantes: Windows.UI.Xaml.Input, Windows.UI.Input

O que fazer e o que não fazer

• Use glifos de fonte ao implementar a sua própria interface de gripper. O gripper é uma combinação de duas fontes Segoe UI disponíveis em todo o sistema. Usar recursos de fontes simplifica os desafios de renderização em diferentes resoluções de DPI e trabalha bem com vários níveis de escalonamento da interface. Ao implementares os teus próprios grippers, eles devem partilhar os seguintes traços da interface de utilizador:

  • Forma circular
  • Visível contra fundo de qualquer cor
  • Tamanho consistente

• Forneça uma margem em torno do conteúdo selecionável para acomodar a interface do gripper. Se a sua aplicação permitir a seleção de texto numa região que não faça pan/scroll, permita uma margem de 1/2 do gripper nos lados esquerdo e direito da área de texto e 1 altura do gripper nos lados superior e inferior da área de texto (como mostrado nas imagens seguintes). Isto garante que toda a interface de manipulação (gripper) fica exposta ao utilizador e minimiza interações não intencionais com outras interfaces baseadas em bordas.

  

• Ocultar a interface dos grippers durante a interação. Elimina a oclusão das garras durante a interação. Isto é útil quando um gripper não está completamente oculto pelo dedo ou quando existem vários gripers de seleção de texto. Isto elimina artefactos visuais ao exibir janelas crianças.

• Não permita a seleção de elementos da interface como controlos, etiquetas, imagens, conteúdo proprietário, e assim por diante. Normalmente, as aplicações Windows permitem a seleção apenas dentro de controlos específicos. Controlos como botões, etiquetas e logótipos não são selecionáveis. Avalie se a seleção é um problema para a sua aplicação e, em caso afirmativo, identifique as áreas da interface onde a seleção deve ser proibida.

Orientações de utilização adicionais

A seleção e manipulação de texto é particularmente suscetível a desafios de experiência do utilizador introduzidos pelas interações táteis. A entrada por rato, caneta/estilete e teclado é altamente granular: um clique do rato ou contacto da caneta/estilete é normalmente associado a um único pixel, e uma tecla é pressionada ou não. A entrada tátil não é granular; é difícil mapear toda a superfície da extremidade de um dedo para uma localização específica X-Y no ecrã para posicionar um cursor de texto com precisão.

Considerações e recomendações

Utilize os controlos incorporados expostos através dos frameworks de linguagem no Windows para construir aplicações que proporcionem a experiência completa de interação do utilizador na plataforma, incluindo comportamentos de seleção e manipulação. Vai achar que a funcionalidade de interação dos controlos incorporados é suficiente para a maioria das aplicações Windows.

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

Seleção de texto

Se a sua aplicação requer uma interface personalizada que suporte seleção de texto, recomendamos que siga os comportamentos de seleção do Windows descritos aqui.

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

Com o toque, as interações de seleção são realizadas principalmente através de gestos como um toque para definir um cursor de inserção ou selecionar uma palavra, e um deslizamento para modificar uma seleção. Tal como noutras interações táteis do Windows, as interações temporizadas limitam-se ao gesto de pressionar e manter para mostrar a interface informativa. Para mais informações, consulte as Diretrizes para feedback visual.

O Windows reconhece dois estados possíveis para interações de seleção, editáveis e não editáveis, e ajusta a interface de seleção, o feedback e a funcionalidade em conformidade.

Conteúdo editável

Tocar na metade esquerda de uma palavra coloca o cursor imediatamente à esquerda da palavra, enquanto tocar na metade direita coloca o cursor imediatamente à direita da palavra.

A imagem abaixo demonstra como colocar o cursor de inserção inicial com o gripper ao tocar perto do início ou do fim de uma palavra.

A imagem seguinte demonstra como ajustar uma seleção arrastando o manípulo.

As imagens seguintes demonstram como invocar o menu de contexto tocando na área selecionada ou num ponto de ajuste (também pode ser usado pressionar e segurar).

Nota Estas interações variam um pouco no caso de uma palavra mal escrita. Tocar numa palavra marcada como mal escrita irá tanto destacar a palavra inteira como invocar o menu de contexto de ortografia sugerida.

 

Conteúdo não editável

A imagem seguinte demonstra como selecionar uma palavra tocando dentro da palavra (não há espaços incluídos na seleção inicial).

Siga os mesmos procedimentos do texto editável para ajustar a seleção e mostrar o menu contextual.

Manipulação de objetos

Sempre que possível, use os mesmos (ou similares) recursos de gripper que a seleção de texto ao implementar manipulação personalizada de objetos numa aplicação Windows. Isto ajuda a proporcionar uma experiência de interação consistente em toda a plataforma.

Por exemplo, os gripers também podem ser usados em aplicações de processamento de imagem que suportam redimensionamento e recorte, ou em aplicações de reprodução multimédia que oferecem barras de progresso ajustáveis, como mostrado nas imagens seguintes.

Leitor multimédia com barra de progresso ajustável.

Editor de imagens com pinças de recorte.

Artigos relacionados

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: Amostra de manipulações e gestos

• Amostra de entrada tátil DirectX