두 번 연속 활성화 후 응답 확인
네트워크 속도가 느릴 때 버튼을 누른 후 다시 누르세요. 처리 상태에 충분히 일찍 대응하고, 중복 제출을 피하고, 일반적인 단어보다는 작업 결과를 나타내는 라벨을 사용하세요.
버튼 디자인 시스템
활성화 후 작업과 응답을 명확하게 합니다.
체크리스트 내용
검토 진행 상황
01
구조와 의미
사용 맥락에 따라 정보와 프레젠테이션을 비교합니다.
02
상호 작용 및 유용성
작업을 시도하고 상태를 변경한 후 작업을 계속하세요.
진행 상황은 이 브라우저에 자동으로 저장됩니다.
안내
검토 방법
예시
활용 예시
진행 중인 변경사항 저장
처리 중에는 "변경 사항 저장" 버튼이 "저장 중..."으로 변경됩니다. 완료되면 확인을 표시하고 편집을 계속하도록 허용합니다.
변형 및 사용 사례
상황별 차원
모바일의 양식, 도구 모음, 작업에 명확한 크기 척도를 사용하세요.
더 긴 라벨을 사용하고 글꼴 크기를 늘리십시오. 버튼은 레이아웃에서 넘치지 않고 터치 영역을 유지합니다.
예시 모바일에서는 "주문 확인" 버튼이 큽니다. 도구 모음의 필터 버튼.
상호작용 상태
기본적으로 마우스 오버, 포커스, 비활성화 및 로드에는 각 색상과 관계없이 자체 표시가 필요합니다.
한 번 보내고 기다리는 동안 다시 클릭하세요. 작업이 겹치지 않으며 초점이 계속 표시됩니다.
예시 요청이 처리되는 동안 버튼은 "저장 중..."으로 전환됩니다.
기본값
선택
입력 중
사용할 수 없음
버튼 안의 아이콘
아이콘은 레이블 의미를 지원합니다. 버튼에는 필요할 때 사용자 이름과 제안이 필요한 아이콘만 있습니다.
스크린 리더로 버튼 이름을 읽고 아이콘을 모르는 사람에게 시도해 보세요.
예시 휴지통 버튼에는 '삭제'가 아닌 '초안 삭제'라는 아리아 라벨이 있습니다.
행동 수준
일관된 시스템으로 1차, 2차, 위험한 행위를 구분합니다.
두 가지 작업을 나란히 배치하세요. 사용자는 삭제의 주요 단계와 결과를 인식해야 합니다.
예시 메인 버튼을 사용하여 "변경 사항 저장"; "취소"는 라이터 버튼을 사용합니다.