모바일에서 점차 트랜지션, 애니메이션,모션과 같은 인터랙션에 대한 중요도가 높아지는 가운데,

구글이 머티리얼 디자인 모션 가이드를 내놓았다.


관련 영상을 보고나서 해당 문서를 보면 더욱 이해가 빠를 듯 하여 임베드, :)

https://t.co/Sobm0Gw2iE 


모션 가이드 관련 영상

@John schlemmer





관련 디자인 가이드 문서

https://www.google.com/design/spec/motion/material-motion.html


몇 가지 인상적이었던 내용들을 정리해보면,


Motion is..

1) guide focus - 집중을 유도하는 역할

2) convey hierarchy - 계층구조를 이해하게끔 해주는 역할

3) foreshadow actions - 어포던스를 주어 행위를 유도하는 역할

4) distract from loading - 로딩 시간을 의미있는 시간으로 만들어주는 역할

5) add polish + delight - 서비스를 세련되게 만들어주고 사용자에게 기쁨을 주는 역할


사용자 경험을 더욱 풍부하게 해주고, 서비스에 대한 이해를 쉽게 만들어주고, 지루하지 않게 만들어주는,

정말 멋지지 않은가~! :)


그 외에도, 

Motion is teaching that..

what is important - 무엇이 중요한지 알려주고,

don't get lost - 길을 잃지 않도록 가르쳐주고,

hints at how something might react (even before triggered) - 어떻게 반응하는지 (트리거가 없더라도) 알려준다.


그리고,

Motion help you produce a quick, clear, and cohesive experience.

모션은 빠르고, 명확하고, 응집력 있는 경험을 만들도록 도와준다.


Motion is not just 'polish'

모션은 단순히 '세련된' 것을 이야기하지 않는다.


responsive - 반응적이고,

natural - 자연스럽고,

aware - 알아채고,

intentional - 의도적이어야 한다.



모션에 대한 지속시간(duration time)은,


기기 화면의 사이즈에 따라 각 오브젝트의 모션 속도는,

웨어러블(wearable) - 240msec

모바일(mobile) - 300msec

태블릿(tablet) - 390msec

* 모바일 중심으로 사이즈가 작아지면 30%속도 감소, 사이즈가 커지면 30%증가,

  화면 사이즈가 작을 수록 상대적으로 더 빠르게 보여야 함 

  (화면 전환 효과를 큰 화면에서 보여주기 위해서는 시간이 더 걸릴 수 밖에 없는 이유도 작용한 듯)


PC의 경우 150-200msec인데, 이유는 PC에서의 모션은 화면의 크기로 인해, 눈에 잘 띄지 않으며, 복잡한 경우 퍼포먼스에 문제를 일으킬 수 있기 때문이라고 설명함, 

응..?


그리고 추가적으로는, 해당 오브젝트가 

screen 안으로 인입 시 225msec,

screen 밖으로 빠질 때 195msec,

큰 스크린인 경우(태블릿 이하라고 봐야 할 듯) 375msec 수준을 권장


400msec를 넘으면 느리다고 인식,



아래는 이 내용을 정리하다 문득, 예전에 정리했던 자료가 생각나 첨부, :)





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

Technorati Profile