■ User Interface Elements 분류
1. 입력 컨트롤(Input controls) : 체크박스, 라디오 버튼, 드롭다운 리스트, 리스트 박스, 버튼, 토글, 텍스트 필드, 날짜 필드
2. 탐색 구성 요소 (Navigational Components) : 현재위치(breadcrumb), 슬라이더, 검색필드(search field), 페이지네이션(pagination), 태그, 아이콘
3. 정보 구성 요소 : 툴팁(tooltips), 아이콘, 프로그레스 바, 알림(notifications), 메시지 박스, 모달 창
4. 컨테이너 (Containers) : 아코디언 (accordion)
■ UI 요소 상세
1. 텍스트필드(Text Field)
- 구분 : Input
- 설명 : 사용자가 텍스트 직접 입력할 수 있는 UI
- 구성 : 라벨, 텍스트 입력 박스(컨테이너), 플레이스홀더(Placeholder), 아이콘 등
- 참고 : https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0
2. 체크박스(checkbox)
- 구분 : Input
- 설명 : 사용자가 없음, 하나 또는 여러 개를 포함하여 원하는 수의 선택 항목을 선택할 수 있을 때 사용
- 참고 : https://material.io/develop/android/components/checkboxes#using-checkboxes
3. 라디오버튼(radio button)
- 구분 : Input
- 설명 : 사용자가 목록에서 한 번에 하나의 항목을 선택할 수 있도록 하는 데 사용
사용 가능한 공간에 따라 라디오 버튼 또는 드롭다운 메뉴를 사용
- 참고 : https://material.io/components/radio-buttons#specs
4. 캘린더(Calendar) / 데이트 피커(Date Pickers)
- 구분 : Input
- 설명 : 사용자가 날짜 또는 날짜 범위를 선택할 수 있다.
- 참고 : https://material.io/components/date-pickers#specs
5. 스텝퍼(Stepper)
- 구분 : Input
- 설명 : 사용자가 더하기 및 빼기 버튼을 클릭하여 숫자나 값을 입력할 수 있는 UI 요소
수직 또는 수평 형태로, 숫자를 직접 입력하는 형태도 있다.
- 참고 : https://www.mockplus.com/blog/post/stepper-ui-design
6. 버튼(Buttons)
- 구분 : Input
- 설명 : 사용자가 버튼을 탭을 함으로써 작업을 수행하고 선택할 수 있는 UI 요소
솔리드 버튼, 라인 및 고스트 버튼, 라운드 버튼 등 다양한 종류의 버튼이 있다.
- 참고 : https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7
https://material.io/components/buttons#text-button
7. 플로팅 액션 버튼(FAB, Floating Action Button)
- 구분 : Input
- 설명 : UI 위에 떠있는 아이콘이 있는 원형 형태의 버튼으로 화면의 기본 작업을 수행한다.
일반, 미니, 확장의 유형을 가지고 있다.
- 참고 : https://material.io/components/buttons-floating-action-button#usage
8. 리스트 박스(List Box)
- 구분 : Input
- 설명 : 사용자는 컨테이너 상자에 포함된 항목을 클릭하여 목록에서 하나 또는 여러 개를 선택할 수 있고 목록 상자에 포함된 항목 수와 볼 수 있는 영역에 따라 스크롤을 할 수 있다.
단일 선택 리스트 박스, 다중 선택 리스트 박스, 체크박스가 있는 리스트 박스, 다중선택 및 이중 리스트 박스 등 다양한 유형이 있다.
- 참고 : https://www.nngroup.com/articles/listbox-dropdown/
9. 드롭다운 리스트(Dropdown List)
- 구분 : Input
- 설명 : 사용자는 아래쪽 화살표를 클릭하여 하나만 선택할 수 있는 상호 배타적인 항목 목록을 열어볼 수 있고 리스트박스와 마찬가지로 드롭다운 리스트의 경우 확장되었을때 포함된 항목 수에 따라 스크롤될 수 있다.
드롭다운 리스트를 사용하면 선택한 옵션이나 기본값이 컨테이너 상자에 계속 표시되는 반면 다른 목록 항목은 아래쪽 화살표를 클릭한 후에만 노출된다. 항목을 선택하거나 드롭다운 리스트 외부를 클릭하면 항목이 닫힌다.
- 참고 : https://www.nngroup.com/articles/listbox-dropdown/
10. 스위치 (Switches) / 토글 (Toggle)
- 구분 : Input
- 설명 : 스위치 또는 토글 스위치 등으로 불린다. 주로 모바일에서 설정을 변경하는데 사용되는 UI 요소로 단일항목을 켜거나 끌때 또는 바로 활성화하거나 비활성화 할때 사용한다. 세트의 각 항목을 독립적으로 제어할 수 있는 경우 라디오 버튼 대신 스위치를 사용한다.
- 참고 : https://material.io/components/switches
'IT용어 아카이브' 카테고리의 다른 글
| 백엔드, 백엔드 사용 개발 언어 (0) | 2021.12.05 |
|---|---|
| 프론트엔드, 프론트엔드 사용 개발 언어 (0) | 2021.12.02 |
| 동영상 스트리밍 관련 용어 (0) | 2021.08.16 |
| 렌더링, CSR, SSR, SPA, MPA (0) | 2021.08.15 |
