Windows Dev Center

Diretrizes para controles deslizantes

Aplicativo Windows: controles deslizantes

Aplicativo Windows: controles deslizantes

Aplicativo Windows Phone: controles deslizantes

Aplicativo Windows Phone: controles deslizantes

Descrição

Um controle deslizante (também conhecido como controle de intervalo) permite que o usuário defina um valor dentro de um determinado intervalo tocando em—ou deslizando para a frente e para trás—sobre uma faixa.

Exemplos

Uma captura de tela que ilustra o controle deslizante padrão

Este é o controle correto?

Use um controle deslizante quando quiser que os usuários possam estabelecer valores contíguos definidos (como volume ou brilho) ou um intervalo de valores distintos (como configurações de resolução de tela).

Um controle deslizante é uma boa opção quando você sabe que os usuários imaginam o valor como uma quantidade relativa, e não como um valor numérico. Por exemplo, os usuários pensam em definir o volume de áudio como baixo ou médio, e não em definir o valor como 2 ou 5.

Não use um controle deslizante para configurações binárias. Use um botão de alternância em seu lugar.

Veja a seguir alguns fatores adicionais que você deve considerar ao decidir se irá usar um controle deslizante:

  • A configuração parece uma quantidade relativa? Se não parecer, use os botões de opção ou os controles de seleção.
  • A configuração é um valor numérico exato conhecido? Se sim, use uma caixa de texto numérico.
  • O usuário se beneficiaria com um feedback instantâneo sobre o efeito das alterações de configuração? Se sim, use um controle deslizante. Por exemplo, os usuários podem escolher uma cor com mais facilidade vendo imediatamente o efeito das alterações nos valores de matiz, saturação ou luminosidade.
  • A configuração tem um intervalo de quatro ou mais valores? Se não tiver, use botões de opção.
  • O usuário pode alterar o valor? Controles deslizantes são para interação com o usuário. Se o usuário não puder alterar o valor, use texto somente leitura.

Se você estiver decidindo entre um controle deslizante e uma caixa de texto numérico, use uma caixa de texto numérico se:

  • O espaço na tela for restrito.
  • For provável que o usuário irá preferir usar o teclado.

Use um controle deslizante se:

  • Os usuários forem se beneficiar com um feedback instantâneo.

O que fazer e o que não fazer

  • Dimensione o controle de modo que os usuários possam definir com facilidade o valor que desejam. Para configurações com valores distintos, certifique-se de que o usuário pode facilmente selecionar qualquer valor utilizando o mouse. Confirme que os pontos de extremidade do controle deslizante sempre estejam dentro dos limites de uma visualização.
  • Forneça feedback imediato enquanto ou após um usuário faz uma seleção (quando for prático). Por exemplo, o controle de volume do Windows emite um som para indicar o volume de áudio selecionado.
  • Use rótulos para mostrar o intervalo de valores. Exceção: se o controle deslizante estiver orientado verticalmente, e o rótulo superior for Máximo, Alto, Mais ou equivalente, você poderá omitir os outros rótulos pois o significado está claro.
  • Desative todos os rótulos ou elementos visuais de feedback associados ao desabilitar o controle deslizante.
  • Considere a direção do texto ao configurar a direção de fluxo e/ou orientação de seu controle deslizante. O script flui da esquerda para direita em alguns idiomas e, da direita para esquerda em outros.
  • Não use um controle deslizante como indicador de progresso.
  • Não altere o tamanho padrão da miniatura de controle deslizante.
  • Não crie um controle deslizante contínuo se o intervalo de valores for grande e os usuários provavelmente selecionarão um entre diversos valores representativos de dentro do intervalo. Em vez disso, utilize os valores como as únicas etapas permitidas. Por exemplo, se o valor para tempo pode ficar acima de um mês mas os usuários só precisam escolher entre 1 minuto, 1 hora, 1 dia ou 1 mês, crie um controle deslizante com quatro pontos de etapa.

Diretrizes de uso adicional

Escolhendo o layout correto: horizontal ou vertical

Você pode definir o layout do seu controle deslizante horizontal ou verticalmente. Use estas diretrizes para determinar qual layout usar.

  • Use uma orientação natural. Por exemplo, se o controle deslizante representar um valor real que normalmente é mostrado na vertical (como temperatura), use uma orientação vertical.
  • Se o controle for usado para buscas dentro de uma mídia, como em um aplicativo de vídeo, use uma orientação horizontal.
  • Ao usar um controle deslizante em uma página que pode fazer um movimento panorâmico em uma direção (horizontal ou vertical), use uma orientação diferente para o controle deslizante do que a direção panorâmica. Caso contrário, os usuários poderão passar o dedo sobre o controle deslizante e alterar seu valor acidentalmente ao tentarem um movimento panorâmico na página.
  • Se ainda não tiver certeza sobre qual orientação usar, utilize a que melhor se ajusta ao layout da sua página.

Diretrizes para a direção do intervalo

