[9월 3주차] Material Designs 3 - Interaction States

State layers

state layer란, UI 요소의 상태를 나타내는 반투명 막과 같은 개념이다. 투명도를 조절하며 요소의 상태를 보여준다는 맥락으로 이해하면 된다. state layer는 각 상태에 따라 정해져 있는 투명도를 적용시키며, 콘텐츠의 색상과 동일한 색상을 사용한다. 예를 들어, 활성화 상태의 스타일이 컨테이너 색상으로 A를 쓰고 콘텐츠 색상으로 A' 를 쓴다고 하면, state layer의 색상은 A'가 된다.

 

 

"On" colors

어떤 UI 요소의 State layer 색상은 콘텐츠 색상으로 인해 결정된다. "On color"는 콘텐츠에 사용되는 색상을 의미한다. 

 

 

State layer tokens & values

state layer는 각 상태에 따라 고정된 투명도 값을 갖고 있으며, 기본 색상은 해당 UI 요소의 콘텐츠 색상과 동일한 색상이다. 아래는 그 예시이다.

상태	투명도 값
Hober (요소 위에 마우스를 둘 때)	8%
Focus (요소의 활성화 준비가 완료되었을 때)	12%
Press (요소가 눌렸을 때)	12%
Drga (요소가 드래그될 때)	16%

 

Selected and activated states

State Layer을 사용하는 호버, 포커스, 눌림, 드래그 상태와 다르게, 활성화/선택 상태를 사용하는 요소는 요소의 컨테이너 및 콘텐츠 색상을 직접적으로 바꾸는 것이 관례이다 (내가 주로 디자인했던 버튼들도 이런 예시에 속한다)

 

 

Disabled states

요소와의 상호작용이 불가능할 때의 상태가 disabled state이다. 이 때는 보통 디폴트 버튼 대비 콘텐츠 38%, 컨테이너 12%의 투명도를 준다.