플러스엑스 UI패키지 강의 후기 - (14)

◆ 오늘 수강/복습 할 부분
Part2. UI 디자인 기초
- 구성요소의 이해 
 
 
◆ 정리 및 느낀점
- 오늘은 UI에서 가장 중요하다고 볼 수 있는 구성요소에 대해 배웠다. 크게 정리하면 아래와 같다.

 

- 4가지 구성요는 컬러, 폰트, 모양, 인터랙션으로 축약해볼 수 있다. 

 

- 이외 컴포넌트라고 불리는 구성요소들이 있는데, 이것을 다시 3가지 Navigation(정보탐색), Input(정보입력), Information(정보전달)으로 구분할 수 있다. 이 부분이 보통 일할때 중요했어서 이 부부을 정리해보고자 한다. 

 

Navigation
GNB(Global Navigation bar) = 상단메뉴, 탑메뉴, 메뉴바	- Header에 보통 배치 - 사용자가 쉽게 이동할 수 있도록 하는것
LNB(Local navigation bar) =서브메뉴	- 상단메뉴 눌렀을때 나오는 메뉴들로 - 선택/선택되지 않은 상태값 디자인 필요 - 화면 내 고정되어서 언제든 사용 가능해야함
Segmented Control = 탭바(iOS), 앱바(Aos)	- 앱 내 페이지간 이동을 위해 구성
Tab bar	- 콘텐츠 상단 메뉴들을 이야기함
Menu Btn = 트리플바, 햄버거 버튼, 드로워메뉴	- Mobile에서 축약형으로 쓰이는 메뉴버튼
Path =브레드 크럼, 로케이션	- 현재 위치 안내
Drawer	- 메뉴버튼 누르면 나오는 메뉴리스트
Carousel	- 카드, 배너들이 자동으로 롤링되는 UI - 클릭해서 다른 페이지로 이동 가능
Accordian	- 펼쳤다 접었다 하는 UI - MO에서는 자리효율성을 만들고, PC에서는 양을 줄여 시각적으로 중요한 것 강조가능
Paginagion =넘버링	- 페이지 이동 버튼, 다양한 값이 나올 수 있어 고려하여 디자인 필요
Input
Button	- 사용성에 따라 다양하게 제작 가능하고 - 어포던스가 있어야함 - 보통 가로세로 48pt 간격으로 터치영역을 잡아준다 - 상태값이 다양하고, - 우선순위 높은 순으로 오른쪽으로 배치
Toggle	- 빠른 피드백 필요 (색상 활용 좋음)
Check Box	- 중복선택 가능 , 보통 확인 버튼과 같이 디자인 됨
Radio btn	- 중복선택 불가
Floating btn	- 중요&강좋고 싶은 기능, 자주찾는 기능으로 디자인 - 포인트 컬러 활용
text input =인풋팍스, 입력필드, 텍스트입력필드	- label / place holder/ box / feedback txt 로구성됨
text field	- 최대 크기로 작성 & 내부 스크롤 만들어지도록 조정 가능
drop down	- 숨겨졌다 나오는 것 중 하나 선택 가능
slider	- 값 & 특정 범위 선택 가능
stepper	- 플러스, 마이너스 버튼을 눌러 숫자 입력 값 변경
Information
popup =브라우저 윈도우 팝업	- 팝업 내용에 따라 다양하게 표현
layer popup	- 외부콘텐츠 사용하지 못하게 함
modal popup	- 확인, 경고용으로 눈에 띄게 디자인, - 내용에 따른 맞춤화가 중요함
dim =딤, 스크림, 라이트박스	- 팝업창에 집중 할 수 있도록 백을 어둡게 깔거나 밝게 변경
toast pop up	- 동작에 따른 피드백, - 자동으로 사라지지만 버튼을 넣기도 함 - 디자인시 위치 or 지속시간 중요
tool tip	- 공간효율성 올라감 - i 아이콘과 잘 사용 > 잘 발견되도록 위치해야함
splash	- 앱 화면의 가장 첫 화면 - 서비스 identity를 가장 잘 보여줌 - 첫 로딩 화면 대체용
progress bar	- 처음과 끝이 존재
badge	- 최소한의 정보 제공
badge - noti =라벨, 노티, 노티피케이션	- 새로운 알림 안내
system UI
Top area	- status bar 쪽을 이야기 - 안드로이드 세로 값은 24pt - ios는 노치에 따라, 47pt or 53pt
bottom area	- 안드로이드 48pt - ios 34pt
brower	- 크롬, 사파리 / mo, PC에 따라 해상도 테스트 다르게 피요
운영체제별 font	- ios: SFpro / Apple 산돌 Neo gothic - aos: Roboto / Noto sans Kr
App Icon	- 정방형, PNG로 만들며 규격에따라 달라 규격에 맞춰야함
Favicon	- 32*32 / 16*16으로 만듬

 

- 마지막으로 컴포넌트에서 중요한 것들을 정리하면

1) 소수점 생기지 않도록 하기 : 추후 깔끔하게 떨어지지 않아 깨져보일 수 있다

2) 색상, 폰트, 형태 등 재사용이 이루어지도록 규칙을 갖춰 사용하기

3) 컴포넌트의 기능규칙이 보편적이게 사람들이 잘 이해할 수 있도록 하기! 

◆ 그럼 오늘의 수강 인증 샷!