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

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

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

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

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

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

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

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

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

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

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

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

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

2. Заголовки

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

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

3. Размер

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

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

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

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

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

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

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

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

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

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

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

Учимся проектировать Bottom Sheets на примерах Vimeo, Dropbox, Youtube и т. д.
Скриншоты приложения Youtube
Учимся проектировать Bottom Sheets на примерах Vimeo, Dropbox, Youtube и т. д.
Скриншоты приложения Yelp
Учимся проектировать Bottom Sheets на примерах Vimeo, Dropbox, Youtube и т. д.
Скриншоты приложения Universe
Учимся проектировать Bottom Sheets на примерах Vimeo, Dropbox, Youtube и т. д.
Скриншоты приложения Dropbox

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

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

0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Total
37
Share