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

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

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

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

4. 원칙
어떤 플랫폼, 어떤 크기의 화면에서도
경험의 연속성이 유지되어야 합니다.
외관과 느낌(룩앤필)이 유지되어야 합니다.
이러한 노력은 사용자에게 편안함을 제공합니다.

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

6. 높이 우선 순위
모든 요소는 상대적인 높이의 우선순위를 가집니다.
요소들은 상태에 따라 마이너, 메이저 스탭을 가집니다.

7. 특수한 높이 우선 순위
일부 시스템 요소는 모든 앱 컨테이너 상하에 독립된 공간에
위치합니다. (ex 상태바, 다이알로그, 네비게이션바)

8. Seams
Seam(나누는 선)은 두 종이시트가 외곽선의 길이를 함께 공
유할 때 생성됩니다. 두 시트는 함께 움직입니다.

9. Step(그림자가 드리우는)은 두 종이시트가 중첩될 때 생성됩
니다. 두 시트는 각자 움직입니다.
Steps

11. 베이스 그리드 라인(base grid lines)이란
요소들이 정렬되기 위해 기준이 되는 그리드 선입니다.
모든 요소는 8dp를 기준으로 정렬됩니다.
글자는 4dp를 기준으로 정렬됩니다.
툴바 안에 있는 아이콘은 4dp를 기준으로 정렬됩니다.
베이스 그리드 라인

13. 키 라인
키 라인(key lines)이란
모바일, 태블릿, 데스크탑에서 가장자리로부터 얼마의 간격이 있어야 하
는지, 요소 간의 간격은 얼마여야 하는지 등을 제시하는 선입니다.
기본형 : 정해진 크기를 요소들의 크기에 적용
비율형 : 화면의 크기를 비율로 계산하여 요소들의 크기에 적용
증가형 : 기준 크기를 곱하기 하여 요소들의 크기에 적용

14. 기본형 키라인

15. 비율형 키라인

16. 증가형 키라인

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

18. 원칙
기본 개념
위젯 레이아웃 가이드
(Touch target size)

19. 터치 타겟의 사이즈
최소한의 터치 타겟 사이즈는 48dp입니다.

20. (2)편에서 계속
신부설 c9coco@gmail.com