인터렉션이란 유저가 특정 행동을 한 것에 대한 반응으로 제스처, 셀렉션, 상태 3가지로 구분할 수 있음.
제스처(Gesture)
웹에서는 마우스와 키보드를 활용하며 클릭, 마우스오버, 마우스 인아웃, 프레스, 키 다운, 키 업 등이 있으며, 앱에서는 손가락을 활용하며 탭, 스크롤, 팬, 드래그, 스와이프, 핀치 이렇게 활용함.
셀렉션(Selection)
셀렉션은 유저가 클릭한 것에 대한 반응으로 제대로 선택된 것을 표현하는 것임.
https://material.io/design/interaction/states.html#usage
상태(States)
상태는 유저가 버튼, 인풋 등의 요소에 대해 클릭 가능한 혹은 불가능한 경우를 직관적으로 이해할 수 있게 표현 해야함. 주로 Default(Enabled), Disabled, Hover, Focused, Pressed 등 요소에 따라 다름. 디자인 시스템 구축시 필수 개념으로 매우 중요함.
주의점
앱의 경우 손가락으로 조절하기 때문에 클릭 요소의 최소 사이즈가 44×44 / 48×48 이상으로 디자인을 해야 함.
관련 키워드
트렌지션, 디자인시스템