Тендеры и лиды
Информация
Модульность, сетки, аккуратные блоки — всё это стало привычной частью интерфейсов. Многие из них визуально напоминают японские bento-боксы. Но ровные скругленные блоки сами по себе не делают дизайн bento. За визуально похожей компоновкой стоят разные принципы: где-то это удобная сетка, а где-то — осознанная композиция со своими акцентами.
Bento-подход помогает структурировать интерфейс, делает навигацию интуитивнее и упрощает восприятие сложных экранов. Но работает он только в контексте продукта.
В статье веб-дизайнер студии комплексной разработки цифровых решений CleverPumpkin Александр Попов вместе с лид-дизайнерами команд «Авито», «Альфа-Банк» и «Детский мир» разбирают, чем bento-стиль отличается от других модульных подходов к созданию дизайна; ситуации, где модульность помогает и в каких мешает. Внутри — примеры продуктовых интерфейсов, выводы и практические рекомендации по работе с bento.
Bento-дизайн получил название в честь японских ланч-боксов — компактных коробочек с отделениями для разных продуктов. Их идея — логично и удобно структурировать содержимое. В дизайне та же логика проявляется через особую структуру расположения элементов, которые направляют внимание пользователя.
Сами принципы карточной верстки не новы — их применяли задолго до появления термина bento. Но именно после появления CSS Grid в 2017 году и массового внедрения подобных решений в рекламных материалах, а позже и на сайтах у Apple и Microsoft, подход получил новый виток и стал воспроизводимым, гибким, удобным в поддержке и очень модным.
Bento вырос из карточного стиля и идеи модульности, при этом стал ее отдельной визуальной формой со своим композиционным подходом и правилами. Рассмотрим их.
Модульный интерфейс — это принцип организации пространства, когда экран собирается из независимых, переиспользуемых блоков (модулей). И классический карточный стиль, и bento заимствуют эту идею, поэтому визуально похожи.
В карточном стиле контент располагается в аккуратную сетку из повторяющихся блоков, похожих по размеру. Такой стиль удобен в случаях, когда есть задача сохранить предсказуемую структуру экрана при однотипном контенте.
Bento отличается от карточного своей композиционностью. В нем контент разбивается на четкие, как в японском ланч-боксе, квадратные или прямоугольные секции, что создает упорядоченность, упрощает адаптацию и улучшает восприятие, особенно на мобильных устройствах. При сохранении карточности интерфейс становится более динамичным.
Как и другие модульные стили, bento строится из отдельных элементов, которые удобно поддерживать, перерабатывать и комбинировать. Но bento усиливает модульность за счёт композиции, помогает выделять важное, задает акценты и направляет внимание.
Стиль снижает когнитивную нагрузку для пользователя. Благодаря визуальной иерархии смысловые группы четко выделяются, а контекст легко считывается, даже в продуктах со сложной навигацией.
Четкие зоны и крупные элементы позволяют пользователю легче находить приоритетную информацию и делают интерфейс понятнее, в том числе для людей с ограничениями по зрению и вниманию. Bento лучше выдерживает увеличение шрифта, масштабирование и помогает пользователю фокусироваться на приоритетных элементах.
Дизайнеру проще собирать макет, когда есть готовые блоки и понятный каркас. Это упрощает верстку, а адаптация под разные устройства требует меньше усилий.
Такой подход используют и крупные бренды, только в более масштабном виде. Там модульность выведена на уровень продуктовых направлений, где разные дизайн-команды работают по единым правилам и гайдлайнам, а принцип сборки упрощает переиспользование решений внутри продукта.
Чтобы продукт оставался цельным, но при этом мог адаптироваться под сотни разных контекстов, нам нужна гибкая модульность. И тут bento-подход отлично ложится, так как усиливает наш принцип: переиспользуй и собирай из готового.В «Авито» мы уже давно работаем по модульной системе. В ее основе лежат платформы — масштабируемые куски интерфейса, которые можно внедрять в разные части продукта с значительно меньшими усилиями, чем при разработке с нуля. Команды используют эти платформы, как конструктор, и собирают интерфейсы под свои задачи».
При использовании готовых и повторяемых компонентов снижается объем уникальной разработки и поддержки, а единые правила сокращают трудозатраты на внедрение изменений.
«Альфа-Банк» уже давно применяет блочную вёрстку. Bento лишь ускорил выбор креативных вариантов выделения нужного контента. Этот прием стал общим для команд всех направлений, что повысило консистентность страниц».
«Мы интегрировали bento-сетку не только в интерфейсы, но и в графический стиль «Детского мира» — в баннеры, навигацию и витрины. На старте процесс шел медленно, так как нужно было адаптировать bento к детской эстетике, придумать, как он будет сочетаться с фирменными кубиками, подобрать корректные радиусы и общее ощущение пластики. Но после того как мы выстроили свои правила, работа стала заметно быстрее. Bento дал нам структурность и предсказуемость, которые ускоряют сборку материалов».
Пользователи уже привыкли к карточной стилистике интерфейсов, потому что постоянно встречают их в популярных сервисах. Bento сохраняет эту «узнаваемую» структуру, но делает её более выразительной. Таким образом, Bento UI сохраняет преимущества карточных интерфейсов, позволяя снизить порог входа в приложение и сделать интерфейс user-friendly.
Bento — удобный инструмент для проверки продуктовых гипотез. Блоки легко перемещать, выставлять приоритеты и акценты, корректировать путь пользователя. Времени на подготовку и исследования уходит меньше.
В отличие от карточного стиля, где элементы одинаковы по масштабу, bento использует блоки разного размера. Это позволяет точнее расставлять акценты — большие блоки выделяют важное, а меньшие поддерживают структуру и не забирают внимание.
Даже самые удобные паттерны могут навредить, если использовать их не по назначению и в отрыве от данных о поведении пользователя.
Если переборщить с количеством bento-модулей, пользователь может потеряться в потоке однотипных блоков. И не забудьте про эффект Хика — это феномен, при котором чем больше вариантов выбора у пользователя, тем дольше он принимает решение. Это особенно критично в сценариях, где важна скорость и интуитивность.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13230 тендеров
проведено за восемь лет работы нашего сайта.
Например, «Альфа-Банк» при редизайне сайта протестировал несколько вариантов первого экрана в bento-сетке. Результаты оказались неоднозначными: в одних конфигурациях bento увеличивал вовлеченность, в других — ухудшал показатели.
Важно не забывать, что универсальных решений нет. Привычность не гарантирует успех, так как многое зависит от сценариев, аудитории, плотности информации и бизнес-смысла.
«Мой опыт говорит, что качество пользовательского опыта определяется не структурой и правилами, а тем, насколько продукт адаптирован под пользователей. Если их потребности учтены, будет и конверсия, и глубина вне зависимости от того, как именно организованы блоки внутри интерфейса».
Модули требуют «воздуха» — отступов, рамок, визуального разделения. На мобильных экранах это ощущается сильнее из-за того, что каждый элемент занимает больше места, — приходится либо сокращать объем контента, либо разбивать его на несколько экранов, увеличивая свайпы и шаги пользователя. Динамическая асимметричная сетка с блоками разного размера требует тщательного планирования при создании адаптивных экранов, иначе контент может стать тяжелым для восприятия. Это ограничение стоит учитывать, если у вас много важных действий или данных на один экран.
«Bento-стиль хорошо работает на десктопе при умеренном объеме контента. На мобильных чаще мешает и замедляет сканирование информации — пользователи быстрее ориентируются, когда контент идет вертикально подряд, без разбиения на мелкие блоки».
При неправильной иерархии блоки легко запутывают пользователя. Когда на экране их слишком много или все они одинакового размера, возникает либо информационный шум, либо размытая приоритетность. Визуальный ритм пропадает, а контент перестаёт читаться последовательно. Чтобы избежать этого, важно варьировать размеры блоков, задавая чёткий порядок внимания.
Несмотря на разнообразные размеры блоков, сетка bento UI задает довольно жесткий ритм и создает ограничения в композиции. Это может помешать брендам, которые строят коммуникацию на принципах творчества и визуальной свободы. Bento UI в таких проектах может сдерживать.
«Если задать структуру, со временем она обрастает функциональностью, правилами и ограничениями. Чтобы не становится заложниками нашего «фундамента» bento-дизайна, мы в «Авито» поддерживаем и развиваем его. Тогда получается win-win: любое изменение требует меньше усилий и учитывает десятки зависимых сценариев».
Когда важны индивидуальность, неожиданные приемы и эмоциональная выразительность, любая модульность добавляет ограничения. Но и их можно обойти при грамотном подходе. Понимание этих особенностей позволяет не только избежать ошибок, но и принять более точные решения при проектировании интерфейса.
«Мы заметили, что в интерфейсах с большим количеством мелких элементов bento дает «шахматный» эффект и акценты теряются. Графически он идеален для фокусных зон, но плохо подходит для потоковых подборок разнородного контента. Поэтому в коммуникациях мы используем адаптированную версию bento: сохраняем модульность и порядок, но смягчаем эстетику — добавляем округлые формы, детские элементы, фотографии и иллюстрации, чтобы стиль оставался эмоциональным».
Не все задачи подходят под стиль bento. Вот случаи, когда от него точно стоит отказаться:
Таким образом, bento UI стоит использовать только тогда, когда в приоритете структура. В ситуациях, где важны потоковое чтение, высокая информационная плотность или выразительная визуальная подача, он скорее навредит, чем поможет.
Чтобы методика работала на ваш интерфейс, а не против него, соблюдайте эти принципы. Они помогут сохранить фокус внимания, логичную иерархию и выразительность даже при сложных сценариях.
1. Сокращайте количество делений на экран. Лучше удерживать 3–5 смысловых блоков, чем делать десятки микрокарточек. Избыток фрагментов дробит внимание пользователя. Если контента много — группируйте его по категориям и распределяйте на разные экраны или разделы. Так вы сохраните чистоту и не потеряете смысл.
2. Вводите четкую визуальную иерархию. Первое правило простое — главное должно быть заметнее. Используйте разные размеры блоков, контраст, отступы, цвета фонов и шрифта. Самые важные — крупные и акцентные, второстепенные — нейтральные и менее заметные.
3. Планируйте объем и адаптивность заранее. Контент должен органично вписываться в блоки. Протестируйте, как будет выглядеть блок с реальными данными — особенно на мобильных устройствах.
4. Допускайте отступления от стандартов стиля. Не бойтесь нарушать ритм сетки ради выразительности. На ключевых экранах можно ослабить регулярность повторения блоков и добавить динамики. Главное — делать это осознанно и сохранять общий стиль: так вы избежите шаблонности и сделаете интерфейс живым.
Bento UI — удобный инструмент, но не универсальное решение. Он хорошо работает там, где важна визуальная структура, модульность и скорость восприятия. Но при высокой плотности данных или необходимости творческой подачи лучше поискать другие паттерны.
При разработке интерфейса ориентируйтесь на цели продукта, задачи бизнеса, исследования и контекст использования: кто ваши пользователи, в каких условиях они взаимодействуют с продуктом, какие у них потребности. Исследования, аналитика и здравый смысл должны быть важнее визуальных трендов.
Хотите обсудить свой проект или взглянуть на дизайн по-новому — пишите нам в Telegram, будем рады помочь.
