Transcript Android Design Guide

Android Design Guide
개정 이력
개정 번호
개정 범위
1.0.0
전체
개정 내역
안드로이드 디자인 가이드 최초 작성
개정자
개정 일자
권정훈
2013.06.28
기본 룰
•
가이드 기준 해상도는 800 * 480 기준으로 작성
 다수의 사용자가 사용하는 최소 해상도 단말기를 기준으로 함
 특별한 경우를 제외하고 극소수의 사용자에 대한 단말기 해상도 지원은 배제
•
디자인 가이드 기본 단위는 px 로 고정
 디자인팀의 업무 효율화를 위해 개발팀에서 px 를 dp 로 변환해서 사용
•
이미지 파일명은 영문 소문자로 시작하며 파일명에 대문자, 하이픈(-), 특수문자 사용 금지
•
이미지 리소스 폴더 분리
 hdpi : 480 * 800 이미지
 xhdpi : 720 * 1280 이미지
•
나인패치 이미지는 가이드 기준 해상도 크기로 맞춤
 UI 상에서 정상적으로 출력이 되지 않는 현상 방지
단위 표기
단색 배경은 RGB 색상 표기
고정값 표기
xx(yy) 와 같이 가변 길이 표기
xx(yy) 와 같이 가변 길이 표기
고정값 표기
위와 같은 하단 메뉴의 경우 width 표기 불필요
4개의 메뉴 버튼이 각각 1:1:1:1 비율로 적용되며
이미지는 나인패치 사용
단색 배경은 RGB 색상 표기
단위 표기
우측 원형 메뉴와 형태의 경우
해상도에 따라 가변 길이가 적용되어야 한다면
개발기간에 영향이 미치므로 일정에 대한 협의가 필요
UI 형태가 원형이라 일반적인 단순 수치 입력으로
가변 길이에 대응하는 XML Layout 구성이 불가
나인 패치
가변(stretchable) 영역 지정
나인패치 대상 이미지의 배경이 단색으로
이미지 가변시 패턴의 깨짐이 없이 자연스럽게 출력
내용(content) 영역 지정
내용영역은 특수한 경우를
제외하고는 설정하지 않음
나인패치 대상 이미지의 배경이 그라데이션 적용으로
이미지 가변시 패턴의 깨임지 발생할 수 있음
가변 영역은 상단과 좌측의
가변영역 설정 구간의 교차점
내용 영역은 하단과 우측의
내용영역 설정 구간의 교차점
설정이 안된 영역은 패딩 공간으로 자동 할당
다음 형태의 이미지는
가변 영역을 빨간선 기준으로
중앙에 상/하단 한줄로 처리 가능하며
이미지가 사용되는 Layout 에
다른 하위 컴포넌트가 올라가기 때문에
내용영역이 설정되어 있음
나인 패치
로그인 배경 이미지와 같은 형태의
나인패치는 컨텐츠 영역 설정이 필요
나인패치 이미지 영역 내부에
하위 컴포넌트가 올라가는 형태
나인 패치
동일한 dp 단위를 적용하지 않아
각 해상도별로 컴포넌트의 크기가 다름
로그인 배경 이미지와 같은 형태의
나인패치는 컨텐츠 영역 설정이 필요
나인패치 이미지 영역 내부에
하위 컴포넌트가 올라가는 형태
동일한 dp 단위를 적용하여
각 해상도별로 컴포넌트의 크기가 같음
Layout & DPI
각 단말별 화면의 인치를 기준으로
구분되는 Layout
각 단말별 dpi 를 기준으로
구분되는 안드로이드 dpi
각 밀도(density) 별 이미지 비율
각 밀도별 dp to px
ldpi : 1dp -> 0.75px
mdpi : 1dp -> 1px
각 밀도별 이미지를 제작할 경우
3;4:6:8의 비율을 따름
ex)
36 * 36
48 * 48
72 * 72
96 * 96
hdpi : 1dp -> 1.5px
xhdpi : 1dp -> 2px