Difference between revisions of "Dial knob"

Latest revision as of 22:41, 24 July 2014

Dial knob은 최소값과 최대값이 정해진 연속된 범위의 값을 조절할 때 사용하는 패턴이다. 컨트롤러가 Dial knob의 형태로 이루어져 있어, 사용자가 실생활에서 Dial knob를 조절하는 방법으로 값을 조절한다. Volume을 조정하는 경우와 Time을 설정하는 경우로 크게 나눌 수 있다.

최소값과 최대값이 정해진 연속된 범위의 값 사이에서 현재값이 위치한 부분을 drag하여 값을 조절한다. Dial 이미지의 값의 위치를 조절하면, 실시간으로 적용되어 보여지는 값이 함께 변화한다.

사용자가 원하는 값를 입력하기 위해, Dial knob은 연속된 값 중 원하는 값을 선택하여 입력 할 수 있는 기능을 제공한다. 입력 가능한 범위가 지정되어 있기 때문에, 사용자가 부적절한 값을 입력하는 상황을 방지한다. 메타포의 특성에 따라 주로 음향을 조절할 때 쓰이기 때문에 작곡 응용프로그램에서 많이 사용된다.

Dial knob은 간단한 동작을 통해 원하는 연속된 값을 부드럽게 입력할 수 있다.
Dial knob은 특정 범위안의 현재값을 상대적으로 파악할 수 있다.
Dial knob은 현실에서 사용자가 손으로 직접 dial을 잡고 좌우측으로 돌려 값을 조절하는 실제 기계의 메타포를 적용시킨 패턴이다.

Example : iOS_MIDI Knob

Control volume

iOS_MIDI Knob

Android_Volume booster

Android_Volume control

iOS_Volume dial

Set time

Android_Date wheel classic

Android_Kitchen timer

@@ Line 1: / Line 1: @@
+Dial knob은 최소값과 최대값이 정해진 연속된 범위의 값을 조절할 때 사용하는 패턴이다. 컨트롤러가 Dial knob의 형태로 이루어져 있어, 사용자가 실생활에서 Dial knob를 조절하는 방법으로 값을 조절한다. Volume을 조정하는 경우와 Time을 설정하는 경우로 크게 나눌 수 있다.
-{{#css:
+최소값과 최대값이 정해진 연속된 범위의 값 사이에서 현재값이 위치한 부분을 drag하여 값을 조절한다. Dial 이미지의 값의 위치를 조절하면, 실시간으로 적용되어 보여지는 값이 함께 변화한다.
-#mw-content-text h3 span {
-font-weight: 600;
-padding-left: 0px;
-}
-.mw-headline {
-font-weight: 600;
-}
-span.mw-editsection {
-font-weight: 200;
-position: relative;
-float:right;
-margin-right: 25px
-}
-span.mw-editsection a {
-font-weight: 200;
-}
-.art-subpage {
-background: #F7F7F7;
-}
-#mw-content-text p {
-padding-top: 0px;
-padding-bottom: 6px;
-}
-.mw-content-ltr ul {
-margin: 0.3em 0 0 42px;
-}
-hr {
-margin-top: 0px;
-margin-bottom: 0px;
-margin-left: -31px;
-width: 720px;
-border-bottom: 1px solid #E0E0DD;
-border-left: 0px;
-border-right: 0px;
-border-top: 30px solid #F7F7F7;
-}
-<!--
-#sun-col {
--webkit-column-count:2; /* Chrome, Safari, Opera */
--moz-column-count:2; /* Firefox */
-column-count:2;
-}
-#sun-col p {
-padding-left: 0px;
--->
-}
-}}
-Slider는 스피커 볼륨이나 화면의 밝기와 같은 어플리케이션에 적용될 수 있는 값을 조정하는 패턴이다. 주로 Slider 이미지의 값의 위치와 바로 적용되어 보여지는 값이 함께 변화한다. 사용자는 최소값과 최대값이 정해진 연속된 범위의 값 사이에서 현재값을 나타내며 값을 변경할 수 있는 값 조절점을 움직이는 형태로 Slider를 조작한다.
-주로 Horizontal Slider방식이 사용되며, Slider의 경우 수평형, 수직형 및 보이지 않는 형태가 존재한다.
 === With this pattern, we can solve... ===
