Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
신부설
2015.03.16
안드로이드 머터리얼 디자인 기반의
앱 레이아웃 가이드 (2)
구글 디자인 스펙을 참고 하였습니다.
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
리스...
타일 높이 : 48dp
텍스트 패딩 left : 72dp
텍스트 패딩 top : 16dp
텍스트 패딩 right : 16dp
텍스트 패딩 bottom : 20dp
텍스트 폰트 : Roboto Regular 16sp
아이...
타일 높이 : 56dp
텍스트 패딩 left : 72dp
텍스트 패딩 top : 16dp
텍스트 패딩 right : 16dp
텍스트 패딩 bottom : 24dp
텍스트 폰트 : Roboto Regular 16sp
아바...
타일 높이 : 56dp
텍스트 패딩 left : 72dp
텍스트 패딩 top : 16dp
텍스트 패딩 bottom : 24dp
텍스트 폰트 : Roboto Regular 16sp
아이콘 패딩 : 16dp
아바타 패딩 l...
리스트 - 키 라인
타일 높이 : 72dp
텍스트 패딩 left / t / r / b : 16 / 20 / 16 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto...
리스트 - 키 라인
타일 높이 : 72dp
텍스트 패딩 left / t / r / b : 72 / 20 / 16 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto...
리스트 - 키 라인
타일 높이 : 72dp
텍스트 패딩 left / t / r / b : 72 / 20 / 16 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto...
리스트 - 키 라인
타일 높이 : 72dp
텍스트 패딩 left / t / b : 72 / 20 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto Regular ...
리스트 - 키 라인
타일 높이 : 88dp
텍스트 패딩 left / t / r / b : 16 / 16 / 16 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto...
리스트 - 키 라인
타일 높이 : 88dp
텍스트 패딩 left / t / r / b : 72 / 16 / 16 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto...
리스트 - 키 라인
타일 높이 : 88dp
텍스트 패딩 left / t / r / b : 72 / 16 / 16 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto...
리스트 - 키 라인
타일 높이 : 88dp
텍스트 패딩 left / t / b : 72 / 16 / 20dp
첫번째 텍스트 폰트 : Roboto Regular 16sp
둘번째 텍스트 폰트 : Roboto Regular ...
- 리스트를 스크롤하기(↕)
- 타일의 스와이프하기(↔)
- 타일들을 정렬하기
리스트 - 리스트에서 할 수 있는 동작은?
(3)편에서 계속
신부설 c9coco@gmail.com
Upcoming SlideShare
Loading in …5
×

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

5,162 views

Published on

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

