[HIG] Components - Toggles

https://developer.apple.com/design/human-interface-guidelines/toggles

Toggles | Apple Developer Documentation

 

Toggles

토글은 사용자에게 각 상태를 나타내기 위해 반대되는 모양을 사용하여 반대되는 상태의 한쌍을 선택할 수 있도록 한다.

UISwitch/Toggle

UIKit에서는 UISwitch, SwiftUI에서는 Toggle이라고 부르는 UI이다.

 

플랫폼마다 다양한 토글 스타일을 지원한다.

iOS, iPadOS, macOS, watchOS는 스위치 토글 스타일을 지원하지만 macOS만 체크박스 스타일을 지원한다.

또한 모든 플랫폼은 각 상태에 대해 서로다른 모양을 사용하여 토글처럼 동작하는 버튼을 지원한다. (ToggleStyle)

• SwiftUI에서 현재 기준 .automatic, .button, .switch 지원

 

Best practices

• 사용자가 콘텐츠 또는 뷰의 상태에 영향을 주는 두 가지 상반된 값 중에서 선택을 해야한다면 토글을 사용하자
• 아이템의 리스트에서 선택을 원하는 경우에는(선택지가 많을 경우) Pop-up button을 사용하자
• 토글이 영향을 미치는 설정, 뷰, 콘텐츠를 명확하게 식별하자
  • 일반적으로 주변 컨텍스트는 사용자가 무엇을 켜고 끄는지 이해할 수 있도록 충분한 정보를 제공한다.
  • macOS에서는 종종 토글이 제어하는 상태를 설명하는 Label을 제공할 수 있다.
  • 토글처럼 동작하는 버튼을 사용할 경우 일반적으로 그 목적을 전달하는 인터페이스 아이콘을 사용하고, 현재 상태에 따라 배경을 변경하는 등 UI를 업데이트하자
• 토글의 상태의 시각적 차이를 분명히 하자
  • 토글이 켜져 있거나 꺼져 있음을 표시하기 위해 배경 색을 추가 or 제거하자
  • 배경 모양을 표시하거나 숨기자
  • 체크 표시나 점과 같이 보여주는 inner detail을 변경하는 방법도 있다.
  • 모든 사람이 차이를 인식할 수 있는 것은 아니므로 다양한 색상에만 의존하여 상태를 전달하지 말자.

 

Platform consideration

iOS, iPadOS

• Switch 토글 스타일은 List row에만 사용하자
  • 행의 내용이 스위치가 제어하는 상태에 대한 컨텍스트를 제공하기 때문에 이 상황에서는 별도의 Label을 제공할 필요가 없다.

List row에서 Switch 토글이 사용된 예시

• 필요한 경우에만 스위치의 기본 색상을 변경하자
  • 대부분의 경우 기본 녹색이 적합하다.
  • 앱의 강조 색상을 대신 사용한다면, 색상이 없는 상태와 충분히 대비가 되어 눈에 잘 띄는 색상을 사용해야 한다.
• List row가 아니라면 스위치가 아닌 토글처럼 작동하는 버튼을 사용하자 (하나의 버튼으로 누르면 아이콘 등이 바뀌는 형식)
  • 버튼의 용도를 설명하는 레이블을 제공하지 말자
  • 사용자가 만든 인터페이스 아이콘과 제공한 대체 background appearance를 함께 사용하면 사람들이 버튼의 기능을 이해하는 데 도움이 된다. (changesselectionasprimaryaction)
  • 버튼 관련 좋은 자료

스위치가 아닌 토글처럼 작동하는 버튼의 예시