[패스트 캠퍼스 수강후기] UIUX 인강 100% 환급챌린지 31회차 미션
UX/UI 디자인(2020) 올인원 패키지 Online.
UIUX 인강 챌린지 시작한지 반이 지났다~!
매일매일 꾸준히 들을 수 있는게 최고 장점인듯하다
미션 안했으면 영원히 안들었을듯 ㅋㅋㅋ
03. UI 디자인
Layout, Grid system
Screen size
Device Metrics
http://material.io/tools/devices
실제 작업해야하는 픽셀의 사이즈 - 밀도
가장 많이 사용하는 dp
기본 dpi
벡터 1:1로 디자인
비트맵 : xxxhdpi로 작업하고 줄이기 - 4배수 큰사이즈
- 작업환경이 더디다
- 용량이 무거움
- 2배수의 디자인작업
- 특히 게임
- 리소스무게를 줄이기 위해
기본 720 * 1280
Layout
시각적 효과를 고려하여 사진, 그림, 문자 등을 지면에 배열 구성하는 일.
독자의 입장에서 보기 쉽고 읽기 쉬우며 이해하기 쉬워야 하며
미적 효과, 통일감, 조화, 리듬, 균형, 대칭, 대비, 악센트 등 미적 형식 원리도 응용된다.
Grid system
“정보에 질서와 구조를 부여한다”
격자, 바둑판의 눈금을 뜻하며 판면을 구성할 때 쓰이는 가상의 격자 형태의 안내선을 말한다.
일반적으로 수직과 수평으로 면이 분할되며 레이아웃의 수단인 그리드는 인쇄물의 시각적 질서와 일관성을 유지시키는 도구이다.
- 가상의 격자 형태의 안내선
타이포그래피의 동일한 면적과 높이를 효율적으로 setting 가능
모바일은 8을 세팅
8dp grid
.5 정확히 대응 안됨.
정확히 대응하기 위해서 모든 숫자가 정수가 되도록 2배 곱하기
8이라는 숫자로 그리게 되면
그 이하의 해상도로 줄일 수 있기 때문에
8dp 그리드로 작업하기
cmd+’ = grid 활성화
그리드의 색깔은 가장 사용하지 않는 색
그리드의 칸이 많으면, 비효율적
40픽셀 네모칸 안 8픽셀 짜리 네모칸으로 설정
- 안드로이드 컴퍼넌트는 8의 배수를 기준으로 사용하고 있다.
- 요소 간격 최하 사이즈 8
- 스크린 좌우 마진 최소 사이즈 16
- 모든 버튼의 사이즈 24*24
- 4의 배수를 활용하기도 함
실제 안드로이드가 사용하는 컴퍼넌트
사이즈 측정법
사각형 툴로 재기 px
Column Grid
Column, Gutter
4 column - 단
8 column - 큰 단
column 과 column 사이 gutter 여백
Margin, Padding
박스 바깥과 안쪽에 여백을 두고 있음
안쪽 여백 padding
- top padding : tp
- bottom padding : bp
- left padding : lp
- right padding : rp
박스 테두리 - border
바깥 여백 Margin
- top margin : tm
- bottom margin : bm
- left margin : lm
- right margin : rm
일정 간격의 margin, padding, gutter
4개의 column
UX/UI 디자인 올인원 패키지 Online.