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

 

 

 

 

28회 11/29 (일)

!!!!

마지막 ㅠ 챌린지날이다

 

 

---

03. UI 디자인

 

클립 32. 컴포넌트 디자인 - 06. Tabs

Tab !: 앱 상단 헤드의 하위에 고정된 부분을 얘기한다.

 

On a touchscreen, you tap where you would have pointed and clicked on a mouse-enabled display. Tap is a simple, deliberate gesture. ... These touch gestures can be more than confusing to utilize in interaction designs. They can even incite controversy within the user experience (UX) community.

버튼이라고 되어있는 부분들 

웹사이트로 가면 text, measurement, 등으로 구분해서 확인할 수 있음. 

 

드래그해서 가이드라인에 잘 맞게 맞추어놓으면 allign 센터, 중간 값으로 16,16을 맞출 수 있다. 

TIP! 미리 사이즈별 박스를 준비해놓고 측정할 수 있게 만들어놓으면 좀 더 쉽고 빠르게 계산할 수 있다. 

 

선을 그을 때, line 보다는 rectangle 을 사용하여 만든다~! (그럼 더 깔끔하게 적용된다) 

 

다 만든 다음, symbol로 저장함. (각 tab 마다 교체 하면 변경할 수 있음) 

 

---

클립 33. 컴포넌트 디자인 - 07. Navigation drawer - 1

Navigation Drawer with material design 

 

material.io 에 나와있는 Navigation Drawer의 정의 및 기능 

 

Navigation drawers provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.

Navigation drawers are recommended for:

• Apps with five or more top-level destinations
• Apps with two or more levels of navigation hierarchy
• Quick navigation between unrelated destinations

 

메뉴 누르면 나오는 카테고리 부분 

 

왼쪽에서 나오는 일반적인 type의 nativation drawer 만들기 

 

360 * 240

 

원래 화면을 검정색으로 만들어서 네비게이션 드로어에 집중할 수 있도록 만든다. (opacity 32%가 대부분) 

위에 흰색 사각형을 올리고 type text 를 올려 navigation drawer 를 만든다.

 

---

 

클립34. 컴포넌트 디자인 - 08. Navigation drawer - 2

 

 

각 사각형, 버튼 등을 넣을 때는 가이드의 사이즈를 확인하고 (권장 사이즈) 

해당 사이즈에 맞춰서 값을 적어 만든다. 

 

빨간색 초록색 상자는 각  wide range를 확인하기 위해서 저렇게 만들어놓고 거기에 적용해서 텍스트나 도형을 만들어놓은 임시의 자같은 개념! 훨씬 편하다.

 

심볼을 만들고 복제하여 밑의 버튼도 만든다.

그리고 색깔을 바꾸어 선택된 것을 표현한다. (클릭/터치했을 때 바뀌는 것) 

---

~28회차 소감~

 

 

 

https://bit.ly/32gSY1r

생각해보니까 오늘이 챌린지 마지막날이다

덜덜 벌써 시간이 그렇게 되었다니..

남은 수업이 아직 많아서 챌린지가 끝나도 계속 이때까지 해왔던것처럼 수업을 들어야겠다.