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