From Design pattern
Jump to: navigation, search
 
(41 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
Wheel은 숫자를 입력하거나 항목을 선택 할 때 사용되며, 주로 날짜와 시간의 숫치를 입력할 때 사용되는 패턴이다. Pickers라고도 불려지며, 화면의 Wheel을 상하로 움직여 원하는 수치를 찾아 입력한다.
  
{{#css:
+
=== With this pattern, we can solve... ===
#mw-content-text h3 span {
+
font-weight: 600;
+
padding-left: 0px;
+
}
+
  
.mw-headline {
+
앱에서 특정한 숫자나 항목을 입력하기 위한 패턴이 필요하다. Wheel은 원하는 숫자나 항목을 쉽게 보고 입력할 수 있는 기능을 제공한다. 입력가능한 범위나 항목에 한계를 가지고 있어 사용자가 부적절한 값을 입력할 가능성이 없다.
font-weight: 600;
+
}
+
  
span.mw-editsection {
+
* Wheel은 원하는 숫자나 항목을 입력할 때, 선택된 숫자나 항목의 이전과 이후의 정보를 제공한다.
font-weight: 200;
+
* 각 입력란에 대하여 상하로 Drag하여 Wheel을 회전 시켜 원하는 숫자나 항목을 입력한다.
position: relative;
+
float:right;
+
margin-right: 25px
+
}
+
  
span.mw-editsection a {
 
font-weight: 200;
 
}
 
  
.art-subpage {
+
=== Example : iOS_TIME Alarm===
background: #F7F7F7;
+
[[File:Wheel3.jpg]]
}
+
  
#mw-content-text p {
+
----
padding-top: 0px;
+
padding-bottom: 6px;
+
}
+
  
.mw-content-ltr ul {
+
== Date and time pickers ==
margin: 0.3em 0 0 42px;
+
}
+
  
 +
=== iOS_Map my run===
 +
{{#Widget:Vimeo|id=95776842|width=300|height=533}}
  
hr {
+
=== iOS_My fitness pal ===
margin-top: 0px;
+
{{#Widget:Vimeo|id=95776747|width=300|height=533}}
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 {
+
=== iOS_TIME Alarm ===
padding-left: 0px;
+
{{#Widget:Vimeo|id=96496729|width=300|height=533}}
-->
+
}
+
  
}}
+
=== iOS_Smart Alarm ===
 +
{{#Widget:Vimeo|id=93367959|width=300|height=533}}
  
Color palette는 색을 선택 할 때 사용하는 pattern이다. 주로 이미지작업을 하거나 필기를 할 때 원하는 색을 선택하여 입력할 때 사용된다.
+
=== iOS_Evernote ===
 +
{{#Widget:Vimeo|id=96605484|width=300|height=541}}
  
색을 선택하는 Palette의 종류에 따라 구분이 가능한데, 주로 대표색을 선택하고 대표색에 해당하는 Palette에서 Tab을 통해서 특정 위치의 색을 선택하는 방식이 사용되며, 색을 선택한 뒤 그 색에 대한 그라데이션 바가 나타나고 Drag를 통해서 원하는 위치의 색을 선택하는 방식도 사용된다.
+
=== iOS_지하철 ===
 +
{{#Widget:Vimeo|id=93367655|width=395|height=533}}
  
=== With this pattern, we can solve... ===
+
=== iOS_Sunrise Calendar ===
 +
{{#Widget:Vimeo|id=93939088|width=533|height=395}}
  
디지털기기의 스크린이 발전함에 따라 이미지작업을 하거나 필기를 할 때 원하는 색을 선택하기 위한 pattern이 필요하다. Color palette는 원하는 색을 쉽게 보고 선택할 수 있는 기능을 제공한다.
+
=== Android_Calendar ===
 +
{{#Widget:Vimeo|id=96420713|width=300|height=541}}
  
* Color palette는 원하는 색을 입력하기 위하여 색을 보고 선택할 수 있는 공간을 가지고 있다.
 
* 사용자가 입력을 위해 선택한 색을 화면에서 표시해줌으로, 입력될 색에 대한 정보를 제공한다.
 
* Color palette는 기존의 데스크탑에서 사용되던 일러스트툴과 유사한 방식을 사용하였다.
 
 
=== Example : 495번 사례 ===
 
{{#Widget:Vimeo|id=93374681|width=533|height=395|start=4s}}
 
 
----
 
----
  
== Color palette ==
+
== Etc ==
<div id="sun-col">
+
 
+
=== 496번 사례 ===
+
* 원형의 색채 메뉴와 색깔 띠 형태의 명도 메뉴, 슬라이더 형태의 채도 메뉴에서 원하는 위치를 tap하여 색채, 명도, 채도의 조합에 따라 원하는 색깔을 선택한다. drag를 할 경우 색깔의 변화를 점진적으로 본다.
+
{{#Widget:Vimeo|id=93374683|width=533|height=395}}
+
 
+
=== 280번 사례 ===
+
{{#Widget:Vimeo|id=95488541|width=300|height=380}}
+
 
+
=== 382번 사례 ===
+
* 기존 색상이 있는 팔레트에 다른 색상을 올려 시계반대방향으로 돌리는 정도에 따라 두 색상이 섞인다.
+
{{#Widget:Vimeo|id=93373874|width=533|height=395}}
+
</div>
+
 
+
[[Category:Enter a continuous value]]
+
 
+
 
+
 
+
 
+
 
+
wheel 형태의 목록을 drag해서 원하는 값을 입력한다.
+
 
+
== Example ==
+
== Pickers ==
+
 
+
=== IOS_TIME Alarm===
+
{{#Widget:Vimeo|id=96496729|width=300|height=533}}
+
 
+
=== 37번 사례 ===
+
* 지하철 이동 시간을 볼 때, 열차의 시간이 나열된 wheel을 위아래로 drag하여 확인하고자 하는 시간을 입력한다.
+
<videoflash type="vimeo">93367655|300|405</videoflash>
+
 
+
=== 345번 사례 ===
+
* 알람을 맞출 때, 시와 분의 휠을 각각 drag하여 시간을 맞춘다.
+
<videoflash type="vimeo">93367959|300|405</videoflash>
+
  
=== 215번 사례 ===
+
=== Android_Noom ===
* 사례 설명 입력 예정
+
{{#Widget:Vimeo|id=96421017|width=300|height=541}}
<videoflash type="vimeo">93372820|300|405</videoflash>
+
  
=== 579번 사례 ===
+
=== iOS_Mixology™ ===
* 달력에 세부일정을 넣기 위해 spinner 에서 시간을 선택한다.
+
{{#Widget:Vimeo|id=93372820|width=395|height=533}}
<videoflash type="vimeo">93939088|533|395</videoflash>
+
  
[[Category:Enter a continuous value]]
+
[[Category:Enter continuous values]]

Latest revision as of 23:08, 24 July 2014

Wheel은 숫자를 입력하거나 항목을 선택 할 때 사용되며, 주로 날짜와 시간의 숫치를 입력할 때 사용되는 패턴이다. Pickers라고도 불려지며, 화면의 Wheel을 상하로 움직여 원하는 수치를 찾아 입력한다.

With this pattern, we can solve...

앱에서 특정한 숫자나 항목을 입력하기 위한 패턴이 필요하다. Wheel은 원하는 숫자나 항목을 쉽게 보고 입력할 수 있는 기능을 제공한다. 입력가능한 범위나 항목에 한계를 가지고 있어 사용자가 부적절한 값을 입력할 가능성이 없다.

  • Wheel은 원하는 숫자나 항목을 입력할 때, 선택된 숫자나 항목의 이전과 이후의 정보를 제공한다.
  • 각 입력란에 대하여 상하로 Drag하여 Wheel을 회전 시켜 원하는 숫자나 항목을 입력한다.


Example : iOS_TIME Alarm

Wheel3.jpg


Date and time pickers

iOS_Map my run

iOS_My fitness pal

iOS_TIME Alarm

iOS_Smart Alarm

iOS_Evernote

iOS_지하철

iOS_Sunrise Calendar

Android_Calendar


Etc

Android_Noom

iOS_Mixology™