[UI/UX]패스트캠퍼스 챌린지 13일차
오늘은 13일차입니당 둥둥
XD강의를 오늘도 들었어용
2개밖에 못들어서 좀 아쉽긴한데,,
약속이 2탕이 있어서 뛰고 들어오니 시간이 11시,,^_^
욕심부리지말고 2개만 제대로 듣자 해서 듣고 쓰는 챌린지!!
Android design UI
# 실제 종이 같은 화면을 터치
- 안드로이드 사용자는 물리화면을 터치합니다.
실제 종이를 마치 접은 것 처럼!
# 머터리얼 디자인 = 종이와 그림자
: 화면에 단계별로 색종이 카드가 떠 있다고 생각하면 됨,
즉 x/y/z 측이 존재하는 개념, z축은 그림자를 통해 표현
# 브랜드 컬러와 FAB 버튼
: 구글은 콘텐츠보다 앱의 주인공 컬러와 FAB버튼이 제일 잘보인다.
네비게이션 바가 애플보다 좀더 높게있고 그림자를 줘서 구분을 주는 특징
아이폰 같은 경우에는 컨텐츠 위주로 중요하게 하고
나머지 시스템디자인들은 모노톤으로 묻히게 하는 디자인을 한다.
구글 같은 경우에는 그림자를 주고 빛을 줘서 차이를 줌
# 컨텐츠 계층 관리
백블러는 밝고 튀는 색이 있을 수도 있음
따라서 밝고 튀는 색이 많으면 콘텐츠에 집중하기 어려울 수 있다.
**안드로이드는 블러처리보다 그냥 까만 네모나 배경을 주고 컨텐츠를 희게 해서 강조
# 4배수
구글 메테리얼 같은 경우에는 무조건 4배수
1. 8/16진수 사용
2. 8이나 16으로 나누면 나머지 0
3. 처리의 용이함이나 메모리 사용이 효율적
# UI 특징
1. 그림자 효과
2. 컬러 조정 (hsb에서 조절하면 됨)
3. 콘텐츠 계층
그림자효과 실습해보기~
수업에서는 외부그림자만 했는데 XD에 추가된건지 모르겠는데 내부 그림자도 있어서 해보았다!
# UI 키트에서 구글 디자인을 토대로 그림자 값을 하는게 좋음!!
# 4배수 아이콘 작업
- 안드로이드 같은 경우 필수 터치 영역 사이즈를 지정해놓음 => 48*48px
*방법
1. 아이콘을 가져온다
2. 24*24px 되는 사이즈의 네모를 만듬
3. 아이콘을 중앙정렬 시킴
4. 아이콘과 네모를 그룹 시킴
5. 네모를 불투명도를 줘서 안보이게 만들기
6. 48*48px의 사이즈 박스를 만들기
7. 완성되면 48*48 사이즈 박스 지우기(개발자에게는 48픽셀의 박스를 보여줄 필요가 없음
7-2. 패딩을 눌러서 12간격으로 하기
* 아이콘을 작업하고 디자인했다고 끝이 아니라 4배수로 작업해서 터치영역 잡아서 만들어야한다.
이것은 아이콘 작업!
48*48픽셀은 매우 작았다 ㅋㅋ
그래서 핸드폰 아트보드 만들어서 입혀봤더니 익숙한 크기더라~
쌤이 말해준 패딩 어딨지어딨지 하다가 찾았다 ㅎㅎ
실제로 클릭하면 저렇게 간격을 잡아준다.
이 중요한걸 모르고 여태 일하고있었다 ^^
내가 미쳤지..
앞으로 들어가는 회사 UI는 꼭 제대로 만들고 말것이다말것이다아~..
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.