플로팅 라벨이 무엇인지, 양식 디자인에서 어떻게 사용되는지, UI/UX 디자인에서 플로팅 라벨이 점점 인기 있는 자산이 되고 있는 이유를 알아보세요.
플로팅 라벨이란 무엇입니까?
이것은 플로팅 레이블입니다:
위의 그림만 봐도 플로팅 라벨이 멋진 UI 자산인 이유를 즉시 이해하는 사람도 있을 수 있지만 "플로팅 라벨" 개념을 처음 접하는 경우를 대비하여 플로팅 라벨이 강력한 이유는 다음과 같습니다.
- 많은 공간을 차지하지 않으면서 실용적인 정보를 많이 전달합니다.
- 매끄러운 전환("애니메이션") 효과는 양식을 더욱 매력적으로 만듭니다.
- 귀하의 브랜드가 기존의 정적인 형태보다 더 현대적으로 보이도록 하며, 주요 효과는 무시무시한 파란색 입력 필드 윤곽선입니다.
위의 그림을 다시 살펴보십시오. 입력할 때 레이블이 되는 자리 표시자 텍스트가 있는 입력 필드가 아닙니다. 진행 상황은 다음과 같습니다.
- 먼저, 사용자는 필드의 목적을 설명하는 자리 표시자 텍스트를 봅니다.
- 사용자가 입력 필드 내부를 클릭하는 즉시 자리 표시자 텍스트가 맨 위로 이동하고 일반적인 입력 레이블의 역할을 하며 계속 표시됩니다.
- 동시에 새 자리 표시자 텍스트가 이전 자리 표시자를 대신하지만 이제는 힌트입니다. (자리 표시자 텍스트의 가장 중요한 역할) 사용자가 입력을 시작하기 전에 추가 안내를 제공합니다.
- 입력을 시작하면 자리 표시자 힌트 텍스트가 사라져야 하지만 다른 많은 입력 필드와 달리 현재 입력 레이블인 원래 자리 표시자 텍스트는 사용자가 주의가 산만해지고 필드의 목적을 잊어버리십시오(이것은 생각보다 자주 발생합니다).
미니멀리스트 디자인의 팬이라면 Floating Labels가 완벽합니다.
유명한 속담에 따르면:
<블록 인용>더할 것이 없을 때가 아니라 더할 것이 없을 때가 완벽합니다.
그리고 그것은 요컨대 플로팅 라벨(Floating Labels)에 가깝습니다.
자원
- CodePen의 플로팅 레이블 코드 예제
- Material UI 프레임워크를 사용하는 경우 웹사이트에 Floating Labels를 구현하는 것은 간단합니다.
방법에 따라 플로팅 레이블(HTML, CSS, JavaScript)을 기술적으로 구현하면 일부 브라우저 비호환성 문제가 발생할 수 있습니다. caniuse에서 확인하십시오.