Android 앱, 안드로이드OS 디자인의 모션, 인터랙션 이해하기 - 패스트캠퍼스 챌린지 29일차

*모든 자료의 출처 : Material Design by Google https://material.io/design/

Material Foundation > Motion

Principles

Informative
Motion design informs users by highlighting relationships between elements, action availability, and action outcomes.

Focused
Motion focuses attention on what's important, without creating unnecessary distraction.

Expressive
Motion celebrates moments in user journeys, adds character to common interactions, and can express a brand’s style.

An animation to reward the user for a task can make key moments in the user journey more memorable.

 

Feedback and status
Motion provides timely feedback and indicates the status of user or system actions.

Animated elements responding to keypad input provide feedback to show if the action was successful.

 

Animated list items are placeholders that convey content is loading.

Motion of a card makes selection, positioning, and release visible.

 

---

Material Foundation > Interaction

Gestures

Gestures let users interact with screen elements using touch.

Principles
Gestures help users perform tasks rapidly and intuitively using touch.

Overlay opacity values

To ensure proper visibility and color contrast accessibility, the opacity value of overlays should be adjusted for every different combination of text on a surface.

(1) Overlay opacity values on #FFFFFF on a white surface. (2) Overlay opacity values on #6200EE on a surface colored with a primary color.

 

---

강의수강화면

 

오늘은 안드로이드OS 디자인의 모션과 인터랙션 이해하기 강의를 들었다. 구글은 안드로이드OS의 모션 부분에 대해 개발쪽을 위해 다양한 프리셋과 도큐먼트를 제공한다고 한다. 디자이너들에게 중요한 것은, 모션을 만들 때 어떤 구조로 만들지를 작업하는데 이 움직임이 개발에 반영되기 하려면 개발이 가능한 수준으로 디자인을 만들어야 한다는 점이다.

모션 가이드를 하기 위해서는 지난 iOS 클론디자인을 작업할 때 사용했던 Principle 앱과 같은 프로토타이핑 툴에서 작업하는 것이 좋다. 에프터이펙트에서 해도 되지만, 그럴 경우에는 표현의 범위가 많이 넓어지므로 개발이 가능하지 않는 것들이 생기기 쉽상이기 때문이다. 프로토타이핑 툴, 특히 마이크로인터랙션이 가능한 Principle로 작업하면 개발 구현 가능성이 훨씬 높다. 화면/레이아웃이 변화되며 움직이는 모션은 프로토타이핑 툴에서 작업하고, 디테일한 요소/애니메이션의 움직임은 에프터이펙트로 작업한다. 

모션은 너무 빠르거나 너무 느리지 않은 속도, 즉 인지 가능한 속도로 움직여야 한다. 
예 : A navigation drawer opens over 250ms but closes over 200ms. The card expands over 300ms but collapses over 250ms.

인터랙션에서는 제스처에 대해 배웠는데, 모바일과 데스크탑의 가장 큰 차이는 데스크탑에서 마우스 커서를 버튼이나 링크 위에 올렸을 때(hover) 상태에 변화가 생긴다는 것이다.  모바일 우선주의가 대세로 자리 잡으면서 오히려 요즘 디자이너들이 모바일은 친숙하기도 하고 해서 데스크탑에서의 웹작업을 할 때 호버 부분을 놓치는 경우가 생기니 이 부분에 유의해야 한다고. 

미선택상태, 비활성상태, 호버상태, 눌려진상태, 드래그상태, 활성상태, 선택상태 등 상태들의 변화를 작업하기 위해서는 각각의 레이어 투명도 값에 변화를 주는 것이 가장 손쉬운 방법일 것이다.

 

---

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa