모바일에서 점차 트랜지션, 애니메이션,모션과 같은 인터랙션에 대한 중요도가 높아지는 가운데,
구글이 머티리얼 디자인 모션 가이드를 내놓았다.
관련 영상을 보고나서 해당 문서를 보면 더욱 이해가 빠를 듯 하여 임베드, :)
모션 가이드 관련 영상
@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를 넘으면 느리다고 인식,
아래는 이 내용을 정리하다 문득, 예전에 정리했던 자료가 생각나 첨부, :)
