플러스엑스 UI패키지 강의후기 - (26)

◆ 오늘 수강/복습 할 부분
Part4. UI 인터랙션 디자인 
- 가이드 제작
 
 
◆ 정리 및 느낀점
- 일단 어제 진도를 다 못뺀 figma 인터랙션 프로토타이핑을 마저 진행했다. 원래 나는 강의를 1.2배속 정도로 듣는데, 0.8로 해도 뭔가 안되는게 많고 따라가기가 어려워서 (기본적으로 화면을 빨리돌리심 강의 자체가) 일단 어떻게 어떻게 따라는 했지만 결과는 약간 부끄럽다는 ^^.. 
 
- 이후 가이드 제작 관련하여 오늘 배운 것은... 약간 놀라웠다... 이미지 가이드에 이어 인터랙션 가이드라는게 있는건지 이번에 구체적으로 알게 되었는데, 인터랙션 가이드도 이미지 가이드만큼이나 세세하다니, 근데 돌아보면 당연한 이야기 같기도하다. 당연히 세세하게 전달해야지 디자이너가 원하는 인터랙션이 나올테니까. 
 
- 인터랙션 가이드는 크게 3가지로 나누어 전달한다.
1) main transition 효과 정리
: 페이지에서 페이지 변환시의 효과를 정리한다. 예시로 보여준것은 4개 항목에 따른 것이었는데 아래와 같다. 

1)scale : 150% up 2)position : fix/rotate 30 3) animation : ease in-out 4) speed : 1.25sec/1250ms

1)scale : fix 2)position : X-Y axis cross 3) animation : ease in out  4) speed : 1.5sec / 1500ms

페이지 변환 효과에서 더 들어가 안에 있는 프로덕트나 그라디언트 (예시였음)에 대한 것을 정리할때는 아래와 같이 정리한다.
근데 아래는 예시일 뿐이고 본인이 전달하고자 하는 바를 위해 항목을 쪼개는게 좋아보인다. 

Product image (01.bg / 02.Focus /03.zoom out 상황을 아래 항목으로 정리)	Gradient Color (컬러값이 여러개라서 아래와 같이 정리)
1. Size : 90*341 2. Rotate : -30  3. Opacity : 50% 4. Obj Blur : 15 5. Shadow : ##8B524D 40% (x80, y80)	1. #b7c8e6 - #e2614a 2. X : 220 / Y : -1160

2) micro animation 정리 
: 각각 상태값을 보두 정리해주는데, IMG(banenr) / TAB / BTN 등의 예시가 있었다. 
: 방향에 대한 명시와 형태를 담아야하며, 어려운 경우 프로토타입을 잡아서 피그마 interaction 값을 그대로 전달하는 것도 방법
  
3) duration & speed 정리 
: 이부분도 시각적인 것으로 보여줄 수 없기 때문에 어려운 경우 프로토타입을 잡아서 피그마 interaction 값을 전달하면 좋다고한다. 
:https://cubic-bezier.com/#.07,.56,.72,.19 요것을 활용하면 베지어 값을 다양하게 테스트 해볼 수 있다. 


◆ 그럼 오늘의 수강 인증 샷!