UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Учимся проектировать Bottom Sheets на примерах Vimeo, Dropbox, Youtube и т. д.
Редакція
Редакція

Опубліковано

Учимся проектировать Bottom Sheets на примерах Vimeo, Dropbox, Youtube и т. д.

#ux

Узнайте, как создать идеальные bottom sheets для вашего приложения.

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

Зачем использовать Bottoms Sheets?

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

С bottom sheets вы можете получить доступ к элементам внутри него без необходимости задействовать вторую руку, что чрезвычайно удобно.

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

Научитесь проектировать bottom sheets

Итак, когда мы определились зачем использовать этот элемент интерфейса, вы можете спросить, как сделать его идеальным. Следуя этим простым рекомендациям, вы сможете спроектировать великолепно выглядящие bottom sheets, которые украсят ваш дизайн.

1. Иконки и изображения

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

2. Заголовки

Сделайте заголовки простыми для чтения, поскольку bottom sheets имеют небольшой размер и занимают лишь половину экрана, а иногда и меньше половины. Поэтому лучший способ отобразить текст внутри bottom sheets – использовать небольшие заголовки, которые просты для чтения и понимания.

3. Размер

Bottom sheets используются для того, чтобы контент был легко доступен пользователю. Поэтому лучше всего разместить их до красной зоны, как я показал выше в разделе «Зачем». Если у вас слишком много данных, вы можете сделать их прокручиваемыми, но в первую очередь сделайте их удобными.

4. Добавить кнопку

Следует размещать кнопки внутри bottom sheets, поскольку они фокусируют внимание пользователя на конкретной части интерфейса. Разместив здесь кнопку, вы можете подтолкнуть пользователя совершить покупку, поделиться контентом, подписаться на рассылку и т. д.

5. Размытие фона

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

Лично мне нравится размывать фон, добавлять короткие заголовки, простые, но информативные иконки и изображения, а еще кнопку, что придает bottom sheets достойный вид.

Примеры приложений

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

Скриншоты приложения Youtube

Скриншоты приложения Yelp

Скриншоты приложения Universe

Скриншоты приложения Dropbox

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

Спасибо за прочтение.


Перевод статьи uxplanet.org

Найновіші коментарі (1)

Згорнути/розгорнути
 
mykola_golovko profile image
Mykola Golovko

Хорошая статья, спасибо!