From Design pattern
Jump to: navigation, search
Line 96: Line 96:
 
== Toggle buttons ==
 
== Toggle buttons ==
 
<div id="sun-col">
 
<div id="sun-col">
 +
 +
=== Android_Twitter ===
 +
{{#Widget:Vimeo|id=96673515|width=300|height=541}}
 +
 +
=== Android_Twitter ===
 +
{{#Widget:Vimeo|id=96673767|width=300|height=541}}
  
 
=== iOS_Tumblr===
 
=== iOS_Tumblr===
Line 102: Line 108:
 
=== iOS_Facebook===
 
=== iOS_Facebook===
 
{{#Widget:Vimeo|id=96472854|width=300|height=533}}
 
{{#Widget:Vimeo|id=96472854|width=300|height=533}}
 
  
 
===iOS_손전등 ===
 
===iOS_손전등 ===

Revision as of 16:00, 28 May 2014


Switches/Toggle buttons는 On/Off와 마찬가지로 두 개의 상호 배타적인 옵션 중 하나를 지정하는 pattern이다.

두 개의 옵션이 함께 보여지며 좌우로 swipe하여 설정하는 경우는 switches로, 동일한 기능이지만 하나의 설정값이 보여지며 버튼을 클릭하여 다른 설정값으로 바꾸는 경우는 toggle buttons라고 불린다. toggle buttons의 경우는 두번 누를 경우 다시 처음 설정값으로 돌아온다. switches나 toggle buttons는 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 On/Off 상태를 조절한다. 이 때, 사용자가 현재 상태를 인지할 수 있는 시각적인 피드백이 함께 주어진다.

With this pattern, we can solve...

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

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

Example : iOS_gmail


Switches

iOS_Settings

Android_Settings

Android_Etsy

Android_Noom

iOS_Toggle


Toggle buttons

Android_Twitter

Android_Twitter

iOS_Tumblr

iOS_Facebook

iOS_손전등

iOS_LED Light