From Design pattern
Jump to: navigation, search
Line 129: Line 129:
 
* 터치휠이 위치한 부분을 시계반대방향 혹은 시계방향으로 drag하여 해당 항목의 위아래에 위치한 항목으로 활성영역을 변경하거나 음량을 조절한다.
 
* 터치휠이 위치한 부분을 시계반대방향 혹은 시계방향으로 drag하여 해당 항목의 위아래에 위치한 항목으로 활성영역을 변경하거나 음량을 조절한다.
 
<videoflash type="vimeo">95703750|300|533</videoflash>
 
<videoflash type="vimeo">95703750|300|533</videoflash>
 +
 +
----
 +
== Slider(Invisible Slider) ==
 +
<div id="sun-col">
 +
 +
=== 187번 사례 ===
 +
* 화면을 위에서 아래로 drag하면, drag한 만큼의 길이와 면적이 늘어나며 설정시간의 길이만큼 입력된다.
 +
<videoflash type="vimeo">95488542|300|500</videoflash>
 +
 +
=== 406번 사례 ===
 +
* 화면위를 위아래로 drag 하여 화면 밝기를 조절한다.
 +
* 화면상에 컨트롤 메뉴를 최소화 해야 하는 상황에서 쓰여진다.
 +
<videoflash type="vimeo">94740404|665|374</videoflash>
 +
 +
=== 310번 사례 ===
 +
* 화면 자체가 밝기조절 Slider를 대신하여, 그 위에서 위로 drag하여 더 밝게, 아래로 drag하여 더 어둡게 밝기를 조절한다.
 +
* drag 시작점을 기준으로 움직인 거리에 따라 밝기 변화의 정도가 달라진다.
 +
<videoflash type="vimeo">93367955|300|405</videoflash>
 +
 +
=== 354번 사례 ===
 +
* 재생중인 영상화면에서, 위로 drag하여 현재 속도보다 0.1배속 더 빠르게, 아래로 drag하여 0.1배속 더 느리게 재생속도를 조절한다.
 +
<videoflash type="vimeo">93368392|533|300</videoflash>
 +
 +
=== 31번 사례 ===
 +
* 손을 위로 drag 하면 현재시간을 기준으로 움직인 시간만큼의 날씨와 기온이 어떻게 변화하는지 보인다.
 +
* 손을 때면 현재시간으로 돌아가며, 배경 색은 그 시간 해의 위치에 따른 하늘의 색을 나타낸다.
 +
<videoflash type="vimeo">93044690|300|449</videoflash>
 +
 +
=== 515번 사례 ===
 +
* 사례 설명 입력 예정
 +
업로드중
 +
 +
=== 624번 사례 ===
 +
* 화면의 왼쪽 부분을 세로로 drag하여 화면의 밝기를 조절한다. 화면의 오른쪽 부분을 세로로 drag하여 재생중인 영상의 음량을 조절한다.
 +
<videoflash type="vimeo">94636812|533|303</videoflash>
 +
</div>
  
 
[[Category:Enter a continuous value]]
 
[[Category:Enter a continuous value]]

Revision as of 17:25, 27 May 2014


Slider는 스피커 볼륨이나 화면의 밝기와 같은 어플리케이션에 적용될 수 있는 값을 조정하는 패턴이다. 주로 Slider 이미지의 값의 위치와 바로 적용되어 보여지는 값이 함께 변화한다. 사용자는 최소값과 최대값이 정해진 연속된 범위의 값 사이에서 현재값을 나타내며 값을 변경할 수 있는 값 조절점을 움직이는 형태로 Slider를 조작한다.

변화하고자 하는 값의 메타포에 따라 구분이 가능한데, 주로 Horizontal Slider방식이 사용되며, Slider의 경우 수평형, 수직형, 원형 및 보이지 않는 형태가 존재한다.

With this pattern, we can solve...

app에서 사용자가 원하는 값를 입력하기 위한 pattern이 필요하다. Slider는 연속된 값 중 원하는 값을 선택하여 입력 할 수 있는 기능을 제공한다.

  • Slider는 간단한 동작을 통해 원하는 연속된 값을 부드럽게 입력할 수 있다.
  • Slider는 특정 범위안의 현재값을 상대적으로 파악할 수 있다.

Example : iPhone_Tune Player

Slider(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하여 사진의 밝기,명도,대비 등을 입력한다.

Slider(Vertical Slider)

Android_Candy Camera

  • 화면의 슬라이드 바를 세로로 drag하여 카메라 렌즈로 들어 오는 빛의 양을 조절한다.

Samsung's Transparent Smart Window with virtual blinds

  • 유리창을 위아래로 drag 하면, 위로 올릴때 버티칼이 열리고 아래로 내리면 버티칼리 내려가며 태양광을 조절한다.

Apple CarPlay

  • slide bar를 drag하여 차량 내부온도를 조절하다

Bmw scolling.jpeg

Slider(Circle Slider)

iPhone_Alarmmon

  • circle slider의 조절점을 drag하여 알람시간을 설정한다.

iPod 4th

  • 터치휠이 위치한 부분을 시계반대방향 혹은 시계방향으로 drag하여 해당 항목의 위아래에 위치한 항목으로 활성영역을 변경하거나 음량을 조절한다.

Slider(Invisible Slider)

187번 사례

  • 화면을 위에서 아래로 drag하면, drag한 만큼의 길이와 면적이 늘어나며 설정시간의 길이만큼 입력된다.

406번 사례

  • 화면위를 위아래로 drag 하여 화면 밝기를 조절한다.
  • 화면상에 컨트롤 메뉴를 최소화 해야 하는 상황에서 쓰여진다.

310번 사례

  • 화면 자체가 밝기조절 Slider를 대신하여, 그 위에서 위로 drag하여 더 밝게, 아래로 drag하여 더 어둡게 밝기를 조절한다.
  • drag 시작점을 기준으로 움직인 거리에 따라 밝기 변화의 정도가 달라진다.

354번 사례

  • 재생중인 영상화면에서, 위로 drag하여 현재 속도보다 0.1배속 더 빠르게, 아래로 drag하여 0.1배속 더 느리게 재생속도를 조절한다.

31번 사례

  • 손을 위로 drag 하면 현재시간을 기준으로 움직인 시간만큼의 날씨와 기온이 어떻게 변화하는지 보인다.
  • 손을 때면 현재시간으로 돌아가며, 배경 색은 그 시간 해의 위치에 따른 하늘의 색을 나타낸다.

515번 사례

  • 사례 설명 입력 예정

업로드중

624번 사례

  • 화면의 왼쪽 부분을 세로로 drag하여 화면의 밝기를 조절한다. 화면의 오른쪽 부분을 세로로 drag하여 재생중인 영상의 음량을 조절한다.
Retrieved from "http://www.ixpatterns.com/index.php?title=Slider&oldid=101708"