스태퍼 vs 슬라이더
Stepper는 정해진 단계로 숫자를 바꿔. Slider는 범위 안에서 원하는 위치를 고르게 해.
작은 정확한 변경에는 스태퍼를 사용하세요. 정확한 숫자를 입력하는 것보다 대략적인 위치가 중요할 때는 슬라이더를 사용하세요. 항상 값을 표시하고 키보드를 지원하세요.
각 패턴이 무엇을 하는지 확인하세요
각 예제를 시도해 보세요. 그런 다음 그것이 수행하려는 작업에 대해 읽어보세요.
macOS Stepper
macOS Stepper는 더하기 버튼과 빼기 버튼이 있어요. 정해진 한도 안에서 일정한 단계씩 값을 바꿔요.
레이아웃 검사기가 격자를 4열에서 5열로 바꿔요. 숫자를 직접 적을 필요가 없죠.
- 사용할 때
- 명확한 한계와 작은 단계를 가진 숫자용으로 사용하세요. 사람들은 한두 단계씩 변경할 때 가장 잘 작동합니다.
- 다음 경우에는 사용하지 마세요
- 너무 넓거나 부드러운 범위와 크고 빠른 변화는 피하세요. 사람들이 정확한 값을 입력하거나 비교해야 한다면 숫자 입력창을 추가하세요.
- 코드에서 사용된 이름
AppKit NSStepper / SwiftUI Stepper
macOS Slider
macOS Slider는 트랙과 움직이는 손잡이로 이루어져 있어요. 정해진 범위에서 자유롭게, 또는 일정 단계로 값을 고를 수 있고, 눈금이 보일 수도 있어요.
소리 편집기는 음량을 음소거부터 최대로 움직여. VoiceOver도 숫자를 읽어줘.
- 사용할 때
- 범위를 드래그하고 한 번에 결과를 확인하는 것이 도움이 될 때 사용하세요. 부드러운 범위나 체크와 키보드 키로 명확한 단계를 지원하세요.
- 다음 경우에는 사용하지 마세요
- 범주, 무제한 범위 또는 안전-critical 정밀도에 이를 사용하지 마세요. 사람이 정확한 값을 반복해야 할 경우 일치하는 숫자 필드를 추가하세요.
- 코드에서 사용된 이름
AppKit NSSlider / SwiftUI Slider
빠른 비교
| UI 패턴 | 이런 경우에 가장 좋아요 | 대상 아님 | 코드에서 사용된 이름 |
|---|---|---|---|
| macOS SteppermacOS Stepper | 명확한 한계와 작은 단계를 가진 숫자용으로 사용하세요. 사람들은 한두 단계씩 변경할 때 가장 잘 작동합니다. | 너무 넓거나 부드러운 범위와 크고 빠른 변화는 피하세요. 사람들이 정확한 값을 입력하거나 비교해야 한다면 숫자 입력창을 추가하세요. | AppKit NSStepper / SwiftUI Stepper |
| macOS SlidermacOS Slider | 범위를 드래그하고 한 번에 결과를 확인하는 것이 도움이 될 때 사용하세요. 부드러운 범위나 체크와 키보드 키로 명확한 단계를 지원하세요. | 범주, 무제한 범위 또는 안전-critical 정밀도에 이를 사용하지 마세요. 사람이 정확한 값을 반복해야 할 경우 일치하는 숫자 필드를 추가하세요. | AppKit NSSlider / SwiftUI Slider |
출시하기 전에
- 01
그 사람이 해야 할 일을 적으세요.
- 02
키보드, 포커스, 터치, 확대/축소, 로딩, 비어 있음, 오류 상태를 테스트하세요.
- 03
사람들이 마우스 오버나 동작 없이 동일한 정보를 얻을 수 있도록 하세요.
- 04
작은 화면과 큰 화면에서 실제 콘텐츠로 테스트하세요.
비교 요청 복사 가능
팀이 패턴 사이에서 선택하는 데 도움이 필요할 때 이것을 복사하세요.
실제 사용자 흐름에 가장 적합한 패턴을 macOS Stepper (macOS Stepper)、macOS Slider (macOS Slider)에서 선택하세요. 이 규칙 사용: Stepper는 정해진 단계로 숫자를 바꿔. Slider는 범위 안에서 원하는 위치를 고르게 해. 작업, 콘텐츠 양, 흐름 중단 비용을 기록하세요. 키보드, 터치, 로딩, 오류, 축소 동작을 확인하세요. 선택 이유를 설명한 후 프로젝트 디자인 시스템으로 가장 작은 접근 가능한 버전을 만드세요.