보편적으로 사용되는 UI 요소들을 정리한 글이다.
32 User Interface Elements For UI Designers
사용자가 자료를 빠르게 탐색하고 UI 디자이너가 제한된 공간에 많은 양의 정보를 포함할 수 있도록 도와준다.
벤토 메뉴 혹은 벤토 박스라고 불린다.
사용자가 현재 페이지가 어디에 있는지 알 수 있도록 도와준다.
버튼은 사용자가 원하는 작업을 수행할 수 있도록 도와준다.
카드는 사용자가 정보를 빠르게 스캔할 수 있도록 도와준다.
인스타그램 에서 많이 볼수 있는 디자인이다.
이미지나 카드와 같은 컨텐츠를 쉽게 탐색할 수 있도록 도와준다.
사용자가 선텍 혹은 선택 취소 할 수 있도록 도와준다.
사용자가 시스템에 입력한 콘텐츠를 시간순으로 표시한다.
햄버거 메뉴의 변형으로 필터 그룹을 나타낸다.
사용자가 선택할 수 있는 옵션을 표시한다.
사용자의 활동을 시간순으로 표시한다.
페이스북, 인스타그램, 트위터 등에서 많이 볼 수 있다.
사용자가 시스템에 연관된 정보를 입력하기 위해 사용한다.
사용자가 메뉴를 펼칠 수 있도록 도와준다.
사용자에게 직관적으로 정보를 전달하도록 도와준다.
콘텐츠를 입력할 수 있는 공간을 제공한다.
그룹화된 옵션 집합을 나타낸다.
백그라운드 작업이 진행중임을 알려준다.
더 많은 옵션을 볼 수 있음을 나타낸다.
콘텐츠나 메시지를 포함한 작은 상자이다.
알럿(Alert), 팝업(Popup), 다이얼로그(Dialog) 등으로 불린다.
새로운 정보가 추가되었음을 알려준다.
뱃지(Badge)라고도 불린다.
페이지 내의 현재 위치를 알 수 있으며 다른 페이지로 이동할 수 있도록 도와준다.
날짜, 시간 등을 선택할 때 주로 사용한다.
작업의 진행상황 혹은 단계를 시각적으로 표시한다.
체크박스와 비슷하지만, 여러 옵션 중 하나만 선택할 수 있도록 도와준다.
사용자가 원하는 정보를 검색할 수 있도록 도와준다.
페이지 측면에서 탐색 작업 혹은 컨텐츠 그룹을 표시한다.
특정 범위의 값을 선택할 수 있도록 도와준다.
슬라이더와 비슷하지만, 미리 정의된 증분 단위로만 값을 변경할 수 있다.
컨텐츠를 표시하고 분류하는데 도움을 주는 레이블이다.
모바일 앱 하단에 위치하며, 다른 뷰로 전환할 수 있도록 도와준다.
사용자가 요소 위에 마우스를 올렸을 때, 추가 정보를 표시한다.
무언가를 켜거나 끌 때 사용한다.
