[카테고리:] Web

UI 용어 정리 (요소 별 명칭)

UI 요소 이름, 명칭 정리

웹 관련 업무를 하다보면 UI 요소 관련해서 명칭을 정확히 알아야 커뮤니케이션이 원활하다. 관련 UI 용어를 살펴보자.

  1. Input Controls
  2. Navigational Components
  3. Information Components
  4. Containers

Input Controls

ElementExamples
CheckboxesExample of checkboxes
Radio buttonsExample of radio buttons
Dropdown listsExample of a dropdown
List boxesExample of a list box
ButtonsExample of buttons
Dropdown ButtonExample of dropdown button
TogglesExample of toggles
Text fieldsExample of text field
Date and time pickersExamples of date and time pickers
정보 입력

Navigational Components

ElementExamples
CaratWhat are the little arrows called that hide additional details? - User Experience Stack Exchange
화살표 모양의 클릭 가능한 아이콘 (펼칠 때 사용)
Search FieldExample of search boxes with various functions
BreadcrumbExample of breadcrumb
전체 체계에서 사용자의 현 위치를 알려줌
PaginationExamples of pagination
TagsExample of tags
SlidersExample of sliders
IconsExamples of icons
Image CarouselExample of an image carousel
네비게이션

Information Components

ElementExamples
NotificationsExample of a notification
Progress BarsExamples of progress bars
Tool TipsExamples of tool tips
Message BoxesExample of message boxes
Modal Window (pop-up)Example of a modal window
정보 전달

Containers

ElementExamples
AccordionExample of an accordion
항목 별 펼처보기, 숨기기 기능
컨테이너

Source : https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html

광고