Difference between revisions of "Slider"
Navigation menu
From Design pattern
(Created page with "Slider는 스피커 볼륨이나 화면의 밝기와 같은 어플리케이션에 적용될 수 있는 값을 조정하는 패턴이다. 주로 Slider 이미지의 값의 위...") |
|||
| Line 4: | Line 4: | ||
=== What Problem Does This Solve? === | === What Problem Does This Solve? === | ||
| − | *Slider | + | *Slider 패턴은 부드럽게 연속된 값을 조절할 수 있다. |
*Slider 패턴을 통해서 특정 범위안의 현재값을 상대적으로 파악할 수 있다. | *Slider 패턴을 통해서 특정 범위안의 현재값을 상대적으로 파악할 수 있다. | ||
| Line 10: | Line 10: | ||
*Slider 패턴은 간단한 동작을 통해 원하는 값을 설정할 수 있다. | *Slider 패턴은 간단한 동작을 통해 원하는 값을 설정할 수 있다. | ||
| − | + | === Example : iPhone_Tune Player === | |
| − | + | * Slider bar의 조절점을 좌우로 drag하여, 앱에서 재생중인 음원의 메인 볼륨과 다른 음원의 배경볼륨을 각각 설정한다. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | === | + | |
| − | * Slider bar의 조절점을 좌우로 drag하여, 앱에서 재생중인 음원의 메인 볼륨과 다른 음원의 | + | |
<videoflash type="vimeo">95246748|300|405</videoflash> | <videoflash type="vimeo">95246748|300|405</videoflash> | ||
| + | ---- | ||
| − | === | + | == Horizontal Slider == |
| + | === Android_Noom Diet Coach === | ||
* 슬라이드 바의 조절점을 가로로 drag하여 목표 걸음 수를 입력한다. | * 슬라이드 바의 조절점을 가로로 drag하여 목표 걸음 수를 입력한다. | ||
<videoflash type="vimeo">93361639|300|455</videoflash> | <videoflash type="vimeo">93361639|300|455</videoflash> | ||
| − | === | + | === iPhone_Korailtalk === |
* 승차인원을 선택하는 화면에서, 어른, 어린이, 경로의 각 항목별로 Bar 위에서 좌우로 drag하면 해당하는 숫자만큼의 사람 아이콘이 나온다. | * 승차인원을 선택하는 화면에서, 어른, 어린이, 경로의 각 항목별로 Bar 위에서 좌우로 drag하면 해당하는 숫자만큼의 사람 아이콘이 나온다. | ||
<videoflash type="vimeo">93044867|300|449</videoflash> | <videoflash type="vimeo">93044867|300|449</videoflash> | ||
| − | === | + | === iPad_Booklip === |
* 랭킹점수를 조절하면 점수에 맞는 추천글을 선택하여 책 추천도를 입력한다. | * 랭킹점수를 조절하면 점수에 맞는 추천글을 선택하여 책 추천도를 입력한다. | ||
<videoflash type="vimeo">93938326|300|405</videoflash> | <videoflash type="vimeo">93938326|300|405</videoflash> | ||
| + | === Andriod_ARTPOP === | ||
| + | * 3차원 객체의 표면에 관련된 색상, 재질 등 다양한 효과의 항목이 쓰여진 Slider 위 아이콘을 좌우로 Drag하여 조절한다. | ||
| − | === | + | === Andriod_ARTPOP === |
| − | * | + | * 3차원 객체의 겉모양에 관련된 다양한 항목이 쓰여진 Slider 위 아이콘을 좌우로 Drag하여 조절한다. |
| − | + | ||
| − | === | + | === iPhone_My Wonderful Days === |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
* Slider bar의 조절점을 좌우로 drag하여, 감정상태를 입력한다. | * Slider bar의 조절점을 좌우로 drag하여, 감정상태를 입력한다. | ||
<videoflash type="vimeo">94743852|300|533</videoflash> | <videoflash type="vimeo">94743852|300|533</videoflash> | ||
| − | + | === iPad_Adobe Photoshop Express === | |
| − | === | + | |
* Slider bar의 조절점을 좌우로 drag하여 사진의 밝기,명도,대비 등을 입력한다. | * Slider bar의 조절점을 좌우로 drag하여 사진의 밝기,명도,대비 등을 입력한다. | ||
<videoflash type="vimeo">93044156|300|405</videoflash> | <videoflash type="vimeo">93044156|300|405</videoflash> | ||
| − | + | ---- | |
| − | + | == Vertical Slider == | |
| − | + | === Android_Candy Camera === | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | == | + | |
| − | + | ||
| − | === | + | |
* 화면의 슬라이드 바를 세로로 drag하여 카메라 렌즈로 들어 오는 빛의 양을 조절한다. | * 화면의 슬라이드 바를 세로로 drag하여 카메라 렌즈로 들어 오는 빛의 양을 조절한다. | ||
<videoflash type="vimeo">93362374|300|455</videoflash> | <videoflash type="vimeo">93362374|300|455</videoflash> | ||
| − | === | + | === Samsung's Transparent Smart Window with virtual blinds === |
* 유리창을 위아래로 drag 하면, 위로 올릴때 버티칼이 열리고 아래로 내리면 버티칼리 내려가며 태양광을 조절한다. | * 유리창을 위아래로 drag 하면, 위로 올릴때 버티칼이 열리고 아래로 내리면 버티칼리 내려가며 태양광을 조절한다. | ||
<videoflash>NuoIGteFC20|665|374</videoflash> | <videoflash>NuoIGteFC20|665|374</videoflash> | ||
| − | === | + | === Apple CarPlay === |
* slide bar를 drag하여 차량 내부온도를 조절하다 | * slide bar를 drag하여 차량 내부온도를 조절하다 | ||
[[File:Bmw_scolling.jpeg|665px]] | [[File:Bmw_scolling.jpeg|665px]] | ||
| − | + | ---- | |
| − | + | == Circle Slider == | |
| − | + | === iPhone_Alarmmon === | |
| − | + | ||
| − | == | + | |
| − | === | + | |
* circle slider의 조절점을 drag하여 알람시간을 설정한다. | * circle slider의 조절점을 drag하여 알람시간을 설정한다. | ||
<videoflash type="vimeo">93552407|300|533</videoflash> | <videoflash type="vimeo">93552407|300|533</videoflash> | ||
| − | === | + | === iPot4 === |
* 터치휠이 위치한 부분을 시계반대방향 혹은 시계방향으로 drag하여 해당 항목의 위아래에 위치한 항목으로 활성영역을 변경하거나 음량을 조절한다. | * 터치휠이 위치한 부분을 시계반대방향 혹은 시계방향으로 drag하여 해당 항목의 위아래에 위치한 항목으로 활성영역을 변경하거나 음량을 조절한다. | ||
<videoflash type="vimeo">95703750|300|533</videoflash> | <videoflash type="vimeo">95703750|300|533</videoflash> | ||
Revision as of 03:02, 24 May 2014
Slider는 스피커 볼륨이나 화면의 밝기와 같은 어플리케이션에 적용될 수 있는 값을 조정하는 패턴이다. 주로 Slider 이미지의 값의 위치와 바로 적용되어 보여지는 값이 함께 변화한다. 사용자는 최소값과 최대값이 정해진 연속된 범위의 값 사이에서 현재값을 나타내며 값을 변경할 수 있는 값 조절점을 움직이는 형태로 Slider를 조작한다.
변화하고자 하는 값의 메타포에 따라 수평형, 수직형, 원형이 존재한다.
Contents
What Problem Does This Solve?
- Slider 패턴은 부드럽게 연속된 값을 조절할 수 있다.
- Slider 패턴을 통해서 특정 범위안의 현재값을 상대적으로 파악할 수 있다.
- Slider 패턴은 간단한 동작을 통해 원하는 값을 설정할 수 있다.
Example : iPhone_Tune Player
- Slider bar의 조절점을 좌우로 drag하여, 앱에서 재생중인 음원의 메인 볼륨과 다른 음원의 배경볼륨을 각각 설정한다.
Horizontal Slider
Android_Noom Diet Coach
- 슬라이드 바의 조절점을 가로로 drag하여 목표 걸음 수를 입력한다.
iPhone_Korailtalk
- 승차인원을 선택하는 화면에서, 어른, 어린이, 경로의 각 항목별로 Bar 위에서 좌우로 drag하면 해당하는 숫자만큼의 사람 아이콘이 나온다.
iPad_Booklip
- 랭킹점수를 조절하면 점수에 맞는 추천글을 선택하여 책 추천도를 입력한다.
Andriod_ARTPOP
- 3차원 객체의 표면에 관련된 색상, 재질 등 다양한 효과의 항목이 쓰여진 Slider 위 아이콘을 좌우로 Drag하여 조절한다.
Andriod_ARTPOP
- 3차원 객체의 겉모양에 관련된 다양한 항목이 쓰여진 Slider 위 아이콘을 좌우로 Drag하여 조절한다.
iPhone_My Wonderful Days
- Slider bar의 조절점을 좌우로 drag하여, 감정상태를 입력한다.
iPad_Adobe Photoshop Express
- Slider bar의 조절점을 좌우로 drag하여 사진의 밝기,명도,대비 등을 입력한다.
Vertical Slider
Android_Candy Camera
- 화면의 슬라이드 바를 세로로 drag하여 카메라 렌즈로 들어 오는 빛의 양을 조절한다.
Samsung's Transparent Smart Window with virtual blinds
- 유리창을 위아래로 drag 하면, 위로 올릴때 버티칼이 열리고 아래로 내리면 버티칼리 내려가며 태양광을 조절한다.
Apple CarPlay
- slide bar를 drag하여 차량 내부온도를 조절하다
Circle Slider
iPhone_Alarmmon
- circle slider의 조절점을 drag하여 알람시간을 설정한다.
iPot4
- 터치휠이 위치한 부분을 시계반대방향 혹은 시계방향으로 drag하여 해당 항목의 위아래에 위치한 항목으로 활성영역을 변경하거나 음량을 조절한다.