User Experience Design :: [IxD] 머티리얼 디자인 모션가이드 (Material Design Motion Guide)

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

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


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

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