737

Тренд Bento UI в дизайні – що це, та як його використовувати

Тренди в UI

Останнім часом на Dribbble і Behance почало з'являтися все більше інтерфейсів, що складаються з квадратних і прямокутних блоків із закругленими кутами. Це і є стиль bento. Дизайнерам він відомий вже давно, але саме зараз його популярність почала набирати обертів.

Сам по собі термін «bento» прийшов до нас з Японії, і до інтерфейсів ПЗ не має зовсім ніякого відношення. Він означає порцію їжі, поміщену у спеціальний контейнер, розділений на секції. Придивившись до цього явища трохи уважніше дизайнери усвідомили, наскільки зручними та привабливими можуть бути подібні форми для інтерфейсу.

Сьогодні важко сказати, хто першим застосував bento у UI. Одні стверджують, що це був Apple, інші вважають, що першість належить Microsoft. Але в будь-якому випадку цей тренд стає все більш популярним, тому ми вирішили розповісти, як його використовувати на практиці.

Bento ui

 

Які відмінні риси у 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 2

 

Висновок

Bento UI - це не просто черговий тренд, який швидко піде в минуле. Це результат еволюції UI-дизайну. Він пропонує абсолютно новий підхід до структурування даних на екрані інтерфейсу і дозволяє робити складні речі простими та зрозумілими.

Звичайно, це не універсальний стиль, і він підійде не для всіх проєктів. Наприклад, якщо продукт занадто заплутаний і навантажений, Bento швидше за все не для вас. Ну чи доведеться ретельніше попрацювати над ієрархією. В інших випадках, стиль виглядає дуже актуально і цікаво.