[패스트 캠퍼스 수강후기] UIUX 인강 100% 환급챌린지 43회차 미션

UX/UI 디자인(2020) 올인원 패키지 Online.

 

UIUX 인강 43회차. 오늘은 material design bottom navigation 제작법을 배웠다. 

지금까지 배웠던 top navigation이나 app drawer과 기본 토대는 비슷하다.

요즘 bottom navigation design이 보편화되어서 많이보이던데, 꼭 알아둬야겠다. 

 

03. UI 디자인

 

 

Bottom Navigation

with Material Design

 

 

요즘은 사용성 통일을 위해 android와 ios모두 Bottom navigation으로 navigation을 하나로 통일하는 경우가 많다.

그래서 bottom navigation이 중요하다.

 

Background

1. #222222

 

Ractangle

1. w 100% h 56
2. #FFFFFF
3. command + D
4. w /4 or /3 -> 4칸 or 3칸

 

Icon

1. +insert icon
2. alien center
3. guide 16*16
4. roboto 12 dp

 

text

1. t
2. x : 12 , 오른쪽 끝까지 당기고 -12
3. 그루핑 
4. create symbol
5. selected icon 만들기
6. command 누르고 들어가서 오브젝트 하나하나 수정가능
7. primary 색깔로 icon과 text바꾸기

 

두줄 레이어일때는? 

1. 더블클릭해서 심볼 컨트롤 메뉴 들어가기
2. command + 텍스트 누르기
3. text field를 아래로당겼다가 위로 올려서 리사이징
4. sketch가 사이즈 변경을 인지

 

 

!!Adjust content on resize!!  꼭  선택

 

icon - fix size, 여백 위 - 고정

text - height 고정, 여백 아래 - 고정

• selected 상태도 똑같이 고정
• 전체 height 고정, 아래 고정
• 안보이던 text - artboard 늘이면 글자가 나타남

 

• icon type으로만 나오는 bottom navigation이 많으니 icon type으로 연습
• bottom navigation의 56이라는 높이값이 부담스러워서 줄이는 케이스도 많음
• 그래도 touchable 할 수 있도록 48이라는 사이즈는 지켜주는 편

 

 

 

---

UX/UI 디자인 올인원 패키지 Online.  

https://bit.ly/2PDn0W0