오픈패스_10일 차_GUI

수업 시작 전 숙제 공지

1. 지난 시간에 App bar를 그렸다.

1-1. 트립스토어 App bar를 어떻게 변하는지 잘 보면 아래 세개의 상태를 가지고 있다

1-2. 투명 상태

1-3. 다크 테마

1-4. 라이트 테마

 

그래서 디자인 시스템을 만들고 있는 파일에 

1-2 ~ 1-4 테마의 App Bar를 만들기 가 수정

 

2. Bottom_Navigation

아이디에어 맞게 5개 column이면 그에 맞게 설계

 

---

1. Floating Action Button

해당 화면에 core function을 가진다.는 원칙이 있다

(ex. 게시글 올리기, 사진 업로드 등 화면에 맞는 core function일 때만 사용)

 

종류는 2가지

1.  Big Size 

2. Mini

 

Floating Action Button에 업데이트된 사항

1. 아이콘 + Lable 이 들어간 형태

 

2. Cards

머터리얼 가이드를 기반으로 제작

1. 글로벌 마진 잡고

2. 컴포넌트 간 간격 8px

3. Visual Hinting work

 

*참고로 트립스토어는 7:10 비율을 사용하고 있음. 여행사에서 보내주는 사진들을 대응하기 위해

 

타이틀과 서브 타이틀 사이의 간격은 짝수면 ok

카드 안에 타이틀 마진은 8px이상, 상하는 좌우 마진보다 더 높은 값

 

카드 안에 텍스트를 읽히게 하는 방법

1. 사진 구도를 편집해서 사용

2. material guide 추천 2가지

2-1. 이미지랑 맞닿는 부분에 검정색을 그라디언트 (2개 양쪽을 모두 검정으로 놓고 한 곳에 투명도를 높임

2-2. 트립스토어가 취하고 있는

2-2-1. 약하게 글씨 뒤에 쉐도우를 적용

2-2-1-1. 쉐도우를 x, y값을 0으로 놓고 blur를 1을 적용

 

나중에 작업할 때

Dark Theme에서 싱글, 2줄 케이스를 모두 고려해서 베리에이션을 친다. Light Theme도 마찬가지.

 

Resizing 기능을 통해

싱글, 멀티 라인 카드 2종류로 대부분의 카드 종류를 대응할 수 있었다.

 

2줄은 오버라이드에서 텍스트 입력하고 alt + Enter키를 누르면 적용이 가능하다. 마치 excel처럼! 

 

IF, 에어비앤비를 따라서 변형하려면?

많이 나오는 질문 

1. 별점 어떻게 만들어여?

 

border값을 적용하는 법

1. 블랙에 투명도

2. 컬러와

 

3. Chips

1. 삭제해야 하는 chips는 x 아이콘을 고정으로 넣을 것을 권장한다

2. 선택 / no 선택 chips는 x 아이콘 없이, 컬러로 focused, enabled를 구분해서 사용한다.

 

chips는 이탈율이 80%가 넘는다. 그걸 고려해서 디자인해야 한다.

메인 페이지 까지는 진입하는 쪽으로 두고,

그 다음에 선택을 통해 큐레이션 서비스를 고를 수 있도록 유저에게 선택권을 줘야 한다.

 

4. Data Table

모바일 상에서 거의 사용하지 않는다. 

웹에서 주로 사용한다.

 

Align

1. 숫자 : 우측 

2. 텍스트 : 왼쪽

 

Sorting tool은 두 가지 의미가 있다.

1. 앞

-> 메뉴명 앞에는 정렬을 의미한다. (ex. 가격, 인기 등)

2. 뒤

-> 드롭다운 리스트, 그 위에는 Menu라는 컴포넌트를 위에 얹는다.

 

5. Dialogs

긍정 버튼(Accept) 과 부정 버튼(Cancel)

딤 처리가 필수다. 딤 값으로 #FFFFF, 50%, 70%를 사용한다.

 

6. List & Dividers

1. 쉬운 형태의 List

ex. 트립스토어의 도시 검색 리스트

Heading 영역과 텍스트 영역을 구분해서 디자인해야 한다.

 

2. 필터 리스트

제목과 설명의 베이직한 리스트를 만들고

heading을 넣은 경우와 안넣은 경우를 구분해서 만들자

 

3. 리스트 안에

서체 별 size값을 일일이 파악해서 배치해야 하지만, 현실적으로 어려울 수 있다.

원칙은 잡아야 한다는 점 :) 

 

