[디자인 시스템/스타일 가이드] tooltip에 대해서
2023. 5. 24. 00:38ㆍProduct 디자인
툴팁은 주로 특정 기능이나 업데이트 된 서비스에 대한 도움말을 표시하는 데 사용함, 사용자가 익숙하지 않은 기능을 이해할 수 있게 도와주는 역할
툴팁이 상단, 하단, 좌우 디바이스 바깥 모서리에 가깝게 배치되면, 16의 간격을 두고 배치, 툴팁의 '화살표(▲)'는 해당 툴팁이 설명하는 요소 가까이에 일정한 간격으로 위치하며 툴팁을 제거하는 '닫기' 아이콘을 포함 할 수 있고 아이콘의 위치는 우측 중앙에 위치함
- Tooltip의 텍스트는 한 번에 읽을 수 있도록 핵심만 담아야 합니다.
- Tooltip의 화살표 위치를 임의대로 조정 할 수 있습니다.
- Tooltip의 텍스트와 컨테이너는 일정한 간격을 유지해야 합니다.
출처
https://designsystem.line.me/LDSM/components/tooltip-ex-ko/
LINE Design System for Messenger - Components
Components are combination of Elements making up respective functions. LINE's Components Guidelines unify the names of components and define their structure, usage, type, and pattern for the convenient communication between related departments.
designsystem.line.me
'Product 디자인' 카테고리의 다른 글
| 2023 iOS/AOS 스토어 스크린샷(스토어 이미지) 사이즈 (0) | 2023.07.31 |
|---|---|
| [피그마] 배리어블(Variable) 기능으로 라이트/다크모드 스위칭하기 (1) | 2023.07.12 |
| [디자인 시스템/스타일 가이드] tabs UI에 대해서 (0) | 2023.05.23 |
| 토스 증권 클론 디자인! 라이트/다크모드 1:1 테마 적용해보기 (0) | 2023.05.22 |
| 앱 디자인 제작시 아이콘 사이즈는? 24px 20px? Material design의 시스템 아이콘을 중심으로 (0) | 2022.09.12 |