인프런 커뮤니티 질문&답변

freedominf0231님의 프로필 이미지
freedominf0231

작성한 질문수

피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

디자인 시스템 버튼 상태 질문입니다.

작성

·

736

0

2.png디자인 시스템 contenent 설명해주시는도중에

버튼의 상태인

normal / hover / press / focus / disabled 상태로 나타내셨고

 

text Field 상태를

blank / filled / activated / error 로 표현하셨는데요

 

normal , press, disabled 등 몇가지는 어느정도 알겠는데

hover focus activated 등등 무슨 상태를 표현하는 단어인건지 사전을 찾아봐도

정확히 감이오질않습니다.

 

normal / hover / press / focus / disabled

blank / filled / activated / error

이상태들이 정확히 무슨상태인지 여쭈어 봐도될까요?

 

 

답변 1

0

에릭님의 프로필 이미지
에릭
지식공유자

안녕하세요. 질문 감사합니다.

알고 있다고 말씀하신 normal / press / disabled 외 다른 상태에 대해서 아래 확인 부탁드립니다.

press: 버튼을 손가락으로 (PC에서는 마우스로) 눌렀을 때의 상태입니다.

focus: 이 상태는 대부분의 웹사이트를 방문하셨을 때에 키보드로 Tab을 눌렀을 때에 오브젝트에 Focus가 이동이 됩니다. 이렇게 오브젝트에 focus가 된 상태를 말합니다.

disabled: 비활성화된 상태입니다. 버튼 또는 텍스트 필드를 임의적으로 비활성화를 시켜야 할 때가 있습니다. 이 상태를 말합니다.

blank: 이것은 텍스트 필드에 아무런 텍스트를 입력하기 전 상태를 말합니다. 이 경우 특히 hint text가 있는데 실제 입력된 텍스트가 아닌 만큼 많은 경우 옅은 회색을 사용합니다.

filled: 텍스트 필드에 텍스트가 입력된 후의 상태를 말합니다.

activated: Text field를 마우스 또는 (모바일의 경우) 손으로 누르게 되었을 때에 활성화된 상태, 즉, 텍스트를 입력할 수 있는 상태입니다.

error: 어떤 잘못된 입력을 했을 때를 말합니다. 예를 들어 전화번호를 입력해야 되는데 번호를 입력하는 것이 아니라 알파벳 글자를 입력한다면 사용자로 하여금 잘못된 것을 알려야 하는데요. 이럴 때에 error가 된 상태와 메시지를 전달해야 합니다.

감사합니다.

freedominf0231님의 프로필 이미지
freedominf0231

작성한 질문수

질문하기