From Design pattern
Jump to: navigation, search
Line 76: Line 76:
 
----
 
----
  
== Color palette ==
+
== Wheel(Picker) ==
 
<div id="sun-col">
 
<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>
 
 
 
 
 
 
 
 
wheel 형태의 목록을 drag해서 원하는 값을 입력한다.
 
 
== Example ==
 
== Pickers ==
 
 
 
  
 
=== 37번 사례 ===
 
=== 37번 사례 ===
* 지하철 이동 시간을 볼 때, 열차의 시간이 나열된 wheel을 위아래로 drag하여 확인하고자 하는 시간을 입력한다.
+
{{#Widget:Vimeo|id=93367655|width=300|height=405}}
<videoflash type="vimeo">93367655|300|405</videoflash>
+
  
 
=== 345번 사례 ===
 
=== 345번 사례 ===
* 알람을 맞출 때, 시와 분의 휠을 각각 drag하여 시간을 맞춘다.
+
{{#Widget:Vimeo|id=93367959|width=300|height=405}}
<videoflash type="vimeo">93367959|300|405</videoflash>
+
  
 
=== 215번 사례 ===
 
=== 215번 사례 ===
* 사례 설명 입력 예정
+
{{#Widget:Vimeo|id=93372820|width=300|height=405}}
<videoflash type="vimeo">93372820|300|405</videoflash>
+
  
 
=== 579번 사례 ===
 
=== 579번 사례 ===
* 달력에 세부일정을 넣기 위해 spinner 에서 시간을 선택한다.
+
{{#Widget:Vimeo|id=93939088|width=533|height=395}}
<videoflash type="vimeo">93939088|533|395</videoflash>
+
</div>
  
 
[[Category:Enter a continuous value]]
 
[[Category:Enter a continuous value]]

Revision as of 19:00, 27 May 2014


Wheel은 숫자를 입력하거나 항목을 선택 할 때 사용하는 pattern이다. 주로 날짜와 시간을 입력할 때 사용된다.

색을 선택하는 Palette의 종류에 따라 구분이 가능한데, 주로 대표색을 선택하고 대표색에 해당하는 Palette에서 Tab을 통해서 특정 위치의 색을 선택하는 방식이 사용되며, 색을 선택한 뒤 그 색에 대한 그라데이션 바가 나타나고 Drag를 통해서 원하는 위치의 색을 선택하는 방식도 사용된다.

With this pattern, we can solve...

디지털기기의 스크린이 발전함에 따라 이미지작업을 하거나 필기를 할 때 원하는 색을 선택하기 위한 pattern이 필요하다. Color palette는 원하는 색을 쉽게 보고 선택할 수 있는 기능을 제공한다.

  • Color palette는 원하는 색을 입력하기 위하여 색을 보고 선택할 수 있는 공간을 가지고 있다.
  • 사용자가 입력을 위해 선택한 색을 화면에서 표시해줌으로, 입력될 색에 대한 정보를 제공한다.
  • Color palette는 기존의 데스크탑에서 사용되던 일러스트툴과 유사한 방식을 사용하였다.

Example : iOS_TIME Alarm


Wheel(Picker)

37번 사례

345번 사례

215번 사례

579번 사례