출처 : http://www.google.com/design/spec/layout/structure.html 각 구조(모바일, 태블릿, 데스크 탑 별)의 명칭모바일 Table 데스크탑 --------------------------ToolbarsFull-width, default height app bar : 폭은 전체, 기본 높이 Full-width, extended height app bar : 폭은 전체, 높이는 확장 Column-width toolbars at multiple levels of hierarchy : 여러 단계가 있을 때 한 컬럼의 폭을 가지는 툴바 Flexible toolbar and card toolbar : 가변적인 툴바와 카드 내 툴바 Floating toolbar : 떠있는..
출처 : http://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing Padding is an inner spacing, while margin is an outer spacing패딩은 안쪽 공간, 마진은 바깥쪽 공간. Layout에 공간을 주는게 margin : 왜냐하면 안에 배치되는 view들에게는 바깥쪽 공간이 변하는 것이므로View 에 공간을 주는게 padding Tablet에서List 와 detail view 화면의 좌우여백은 24dp내용의 왼쪽 여백은 80dp리스트는 오른쪽 padding 24dpdetail view는 왼쪽 padding 104dp 세로 공간status bar, li..
출처 : http://www.google.com/design/spec/layout/metrics-keylines.html 화면의 비율 Touch target size : 최소크기는 48 x 48dp. 터치 대상의 간격은 8dp 이상아이콘의 크기는 24dp, 아바타는 40dp터치 대상은 겹치지 않아야 한다. 평균적으로 48dp의 물리적 길이는 대략 9mm. 손가락으로 터치하기 편한 크기는 7~10mm 터치 대상의 높이는 48dp, 버튼 높이는 36dp Baseline grids : 기본 모든 compones는 8dp의 사각형 그리드를 기준으로 하고아이콘은 4dp를 기준으로 한다. 줄간 간격은글씨가 45sp 일 때, 48pt글씨가 34sp 일 때, 40pt 처럼 아래 기준은 따른다. List 일 때,Item..
참조 : http://www.google.com/design/spec/layout/units-measurements.html# Pixel density : 픽셀단위의 밀도. 절대값 - 스크린의 크기에 상관없이 같은크기.Density-independent pixels(dp) : 픽셀에 독립적인 글자 밀도. 비율 - 스크린에 따른 크기변화 여러 다양한 기기를 지원하기 위해서는 dp가 좋고한기기에 딱 맞는 디자인을 위해서는 pixel도 나쁘지 않다. 스크린 밀도 120 픽셀 180 px 240 dp 스크린 밀도 160 픽셀 240 px 240 dp 스크린 밀도 240 픽셀 360 px 240 dp 스크린 밀도 = 해상도.해상도가 달라질 때마다 픽셀은 거기에 맞게 조정되어야 하지만 dp는 비율에 따라 조정이 됨..
참조 : http://www.google.com/design/spec/layout/principles.html#principles-floating-action-button Layout Seams : 한 화면을 두개로 나누어 사용. 나누기만 했을 뿐 같이 동작Steps : 두개의 겹쳐저 위 아래 단계로 구성 됨. 각각 동작 Floating action button : 흐르는 또는 떠있는 동작버튼?그냥 화면 가장 위에 고정되어 스크롤 등이 있더라도 그 자리를 유지하는 버튼
출처 : http://www.google.com/design/spec/style/writing.html Error나 Dialog, 설정, Data 등에 사용되는 Text - 간단한 단어조합을 유지하라 예) 더보기 클릭(O), 더보기 버튼을 클릭하세요(X)- 능동적인 용어를 사용하라 예) 24자 이하로 입력하세요(O), 24자 이하여야만 합니다(X)- 모두가 알기 쉬운 단어/표현을 써라 예)비디오 준비중(O), 버퍼링(X) 예)당신의 스마트폰은 지원하지 않습니다(O), API 21버전이상을 지원합니다(X)- 필요없는 강조는 생략한다 예) 사진을 지우겠습니까?(O), 지워진 사진은 복구되지 않습니다. 지우시겠습니까(X)- 완곡한 표현을 쓴다 예) 지우기(O), 삭제(X)- '절대'라는 말은 쓰지 않는다.- ..
Android Material Design Style-Imagery출처 : http://www.google.com/design/spec/style/imagery.html#imagery-best-practices이미지 만드는 법도 디자이너에게 ------------------------------------------------Android Material Design Style-Typography출처 : http://www.google.com/design/spec/style/typography.html#typography-language-categorization 언어별 구분이 필요함. 크게 세가지로기본 크기 :영어와 그 인접언어 : Latin(베트남 제외), Greek 등은 Roboto와 Noto를 둘..
참조 : http://www.google.com/design/spec/style/icons.html아이콘 디자인은 전문적인 디자이너 영역이므로 조금만... 제품을 나타내는 아이콘 (어플 아이콘 등), 주요 모양 - 사각형 : 높이 152dp, 폭 : 152dp - 원 : 지름 176dp - 세로가 긴 직사각형 : 높이 176dp, 폭 : 128dp - 가로가 긴 직사각형 : 높이 128dp, 폭 : 176dp DP unit grid 제품아이콘은 48dp 정도에 1dp의 구석여백을 포함한다. 아이콘 생성기 기분은 원래 크기의 4배를 기준으로 한다 192dp x 192dp. 구석여백 4dp Geometry : 형태 원, 정사각형, 직사각형, 직교성, 대각선 등을 고려해야 함 제품이아콘 요소 - finish(..
1. Color palette 선택 2. UI color application - 선택한 Color palette 에서 2가지(주요, 두번째 주요) Color를 선택한다주요 Color : 500, 100, 500, 700두번째 주요 Color(강조를위해) : 200, Fallback, 100,400 를 고른다. 3. Use opacity for text, icons, and dividers 글자나 아이콘, 분류영역의 불투명도- 밝은배경일 때 기본칼라(검정 : #000) : 100% 주요글자 : 87% 두번째 주요글자 또는 아이콘 : 54% 비활성 또는 힌트글자 : 38% 분류영역 : 12% 주요색상 : 100% 두번째 주요색상 : 100% - 어두운배경일 때 기본칼라(휜색 : #FFF) : 100% 주요..
Material Design : 구글에서 2014년에 발표한 새로운 UI 스타일 가이드. API 버전 21부터 적용 참조 : Material design speck : http://www.google.com/design/spec/material-design/introduction.htmlMaterial design for android : http://www.google.com/design/spec/material-design/introduction.html 목차Android Material Design- Style - Color - Icons - Imagery - Typography - Writing- Layout - Components- Patterns- Usability- Resources