A direção do intervalo é a direção em que você move o controle deslizante ao escorregar do seu valor atual para o seu valor máximo.

  • Para um controle deslizante vertical, coloque o maior valor no topo do controle deslizante, independentemente da direção de leitura. Por exemplo, para um controle deslizante de volume, sempre coloque a configuração de volume máximo no topo do controle deslizante. Para outros tipos de valores (como dias da semana), siga a direção de leitura da página.
  • Para estilos horizontais, coloque o valor inferior no lado esquerdo do controle deslizante para um layout de página da esquerda para a direita e no lado direito para um layout de página da direita para a esquerda.
  • A única exceção para a diretriz anterior é no caso de barras de busca de mídia: sempre coloque o valor inferior no lado esquerdo do controle deslizante.

Diretrizes para etapas e marcas de escala

  • Use pontos de etapa se não quiser que o controle deslizante permita valores arbitrários entre o mínimo e o máximo. Por exemplo, se você usar um controle deslizante para especificar o número de entradas de cinema para compra, não permita valores de ponto flutuante. Forneça a ele um valor de etapa igual a 1.
  • Se você especificar etapas (também conhecidas como pontos de ajuste), verifique se a etapa final se alinha ao valor máximo do controle deslizante.
  • Use marcas de escala quando quiser mostrar aos usuários o local de valores importantes ou significantes. Por exemplo, um controle deslizante que controla o zoom pode ter marcas de escala para 50%, 100% e 200%.
  • Mostre marcas de escala quando os usuários precisarem saber o valor aproximado da configuração.
  • Mostre marcas de escala e um rótulo de valor quando os usuários precisarem saber o valor exato da configuração escolhida, sem interagir com o controle. Caso contrário, eles poderão usar a dica de ferramenta de valor para ver o valor exato.
  • Sempre mostre marcas de escala quando pontos de etapa não forem óbvios. Por exemplo, se o controle deslizante tiver 200 pixels de largura e 200 pontos de ajuste, você poderá ocultar as marcas de escala, pois os usuários não observarão o comportamento de ajuste. Mas, se houver apenas 10 pontos de ajuste, mostre as marcas de escala.

Diretrizes de rótulos

  • Rótulos de controle deslizante

    O rótulo de controle deslizante indica a função do controle deslizante.

    • Use um rótulo sem pontuação final.
    • Posicione rótulos acima do controle deslizante quando ele estiver em um formato que coloque a maioria dos seus rótulos acima dos seus controles.
    • Posicione rótulos nas laterais quando o controle deslizante estiver em um formato que coloque a maioria dos seus rótulos na lateral dos seus controles.
    • Evite colocar rótulos abaixo do controle deslizante porque o dedo do usuário pode ocultar o rótulo ao tocar no controle deslizante.
  • Rótulos de intervalo

    Rótulos de intervalo, ou de preenchimento, descrevem os valores mínimo e máximo do controle deslizante.

    • Rotule as duas extremidades do intervalo do controle deslizante, a menos que uma orientação vertical torne isso desnecessário.
    • Use apenas uma palavra, se possível, para cada rótulo.
    • Não use pontuação final.
    • Certifique-se de que esses rótulos sejam descritivos e paralelos. Exemplos: Máximo/Mínimo, Mais/Menos, Baixo/Alto (altura), Baixo/Alto (som).
  • Rótulos de valor

    Um rótulo de valor exibe o valor atual do controle deslizante.

    • Se você precisar de um rótulo de valor, mostre-o abaixo do controle deslizante.
    • Centralize o texto em relação ao controle e inclua as unidades (como pixels).
    • Como o elevador do controle deslizante está coberto durante o deslizamento, considere a possibilidade de mostrar o valor atual de outro modo, com um rótulo ou outro elemento visual. O tamanho de texto da configuração de um controle deslizante pode produzir algum texto de exemplo à direita do controle deslizante, a seu lado.

Aparência e interação

Um controle deslizante é composto de uma faixa e um elevador. A faixa é uma barra (que pode opcionalmente exibir diversos estilos de marcas de escala) representando o intervalo de valores que podem ser inseridos. O elevador é um seletor, que o usuário pode posicionar tocando na faixa ou deslizando o seletor para frente ou para trás.

Um controle deslizante tem uma área grande de alvo de toque. Para manter a acessibilidade ao toque, um controle deslizante deve ser posicionado suficientemente longe da borda da tela.

Quando você está projetando um controle deslizante personalizado, considere meios de apresentar todas as informações necessárias ao usuário com o mínimo de desorganização possível. Utilize um rótulo de valor se um usuário precisa saber as unidades para entender a configuração; encontre meios criativos de representar esses valores graficamente. Um controle deslizante que controla o volume, por exemplo, pode exibir o gráfico de uma caixa acústica sem ondas sonoras na extremidade mínima do controle deslizante e uma caixa acústica com ondas sonoras na extremidade máxima desse controle.

Tópicos relacionados

Para designers
Diretrizes de botões de alternância
Para desenvolvedores (HTML)
input type=range element | input type=range object
Para desenvolvedores (XAML)
Slider class

 

 

Mostrar:
© 2015 Microsoft