8dp
8dp 디자인의 중요성
그리드 시스템을 만들려면 그리드 간격을 유지하는 기준이 있어야 한다. 기본적으로 ios와 안드로이드를 사용하는 모바일, 탭블릿... 의 모든 구성 요소는 8dp의 기본 그리드에 맞춰 정렬하는것이 바람직하다.
안드로이드 기기의 dpi
| 해상도 | dpi | 비율 | 화면밀도 |
|---|---|---|---|
| ldpi | 120 | 0.75 | 240x320 |
| mdpi (기준) | 160 | 1.0 | 320x480 |
| hdpi | 240 | 1.5 | 480x800 |
| xhdpi | 320 | 2.0 | 720x1280 |
| xxhdpi | 480 | 3.0 | 1080x1920 |
| xxxhdpi | 640 | 4.0 | 1440x2560 |
hdpi인 1.5배수에 대응하지 못하는 수치가 나타나지 않게 하기 위해서이다.
물리적으로 구현하지 못하는 13.5px, 1.5px 이러한 값이 나오지 않도록 8배수를 아주 중요하게 고려해야 한다.
물론 이미지 수직, 수평 간격도 8배수, 불가능하다면 4배수를 지키는 것이 좋다.
요즘은 4배수를 권장하는 경우도 있다.
타이포 그래피의 경우 소수를 지원하므로 4배수 권장함
그리드 시스템
시각적 효과를 고려해 사진,그림, 문자를 지면에 배열하는 레이아웃
격자 형태의 안내선
마진 : 녹색영역, 화면의 양끝 공간, 고정값
컬럼 : 핑크영역, 마진과 거터를 제외한 나머지 너비를 컴럼 갯수로 나눔
거터 : 파란영역, 컬럼과 컬럼사이의 영역, 고정값
웹디자인기준 : 1280px에 12컬럼이 기본권장값, 더 넓게 사용하기도 함
모바일 기준 : 360dp 기준 4컬럼, 600dp 기준 8컬럼 권장
엘리베이션
우리가 보는 2D화면은 2차원이지만 실제로는 가상의 깊이를 나타내는 z축이 있다.
그림자 값으로 높낮이를 조절
높이값이 1dp인 컨테이너와 8dp인 컨테이너의 높이차는 7dp
선택/ 비선택의 효과를 줄 수 있음
컬러
타이포그래피
아이콘
아이콘을 제작할 때는 다양한크기로 준비해야한다.
즐겨찾기나 공유 같은 아이콘은 터치 크기에 맞게 48x48dp로 제작
구글플레이에 앱 등록을 위해서는 512x512px의 크기가 필요
앱스토어에 앱 등록을 위해서는 1024x1024px의 크기가 필요
아이콘 크기와 키라인
앱 아이콘은 4배수 크기로 제작
그리드를 기반으로 하는 키라인의 핵심모양을 기준으로 사용하면 아이콘 전체에서 시각적 비율을 일관되게 유지할 수 있다.
키라인에 맞춰 제작되는 시스템 아이콘의 크기는 24x24dp이다. 시스템 아이콘의 콘텐츠는 20dp의 라이브 영역 내에 있어야한다. 이 라이브 영역에 2dp의 패딩값을 더해 24dp가 된다.
조밀한 아이콘의 경우 라이브영역은 16dp, 패딩 2dp를 더해 20dp가 된다.
24의 아이콘에는 48dp의 터치 영역을 제공하고, 20dp의 조밀한 아이콘에는 40dp의 터치 영역을 제공한다.
밀도가 높은 UI에서 아이콘이 잘 작동하도록 획 및 채우기 속성을 지정
획이 두꺼울 수록 무게감이 더해짐, 채워지면 더 무거워짐
획이 가늘면 가벼워짐, 채워지지않은 아이콘은 더 밝은 스타일이 됨
윤곽선이 너무 두꺼우면 가독성이 떨어지며, 최소 2dp를 권장
