Гайдлайн по iOS на русском. Часть 73 — Контролы: Пейдж контролы(пэйджинг)
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна (лайк, подписка и тд). В этой серии постов я делюсь вольным переводом iOS гайдлайна на русский язык. Как и с переводом Material Design все части будут объеденены в 1 notion документ. Оригинальный источник этой части: здесь.
Пэйдж контролы — это ряд индикаторов, каждый из которых представляет страницу в плоском списке. Эти индикаторы помогают людям перемещаться по списку, чтобы найти нужную страницу; пэйдж контролы не дают людям перемещаться по страницам по иерархии или нелинейном положении. Пэйдж контролы могут содержать любое количество страниц, что делает их особенно полезными в ситуациях, когда люди могут создавать собственные списки.
В пэйджингу можно настроить внешний вид индикаторов, чтобы дать дополнительную информацию о списке. Например, индикатор пэйдж контрола может быть подсвечен, чтобы юзеры могли оценить относительное положение страницы в списке. Когда индикаторов больше, чем помещается на экране, то по обокам пэйджинг может уменьшить крайние индикаторы с двух сторон, чтобы указать, что есть еще страницы.
Люди взаимодействуют с пэйджингом, тапая или пролистывая (чтобы пролистать, люди касаются и перемещают палец влево или вправо). Нажатие на переднюю или конечную сторону пэйджинга текущей страницы открывает следующую или предыдущую страницу; в iPadOS пользователи также могут использовать указатель для выбора определенного индикатора. Также есть в пэйджинге пролистывание, которое активируется если зажать пальцем на пэйдж контрол, который будет пролистывать, т.е открывать страницы последовательно, а если в этот момент увести палец в передний или задний конец элемента это поможет людям быстро добраться до первой или последней страницы.
Рассмотрите возможность сменить вид на список, как дополнение к пэйдж контролу, особенно для длинных списков. Чтобы просмотреть список из страниц, люди обычно делают свайп, чтобы просмотреть следующую или предыдущую страницу, но этот жест может утомить, когда список длинный. Хотя пролистывание может ускорить процесс, чем пролистывание каждой страницы, люди могут не осознавать, что этот вариант существует. Когда вы даете возможность переключиться на список, вы даете людям альтернативный способ поиска нужной им страницы, а также позволяете им менять порядок списка.
Пэйдж контрол дает визуальную обратную связь и для тапа и для пролистывания. Когда люди тапают, чтобы открыть следующую или предыдущую страницу, у пэйдж контрола есть анимация прокрутки страницы. Когда люди пролистывают, пэйдж контрол мгновенно отображает страницы без анимации переходов.
Не анимируйте переходы страниц во время пролистывания. Люди могут работать очень быстро, и анимация прокрутки для каждого перехода может привести к задержке и отвлекать. Используйте анимированный переход прокрутки только для тапа.
Пэйдж контрол может иметь полупрозрачный фон в виде закругленного прямоугольника, который обеспечивает визуальный контраст для индикаторов. Вы можете выбрать один из следующих стилей фона:
- Автоматический — показывает фон только тогда, когда люди взаимодействуют с элементом. Используйте этот стиль, когда элемент управления страницей не является основным элементом навигации в интерфейсе.
- Заметный — фон виден всегда. Используйте этот стиль только в том случае, если элемент управления является основным элементом управления навигацией на экране.
- Минимальный — фона никогда не видно. Используйте этот стиль, когда вы просто хотите показать положение текущей страницы в списке и вам не нужно давать визуальную обратную связь во время пролистывания.
Не поддерживайте пролистывание, когда вы используете минимальный стиль фона. Минимальный стиль не обеспечивает визуальной обратной связи во время пролистывания. Вместо этого используйте автоматический или заметный стили фона.
Располагайте пэйдж контрол по центру в нижней части экрана. Чтобы люди всегда знали, где найти пэйджинг, расположите его по центру и в нижней части экрана.
Кастомные изображения индикаторов
По умолчанию пэйдж контрол использует иконку точки для всех индикаторов, но он также может отображать уникальное изображение, помогающее людям идентифицировать конкретную страницу. Например, погода использует иконку локации (стрелочка под углом), чтобы отличать страницу вашей локации от текущей страницы.
Если это улучшит ваше приложение, вы можете сделать кастомное изображение для в качестве изображения по умолчанию для всех индикаторов, а также можете создать свое изображение для конкретно отдельной страницы.
Убедитесь, что кастомные изображения индикаторов просты и понятны. Избегайте сложных форм и не использвуйте негативное пространство или текст, потому что эти детали могут сделать иконку непонятной и неразборчивой при очень маленьком размере. Рассмотрите возможность использования иконок из библиотеки SF в качестве индикаторов или создайте свои собственные.
Настройте изображение индикатора по умолчанию только в том случае, если оно улучшает общее значение пэйдж контрола. Например, если каждая страница, которую вы перечисляете, содержит закладки, вы можете использовать соответствующую иконку в качестве изображения индикатора по умолчанию.
Избегайте использования более двух изображений индикаторов в пэйдж контрол. Если ваш список содержит одну страницу с особым значением, например как страницу текущего местоположения в погоде, вы можете упростить поиск страницы, дав ей уникальное изображение индикатора. Напротив, пэйдж контрол, который использует несколько уникальных изображений для обозначения нескольких важных страниц, трудно использовать, потому что люди должны запоминать значение каждого отдельного изображения. Пэйдж контрол, отображающий более двух типов изображений индикаторов, как правило, выглядит беспорядочно и грязно, даже если каждое изображение четкое.
Избегайте заливки для индикаторов. Кастомные цвета могут уменьшить контрастность, которая в свою очередь обязана быть, чтобы отличаться от индикатора текущей страницы и делать пэйдж контрол видимым на экране. Чтобы убедиться, что пэйдж контрол прост в использовании и хорошо выглядит в разных контекстах, позвольте системе автоматически окрашивать индикаторы.
