From Design pattern
Jump to: navigation, search
(Created page with "Slider는 볼륨이나 화면의 밝기와 같은 값을 조정하는 패턴이다. 대부분의 경우 Slider 이미지의 값의 위치와 바로 적용되어 보여지는 ...")
 
m (Admin8 moved page Double Slider to Double slider without leaving a redirect)
 
(20 intermediate revisions by one user not shown)
Line 1: Line 1:
Slider는 볼륨이나 화면의 밝기와 같은 값을 조정하는 패턴이다. 대부분의 경우 Slider 이미지의 값의 위치와 바로 적용되어 보여지는 값이 함께 변화한다.
+
Double slider는 최소값과 최대값 사이에서 일정한 범위를 입력하기 위한 패턴이다. 대부분의 경우 Double slider 이미지 값의 범위가 바로 적용되어 결과값이 함께 변화한다. [[Slider]]와 다르게 최소값과 최대값을 설정할 수 있게 되어 있다.  
  
최소값과 최대값이 정해진 연속된 범위의 값 사이에서 조절점을 움직이는 형태로 Slider를 조작한다. 주로 Horizontal Slider방식이 사용되며, Slider의 경우 수평형, 수직형, 원형 및 화면전체를 이용한 형태가 존재한다.
+
최소값과 최대값이 정해진 연속된 범위의 값 사이에서 최소값 조절점과 최대값 조절점을 움직이는 형태로 Double slider를 조작한다. 주로 Horizontal double slider방식이 사용된다.
  
 
=== With this pattern, we can solve... ===
 
=== With this pattern, we can solve... ===
앱에서 사용자가 원하는 값를 입력하기 위한 패턴이 필요하다. Slider는 연속된 값 중 원하는 값을 선택하여 입력 할 수 있는 기능을 제공한다. 입력 가능한 범위를 모르는 상태에서 입력하는 상황을 막을 수 있어 사용자가 부적절한 값을 입력할 가능성이 없다.
+
앱에서 사용자가 원하는 값를 입력하기 위한 패턴이 필요하다. Double slider는 연속된 값 중 원하는 범위의 값을 선택하여 입력 할 수 있는 기능을 제공한다. 입력 가능한 범위를 모르는 상태에서 입력하는 상황을 막을 수 있어 사용자가 부적절한 값을 입력할 가능성이 없다.
  
* Slider는 drag를 통해 원하는 연속된 값을 부드럽게 입력할 수 있다.
+
* Double slider는 drag를 통해 원하는 연속된 값의 범위를 부드럽게 입력할 수 있다.
* Slider는 특정 범위안의 현재값을 상대적으로 파악할 수 있다.
+
* Double slider는 특정 범위안의 현재 범위값을 상대적으로 파악할 수 있다.
  
----
+
=== Example : iOS_Etsy ===
 +
[[File:Doubleslider2.jpg]]
  
== Slider (Control volume/temperature) ==
 
 
=== iOS_Tune Player ===
 
