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

신부설2015.03.16

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

구글 디자인 스펙을 참고 하였습니다.http://www.google.

com/design/spec/layout/principles.html의역이 많습니다.

http://www.google.com/design/spec/layout/principles.html



원칙

기본 개념

위젯 레이아웃 가이드

원칙

기본 개념

위젯 레이아웃 가이드(App bar 툴바 역할을 포함할 수 있음)

앱바 - 다양한 형태의 앱바(툴바)

확장된 높이의 앱바

플로팅 툴바

카드 툴바

앱바 - 다양한 형태의 앱바(툴바)

분리된 파레트 툴바

키보드 또는 다른 하단 요소 위에 달라붙는 하단 툴바

앱바 - 액션들을 어떻게 배치할까?

좌측엔 네비게이션 액션이,우측엔 현재 상황과 관련된 액션이나타나야 합니다.

앱바 - 키 라인

기본 높이가로 모바일 화면 : 48dp

세로 모바일 화면 : 56dp(48+8)

태블릿 / 데스크탑 : 64dp(56+8)

툴바 아래에 새 종이가 내려오는 표현을

waterfall이라고 부릅니다.종이가 끝까지 내려왔다는 것을 알리기 위해

step을 seam으로 변경합니다.

앱바 - 애니메이션

주목!

애니메이션의 흐름

툴바 아래에 종이가 올라가며 툴바를 함께 밀어내는 표현을

pushing이라고 부릅니다.

앱바 - 애니메이션

애니메이션의 흐름

원칙

기본 개념

위젯 레이아웃 가이드(Side navigation)

사이드 네비게이션 - 키 라인

기본 너비세로 모바일 화면 : 화면 가로 너비 - 앱바의 높이

가로 모바일 화면 : 세로 모바일 화면과 동일

태블릿 / 데스크탑 : 304dp

원칙

기본 개념

위젯 레이아웃 가이드(List)

리스트 - 리스트란?

리스트는 단일의 column을 가집니다.

리스트의 row들은 비슷한 크기의 높이를 가집니다.

리스트의 tile들은 내용물을 표현하는 공간입니다.

리스트에서 사용자의 시선은 위에서 아래로 흘러갑니다.

리스트 - 리스트는 어떨 때 필요할까?

3라인 이하로 구성된 내용들은 list를 사용합니다.

3라인 초과로 구성된 내용들은 card를 사용합니다.

이미지로만 구성된 특별한 내용들은 grid를 사용합니다.

타일 공간의 대부분은 기본(primary) 작업에 전념해야 합니다.

또한 모든 타일에서 일관적으을로 동작해야 합니다.

추가적인(secondary) 작업에 대한 액션은 타일 오른쪽에 배치합니다.

텍스트, 아이콘과 같은 것들이 있습니다.

리스트 - 액션들을 어떻게 배치할까?

리스트에서 일반적으로 액션들은 서브 메뉴를 가지지 않습니다.

액션들은 다음 순서(카드 또는 호버카드)로 이어지게 할 수 있습니다.

모든 타일에 별 점수주기, 토글, 실행과 같은 의미있는 액션들을 배치하여 시각적인 불편함을 주지 않도록 해야 합니다.

리스트 - 액션의 규칙

타일 높이 : 48dp

텍스트 패딩 left : 16dp

텍스트 패딩 top : 16dp

텍스트 패딩 right : 16dp

텍스트 패딩 bottom : 20dp

텍스트 폰트 : Roboto Regular 16sp

리스트가 서브헤더 아래에 있는 경우 리스트 패딩 top에 8dp 추가

리스트가 서브헤더 위에 있는 경우 리스트 패딩 bottom에 8dp 추가

리스트 - 키 라인

싱글라인 리스트Text only







아이콘 패딩 : 16dp

리스트가 서브헤더 위 / 아래에 있는 경우 Text-Only와 동일


싱글라인 리스트Icon( or switch) with text







아바타 패딩 left / t / r / b : 16 / 8 / 16 / 8dp



싱글라인 리스트Avatar with text







아바타 패딩 left / t / r / b : 16 / 8 / 16 / 8dp



싱글라인 리스트Avatar with text and icon( or switch)



텍스트 패딩 left / t / r / b : 16 / 20 / 16 / 20dp

첫번째 텍스트 폰트 : Roboto Regular 16sp

둘번째 텍스트 폰트 : Roboto Regular 14sp



2라인 리스트Text only



텍스트 패딩 left / t / r / b : 72 / 20 / 16 / 20dp





2라인 리스트Icon( or switch) with text



텍스트 패딩 left / t / r / b : 72 / 20 / 16 / 20dp



아바타 패딩 : 16dp


2라인 리스트Avatar with text



텍스트 패딩 left / t / b : 72 / 20 / 20dp






2라인 리스트Avatar with text and icon( or switch)



텍스트 패딩 left / t / r / b : 16 / 16 / 16 / 20dp





3라인 리스트Text only



텍스트 패딩 left / t / r / b : 72 / 16 / 16 / 20dp





3라인 리스트Icon( or switch) with text



텍스트 패딩 left / t / r / b : 72 / 16 / 16 / 20dp





3라인 리스트Avatar with text



텍스트 패딩 left / t / b : 72 / 16 / 20dp






3라인 리스트Avatar with text and icon( or switch)

- 리스트를 스크롤하기(↕)

- 타일의 스와이프하기(↔)

- 타일들을 정렬하기

리스트 - 리스트에서 할 수 있는 동작은?

(3)편에서 계속신부설 [email protected]

Technology

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