Controlador de passo vs. Slider
Um stepper muda um número em passos fixos. Um slider escolhe um lugar ao longo de uma faixa.
Use um stepper para mudanças pequenas e precisas. Use um slider quando a posição aproximada for mais importante do que digitar um número exato. Sempre mostre o valor e ofereça suporte ao teclado.
Veja o que cada padrão faz
Experimente cada exemplo. Depois leia sobre o trabalho para o qual ele foi feito.
macOS Stepper
Um macOS Stepper tem um botão para adicionar e outro para subtrair. Ele muda um valor dentro de limites definidos por um passo fixo.
Um inspetor de layout muda o grid de quatro para cinco colunas. O usuário não precisa digitar um número.
- Use-o quando
- Use-o para um número com limites claros e passos pequenos. Funciona melhor quando as pessoas mudam um ou dois passos por vez.
- Não o use quando
- Evite barras muito largas ou suaves e mudanças grandes e rápidas. Adicione um campo de números quando as pessoas precisam digitar ou comparar valores exatos.
- Nome usado no código
AppKit NSStepper / SwiftUI Stepper
macOS Slider
Um macOS Slider tem uma trilha e um polegar móvel. Ele escolhe um valor dentro de limites definidos, de forma livre ou em passos definidos, e pode mostrar marcas.
Um editor de som move o volume do silencioso para o máximo. O VoiceOver também anuncia o número.
- Use-o quando
- Use-o quando arrastar por uma faixa e ver o resultado imediatamente ajudar. Suporte uma faixa suave ou passos claros com marcas e teclas de teclado.
- Não o use quando
- Não o use para categorias, intervalos ilimitados ou precisão crítica para segurança. Adicione um campo numérico correspondente quando as pessoas precisarem repetir um valor exato.
- Nome usado no código
AppKit NSSlider / SwiftUI Slider
Comparação rápida
| Padrão de UI | Melhor para | Não para | Nome usado no código |
|---|---|---|---|
| macOS SteppermacOS Stepper | Use-o para um número com limites claros e passos pequenos. Funciona melhor quando as pessoas mudam um ou dois passos por vez. | Evite barras muito largas ou suaves e mudanças grandes e rápidas. Adicione um campo de números quando as pessoas precisam digitar ou comparar valores exatos. | AppKit NSStepper / SwiftUI Stepper |
| macOS SlidermacOS Slider | Use-o quando arrastar por uma faixa e ver o resultado imediatamente ajudar. Suporte uma faixa suave ou passos claros com marcas e teclas de teclado. | Não o use para categorias, intervalos ilimitados ou precisão crítica para segurança. Adicione um campo numérico correspondente quando as pessoas precisarem repetir um valor exato. | AppKit NSSlider / SwiftUI Slider |
Antes de lançar
- 01
Anote o que a pessoa precisa fazer.
- 02
Teste o teclado, foco, toque, zoom, carregamento, estados vazio e de erro.
- 03
Certifique-se de que as pessoas podem obter as mesmas informações sem passar o mouse ou movimento.
- 04
Teste com conteúdo real em telas pequenas e grandes.
Pedido de comparação para copiar
Copie isso quando o seu time precisar de ajuda para escolher entre os padrões.
Escolha o melhor padrão de macOS Stepper (macOS Stepper), macOS Slider (macOS Slider) para o nosso fluxo real de usuário. Use esta regra: Um stepper muda um número em passos fixos. Um slider escolhe um lugar ao longo de uma faixa. Anote a tarefa, a quantidade de conteúdo e o custo de parar o fluxo. Teste o comportamento de teclado, toque, carregamento, erro e movimento reduzido. Explique sua escolha e depois construa a menor versão acessível com o sistema de design do projeto.