|
|
| Line 69: |
Line 69: |
| | * Slider는 특정 범위안의 현재값을 상대적으로 파악할 수 있다. | | * Slider는 특정 범위안의 현재값을 상대적으로 파악할 수 있다. |
| | | | |
| − | === Example : iPhone_Tune Player === | + | === Example : iPod 4th === |
| − | {{#Widget:Vimeo|id=95246748|width=300|height=405|start=4s}} | + | {{#Widget:Vimeo|id=95703750|width=300|height=533|start=4s}} |
| | | | |
| | ---- | | ---- |
| | | | |
| − | == Slider(Horizontal Slider) == | + | == Dial == |
| − | <div id="sun-col">
| + | |
| − | | + | |
| − | === Android_Noom Diet Coach ===
| + | |
| − | {{#Widget:Vimeo|id=93361639|width=300|height=455}}
| + | |
| − | | + | |
| − | === iPhone_My Wonderful Days ===
| + | |
| − | * Slider bar의 조절점을 좌우로 drag하여, 감정상태를 입력한다.
| + | |
| − | {{#Widget:Vimeo|id=94743852|width=300|height=533}}
| + | |
| − | | + | |
| − | === iPad_Adobe Photoshop Express ===
| + | |
| − | * Slider bar의 조절점을 좌우로 drag하여 사진의 밝기,명도,대비 등을 입력한다.
| + | |
| − | {{#Widget:Vimeo|id=93044156|width=300|height=405}}
| + | |
| − | | + | |
| − | === iPhone_Korailtalk ===
| + | |
| − | * 승차인원을 선택하는 화면에서, 어른, 어린이, 경로의 각 항목별로 Bar 위에서 좌우로 drag하면 해당하는 숫자만큼의 사람 아이콘이 나온다.
| + | |
| − | {{#Widget:Vimeo|id=93044867|width=300|height=449}}
| + | |
| − | | + | |
| − | === iPad_Booklip ===
| + | |
| − | * 랭킹점수를 조절하면 점수에 맞는 추천글을 선택하여 책 추천도를 입력한다.
| + | |
| − | {{#Widget:Vimeo|id=93938326|width=300|height=405}}
| + | |
| − | | + | |
| − | === Andriod_ARTPOP ===
| + | |
| − | * 3차원 객체의 표면에 관련된 색상, 재질 등 다양한 효과의 항목이 쓰여진 Slider 위 아이콘을 좌우로 Drag하여 조절한다.
| + | |
| − | | + | |
| − | === Andriod_ARTPOP ===
| + | |
| − | * 3차원 객체의 겉모양에 관련된 다양한 항목이 쓰여진 Slider 위 아이콘을 좌우로 Drag하여 조절한다.
| + | |
| − | | + | |
| − | ----
| + | |
| − | | + | |
| − | == Slider(Vertical Slider) ==
| + | |
| − | <div id="sun-col">
| + | |
| − | | + | |
| − | === Android_Candy Camera ===
| + | |
| − | {{#Widget:Vimeo|id=93362374|width=300|height=480}}
| + | |
| − | | + | |
| − | === Apple CarPlay ===
| + | |
| − | * slide bar를 drag하여 차량 내부온도를 조절한다.
| + | |
| − | [[File:Bmw_scolling.jpeg|665px]]
| + | |
| − | | + | |
| − | ----
| + | |
| − | | + | |
| − | == Slider(Circle Slider) ==
| + | |
| | <div id="sun-col"> | | <div id="sun-col"> |
| | | | |
| | === iPhone_Alarmmon === | | === iPhone_Alarmmon === |
| | {{#Widget:Vimeo|id=93552407|width=300|height=533}} | | {{#Widget:Vimeo|id=93552407|width=300|height=533}} |
| − |
| |
| − | === iPod 4th ===
| |
| − | {{#Widget:Vimeo|id=95703750|width=300|height=533}}
| |
| − |
| |
| − | ----
| |
| − |
| |
| − | == Slider(Invisible Slider) ==
| |
| − | <div id="sun-col">
| |
| − |
| |
| − | === 406번 사례 ===
| |
| − | {{#Widget:Vimeo|id=94740404|width=665|height=374}}
| |
| − |
| |
| − | === 310번 사례 ===
| |
| − | {{#Widget:Vimeo|id=93367955|width=300|height=405}}
| |
| − |
| |
| − | === 354번 사례 ===
| |
| − | * 재생중인 영상화면에서, 위로 drag하여 현재 속도보다 0.1배속 더 빠르게, 아래로 drag하여 0.1배속 더 느리게 재생속도를 조절한다.
| |
| − | {{#Widget:Vimeo|id=93368392|width=533|height=330}}
| |
| − |
| |
| − | === 31번 사례 ===
| |
| − | * 손을 위로 drag 하면 현재시간을 기준으로 움직인 시간만큼의 날씨와 기온이 어떻게 변화하는지 보인다.
| |
| − | * 손을 때면 현재시간으로 돌아가며, 배경 색은 그 시간 하늘의 색을 나타낸다.
| |
| − | {{#Widget:Vimeo|id=93044690|width=300|height=449}}
| |
| − |
| |
| − | === 624번 사례 ===
| |
| − | {{#Widget:Vimeo|id=94636812|width=533|height=303}}
| |
| − |
| |
| − |
| |
| − | === 187번 사례 ===
| |
| − | * 화면을 위에서 아래로 drag하면, drag한 만큼의 길이와 면적이 늘어나며 설정시간의 길이만큼 입력된다.
| |
| − | {{#Widget:Vimeo|id=95488542|width=300|height=500}}
| |
| − |
| |
| − | === 515번 사례 ===
| |
| − | * 사례 설명 입력 예정
| |
| − | 업로드중
| |
| | | | |
| | </div> | | </div> |
| | | | |
| | [[Category:Enter a continuous value]] | | [[Category:Enter a continuous value]] |
Slider는 스피커 볼륨이나 화면의 밝기와 같은 어플리케이션에 적용될 수 있는 값을 조정하는 패턴이다. 주로 Slider 이미지의 값의 위치와 바로 적용되어 보여지는 값이 함께 변화한다. 사용자는 최소값과 최대값이 정해진 연속된 범위의 값 사이에서 현재값을 나타내며 값을 변경할 수 있는 값 조절점을 움직이는 형태로 Slider를 조작한다.
app에서 사용자가 원하는 값를 입력하기 위한 pattern이 필요하다. Slider는 연속된 값 중 원하는 값을 선택하여 입력 할 수 있는 기능을 제공한다. 입력 가능한 범위를 모르는 상태에서 입력하는 상황을 막을 수 있어 사용자가 부적절한 값을 입력할 가능성이 없다.