{{#Widget:Vimeo|id=96874966|width=300|height=450}}
 
 
=== Android_MX Player ===
 
{{#Widget:Vimeo|id=94636812|width=533|height=303}}
 
 
=== Apple CarPlay ===
 
* slide bar를 drag하여 차량 내부온도를 조절한다.
 
[[File:Bmw_scolling.jpeg|665px]]
 
  
 
----
 
----
== Slider (Control brightness) ==
 
 
=== Android_Candy Camera ===
 
{{#Widget:Vimeo|id=93362374|width=300|height=480}}
 
 
=== iOS_Clocks ===
 
{{#Widget:Vimeo|id=94740404|width=665|height=374}}
 
 
=== iOS_리디스토리 ===
 
*화면을 위로 drag하면 밝게, 아래로 drag하면 어둡게 조절된다.
 
{{#Widget:Vimeo|id=93367955|width=300|height=400}}
 
 
===iOS_손전등 ===
 
{{#Widget:Vimeo|id=96666725|width=300|height=533}}
 
 
----
 
== Slider (Set time) ==
 
 
=== iOS_Alarmmon ===
 
{{#Widget:Vimeo|id=93552407|width=300|height=533}}
 
 
=== iOS_Solar ===
 
* 손을 위로 drag 하면 현재시간을 기준으로 움직인 시간만큼의 날씨와 기온이 어떻게 변화하는지 보인다.
 
* 손을 때면 현재시간으로 돌아가며, 배경 색은 그 시간 하늘의 색을 나타낸다.
 
{{#Widget:Vimeo|id=93044690|width=300|height=449}}
 
 
=== iOS_Peek Calendar ===
 
* 화면을 위에서 아래로 drag하면, drag한 만큼의 길이와 면적이 늘어나며 설정시간의 길이만큼 입력된다.
 
{{#Widget:Vimeo|id=95488542|width=300|height=533}}
 
 
----
 
== Slider (Enter number) ==
 
 
=== Android_Noom Diet Coach ===
 
{{#Widget:Vimeo|id=93361639|width=300|height=480}}
 
 
=== iOS_Korailtalk ===
 
{{#Widget:Vimeo|id=93044867|width=300|height=449}}
 
 
----
 
 
== Slider (Enter relative value)==
 
 
=== iOS_Booklip ===
 
{{#Widget:Vimeo|id=93938326|width=300|height=405}}
 
 
=== iOS_My Wonderful Days ===
 
{{#Widget:Vimeo|id=94743852|width=300|height=533}}
 
 
----
 
 
==Slider (Set content's value)==
 
=== iOS_Adobe Photoshop Express ===
 
* Slider bar의 조절점을 좌우로 drag하여 사진의 밝기,명도,대비 등을 입력한다.
 
{{#Widget:Vimeo|id=93044156|width=300|height=400}}
 
 
=== iOS_SketchbookX ===
 
{{#Widget:Vimeo|id=96422968|width=300|height=405}}
 
  
=== iOS_USA TODAY ===
+
=== iOS_Etsy  ===
* 오른쪽 하단의 Slider bar의 조절점을 좌우로 drag하여 화면의 글자 크기를 조절한다.
+
{{#Widget:Vimeo|id=96422618|width=395|height=533}}
{{#Widget:Vimeo|id=96420635|width=300|height=405}}
+
  
=== iOS_EnglishFlow ===
+
=== Android_Etsy ===
* 재생중인 영상화면에서, 위로 drag하여 현재 속도보다 0.1배속 더 빠르게, 아래로 drag하여 0.1배속 더 느리게 재생속도를 조절한다.
+
{{#Widget:Vimeo|id=96420761|width=300|height=508}}
{{#Widget:Vimeo|id=93368392|width=531|height=300}}
+
  
 +
=== iOS_Fab ===
 +
{{#Widget:Vimeo|id=96422964|width=395|height=533}}
  
[[Category:Enter a continuous value]]
+
[[Category:Enter continuous values]]

Latest revision as of 01:35, 31 July 2014

Double slider는 최소값과 최대값 사이에서 일정한 범위를 입력하기 위한 패턴이다. 대부분의 경우 Double slider 이미지 값의 범위가 바로 적용되어 결과값이 함께 변화한다. Slider와 다르게 최소값과 최대값을 설정할 수 있게 되어 있다.

최소값과 최대값이 정해진 연속된 범위의 값 사이에서 최소값 조절점과 최대값 조절점을 움직이는 형태로 Double slider를 조작한다. 주로 Horizontal double slider방식이 사용된다.

With this pattern, we can solve...

앱에서 사용자가 원하는 값를 입력하기 위한 패턴이 필요하다. Double slider는 연속된 값 중 원하는 범위의 값을 선택하여 입력 할 수 있는 기능을 제공한다. 입력 가능한 범위를 모르는 상태에서 입력하는 상황을 막을 수 있어 사용자가 부적절한 값을 입력할 가능성이 없다.

  • Double slider는 drag를 통해 원하는 연속된 값의 범위를 부드럽게 입력할 수 있다.
  • Double slider는 특정 범위안의 현재 범위값을 상대적으로 파악할 수 있다.

Example : iOS_Etsy

Doubleslider2.jpg



iOS_Etsy

Android_Etsy

iOS_Fab