Bento Box веб-дизайн
Bento Box веб-дизайн выстраивает контент в модульную сетку из плиток разного размера - подобно отделениям в японском ланч-боксе бенто - где каждая плитка это отдельный факт, график или фича.
Посмотрите, как палитра Bento Box выглядит в реальном, живом интерфейсе ниже - не на плоском свотче. Переключитесь на «Ваша палитра», чтобы увидеть свои цвета в том же интерфейсе.
Что такое Bento Box веб-дизайн?
Bento box-макеты разбивают страницу на сетку плиток разного размера вместо одного длинного вертикального ряда секций. Каждая плитка самодостаточна - небольшая метрика, мини-график, короткий фича-блок, логотип интеграции, - поэтому страница в целом читается скорее как дашборд или скриншот продукта, чем как традиционный маркетинговый скролл.
Стиль заимствует ритм у дашборд-интерфейсов (карточки метрик, спарклайны, статус-бейджи) и применяет его к маркетинговым страницам, поэтому даже совсем не дашборд-страницы читаются «дашборд-подобно»: это способ показать много небольших доказательств сразу, а не одно большое утверждение за раз.
Ключевые визуальные характеристики
- Асимметричная сетка плиток - широких, высоких, квадратных - вместо однородных карточек
- Каждая плитка самодостаточна: одна метрика, один мини-график, одна короткая фича, без общего повествования между плитками
- Небольшие спарклайны или столбчатые графики, встроенные прямо в плитки
- Статус-бейджи и мелкие индикаторы live-данных (зелёная точка, галочка), разбросанные по плиткам
- Плитки со скруглёнными углами и одинаковым отступом, отсылающие к отделениям физического бенто-бокса
Цветовые характеристики
- Нейтральный, приглушённый фон, чтобы цвет и контраст несли сами плитки, а не фон страницы
- Единый акцентный цвет, последовательно используемый на плитках для интерактивных или «live»-элементов (графики, статус-точки, CTA)
- Преимущественно белые или почти белые поверхности плиток для чистой, дашборд-подобной базы
Типографика
- Чистый нейтральный sans-serif повсюду - визуальную работу выполняет сетка, а не шрифт
- Мелкий, плотный текст лейблов внутри плиток (названия метрик, интеграций), заметно мельче заголовков
- Чуть более жирное начертание для немногочисленных числовых «героических» показателей, на которых держится каждая плитка
UI-паттерны
- Верхняя панель с логотипом, навигацией и небольшим live-индикатором статуса
- Модульная сетка, сочетающая героическую плитку, несколько метрик-плиток и одну-две фича-плитки разного размера
- Встроенный спарклайн или столбчатый график минимум в одной плитке
- Чек-лист или короткая строка интеграций как отдельная плитка в сетке
Частые вопросы
Что такое bento box веб-дизайн?
Стиль макета, выстраивающий контент в асимметричную сетку самодостаточных плиток - метрик, мини-графиков, коротких фич - по аналогии с отделениями японского ланч-бокса бенто, вместо одной длинной вертикальной страницы.
Bento box-дизайн - это то же самое, что дашборд-интерфейс?
Он заимствует дашборд-конвенции - карточки метрик, спарклайны, статус-бейджи, - но применяет их к маркетинговым и посадочным страницам, а не к реальному продуктовому дашборду.
Какой контент хорошо подходит для bento-сетки?
Небольшие самодостаточные доказательства: одна метрика, короткое описание фичи, строка логотипов, мини-график - то, что имеет смысл само по себе без общей нити повествования между плитками.
Можно ли посмотреть свои цвета в реальном интерфейсе Bento Box, а не только палитру по умолчанию?
Да - переключите тумблер «Ваша палитра» над предпросмотром, чтобы увидеть свои текущие цвета в живом интерфейсе Bento Box вместо цветов по умолчанию.