Spinner control, Date picker, Bottom sheet, Windows 3.0의 유산

한 줄로

Windows 3.0(1990) 시대에 표준화된 입력 컴포넌트들입니다. 30년 지나도 본질은 같습니다.

Spinner control (Number spinner)

숫자 증감 위·아래 화살표입니다. Loading spinner와 혼동 주의, 완전히 다른 것입니다.

<input type="number" min="0" max="100">

HTML5의 type="number"이 표준입니다. 위·아래 버튼이 자동 생성됩니다.

UI 적용: 수량 선택, 페이지 번호, 시간 설정.

함정

모바일에서 spinner control은 작아서 누르기 어렵습니다. 대신 +/- 버튼 형태가 권장됩니다.

[ - ]  [ 5 ]  [ + ]

Bottom sheet의 추가 사용

이미 다룬 패턴이지만 보충합니다. bottom sheet의 3가지 변형:

1. Modal bottom sheet: 풀스크린에 가까운 모달.
2. Persistent bottom sheet: 일부가 항상 보임, 드래그로 확장.
3. Standard bottom sheet: 가운데 정도 크기.

각각 다른 맥락에 맞습니다.

바이브 메이커가 챙길 한 가지

작은 입력 컨트롤들은 모바일에서 큰 영역 확보가 필요합니다. spinner control보다 명시적 +/- 버튼이 사용성 면에서 거의 항상 더 좋습니다.

관련

Combo box · Date picker · Bottom sheet