Тренд Bento UI в дизайне — что это, и как его использовать

918

Тренд Bento UI в дизайне — что это, и как его использовать

Тренды в UI

В последнее время на Dribbble и Behance стало появляться все больше интерфейсов, состоящих из квадратных и прямоугольных блоков с закругленными углами. Это и есть стиль bento. Дизайнерам он известен уже давно, но именно сейчас его популярность начала набирать обороты.

Сам по себе термин «bento» пришел к нам из Японии, и к интерфейсам ПО не имеет ровным счетом никакого отношения. Он означает порцию еды, помещенную в специальный контейнер, разделенный на секции. Присмотревшись к этому явлению немного пристальнее дизайнеры осознали, насколько удобными и привлекательными могут быть подобные интерфейсу.

Сегодня сложно сказать, кто первым применил bento в UI. Одни утверждают, что это был Apple, другие считают, что первенство принадлежит Microsoft. Но в любом случае, этот тренд становится все более популярным, поэтому мы решили рассказать, как его использовать на практике.

Какие отличительные черты у Bento UI

В первую очередь, Bento UI — это способ структурирования дизайна. Он прост для восприятия и эффективен, благодаря чему позволяет создавать удобные для конечного пользователя интерфейсы.

Работая в стиле Bento нужно четко соблюдать визуальную иерархию и правильно организовывать пространство. Весь интерфейс делится на отдельные блоки, имеющие форму прямоугольников с закругленными углами. В них помещается главная информация. Внутри этих блоков также находятся прямоугольники, структурно связанные с «родителями», на которых находятся данные второго уровня и так далее. Причем, чем меньше уровней — тем проще восприятие.

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

Главные преимущества Bento UI

Теперь, когда мы в общих чертах разобрались, что собой представляет стиль Bento, стоит сказать несколько слов о том, почему его стоит использовать в своих проектах. Начнем с того, что он имеет минимум четыре важных преимущества:

Структура. Bento UI позволяет создавать визуально привлекательную иерархию и удобно размещать контент.
Простота. Этот стиль заметно облегчает процесс проектирования лейаутов и варфреймов для разных устройств.
Трендовый внешний вид. Bento выглядит современно и актуально, благодаря чему формирует положительное впечатление о продукте со стороны пользователей.
Узнаваемые паттерны. Как мы уже упоминали, Bento используют многие гиганты рынка, в том числе Apple и Microsoft. Это означает, что пользователи уже хорошо знакомы с такой системой расположения элементов и смогут быстро сориентироваться в вашем продукте.

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

Но этому можно противопоставить и множество других аргументов. Например тот, что Apple меняет интерфейсы крайне редко, а сейчас именно Bento является центральным компонентом всех его устройств: macOS, iOS и даже новой visionOS. Очень вероятно, что это обстоятельство будет влиять на дизайн еще достаточно долго.

К тому же, повышению популярности Bento UI способствуют и веб-технологии, в частности CSS Grid. С его помощью frontend-разработчики могут воспроизводить bento-интерфейсы также просто, как и любые другие сетки. А это однозначно играет большое значение в популяризации стиля.

Пошаговое руководство: как создать интерфейс в bento-стиле

Работать в стиле Bento достаточно просто. Вот небольшая пошаговая инструкция, которая поможет вам создавать впечатляющие и трендовые интерфейсы:

Поработайте с контентом. В начале работы разделите контент на небольшие фрагменты. Это упростит дальнейшую задачу.
Создайте сетку. В основе Bento UI лежит четкая и хорошо продуманная сетка. Каждая ее ячейка должна быть квадратной или прямоугольной — другие фигуры не допускаются.
Разместите контент в ячейках. Вам не обязательно заполнять их все. Более правильно — создавать оригинальные композиции с выборочным заполнением блоков.

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

Заключение

Bento UI — это не просто очередной тренд, который быстро уйдет в прошлое. Это результат эволюции UI-дизайна. Он предлагает совершенно новый подход к структурированию данных на экране интерфейса, и позволяет делать сложные вещи простыми и понятными.

Конечно, это не универсальный стиль, и подойдет он не для всех проектов. Например, если продукт слишком запутанный и нагруженный — Bento скорее всего не для вас. Ну или придется более тщательно поработать над иерархией. В остальных же случаях, стиль выглядит очень актуально и интересно.