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

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

UIUX 인강 컴포넌트 화면 학습 마지막 시간!

 

03. UI 디자인

 

 

Lists

with Material Design

list를 만들어 나름대로의 원칙을 세워 리스트 컴포넌트, 심볼을 만들어 지금까지 배운 것을 복습한다고 생각

 

-머릿속으로 구상하기-

리스트가 어떤 타입이 필요할지

왼쪽에는 이미지 썸네일이 나오고

타이틀과 본문 텍스트가 나오며

우측에는 간단한 공유하기나 좋아요를 누를 수 있는 아이콘이 나온다

 

 

1. Background에 색깔기 #F2F2F2
2. ractangle - R 누르고 드래그
3. X 0 Y 0 W 360 H 80
4. 이미지 썸네일이 들어갈 placeholder
5. rectangle 80*80 X 16 Y +8 

 

1. 1:1 사이즈로 삽입
2. dummy image 넣기
3. 제목, 본문 텍스트 넣기

 

 

1. 임의로 띄어서 text 넣기
2. 본문용 텍스트 넣기
3. body2 medium 2중

 

1. 본문과 제목 사이 8씩 띄우기
2. 만약 캡션이 들어가면 캡션 넣기 

• +  Baseline > Caption > Primary >  On surface > Left
• 텍스트 사이즈를 조금씩 다듬기

 

1. + insert > Baseline > Icon > Favorite > Filled  -  Favorite 아이콘
2. middle 위치에 배치
3. Text box 아이콘 까지 늘리기  width- 16

 

1. command + G - group
2. create symbol

1. 설정창에 뜬금 없이 더미로 넣은 도시명이 들어가있음
2. overide의 명칭을 바꿔주기
3. 해당 심볼로 들어가서 순서 바꿔주기
4. 이름 바꿔주기

1. option 키를 같이 누르면 잠금 
2. 복제해서 내용 바꾸고 완성

 

 

ETC.

 

 

2018 Material guide 2.0에 처음 소개된 bottom bar

google task

 

• App bar (bottom)
• App bar (top)
• Backdrop
• Banner 
• Bottom Navigation
• Button
• FAB
• Card
• Chip
• Data table
• Dialogs
• Divider
• Image List
• List
• Menu
• Navigation Drawer
• Progress indicators
• Selection controls
• Sheet (bottom)
• Sheet (side)
• Slider
• Snackbar
• Tabs
• Text field
• Tool tip

 

예외케이스가 많음. 기본기만!

 

 

 

---

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

https://bit.ly/2PDn0W0