구글 머테리얼 디자인 : 다양한 안드로이드 기기의 크기에 맞는 제작 기준 제공
https://m3.material.io/
애플 휴면 인터페이스 가이드라인 : ios에 맞는 디자인 시스템 제공
https://developer.apple.com/design/
MS 플루언트 디자인 : 웹, 윈도우, ios, 안드로이드(계회중) 플랫폼에서 일관된 버전을 만듦
https://fluent2.microsoft.design/
UI 디자인 가이드라인 : UI를 표준화해 시스템의 일관성을 확보하는 것이 목적
UX 디자인 가이드라인 : 통일되고 일관된 경험을 제공함으로써 브랜드와 서비스의 차별화를 전달하는 것이 목적
디자인 시스템 : UI, UX의 가이드라인을 포함, 브랜드의 정체성, 색상, 보이스 등이 일관성 있게 전달 되도록 구성
브랜드 아이덴티티
사용자가 기업과 소통할 수 있도록 브랜드 경험을 만드는 방법
브랜드 아이덴티티를 사용자에게 전달하려면 무엇보가 일관성 유지가 필요
사람들을 흔히 브랜드를 각인된 로고나 특정 색상의 집합으로 받아들임
비주얼 아이덴티티
디자인 스타일 가이드의 근간이 되는 시각적 구성 요소의 아이덴티티를 수립하는 것
로고, 색상, 타이포그래피, 이미지, 보이스
색상 : 시그니처 색상을 사용 -> 흰색, 검은색 글씨가 잘보이나 확인 할것!!
타이포그래피 : 글꼴 -> 일단은 고딕체
이미지 : 대부분의 기업은 일관된 콘셉트의 사진이나 삽화를 통해 브랜드를 표현하고자 노력
탐색 스타일
| ios | 안드로이드 |
|---|---|
| 화면 왼쪽 상단의 뒤로가기 컨트롤, 디바이스 하단에 있는 탭 바가 기본 탐색 모음 | 화면 하단에 뒤로 버튼, 홈버튼, 멀티태스킹 버튼으로 구성, 텀샥 버눈 범용 탐색 모음으로 모든 페이지에 위치하며 언제든 이전 화면으로 쉽게 이동할 수 있다. |
그리드
| ios | 안드로이드 |
|---|---|
| pt | dp |
| 375x812 | 360x640 |
해상도
이전의 웹 디자인에서는 사용자의 푲누 모니터 크기와 사용성만 충족하면 되었기 때문에 아트보드의 크기를 지정하는 픽셀단위 해상도만 고려되어 왔음
해상도는 화면에서 이미지를 몇개의 픽셀, 도트로 표현하는지를 나타내는 정밀도의 지표이다.
픽셀이 많을 수록 이미지를 더 세밀하게 표현할 수 있다.
픽셀
픽셀은 화면을 구성하는 최소 단위로, px을 단위로 사용
ios가 화면에 콘텐츠를 배치할 때 사용하는 좌표계는 포인트 단위를 기반으로 한다.
표준 해상도 디스플레이는 1:1 픽셀 밀도 이며, ios에서는 @1X로 표시한다.
1pt = 1px
터치 타깃 영역의 기본 크기인 44x44는 레티나 디스플레이에서는 88x88로 키워서 디자인해야한다.
dp
픽셀을 기준으로 1인치 안에 표시 되는 픽셀수를 나타내는 ppi
안드로이드에서는 dp단위를 사용
픽셀 밀도로 인해 의도한 것 보다 크거나 작게 표현되는 상황을 방지하기 위해 사용
래스터화
dp는 수학적 좌표 공간에서만 의미 있는 추상 단위
dp는 픽셀로 렌더링되며 dp에 배율을 곱해 픽셀 값을 얻는다.
dp값을 기준으로 너비와 높이를 px로 계산해야 디자인할 아트보드의 크기를 구할 수 있다.
아이폰xs기준
논리적표현(dp) : 375x812
렌더링 3x
물리적표현(px) : 1125x2436
다운샘플링 없음
인지(ppi) : 458ppi
