Scott
Нижняя панель, или bottom sheet, появляется у нижнего края мобильного экрана и позволяет выполнить небольшую задачу, сохраняя перед глазами её контекст. Такой формат подходит для выбора пункта выдачи, настройки нескольких фильтров или просмотра информации о месте. Сначала определите, можно ли взаимодействовать с фоном, сколько места нужно содержимому и что произойдёт с незавершённым выбором при закрытии. Эти решения важнее скругления верхних углов.
Разберём выбор пункта выдачи для заказа. Покупатель открывает карту, сравнивает ближайшие пункты, выбирает один и возвращается к сведениям о заказе. В редакторе UI-дизайна Pixso можно разместить рядом карту, панель и выбранный пункт, чтобы проверить весь сценарий до разработки интерфейса.
Решите, останется ли карта доступной
Панель, рядом с которой можно продолжать пользоваться картой, удобна для поиска. Покупатель перемещает карту, а краткая информация о месте остаётся внизу. Модальная панель подходит для отдельного решения: сначала нужно выбрать пункт выдачи и подтвердить либо отменить выбор, затем вернуться к заказу.
В документации Material для Android различаются стандартные и модальные нижние панели. Модальная панель затемняет фон; стандартная позволяет работать с окружающим содержимым. Внешний вид и поведение панели должны соответствовать друг другу.
В нашем примере используем модальную панель. Добавим заголовок «Выберите пункт выдачи», кнопку закрытия, поле поиска, строки с адресами и действие «Выбрать этот пункт». Карта за затемнением сохраняет контекст, но перемещать её до закрытия панели нельзя. Если без просмотра карты выбор затруднён, лучше взять стандартную панель: нажатие на метку должно обновлять информацию о выбранном месте.
Нижняя панель задаёт расположение интерфейса, но не обязывает помещать в неё любую задачу. Длинная адресная форма, проверка личности и оплата вместе заслуживают отдельной страницы. Выбирайте тип всплывающего интерфейса по задаче, а не только по тому, как он выглядит поверх основного экрана.
Выбирайте высоту по содержимому
В открытой панели должны помещаться заголовок, поиск, хотя бы одна полная строка с пунктом выдачи и основное действие. Обрезанная первая строка мешает понять, что можно выбрать. Обратная крайность — панель почти во весь экран, которая без необходимости скрывает карту.
Для короткого списка начальную высоту можно задать по содержимому. Длинный список должен раскрываться и прокручиваться. Заголовок и кнопка закрытия остаются на месте, а список занимает остальную доступную область. Основное действие расположите выше системной безопасной области, чтобы зона жестов устройства не перекрывала кнопку.
| Ситуация | Вид панели | Что остаётся доступным |
|---|---|---|
| Три пункта поблизости | Компактная панель с целыми строками | Заголовок, закрытие, выбор и подтверждение |
| Много подходящих пунктов | Раскрытая панель с прокручиваемым списком | Поиск и подтверждение остаются в пределах досягаемости |
| Низкий экран или увеличенный текст | Панель почти во весь экран либо отдельный экран выбора | Читаемые подписи и удобные элементы управления вместо фиксированных пропорций |
Полоска для перетаскивания может подсказывать, что панель раскрывается, но не должна быть единственным способом добраться до содержимого. Предусмотрите понятное действие раскрытия или доступ ко всему списку обычной прокруткой. Жесты не должны конфликтовать: пользователь должен понимать, перемещает ли он панель или прокручивает список внутри неё.
Отделяйте предварительный выбор от подтверждения
Допустим, в заказе уже указан пункт «Центральный вокзал». Покупатель открывает панель и выбирает «Магазин у реки». Выделите новую строку, но оставьте в заказе «Центральный вокзал», пока действие «Выбрать этот пункт» не завершится успешно. Закрытие панели отменяет предварительный выбор.
Так интерфейс не обманет ожидания: если на экране есть кнопка подтверждения, нажатие на строку не должно незаметно менять заказ. Если продукт намеренно сохраняет выбор сразу, уберите лишнее подтверждение и сделайте это поведение понятным. Смешивать два подхода не стоит.
Покажите сведения, необходимые для решения: название, адрес и условия получения заказа. Расстояние полезно, когда известно, относительно какого местоположения оно рассчитано. Подпись «Ближайшие» вводит в заблуждение, если доступ к геопозиции запрещён или пользователь сменил область поиска. В таком случае укажите, в каком районе выполняется поиск, и дайте ввести другое место.
Если пункт не может принять заказ, объясните причину прямо в строке. «Сегодня получить заказ нельзя» помогает выбрать другой адрес. Название серым цветом без пояснения скорее напоминает ошибку отображения. Не стирайте поисковый запрос, пока покупатель сравнивает варианты.
Проверьте панель с открытой клавиатурой
Поле поиска меняет доступную высоту. При проверке макета откройте клавиатуру, при необходимости раскройте панель и оставьте над клавиатурой само поле и полезную часть результатов. Уменьшать шрифт ради прежней композиции не нужно.
Закрытие клавиатуры и отказ от выбора — разные действия. Человек может убрать клавиатуру, чтобы увидеть больше результатов, и всё ещё намереваться выбрать пункт. В нативном приложении следуйте правилам платформы для кнопки «Назад» и клавиатуры; в веб-интерфейсе задайте поведение явно. Нажатие за пределами поля не всегда означает отмену всей задачи.
Результаты должны соответствовать текущему запросу. Если поиск «Речной» завершился после того, как покупатель ввёл «Центральный», старый ответ не должен заменять новые результаты. Во время загрузки сохраняйте запрос на экране. При ошибке предложите повторить поиск, не очищая поле. Если поиск завершился успешно, но ничего не найдено, предложите изменить название места или район.
Держите подтверждение рядом с задачей, но не позволяйте закреплённой нижней области перекрывать последнюю строку. Добавьте нижний отступ в прокручиваемой области и проверьте самый маленький поддерживаемый экран. Когда клавиатура оставляет слишком мало места для осмысленного выбора, отдельное полноэкранное состояние поиска понятнее узкой щели с прокруткой.
Сделайте закрытие предсказуемым и доступным
В этом сценарии кнопка закрытия и разрешённое нажатие вне панели отменяют предварительный выбор. При повторном открытии отображается пункт, сохранённый в заказе. Если его ещё не было, ни одна строка не выбрана. Смахивание может быть дополнительным способом закрытия, но видимая кнопка всё равно нужна.
Для модального веб-интерфейса паттерн диалога WAI-ARIA предусматривает фокус внутри диалога, недоступный для взаимодействия фон и логичное положение фокуса после закрытия. Само затемнение этого не обеспечивает. Дайте диалогу понятное название и обеспечьте доступ к его элементам с клавиатуры.
Если подтвердить выбор не удалось, оставьте панель открытой, сохраните выбранную строку и покажите пояснение рядом с действием. Нельзя просто закрыть панель и без сообщения оставить прежний адрес в заказе. После успешного подтверждения закройте панель, обновите сведения о заказе и верните фокус к кнопке изменения пункта либо к следующему логичному действию.
Соберите сценарий выбора в Pixso
Создайте отдельные фреймы со сведениями о заказе, открытым списком, предварительно выбранной строкой и подтверждённым результатом. Везде используйте одни и те же три пункта: «Центральный вокзал», «Магазин у реки» и «Рыночная площадь». В исходном заказе оставьте вокзал, а в панели предварительно выберите магазин. Так различие между выбором и сохранением будет видно в самом макете.
С помощью Auto Layout проверьте длинные адреса и увеличенные подписи. Добавьте раскрытый экран поиска с клавиатурой внизу и состояние ошибки подтверждения, в котором выбранный магазин сохраняется. Свяжите основные действия в прототипе, а рядом с фреймами разместите краткие пояснения о возврате фокуса, закрытии и различии между сохранённым и предварительным выбором.
Попросите коллегу поменять пункт, закрыть список без подтверждения и открыть его снова. Затем предложите завершить изменение. Сведения о заказе должны понятно отражать оба результата. Нижняя панель полезна, когда помогает закончить небольшую задачу и не потерять связь с основной.