텍스트의 좌우 핀, 높이 핀 꽂아줘

 

심볼 위에 심볼을 얹어서 만들 수 있다.

기존 심볼 스펙이 잘 설정되어 있다면 :)

 

좌우 여백만 신경쓰면 되구, 위 아래 수치는 신경 안써도 된다

 

습관을 들일 것

1. 처음부터 영역을 잡아 놓아야 한다. (box를 만들기)

 

가격 옆에 뱃지가 붙는 경우, 텍스트를 auto scale모드로 설정해야 한다. 이 경우만 텍스트 영역을  잡지 않는다.

 

Divider

 

diver는 박스의 최하단에 붙여준다!!

 

박스를 하나 복사한 다음, height를 1로 바꾸고 박스와 복사한 divider를 같이 잡고 아래 정렬 버튼을 누르면 된다.

 

divider는 전체 full width와 양 옆 여백이 있는 divider가 있다.

1. full width는 맥락이 다를 때 사용

2. 부분 divider는 안에 리스트를 구분할 때 사용.

 

material에서는 이미지나 아바타 사이에 divider를 넣지 않고, contents영역에만 사용하도록 권장한다.

7. Image List

좌우의 마진값과 gutter값을 정해서 디자인 가이드를 넘기면 된다.

이미지 컴포넌트 위에 N 이니셜을 넣어서, 1/n이라는 의미로 개발에서 width 값을 계산해 달라고 요청하면 된다.

*global margin을 무시해도 되는 유일한 친구

 

gutter의 갯수는 column의 -1 

 

8. Menus

카드랑 스펙이 똑같다 :) 

9. Navigation Drawer

padding값을 8로 두고 box size를 결정하나, 아직 활발히 사용하지 않고 있음

10. Pickers

기억해야할 용어

1. Date Picker (Android 디자인할 때만 사용) iOS랑 매우 다름

 

11. Progress Indicator

*100%로딩이 언제인지 모를 때 progress indicator를 사용하고, 로딩은 그 값이 정해져있고 명확할 때 사용하므로 구분이 필요하다

12. Checkboxs & Radio & Switches

1. 체크박스는 '중복'이 가능하다

2. Radio는 '단일' 선택만 가능하다

3. 스위치 온오프할 때는 Switches를 사용한다

13. Sheets: bottom (Rising Star)

Sheet는 인터랙션이 1차 Sheet가 fully image가 되면서 2차 Sheet가 1차 Sheet 자리로 가는 형식으로 인터랙션을 한다.

올라오는 방향대로 Radious를 적용해야 한다는 점을 기억하자.

ex. 구글맵에서 bottom sheet이 올라올 때는 R값이 있는데, 그걸 위로 땡겨서 붙이면 R값이 사라지면서 Contents로 넘어간다.

14. Siders

프로토파이 실습 때 하는 걸로 :)

15. Snackbars (Rising Star)

Dialog과 다른 점

1. 딤이 없고

2. 사용자에게 특정 행동을 유도하지 않고, 스스로 사라진다

 

활용

ex. gmail에서 메일을 지웠을 때, '확실히 지우시겠습니까?'라는 스낵바가 올라왔다가 알아서 사라진다.

16. Tabs (Local Navigation Bar) 

GNB(Global Navigation Bar와 다르다.

scrolling tabs는 왼쪽에 여백을 두고, 오른쪽에는 hinting 처리를 꼭 할 것을 권장한다.

 

반응형일 때는 More 드롭다운 버튼으로 전환하거나, Arrow를 활용해 처리하기도 한다.

17. Tooltips

웹에서 호버했을 때 hint가 노출되는 것. 모바일에는 없다.

 

18. Splash

핀 작업 꼭!! 하기!! 

 

숙제

1. Single line list만들어 보기 :) 

2. Capture에서 Picker를 제외하고 모든 화면을 sample처럼 구조를 잡아서 오기 :)