본문 바로가기

iOS/HIG

Picker and Date Picker

Pickers

picker는 사용자가 선택하는 하나 혹은 여러 개의 별개의 목록들을 스크롤 가능한 상태로 표시할 수 있다. 날짜 picker는 달력 view에서 날짜를 선택하거나 숫자 키패드를 이용하여 날짜를 입력하는 방식으로 추가적인 값을 선택하는 방법을 제공해준다.  두가지 방법의 picker들은 단일 혹은 다중의 값들을 사용자가 선택하여 입력하기 쉽게 해 준다.

 

요구사항

 

  • picker을 사용하여 중간~긴 리스트의 아이템을 제공하는 것을 고려하세요.

 만약 상당히 짧은 리스트의 선택을 표시해야 한다면, picker 대신에 pull-down button을 사용하는 것을 고려하세요. picker를 사용하면 많은 아이템들을 빠르게 스크롤 함으로써 쉽게 보이게 할 수 있지만, 짧은 리스트의 아이템에는 너무 많은 시각적 가중치를 추가하게 됩니다. 반면에 매우 큰 아이템 세트를 표시해야 한다면, list나 table을 사용하세요. Lists와 tables은 높이를 조정할 수 있고, tables는 index를 포함하여 리스트의 section을 더 빠르게 지정할 수 있습니다. 

 

  • 예측 가능하고 논리적으로 정렬된 값을 사용하세요.

스크롤 가능한 리스트가 고정되어 있다면 picker안에 많은 값들이 숨겨질 수 있습니다. 가장 좋은 방법은 사람들이 숨겨진 값들을 예측 가능하게 하는 것입니다. 예를 들어 알파벳 순으로 정렬된 나라들과 같이 그들이 원하는 값으로 빠르게 접근할 수 있도록 하는 것입니다.

 

  • picker를 표시하기 위해 화면을 전환하지 마세요.

 Picker는 context나 편집 중인 필드 근처에 표시될 때 잘 작동합니다. Picker는 일반적으로 화면 하단이나 popover 되어 화면에 나타납니다.

 

Date Pickers

Date Picker는 터치, 키보드, 포인팅 장치를 활용하여 특정한 날짜, 시간 또는 둘다를 선택하기 효율적인 인터페이스입니다. 다음 스타일 중 하나로 date picker를 표시할 수 있습니다.

 

  • Compact

 Modal view를 통해 편집 가능한 날짜 및 시간 콘텐츠를 표시하는 버튼

 

  • Inline

 시간의 경우에만 바퀴 형식의 버튼으로 표시한다. 날짜 및 시간의 경우 inline calendar view

 

  • Wheels

 내장 혹은 외부 키보드를 통한 데이터 입력도 지원하는 스크롤 휠 세트

 

  • Automatic

 현재 플랫폼 및 date picker 모드를 기반으로 하는 시스템 결정 스타일

 

Date picker는 이런 네 가지 모드가 있다. 각 모드들은 다른 선택 가능한 값들을 보여준다.

 

  • Date: 월, 일, 년 
  • Time: 시, 분, (선택적으로) AM/PM
  • Date and time: 일, 시, 분, (선택적으로) AM/PM
  • Countdown timer: 23시간 59분까지 설정 가능한 시, 분. 이 모드는 inline, compact스타일에서 사용할 수 없다.

 

Date picker에 표시되는 정확한 값은 기기의 지역에 따른다.

 

요구사항

 

  • 공간이 제한적일 때, compact date picker를 사용하세요.

 Compact 스타일은 앱의 강조 색상으로 버튼을 표시합니다. 사람들이 버튼을 탭 하면, date picker는 modal view를 열어 친숙한 달력 스타일 편집기와 date picker에 접근할 수 있습니다. Modal view 내에서 사람들은 view의 외부를 탭 하기 전까지 날짜와 시간을 편집하고 선택할 수 있습니다.

 

  • 분을 지정할 때 더 적은 세분 성을 제공하세요.

 기본적으로 목록에는0~59까지의개의 값이 포함됩니다. 선택적으로 간격을 60으로 균등하게 나누는 선택지를 늘릴 있습니다. 예를들어예를 들어, 1/4 시간( 0, 15, 30, 45)을를 추가할 있습니다. 

'iOS > HIG' 카테고리의 다른 글

Status Bars  (0) 2022.02.09
Navigation Bars  (0) 2022.02.08
Segmented Controls  (0) 2022.02.07
Tab Bars  (0) 2022.01.25
Progress Indicators  (0) 2022.01.17