상태 표시 전환

Aug 20 2020

표준 패턴을 사용하여 일부를 활성화 및 비활성화 할 수있는 토글 세트를 재 설계하고 있습니다. 그러나 일부는 관리자 권한으로 인해 기본적으로 활성화되지만 사용자가 비활성화 할 수는 없습니다 . 현재 디스플레이에는 이러한 토글이 더 밝은 녹색으로 표시되지만 제가 말했듯이 클릭 할 수 없습니다. 이로 인해 행동을 분석 할 때 혼란스러워졌고 사용자도 같은 느낌을받을 것이라고 생각합니다. 사용자가 활성화되었지만 상태를 변경할 수 없음을 알 수 있도록 이러한 토글을 표시 할 수있는 방법이 있다고 생각하십니까? 앱이 반응하며 여러 장치를 통해 표시 될 수 있습니다. 미리 감사드립니다!

답변

44 SoorajMV Aug 20 2020 at 18:24

머티리얼 디자인 은 다음과 같이 회색으로 표시된 버전으로 잠금 상태 를 표시합니다.

그러나 여기서 문제는 접근성입니다. 시각 관련 장애가있는 사용자는이 두 가지를 구별 할 수 없습니다.

대신 할 수있는 작업은 불투명도가 낮은 색상과 함께 토글 내부에 잠금 기호를 추가하는 것입니다. 사용자가 상호 작용을 시도하는 경우 '관리자에 의해 잠김'/ "관리자가 활성화 함"또는 그 밖의 다른 도구 설명을 제공합니다.

20 musefan Aug 20 2020 at 18:17

비활성화 된 컨트롤에 대해 "흐린"스타일을 사용하는 것이 표준이지만 여기서 문제는 차이가 사용자가 명확하게보기에는 너무 미묘하다는 것입니다.

예를 들어 녹색에서 회색으로 색상을 변경할 수 있지만 실제로 "사용 가능"을 의미하는 선명도를 잃을 위험이 있습니다 (처음에는 녹색 색상의 전체 목적).

이를 염두에두고이 목적을 위해 컨트롤을 전혀 사용하지 않는 것이 좋습니다. 대신 텍스트를 사용하여 컨트롤을 사용하여 혼동하지 않고 활성화 / 비활성화 상태를 표시 할 수 있습니다. 예를 들면 :


또는 jcaron이 제안한대로 관리자가 설정을 설정했음을 명시 적으로 지정할 수도 있습니다. 이렇게하면 사용자에게 변경할 수 없음을 명확히하는 데 도움이됩니다. 이 같은:

6 thomic Aug 20 2020 at 18:47

먼저 스위치가 읽기 전용인지 비활성화되어야하는지 명확해야합니다.
이에 대한 좋은 기사가 있습니다.https://vaadin.com/docs/v8/framework/articles/ReadOnlyVsDisabledFields.html

지난 프로젝트에서는 이러한 스타일을 사용하여 토글 스위치의 상태를 다르게했습니다.
스위치는 "활성 및 선택됨", "활성", "비활성화 됨"및 "읽기 전용"입니다.