Diretrizes de controles deslizantes (aplicativos da Windows Store)

Siga estas diretrizes para adicionar sliders ao seu aplicativo da Windows Store.

Este é o controle correto?

Use um controle deslizante input type=range 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. Em vez disso, use um ToggleSwitch.

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 radio ou os controles de select.
  • A configuração é um valor numérico exato conhecido? Se sim, use uma caixa de texto numérico (input type=number).
  • 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, use radio buttons.
  • 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.

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 max.

  • 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 step se não quiser que o controle deslizante permita valores arbitrários entre min e max. 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 step igual a 1.
  • Se você especificar steps (também conhecido como pontos de ajuste), verifique se a etapa final step 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 step 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, porque 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).

O que fazer e o que não fazer

O que fazerDimensione o controle para que os usuários possam definir o valor desejado facilmente. Para configurações com valores distintos, certifique-se de que o usuário possa selecionar qualquer valor usando o mouse.
Forneça um feedback imediato quando ou depois que o usuário fizer uma seleção (se isso for prático). Por exemplo, o controle de volume do Windows soa 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 associados ao desabilitar o controle deslizante.
O que não fazerNã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 muito provavelmente forem selecionar um de diversos valores representativos do intervalo. Em vez disso, use esses valores como as únicas etapas permitidas. Por exemplo, se o valor de tempo puder ser de até 1 mês, mas os usuários só precisarem selecionar entre 1 minuto, 1 hora, 1 dia ou 1 mês, crie um controle deslizante com apenas 4 pontos de etapa.

 

Tópicos relacionados

Diretrizes de botões de alternância

 

 

Mostrar:
© 2014 Microsoft. Todos os direitos reservados.