Гайдлайн по iOS на русском. Часть 74 — Контролы: Выбор чего-либо (Пикеры)

Ruslan Sharipov
3 min readMay 26, 2022

--

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна (лайк, подписка и тд). В этой серии постов я делюсь вольным переводом iOS гайдлайна на русский язык. Как и с переводом Material Design все части будут объеденены в 1 notion документ. Оригинальный источник этой части: здесь.

Средство выбора (пикеры) может отображать один или несколько прокручиваемых списков различных значений, из которых люди могут выбрать конкретное. Датапикер поддерживает дополнительные способы выбора, такие как выбор дня во вью календаря или ввод дат и времени с помощью цифровой клавиатуры. Оба типа пикеров упрощают ввод информации, выбирая одно или несколько значений.

Рассмотрите возможность использовать пикера для списков (от среднего до длинного по размерам). Если вам нужно отобразить довольно короткий список, рассмотрите возможность использования выдвижной кнопки вместо пикера. Хотя пикер позволяет легко и быстро прокручивать элементы, он может придать слишком большой визуальный вес даже короткому списку. С другой стороны, если вам нужно дать юзеру очень большой набор чего-либо, то рассмотрите возможность использования списка или таблицы. Списки и таблицы можно менять по высоте, а таблицы могут и вовсе включать индекс, что значительно ускоряет выбор целевого раздела.

Используйте предсказуемые и логически упорядоченные значения. Когда список не прокручивается, то некоторые значения в пикере могут быть скрыты от юзеров. Лучше всего, когда люди могут предугадать скрытые значения, например, с помощью алфавитного списка стран, чтобы они могли быстро перемещаться по элементам.

Избегайте переходов на другой экран для отображения пикера. Пикер хорошо работает, когда отображается в контексте, ниже или рядом с редактируемым полем. Пикер обычно отображается в нижней части экрана или во всплывающем окне.

Выбор даты (Датапикер)

Датапикер — это эффективный интерфейс для выбора определенной даты, времени или и того, и другого с помощью тапа, клавиатуры или указателя. Вы можете показать датапикер в одном из следующих стилей:

  • Компактный. Кнопка, отображающая редактируемое содержимое даты и времени в модальном представлении
  • Встроенный. Только для времени-кнопка, отображающая колесики значений; для дат и времени-встроенное представление календаря
  • Колеса. Набор колес прокрутки, который также поддерживает ввод данных с помощью встроенной или внешней клавиатуры
  • Автоматический. Стиль, определяемый системой, основанный на текущей платформе и режиме выбора даты

Средство выбора даты имеет четыре режима, каждый из которых представляет различный набор выбираемых значений.

  • Дата — Отображает месяцы, дни месяца и годы.
  • Время — Отображает часы, минуты и (необязательно) обозначение AM/PM.
  • Дата и время — Отображает даты, часы, минуты и (необязательно) обозначение AM/PM.
  • Таймер обратного отсчета — Отображает часы и минуты, максимум до 23 часов 59 минут. Этот режим недоступен для встроенных или компактных стилей.

Точные значения, отображаемые в пикере дат, и их порядок зависят от языка устройства.

Вот несколько примеров выбора даты, показывающих различные комбинации стиля и режима.

Компактный вид

В настройках расписания используется компактный пикер для времени.
Когда люди нажимают на пикер, оно отображает значения времени в модальном вью.

Компактный вид

Барабанный вид

Используйте компактный инструмент выбора даты, когда пространство ограничено. В компактном стиле отображается кнопка, которая показывает текущее значение в цвете акцента вашего приложения. Когда пользователи нажимают на кнопку, панель выбора даты открывает модальное представление, предоставляя доступ к знакомому редактору в стиле календаря и инструменту выбора времени. В модальном представлении пользователи могут вносить несколько изменений в даты и время, прежде чем нажать за пределами представления, чтобы подтвердить свой выбор.

Рассмотрите возможность обеспечения меньшей детализации при указании минут. По умолчанию список минут содержит 60 значений (от 0 до 59). Вы можете дополнительно увеличить минутный интервал до тех пор, пока он равномерно не разделится на 60. Например, вам могут потребоваться интервалы в четверть часа (0, 15, 30 и 45).

--

--