Difference between revisions of "Slider"
Navigation menu
From Design pattern
| Line 69: | Line 69: | ||
* Slider는 특정 범위안의 현재값을 상대적으로 파악할 수 있다. | * Slider는 특정 범위안의 현재값을 상대적으로 파악할 수 있다. | ||
---- | ---- | ||
| − | == Volume/Temperature control == | + | == Slider (Volume/Temperature control) == |
<div id="sun-col"> | <div id="sun-col"> | ||
=== iOS_Tune Player === | === iOS_Tune Player === | ||
| Line 82: | Line 82: | ||
</div> | </div> | ||
---- | ---- | ||
| − | == Brightness control == | + | == Slider (Brightness control) == |
<div id="sun-col"> | <div id="sun-col"> | ||
=== Android_Candy Camera === | === Android_Candy Camera === | ||
| Line 98: | Line 98: | ||
</div> | </div> | ||
---- | ---- | ||
| − | == Time of appointment == | + | == Slider (Time of appointment) == |
<div id="sun-col"> | <div id="sun-col"> | ||
=== iOS_Alarmmon === | === iOS_Alarmmon === | ||
| Line 114: | Line 114: | ||
</div> | </div> | ||
---- | ---- | ||
| − | == Entering Number== | + | == Slider (Entering Number) == |
<div id="sun-col"> | <div id="sun-col"> | ||
=== Android_Noom Diet Coach === | === Android_Noom Diet Coach === | ||
| Line 124: | Line 124: | ||
---- | ---- | ||
| − | == Entering relative value== | + | == Slider (Entering relative value)== |
<div id="sun-col"> | <div id="sun-col"> | ||
=== iOS_Booklip === | === iOS_Booklip === | ||
| Line 133: | Line 133: | ||
---- | ---- | ||
| − | ==Setting content's value== | + | ==Slider (Setting content's value)== |
=== iOS_Adobe Photoshop Express === | === iOS_Adobe Photoshop Express === | ||
* Slider bar의 조절점을 좌우로 drag하여 사진의 밝기,명도,대비 등을 입력한다. | * Slider bar의 조절점을 좌우로 drag하여 사진의 밝기,명도,대비 등을 입력한다. | ||
Revision as of 13:40, 1 June 2014
Slider는 볼륨이나 화면의 밝기와 같은 값을 조정하는 pattern이다. 대부분의 경우 Slider 이미지의 값의 위치와 바로 적용되어 보여지는 값이 함께 변화한다.
최소값과 최대값이 정해진 연속된 범위의 값 사이에서 조절점을 움직이는 형태로 Slider를 조작한다. 주로 Horizontal Slider방식이 사용되며, Slider의 경우 수평형, 수직형, 원형 및 화면전체를 이용한 형태가 존재한다.
Contents
With this pattern, we can solve...
app에서 사용자가 원하는 값를 입력하기 위한 pattern이 필요하다. Slider는 연속된 값 중 원하는 값을 선택하여 입력 할 수 있는 기능을 제공한다. 입력 가능한 범위를 모르는 상태에서 입력하는 상황을 막을 수 있어 사용자가 부적절한 값을 입력할 가능성이 없다.
- Slider는 drag를 통해 원하는 연속된 값을 부드럽게 입력할 수 있다.
- Slider는 특정 범위안의 현재값을 상대적으로 파악할 수 있다.
Slider (Volume/Temperature control)
iOS_Tune Player
Android_MX Player
Apple CarPlay
- slide bar를 drag하여 차량 내부온도를 조절한다.
Slider (Brightness control)
Android_Candy Camera
iOS_Clocks
iOS_리디스토리
- 화면을 위로 drag하면 밝게, 아래로 drag하면 어둡게 조절된다.
iOS_손전등
Slider (Time of appointment)
iOS_Alarmmon
iOS_Solar
- 손을 위로 drag 하면 현재시간을 기준으로 움직인 시간만큼의 날씨와 기온이 어떻게 변화하는지 보인다.
- 손을 때면 현재시간으로 돌아가며, 배경 색은 그 시간 하늘의 색을 나타낸다.
iOS_Peek Calendar
- 화면을 위에서 아래로 drag하면, drag한 만큼의 길이와 면적이 늘어나며 설정시간의 길이만큼 입력된다.
Slider (Entering Number)
Android_Noom Diet Coach
iOS_Korailtalk
Slider (Entering relative value)
iOS_Booklip
iOS_My Wonderful Days
Slider (Setting content's value)
iOS_Adobe Photoshop Express
- Slider bar의 조절점을 좌우로 drag하여 사진의 밝기,명도,대비 등을 입력한다.
iOS_SketchbookX
iOS_USA TODAY
- 오른쪽 하단의 Slider bar의 조절점을 좌우로 drag하여 화면의 글자 크기를 조절한다.
iOS_EnglishFlow
- 재생중인 영상화면에서, 위로 drag하여 현재 속도보다 0.1배속 더 빠르게, 아래로 drag하여 0.1배속 더 느리게 재생속도를 조절한다.