안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)

1. 신부설
2015.03.16
안드로이드 머터리얼 디자인 기반의
앱 레이아웃 가이드 (2)

2. 구글 디자인 스펙을 참고 하였습니다.
http://www.google.
com/design/spec/layout/principles.html
의역이 많습니다.

3. 원칙
기본 개념
위젯 레이아웃 가이드

4. 원칙
기본 개념
위젯 레이아웃 가이드
(App bar 툴바 역할을 포함할 수 있음)

5. 앱바 - 다양한 형태의 앱바(툴바)
확장된 높이의 앱바
플로팅 툴바
카드 툴바

6. 앱바 - 다양한 형태의 앱바(툴바)
분리된 파레트 툴바
키보드 또는 다른 하단 요
소 위에 달라붙는 하단 툴
바

7. 앱바 - 액션들을 어떻게 배치할까?
좌측엔 네비게이션 액션이,
우측엔 현재 상황과 관련된 액션이
나타나야 합니다.

8. 앱바 - 키 라인
기본 높이
가로 모바일 화면 : 48dp
세로 모바일 화면 : 56dp(48+8)
태블릿 / 데스크탑 : 64dp(56+8)

9. 툴바 아래에 새 종이가 내려오는 표현을
waterfall이라고 부릅니다.
종이가 끝까지 내려왔다는 것을 알리기 위해
step을 seam으로 변경합니다.
앱바 - 애니메이션
주목!
애니메이션의 흐름

10. 툴바 아래에 종이가 올라가며 툴바를 함께 밀어내는 표현을
pushing이라고 부릅니다.
앱바 - 애니메이션
애니메이션의 흐름

11. 원칙
기본 개념
위젯 레이아웃 가이드
(Side navigation)

12. 사이드 네비게이션 - 키 라인
기본 너비
세로 모바일 화면 : 화면 가로 너비 - 앱바의 높이
가로 모바일 화면 : 세로 모바일 화면과 동일
태블릿 / 데스크탑 : 304dp

13. 원칙
기본 개념
위젯 레이아웃 가이드
(List)

14. 리스트 - 리스트란?
리스트는 단일의 column을 가집니다.
리스트의 row들은 비슷한 크기의 높이를 가집니다.
리스트의 tile들은 내용물을 표현하는 공간입니다.
리스트에서 사용자의 시선은 위에서 아래로 흘러갑니다.

15. 리스트 - 리스트는 어떨 때 필요할까?
3라인 이하로 구성된 내용들은 list를 사용합니다.
3라인 초과로 구성된 내용들은 card를 사용합니다.
이미지로만 구성된 특별한 내용들은 grid를 사용합니다.

16. 타일 공간의 대부분은 기본(primary) 작업에 전념해야 합니다.
또한 모든 타일에서 일관적으을로 동작해야 합니다.
추가적인(secondary) 작업에 대한 액션은 타일 오른쪽에 배치합니다.
텍스트, 아이콘과 같은 것들이 있습니다.
리스트 - 액션들을 어떻게 배치할까?

17. 리스트에서 일반적으로 액션들은 서브 메뉴를 가지지 않습니다.
액션들은 다음 순서(카드 또는 호버카드)로 이어지게 할 수 있습니다.
모든 타일에 별 점수주기, 토글, 실행과 같은 의미있는 액션들을 배치하
여 시각적인 불편함을 주지 않도록 해야 합니다.
리스트 - 액션의 규칙

18. 타일 높이 : 48dp
텍스트 패딩 left : 16dp
텍스트 패딩 top : 16dp
텍스트 패딩 right : 16dp
텍스트 패딩 bottom : 20dp
텍스트 폰트 : Roboto Regular 16sp
리스트가 서브헤더 아래에 있는 경우 리스트 패딩 top에 8dp 추가
리스트가 서브헤더 위에 있는 경우 리스트 패딩 bottom에 8dp 추가
리스트 - 키 라인
싱글라인 리스트
Text only

19. 타일 높이 : 48dp
텍스트 패딩 left : 72dp
텍스트 패딩 top : 16dp
텍스트 패딩 right : 16dp
텍스트 패딩 bottom : 20dp
텍스트 폰트 : Roboto Regular 16sp
아이콘 패딩 : 16dp
리스트가 서브헤더 위 / 아래에 있는 경우 Text-Only와 동일
리스트 - 키 라인
싱글라인 리스트
Icon( or switch) with text

