Difference between revisions of "Switches/Toggle buttons"
Navigation menu
From Design pattern
| (28 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| + | Switches/Toggle buttons는 On/Off와 마찬가지로 두 개의 상호 배타적인 옵션 중 하나를 지정하는 패턴이다. 주로 두 개의 선택지를 가지고 있는 설정화면에서 사용된다. | ||
| − | + | 두 개의 옵션이 함께 보여지며 좌우로 swipe하여 설정하는 경우는 Switches로, 동일한 기능이지만 하나의 설정값이 보여지며 버튼을 클릭하여 다른 설정값으로 바꾸는 경우는 Toggle buttons라고 불린다. Toggle buttons의 경우는 두번 누를 경우 다시 처음 설정값으로 돌아온다. Switches나 Toggle buttons는 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 On/Off 상태를 조절한다. 이 때, 사용자가 현재 상태를 인지할 수 있는 시각적인 피드백이 함께 주어진다. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | . | + | === With this pattern, we can solve... === |
| − | + | ||
| − | + | ||
| − | + | 앱에서 두 개의 상호 배타적인 옵션 중 하나를 입력하기 위한 패턴이 필요하다. Switches/Toggle buttons는 원하는 옵션을 직관적으로 선택할 수 있는 기능을 제공한다. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | * Switches/Toggle buttons는 현실의 switch와 button의 메타포이다. | |
| − | + | * 각 옵션이 선택되고 취소 되었음을 즉각적으로 확인할 수 있으며, 언제든 반대의 선택을 할 수 있다는 힌트를 제공한다. | |
| − | + | ||
| − | + | === Example : iOS_Gmail === | |
| − | + | [[File:Togglebuttons2.jpg]] | |
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
---- | ---- | ||
| + | |||
== Switches == | == Switches == | ||
| − | + | ||
| − | === | + | === iOS_Gmail === |
{{#Widget:Vimeo|id=96557102|width=300|height=533}} | {{#Widget:Vimeo|id=96557102|width=300|height=533}} | ||
| Line 76: | Line 29: | ||
{{#Widget:Vimeo|id=96420806|width=300|height=541}} | {{#Widget:Vimeo|id=96420806|width=300|height=541}} | ||
| − | === Android_Noom === | + | === Android_Noom Diet Coach === |
{{#Widget:Vimeo|id=96421019|width=300|height=541}} | {{#Widget:Vimeo|id=96421019|width=300|height=541}} | ||
| + | |||
| + | === iOS_Toggle === | ||
| + | {{#Widget:Vimeo|id=96666342|width=300|height=533}} | ||
---- | ---- | ||
| + | |||
== Toggle buttons == | == Toggle buttons == | ||
| − | |||
| − | + | === Android_Twitter === | |
| + | {{#Widget:Vimeo|id=96673515|width=300|height=541}} | ||
| + | |||
| + | {{#Widget:Vimeo|id=96673767|width=300|height=541}} | ||
| + | |||
| + | === iOS_Tumblr=== | ||
| + | {{#Widget:Vimeo|id=96472855|width=300|height=533}} | ||
| + | |||
| + | === iOS_Facebook=== | ||
| + | {{#Widget:Vimeo|id=96472854|width=300|height=533}} | ||
| + | |||
| + | ===iOS_손전등 === | ||
| + | {{#Widget:Vimeo|id=96666723|width=300|height=533}} | ||
| + | |||
| + | === iOS_LED Light === | ||
| + | {{#Widget:Vimeo|id=96667177|width=300|height=533}} | ||
| − | [[Category: | + | [[Category:Select pre-defined values]] |
Latest revision as of 23:59, 24 July 2014
Switches/Toggle buttons는 On/Off와 마찬가지로 두 개의 상호 배타적인 옵션 중 하나를 지정하는 패턴이다. 주로 두 개의 선택지를 가지고 있는 설정화면에서 사용된다.
두 개의 옵션이 함께 보여지며 좌우로 swipe하여 설정하는 경우는 Switches로, 동일한 기능이지만 하나의 설정값이 보여지며 버튼을 클릭하여 다른 설정값으로 바꾸는 경우는 Toggle buttons라고 불린다. Toggle buttons의 경우는 두번 누를 경우 다시 처음 설정값으로 돌아온다. Switches나 Toggle buttons는 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 On/Off 상태를 조절한다. 이 때, 사용자가 현재 상태를 인지할 수 있는 시각적인 피드백이 함께 주어진다.
Contents
With this pattern, we can solve...
앱에서 두 개의 상호 배타적인 옵션 중 하나를 입력하기 위한 패턴이 필요하다. Switches/Toggle buttons는 원하는 옵션을 직관적으로 선택할 수 있는 기능을 제공한다.
- Switches/Toggle buttons는 현실의 switch와 button의 메타포이다.
- 각 옵션이 선택되고 취소 되었음을 즉각적으로 확인할 수 있으며, 언제든 반대의 선택을 할 수 있다는 힌트를 제공한다.
Example : iOS_Gmail
Switches
iOS_Gmail
iOS_Settings
Android_Settings
Android_Etsy
Android_Noom Diet Coach
iOS_Toggle
Toggle buttons
Android_Twitter
iOS_Tumblr
iOS_Facebook
iOS_손전등
iOS_LED Light