Published in: Technology
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { https://urlzs.com/UABbn } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ..................................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. 신부설 2015.03.16 안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
  2. 2. 구글 디자인 스펙을 참고 하였습니다. http://www.google. com/design/spec/layout/principles.html 의역이 많습니다.
  3. 3. 원칙 기본 개념 위젯 레이아웃 가이드
  4. 4. 원칙 기본 개념 위젯 레이아웃 가이드 (App bar 툴바 역할을 포함할 수 있음)
  5. 5. 앱바 - 다양한 형태의 앱바(툴바) 확장된 높이의 앱바 플로팅 툴바 카드 툴바
  6. 6. 앱바 - 다양한 형태의 앱바(툴바) 분리된 파레트 툴바 키보드 또는 다른 하단 요 소 위에 달라붙는 하단 툴 바
  7. 7. 앱바 - 액션들을 어떻게 배치할까? 좌측엔 네비게이션 액션이, 우측엔 현재 상황과 관련된 액션이 나타나야 합니다.
  8. 8. 앱바 - 키 라인 기본 높이 가로 모바일 화면 : 48dp 세로 모바일 화면 : 56dp(48+8) 태블릿 / 데스크탑 : 64dp(56+8)
  9. 9. 툴바 아래에 새 종이가 내려오는 표현을 waterfall이라고 부릅니다. 종이가 끝까지 내려왔다는 것을 알리기 위해 step을 seam으로 변경합니다. 앱바 - 애니메이션 주목! 애니메이션의 흐름
  10. 10. 툴바 아래에 종이가 올라가며 툴바를 함께 밀어내는 표현을 pushing이라고 부릅니다. 앱바 - 애니메이션 애니메이션의 흐름
  11. 11. 원칙 기본 개념 위젯 레이아웃 가이드 (Side navigation)
  12. 12. 사이드 네비게이션 - 키 라인 기본 너비 세로 모바일 화면 : 화면 가로 너비 - 앱바의 높이 가로 모바일 화면 : 세로 모바일 화면과 동일 태블릿 / 데스크탑 : 304dp
  13. 13. 원칙 기본 개념 위젯 레이아웃 가이드 (List)
  14. 14. 리스트 - 리스트란? 리스트는 단일의 column을 가집니다. 리스트의 row들은 비슷한 크기의 높이를 가집니다. 리스트의 tile들은 내용물을 표현하는 공간입니다. 리스트에서 사용자의 시선은 위에서 아래로 흘러갑니다.
  15. 15. 리스트 - 리스트는 어떨 때 필요할까? 3라인 이하로 구성된 내용들은 list를 사용합니다. 3라인 초과로 구성된 내용들은 card를 사용합니다. 이미지로만 구성된 특별한 내용들은 grid를 사용합니다.
  16. 16. 타일 공간의 대부분은 기본(primary) 작업에 전념해야 합니다. 또한 모든 타일에서 일관적으을로 동작해야 합니다. 추가적인(secondary) 작업에 대한 액션은 타일 오른쪽에 배치합니다. 텍스트, 아이콘과 같은 것들이 있습니다. 리스트 - 액션들을 어떻게 배치할까?
  17. 17. 리스트에서 일반적으로 액션들은 서브 메뉴를 가지지 않습니다. 액션들은 다음 순서(카드 또는 호버카드)로 이어지게 할 수 있습니다. 모든 타일에 별 점수주기, 토글, 실행과 같은 의미있는 액션들을 배치하 여 시각적인 불편함을 주지 않도록 해야 합니다. 리스트 - 액션의 규칙
  18. 18. 타일 높이 : 48dp 텍스트 패딩 left : 16dp 텍스트 패딩 top : 16dp 텍스트 패딩 right : 16dp 텍스트 패딩 bottom : 20dp 텍스트 폰트 : Roboto Regular 16sp 리스트가 서브헤더 아래에 있는 경우 리스트 패딩 top에 8dp 추가 리스트가 서브헤더 위에 있는 경우 리스트 패딩 bottom에 8dp 추가 리스트 - 키 라인 싱글라인 리스트 Text only
  19. 19. 타일 높이 : 48dp 텍스트 패딩 left : 72dp 텍스트 패딩 top : 16dp 텍스트 패딩 right : 16dp 텍스트 패딩 bottom : 20dp 텍스트 폰트 : Roboto Regular 16sp 아이콘 패딩 : 16dp 리스트가 서브헤더 위 / 아래에 있는 경우 Text-Only와 동일 리스트 - 키 라인 싱글라인 리스트 Icon( or switch) with text
  20. 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. 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. 22. 리스트 - 키 라인 타일 높이 : 72dp 텍스트 패딩 left / t / r / b : 16 / 20 / 16 / 20dp 첫번째 텍스트 폰트 : Roboto Regular 16sp 둘번째 텍스트 폰트 : Roboto Regular 14sp 리스트가 서브헤더 아래에 있는 경우 리스트 패딩 top에 8dp 추가 리스트가 서브헤더 위에 있는 경우 리스트 패딩 bottom에 8dp 추가 2라인 리스트 Text only
  23. 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. 24. 리스트 - 키 라인 타일 높이 : 72dp 텍스트 패딩 left / t / r / b : 72 / 20 / 16 / 20dp 첫번째 텍스트 폰트 : Roboto Regular 16sp 둘번째 텍스트 폰트 : Roboto Regular 14sp 아바타 패딩 : 16dp 리스트가 서브헤더 위 / 아래에 있는 경우 Text-Only와 동일 2라인 리스트 Avatar with text
  25. 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. 26. 리스트 - 키 라인 타일 높이 : 88dp 텍스트 패딩 left / t / r / b : 16 / 16 / 16 / 20dp 첫번째 텍스트 폰트 : Roboto Regular 16sp 둘번째 텍스트 폰트 : Roboto Regular 14sp 리스트가 서브헤더 아래에 있는 경우 리스트 패딩 top에 8dp 추가 리스트가 서브헤더 위에 있는 경우 리스트 패딩 bottom에 8dp 추가 3라인 리스트 Text only
  27. 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. 28. 리스트 - 키 라인 타일 높이 : 88dp 텍스트 패딩 left / t / r / b : 72 / 16 / 16 / 20dp 첫번째 텍스트 폰트 : Roboto Regular 16sp 둘번째 텍스트 폰트 : Roboto Regular 14sp 아바타 패딩 : 16dp 리스트가 서브헤더 위 / 아래에 있는 경우 Text-Only와 동일 3라인 리스트 Avatar with text
  29. 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. 30. - 리스트를 스크롤하기(↕) - 타일의 스와이프하기(↔) - 타일들을 정렬하기 리스트 - 리스트에서 할 수 있는 동작은?
  31. 31. (3)편에서 계속 신부설 c9coco@gmail.com

×