슬라이더(디자인 기본 사항)

아티클
06/13/2023

참고

이 디자인 가이드는 Windows 7용으로 만들어졌으며 최신 버전의 Windows용으로 업데이트되지 않았습니다. 지침의 대부분은 여전히 원칙으로 적용되지만 프레젠테이션 및 예제에는 현재 디자인 지침이 반영되지 않습니다.

사용자는 슬라이더를 사용하여 연속 값 범위 중에서 선택할 수 있습니다. 슬라이더에는 범위를 표시하는 막대와 현재 값을 표시하는 표시기가 있습니다. 선택적 눈금 표시는 값을 표시합니다.

막대, 슬라이더 및 눈금 표시를 보여 주는 그림

일반적인 슬라이더입니다.

참고

레이아웃과 관련된 지침은 별도의 문서에 제공됩니다.

올바른 컨트롤인가요?

사용자가 정의된 연속 값(예: 볼륨 또는 밝기) 또는 불연속 값 범위(예: 화면 해상도 설정)를 설정할 수 있도록 하려면 슬라이더를 사용합니다.

슬라이더는 숫자 값이 아닌 상대적 수량의 경우 유용한 방법입니다. 예를 들어, 값을 2 또는 5로 설정하는 것이 아니라 오디오 볼륨을 낮게 또는 중간으로 설정하고자 하는 경우가 있습니다.

결정하기 전에 다음 사항을 고려합니다.

설정이 상대 수량처럼 보이나요? 그렇지 않은 경우 라디오 단추 또는 드롭다운 또는 단일 선택 목록을 사용합니다.
설정이 정확하고 알려진 숫자 값인가요? 그렇다면 숫자 텍스트 상자를 사용합니다.
설정을 변경하면 어떤 효과가 있는지에 대해 즉각적인 피드백을 받게 되면 사용자에게 도움이 되나요? 그렇다면 슬라이더를 사용합니다. 예를 들어 사용자는 색상, 채도 및 광도 값의 변경 효과를 즉시 확인함으로써 색상을 더 쉽게 선택할 수 있습니다.
설정에서 4개 이상의 값으로 이루어진 범위를 사용하나요? 그렇지 않다면 라디오 단추를 사용합니다.
사용자가 값을 변경할 수 있나요? 슬라이더는 사용자 조작을 위한 것입니다. 사용자가 값을 변경할 수 없는 경우 읽기 전용 텍스트 상자를 대신 사용합니다.

슬라이더 또는 숫자 텍스트 상자가 가능한 경우 다음과 같은 경우 숫자 텍스트 상자를 사용합니다.

화면 공간이 비좁은 경우
사용자는 키보드를 사용하는 것을 선호할 수 있습니다.

다음 경우에는 슬라이더를 사용합니다.

즉각적인 피드백이 사용자에게 도움이 되는 경우

지침

자연스러운 방향을 사용합니다. 예를 들어, 슬라이더가 정상적으로 세로로 표시되는 값(예, 온도)을 표현하는 경우에는 세로 방향을 사용합니다.
사용자의 문화권을 반영하도록 슬라이더의 방향을 지정합니다. 예를 들어 서양 문화권은 왼쪽에서 오른쪽으로 읽기 때문에 가로 슬라이더의 경우 범위의 아래쪽 끝을 왼쪽에, 오른쪽에는 하이 엔드를 배치합니다. 오른쪽에서 왼쪽으로 읽는 문화권의 경우 반대로 읽습니다.
사용자가 원하는 값을 쉽게 설정할 수 있도록 컨트롤 크기를 조정합니다. 불연속 값이 포함된 설정의 경우 마우스를 사용하여 어떤 값이든 쉽게 선택할 수 있도록 만듭니다.
값 범위가 크고 사용자가 범위의 한쪽 끝에서 값을 선택할 가능성이 높은 경우 비선형 눈금을 사용하는 것이 좋습니다. 예를 들어 시간 값은 1분, 1시간, 1일 또는 1개월일 수 있습니다.
실용적일 때마다 사용자가 선택하는 동안 또는 그 후에 즉각적인 피드백을 제공합니다. 예를 들어 결과 오디오 볼륨을 나타내기 위해 Microsoft Windows 볼륨 컨트롤에 경고음이 발생합니다.
레이블을 사용하여 값의 범위를 표시합니다.

예외: 슬라이더가 세로 방향이고 위쪽 레이블이 최대값, 높음, 더 보기 또는 동등한 경우 의미가 명확하기 때문에 다른 레이블을 생략할 수 있습니다.

이 예제에서 슬라이더의 세로 방향은 범위 레이블을 불필요하게 만듭니다.
사용자가 설정의 대략적인 값을 알아야 하는 경우 눈금 표시를 사용합니다.
사용자가 선택한 설정의 정확한 값을 알아야 하는 경우 눈금 표시 및 값 레이블을 사용합니다. 사용자가 설정을 이해하기 위해 단위를 알아야 하는 경우 항상 값 레이블을 사용합니다.

이 예제에서는 레이블을 사용하여 선택한 값을 명확하게 나타냅니다.
가로 방향 슬라이더의 경우 눈금 표시를 슬라이더 아래에 배치합니다. 세로 방향 슬라이더의 경우 서양 문화권의 오른쪽에 눈금 표시를 배치합니다. 오른쪽에서 왼쪽으로 읽는 문화권의 경우 반대의 작업을 수행합니다.
관계가 명확해지도록 값 레이블을 슬라이더 컨트롤 아래에 완전히 배치합니다.

잘못된 예:

이 예제에서는 값 레이블이 슬라이더 아래에 정렬되지 않습니다.
슬라이더를 사용하지 않도록 설정하는 경우 연결된 레이블도 사용하지 않도록 설정합니다.
동일한 설정에 슬라이더와 숫자 텍스트 상자를 모두 사용하지 마세요. 더 적절한 컨트롤만 사용합니다.

예외: 사용자에게 즉각적인 피드백과 정확한 숫자 값을 설정하는 기능이 모두 필요한 경우 두 컨트롤을 모두 사용합니다.
슬라이더를 진행률 표시기로 사용하지 마세요.
슬라이더 표시기의 크기를 기본 크기에서 변경하지 마세요.

잘못된 예:

이 예제에서는 기본값보다 작은 크기가 사용됩니다.

올바름:

이 예제에서는 기본 크기가 사용됩니다.
모든 눈금 표시에 레이블을 지정하지 마세요.