라벨에 무엇이 켜져 있는지 명확하게 명시되어 있는지 확인하세요.
터치와 키보드로 상태를 변경합니다. 라벨은 기능을 설명해야 하고, 현재 상태는 색상을 넘어 식별 가능해야 하며, 애플리케이션 결과는 인터페이스가 약속하는 방식과 일치해야 합니다.
토글 디자인 시스템
효과를 추측할 필요 없이 상태를 변경합니다.
체크리스트 내용
검토 진행 상황
01
구조와 의미
사용 맥락에 따라 정보와 프레젠테이션을 비교합니다.
02
상호 작용 및 유용성
작업을 시도하고 상태를 변경한 후 작업을 계속하세요.
진행 상황은 이 브라우저에 자동으로 저장됩니다.
안내
검토 방법
예시
활용 예시
캘린더에 대한 알림 켜기
"예약 알림" 라벨은 스위치 및 "켜짐" 상태와 함께 표시됩니다. 스위치를 끄면 알림만 중지되고 달력은 지워지지 않습니다.
변형 및 사용 사례
꺼진 상태
토글이 켜져 있지 않고 변경 사항이 없는 경우에도 선택 항목의 의미를 명확하게 유지하세요.
토글이 꺼져 있을 때 라벨을 읽으십시오. 사용자는 이 기능을 켜면 무엇이 바뀌는지 알아야 합니다.
예시 '새 사진 자동 저장'을 해제한다고 해서 저장된 사진이 삭제되는 것은 아닙니다.
온 상태
토글은 변경 사항 적용이 실패할 경우 피드백과 함께 실제 값을 반영합니다.
오류 저장 설정을 에뮬레이트합니다. 토글은 저장된 값으로 돌아가서 설명해야 합니다.
예시 알림을 켰지만 요청 오류: 꺼진 상태로 돌아가서 다시 시도하세요.
컨트롤에 부착된 라벨
레이블과 설명을 토글 가까이에 유지하고 다른 항목을 혼동하지 않는 클릭 영역을 사용하십시오.
라벨을 클릭하고 스크린 리더로 확인하세요. 모두 올바른 설정에 영향을 미칩니다.
예시 '활동 이메일 수신' 토글에는 아래 빈도 설명이 있습니다.