임성혁님, Google Korea (Developer Relations)
Open Source is a key part of Google Engineering
- Kubernetes, Android, Chrome, Tensorflow
임베디드 개발자 출신 - 개발자가 디자인 감각을 가지고, 협업을 할 수 있는 디자인이라고 생각한다.
What’s Material Design?
- 2014 출시, 전폭적 지지로 성장됨. 많은 툴들이 공개됨
- Print design Methods
- Motion provides meaning
- Flexible foundation
- Cross-platform
- Material Design System is a set of components…
- Material Design System is a set of patterns…
- https://material.io : Guidelines
- Material Design Example : SHRINE
- Stickersheet (이런것도 있나? 하는 것들도 다 있음)
What’s new in Material Design?
- 검은색 바탕 흰색 글씨로 변경
- Material System
Material Foundation
Material Guidelines - Tools, Editor (Sketch 앱과 사이트를 통해 제공) 를 통하여 실제로 어울리는 색상을 골라주고 플러그인 형태로 Standalone 형태의 개발을 할 수 있다.
Gallery 는 한 Products를 개발할 때 각 서버와 플랫폼을 관리할 수 있다. 버전관리가 용이함.
How to use Material Design ?
Tabs : Gesture에 가장 민감한 사항. 잘 이해하면 전체적으로 구조 파악이 용이하다.
- 확장이 가능하고, 정보가 있으며, 동등한 단계의 카테고리들로 구성되어야한다. (Scalable, Informative, Peers)
- 메뉴 하위 구분 필수
아이콘 전용메뉴 제공 가능. (그러나 사용자들이 확실하게 분별할 수 있도록 설정해야한다.)
잘린 문자, 또는 바로 이해할 수 없게끔 줄인 문자는 사용 불가.
Navigation Drawer
- 조직적이며, 아이템마다 그 특성이 확인이 가능하며, 해당 상황이나 맥락별로 구분이 가능해야한다. (Organized, Identifiable, Contextual)
- 5개 이상의 메뉴를 사용할 때 권장
오른쪽 화면에 나오는 앱에서 사용을 해서는 안된다.
Label 내용을 간결하게, 폰트를 작게 하지 말기
동일한 다수의 아이콘 사용 불가
아이콘 사용유무 일관성 유지 (사용자들이 상하위 메뉴 구분이 힘들어하기 때문이다.)
모든 메뉴에 구분자를 사용하지 않도록 한다. (예: ListView 사용시 구분자를 사용하지 않도록)
Floating Action Button
- 기능에 대해 건설적이거나 접근이 용이하며, 상황별로 구분이 가능하며, 다른 레이아웃이나 컴포넌트들에 가리지 않고 사용자들에게 우선적으로 보여져야 한다. (Constructive, Contextual, Primary)
- 항상 떠있어야 하고 가장 맨 위로 올려있다.
FAB는 분산없이 하나로만 사용 권장. 누르지 않더라도 기능이 분별한 아이콘만 사용 권장.
Layer Badges 사용 권장하지 않음. 글씨 사용은 미권장.
Extended Floating Action Button
- Extended Floating Action Button 사용원칙은 Floating Action Button 과 동일하다.
- Text Only
- Wrapping Text (두 줄 이상)
App Bars : Top
- 지속적이어야하고, 사용자들이 원하는대로 이동할 수 있도록 유도되어야하고, 그 자체로써 위치되어져야 한다. (Persistent, Guiding, Components)
- Bar에 이미지 넣는 것을 지양.
두 줄 이상의 메뉴 이름 사용 불가. (…)문자 사용 불가.
작은 문자 크기 사용 불가
App Bars : Bottom
- 주로 한국인들이 사용하는 디자인. 또는 큰 화면의 휴대폰에서 편리한 메뉴 선택 사용을 도움.
- 역동적이며, 유연해야하며, 인체공학적이어야한다. (Actionable, Flexible, Ergonomic)
- 자유로운 Positioning 가능
FAB on a Bottom Bar (붕 떠있는 형태로 사용하면 안된다.)
Action이 2개 이상으로 사용 필수. Navigation 을 넣는 걸 권장하지 않음.
Backdrop
(Google I/O 2018 신기능)
- 필요 레이아웃들이 서로 연관되어져야하며, 즉시 그 이벤트가 보여져야하며, 상황에 맞춰 제공되어야한다. (Relevant, Immediate, Contextual
- 항상 보이는 것이 아니라, 임시적으로 숨겨져 있는 부분들을 제공함.
(Edit 할 수 있는 부분이 아니고, 단순히 Viewable 한 부분으로 제공하여야함)