Как из Bottom sheet получается bullshit
В одно решение
Использовать модальный bottom sheet для доступа к полю ввода.
И два действия
Разберем ситуацию на примерах ввода промокода в приложениях Озона, KPartner-a и Додо.
У этих приложений 2 проблемы
Первая — сначала сворачивается bottom sheet, а потом уже клавиатура
В случае с KPartner-ром задержка при сворачивании клавиатуры существенная и это выглядит криво. Как минимум, потому что клавиатура является как будто частью bottom sheet.
У Додо тоже есть такая проблема, но она менее заметна из-за скорости анимации.
Озон справился лучше всех. Bottom sheet цельный и клавиатура появляется поверх него. Их сворачивание происходит почти одноверменно, но анимация получилась настолько быстрой, что кажется рваной и дерганой.
Вторая проблема. Разработке пришлось кастомить системное поведение,
а это долго=дорого и не дало идеального результата
Критикую — предлагаю
Но начнем с базы: для чего нужен модальный bottom sheet? Вот, что говорят гайды
Apple: используйте sheet для отображения простого контента или задач.
Google: bottom sheets — универсальный компонент, который может содержать широкий спектр информации и макетов, включая элементы меню (в виде списка или сетки), действия и дополнительный контент.
А вот и примеры простых действий из HIG и Material YOU. Нет ситуации, когда bottom sheet используется для доступа к полям ввода.
Получается, что простое действие в «глазах» гайдлайнов — Tap on screen. Тогда ввод промокода — сложное действие. Надо ввести значение, нажать на кнопку, поглядеть на красный цвет, если допустили ошибку при вводе. Т.е. гайды уже против такого решения.
Вернемся ко второй проблеме — кастомное поведение.
В iOS by default bottom sheet не подстраивается под размеры контента, т. к. он открывается на половину, либо на всю высоту экрана. На андройде подстроить под размеры возможно, но Google все равно просит изначально показывать bottom sheet на половину экрана, чтобы экшены были в удобной зоне доступа.
Предалгаю альтернативы
В них подстраивание размеров под контент легче реализовать, а клавиатура будет закрываться одновременно с закрытием модалки.
1. Нативная iOS модалка
2.Кастомная модалка
3. Отказаться от модалки
Расположить блок с инпутом на странице корзины, а при постановке картеки в инпут, страница будет скролиться для удобства пользователя. Так, например, сделали Яндекс.
Если хотите больше контента с разбором интерфейсных решений, тогда жду ваши огонечки.)
Анонсы статей и больше контента про дизайн найдете в моем Telegram-е 👀. Отдельное сердчеко тем, кто поделиться каналом со своими знакомыми из IT.