올바른 입력란과 관련된 오류를 확인하세요.
누락된 셀이 있는 양식을 제출한 다음 키보드를 사용하여 편집합니다. 레이블을 눈에 띄게 유지하고, 요청을 입력하기 전에 설명하고, 수정해야 할 필드를 정확히 알 수 있을 만큼 오류를 가까이에 배치하세요.
입력 필드 디자인 시스템
정보 필드에 올바르게 입력하고 오류를 바로잡는 데 도움이 됩니다.
체크리스트 내용
검토 진행 상황
01
구조와 의미
사용 맥락에 따라 정보와 프레젠테이션을 비교합니다.
02
상호 작용 및 유용성
작업을 시도하고 상태를 변경한 후 작업을 계속하세요.
03
지점 확인이 필요합니다
작업을 시작, 변경, 완료할 때 특정 시나리오를 시도해 보세요.
진행 상황은 이 브라우저에 자동으로 저장됩니다.
안내
검토 방법
예시
활용 예시
이메일 주소의 형식이 올바르지 않습니다.
"이메일"이라고 표시된 상자와 "이름@vidu.com으로 이메일을 입력하세요"라는 오류; 방금 입력한 내용은 사용자가 한 문자를 편집할 수 있도록 유지됩니다.
변형 및 사용 사례
입력 상자 프레임
프레임은 입력 영역을 배경과 분리하여 두 테마 모두에서 콘텐츠와 커서를 계속 표시합니다.
초점, 자동 채우기 및 텍스트 확대/축소를 사용해 보세요. 프레임이 텍스트를 덮거나 크기가 커지지 않습니다.
예시 행 높이를 변경하지 않고 초점을 맞추면 이메일 상자의 테두리가 더 어두워집니다.
라벨 및 지침
레이블은 사용자가 입력한 후에 존재합니다. 알아야 할 추가 형식 지침 또는 조건.
데이터를 입력한 다음 스크린 리더를 사용하여 셀 이름을 다시 읽습니다. 레이블과 힌트는 여전히 올바르게 연결되어 있습니다.
예시 아래에 "예: DZ-2048" 힌트가 포함된 "주문 코드" 라벨을 붙입니다.
유효한 이메일 주소가 필요합니다
셀의 아이콘 및 작업
비밀번호 표시, 키워드 삭제 등의 작업과 일러스트레이션 아이콘을 구별하세요.
셀과 하위 버튼을 탭하세요. 작업의 이름은 명확하며 실수로 데이터를 삭제하지 않습니다.
예시 장식 돋보기 아이콘; 검색 지우기 버튼은 포커스를 받고 레이블이 있습니다.
데이터 상태
공백, 데이터, 포커스, 읽기 전용, 비활성화 및 오류의 정의는 동일한 규칙을 따릅니다.
오류에서 재진입으로 전환합니다. 오류가 제 시간에 업데이트되고 데이터가 손실되지 않습니다.
예시 읽기 전용 확인 코드 상자는 계속 복사할 수 있습니다. 송신 셀이 대기 상태입니다.
기본값
입력 중
선택
오류 표시이메일 형식이 올바르지 않습니다.
사용할 수 없음
입력 상자 크기
셀 크기는 밀도의 맥락을 따르지만 글꼴 크기와 터치 영역은 여전히 사용하기 쉽습니다.
테이블에는 컴팩트 셀을 배치하고 모바일에는 대형 셀을 배치하세요. 텍스트가 세로로 잘리지 않습니다.
예시 관리자 패널에는 깔끔한 필터 상자가 있습니다. 로그인 화면은 더 높은 상자를 사용합니다.
여러 줄 입력 영역
콘텐츠를 래핑해야 할 경우에만 여러 줄을 사용하여 스크롤과 경계를 명확하게 유지하세요.
긴 단락을 붙여넣고 키보드를 엽니다. 사용자에게는 입력 위치와 제출 버튼이 계속 표시됩니다.
예시 반응형 셀은 해당 내용을 한계까지 확장한 다음 셀 내에서 스크롤합니다.