20. 타일 높이 : 56dp
텍스트 패딩 left : 72dp
텍스트 패딩 top : 16dp
텍스트 패딩 right : 16dp
텍스트 패딩 bottom : 24dp
텍스트 폰트 : Roboto Regular 16sp
아바타 패딩 left / t / r / b : 16 / 8 / 16 / 8dp
리스트가 서브헤더 위 / 아래에 있는 경우 Text-Only와 동일
리스트 - 키 라인
싱글라인 리스트
Avatar with text

21. 타일 높이 : 56dp
텍스트 패딩 left : 72dp
텍스트 패딩 top : 16dp
텍스트 패딩 bottom : 24dp
텍스트 폰트 : Roboto Regular 16sp
아이콘 패딩 : 16dp
아바타 패딩 left / t / r / b : 16 / 8 / 16 / 8dp
리스트가 서브헤더 위 / 아래에 있는 경우 Text-Only와 동일
리스트 - 키 라인
싱글라인 리스트
Avatar with text and icon( or switch)

22. 리스트 - 키 라인
타일 높이 : 72dp
텍스트 패딩 left / t / r / b : 16 / 20 / 16 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto Regular 14sp
리스트가 서브헤더 아래에 있는 경우 리스트 패딩 top에 8dp 추가
리스트가 서브헤더 위에 있는 경우 리스트 패딩 bottom에 8dp 추가
2라인 리스트
Text only

23. 리스트 - 키 라인
타일 높이 : 72dp
텍스트 패딩 left / t / r / b : 72 / 20 / 16 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto Regular 14sp
아이콘 패딩 : 16dp
리스트가 서브헤더 위 / 아래에 있는 경우 Text-Only와 동일
2라인 리스트
Icon( or switch) with text

24. 리스트 - 키 라인
타일 높이 : 72dp
텍스트 패딩 left / t / r / b : 72 / 20 / 16 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto Regular 14sp
아바타 패딩 : 16dp
리스트가 서브헤더 위 / 아래에 있는 경우 Text-Only와 동일
2라인 리스트
Avatar with text

25. 리스트 - 키 라인
타일 높이 : 72dp
텍스트 패딩 left / t / b : 72 / 20 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto Regular 14sp
아이콘 패딩 : 16dp
아바타 패딩 : 16dp
리스트가 서브헤더 위 / 아래에 있는 경우 Text-Only와 동일
2라인 리스트
Avatar with text and icon( or switch)

26. 리스트 - 키 라인
타일 높이 : 88dp
텍스트 패딩 left / t / r / b : 16 / 16 / 16 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto Regular 14sp
리스트가 서브헤더 아래에 있는 경우 리스트 패딩 top에 8dp 추가
리스트가 서브헤더 위에 있는 경우 리스트 패딩 bottom에 8dp 추가
3라인 리스트
Text only

27. 리스트 - 키 라인
타일 높이 : 88dp
텍스트 패딩 left / t / r / b : 72 / 16 / 16 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto Regular 14sp
아이콘 패딩 : 16dp
리스트가 서브헤더 위 / 아래에 있는 경우 Text-Only와 동일
3라인 리스트
Icon( or switch) with text

28. 리스트 - 키 라인
타일 높이 : 88dp
텍스트 패딩 left / t / r / b : 72 / 16 / 16 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto Regular 14sp
아바타 패딩 : 16dp
리스트가 서브헤더 위 / 아래에 있는 경우 Text-Only와 동일
3라인 리스트
Avatar with text

29. 리스트 - 키 라인
타일 높이 : 88dp
텍스트 패딩 left / t / b : 72 / 16 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto Regular 14sp
아이콘 패딩 : 16dp
아바타 패딩 : 16dp
리스트가 서브헤더 위 / 아래에 있는 경우 Text-Only와 동일
3라인 리스트
Avatar with text and icon( or switch)

30. - 리스트를 스크롤하기(↕)
- 타일의 스와이프하기(↔)
- 타일들을 정렬하기
리스트 - 리스트에서 할 수 있는 동작은?

31. (3)편에서 계속
신부설 c9coco@gmail.com