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

779

Тренд 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 швидше за все не для вас. Ну чи доведеться ретельніше попрацювати над ієрархією. В інших випадках, стиль виглядає дуже актуально і цікаво.