모형의 버튼은 일반적으로 하나의 상태, 즉 기본값을 표시합니다. 실제 제품에서는 동일한 버튼을 가리키고, 키보드로 초점을 맞추고, 누르고, 양식이 불완전한 동안 비활성화되고, 요청이 전송되는 동안 로드됩니다. 각각은 UI 상태이며 각각 디자인이 필요합니다.
두 그룹을 분리하는 데 도움이 됩니다. 호버, 포커스, 누름, 비활성화 등 상호작용 상태는 사용자로부터 나옵니다. 데이터 상태는 로드, 비어 있음, 부분 데이터, 오류 및 성공 등 시스템에서 나옵니다. 예를 들어 목록 화면은 로드할 때, 항목이 없을 때, 항목이 하나 있을 때, 항목이 수백 개 있을 때, 요청이 실패할 때를 위한 디자인이 필요합니다.
초점 상태에는 특별한 주의가 필요합니다. 키보드나 스위치 장치를 사용하는 사람들은 자신이 어디에 있는지 알기 위해 눈에 보이는 초점 표시기에 의존합니다. 대체하지 않고 브라우저 포커스 개요를 제거하는 것은 가장 일반적인 접근성 오류 중 하나입니다.
상태 간 변경도 디자인의 일부입니다. 기본 상태에서 누름 상태로 짧고 명확하게 전환되면 탭이 확인됩니다. 순조롭게 성공으로 바뀌는 로딩 상태는 사람들에게 그들의 행동이 성공했음을 알려줍니다. 갑작스러운 점프나 너무 느린 애니메이션은 인터페이스를 불안정하게 만듭니다.
상태 누락을 방지하는 실용적인 방법은 설계하기 전에 각 구성 요소에 대해 상태를 나열하거나 구성 요소를 상태 머신(상태 집합과 상태 사이를 이동하는 이벤트)으로 모델링하는 것입니다. 우리가 만드는 ExodeUI는 이런 식으로 작동합니다. 각 상태와 상태 간 전환을 하나의 파일로 디자인하면 코드가 실제 앱에서 상태를 전환하는 이벤트를 보냅니다.