-app에서 사용자가 원하는 값를 입력하기 위한 pattern이 필요하다. Slider는 연속된 값 중 원하는 값을 선택하여 입력 할 수 있는 기능을 제공한다. 입력 가능한 범위를 모르는 상태에서 입력하는 상황을 막을 수 있어 사용자가 부적절한 값을 입력할 가능성이 없다.
+사용자가 원하는 값를 입력하기 위해, Dial knob은 연속된 값 중 원하는 값을 선택하여 입력 할 수 있는 기능을 제공한다. 입력 가능한 범위가 지정되어 있기 때문에, 사용자가 부적절한 값을 입력하는 상황을 방지한다. 메타포의 특성에 따라 주로 음향을 조절할 때 쓰이기 때문에 작곡 응용프로그램에서 많이 사용된다.
-* Slider는 간단한 동작을 통해 원하는 연속된 값을 부드럽게 입력할 수 있다.
+* Dial knob은 간단한 동작을 통해 원하는 연속된 값을 부드럽게 입력할 수 있다.
-* Slider는 특정 범위안의 현재값을 상대적으로 파악할 수 있다.
+* Dial knob은 특정 범위안의 현재값을 상대적으로 파악할 수 있다.
+* Dial knob은 현실에서 사용자가 손으로 직접  dial을 잡고 좌우측으로 돌려 값을 조절하는 실제 기계의 메타포를 적용시킨 패턴이다.
-=== Example : iPhone_Tune Player ===
+=== Example : iOS_MIDI Knob  ===
-{{#Widget:Vimeo|id=95246748|width=300|height=405|start=4s}}
+[[File:Knob2.jpg]]
 ----
-== Slider(Horizontal Slider) ==
+== Control volume ==
-<div id="sun-col">
-=== Android_Noom Diet Coach ===
+=== iOS_MIDI Knob ===
-{{#Widget:Vimeo|id=93361639|width=300|height=455}}
+{{#Widget:Vimeo|id=96613103|width=395|height=533}}
-=== iPhone_My Wonderful Days ===
+=== Android_Volume booster ===
-* Slider bar의 조절점을 좌우로 drag하여, 감정상태를 입력한다.
+{{#Widget:Vimeo|id=96775219|width=300|height=541}}
-{{#Widget:Vimeo|id=94743852|width=300|height=533}}
-=== iPad_Adobe Photoshop Express ===
+=== Android_Volume control===
-* Slider bar의 조절점을 좌우로 drag하여 사진의 밝기,명도,대비 등을 입력한다.
+{{#Widget:Vimeo|id=96775220|width=300|height=541}}
-{{#Widget:Vimeo|id=93044156|width=300|height=405}}
-=== iPhone_Korailtalk ===
+=== iOS_Volume dial ===
-* 승차인원을 선택하는 화면에서, 어른, 어린이, 경로의 각 항목별로 Bar 위에서 좌우로 drag하면 해당하는 숫자만큼의 사람 아이콘이 나온다.
+{{#Widget:Vimeo|id=96612568|width=395|height=533}}
-{{#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) ==
+== Set time ==
-<div id="sun-col">
-=== Android_Candy Camera ===
+=== Android_Date wheel classic ===
-{{#Widget:Vimeo|id=93362374|width=300|height=480}}
+{{#Widget:Vimeo|id=96775217|width=300|height=541}}
-=== Apple CarPlay ===
+=== Android_Kitchen timer ===
-* slide bar를 drag하여 차량 내부온도를 조절한다.
+{{#Widget:Vimeo|id=96775218|width=300|height=541}}
-[[File:Bmw_scolling.jpeg|665px]]
 ----
-== Slider(Circle Slider) ==
+[[Category:Enter continuous values]]
-<div id="sun-col">
-=== iPhone_Alarmmon ===
-{{#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>
-[[Category:Enter a continuous value]]

Personal tools

Difference between revisions of "Dial knob"

Navigation menu

Navigation

Search

Tools