From Design pattern
Jump to: navigation, search
Line 60: Line 60:
 
Switches/Toggle buttons는 On/Off와 마찬가지로 두 개의 상호 배타적인 옵션 중 하나를 지정하는 pattern이다. 주로 두 개의 선택지를 가지고 있는 설정화면에서 사용된다.
 
Switches/Toggle buttons는 On/Off와 마찬가지로 두 개의 상호 배타적인 옵션 중 하나를 지정하는 pattern이다. 주로 두 개의 선택지를 가지고 있는 설정화면에서 사용된다.
  
두 개의 옵션이 함께 보여지며 좌우로 swipe하여 설정하는 경우는 switches로, 동일한 기능이지만 하나의 설정값이 보여지며 버튼을 클릭하여 다른 설정값으로 바꾸는 경우는 toggle buttons라고 불린다. toggle buttons의 경우는 두번 누를 경우 다시 처음 설정값으로 돌아온다. switches나 toggle buttons는 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 On/Off 상태를 조절한다. 이 때, 사용자가 현재 상태를 인지할 수 있는 시각적인 피드백이 함께 주어진다.
+
두 개의 옵션이 함께 보여지며 좌우로 swipe하여 설정하는 경우는 Switches로, 동일한 기능이지만 하나의 설정값이 보여지며 버튼을 클릭하여 다른 설정값으로 바꾸는 경우는 Toggle buttons라고 불린다. Toggle buttons의 경우는 두번 누를 경우 다시 처음 설정값으로 돌아온다. Switches나 Toggle buttons는 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 On/Off 상태를 조절한다. 이 때, 사용자가 현재 상태를 인지할 수 있는 시각적인 피드백이 함께 주어진다.
  
 
=== With this pattern, we can solve... ===
 
=== With this pattern, we can solve... ===

Revision as of 20:20, 29 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이 필요하다. Switches/Toggle buttons는 원하는 옵션을 쉽게 보고 입력할 수 있는 기능을 제공한다.

  • Switches/Toggle buttons는 현실의 switch와 button의 메타포이다.
  • 각 옵션이 선택되고 취소 되었음을 즉각적으로 확인할 수 있으며, 언제든 반대의 선택을 할 수 있다는 힌트를 제공한다.


Example : iOS_Gmail


Switches

iOS_Settings

Android_Settings

Android_Etsy

Android_Noom Diet Coach

iOS_Toggle


Toggle buttons

Android_Twitter

iOS_Tumblr

iOS_Facebook

iOS_손전등

iOS_LED Light