Все, що вам потрібно знати як дизайнеру інтерфейсу про інтервали та сітки макету

Ключем до кожного красивого дизайну є організація інформації. Методи інтервалів і сітки макета визначають структуру, ієрархію та ритм у вашому дизайні. При правильному використанні вони зменшують прийняття рішень і допомагають установити раціональний підхід до масштабів шрифтів, позиціонування, розмірів і інтервалів.

У цій статті розглядаються найкращі практики щодо інтервалів і компонування сітки на основі Material Design, Bootstrap і Figma.

Основи інтервалів

Перш ніж ми заглибимося в сітки макета, давайте розглянемо деякі основи інтервалів, які впливають на всі рішення щодо розмірів, вимірювань і інтервалів (включаючи конфігурацію сітки).

Базова одиниця

Базова одиниця визначає, чому буде кратне кожне вимірювання. Це забезпечує узгодженість проектів, покращує зв’язок із розробниками та зменшує кількість рішень, які має приймати дизайнер. Найбільш рекомендованою базовою одиницею є 8 пікселів, оскільки це робить масштабування для різноманітних пристроїв легким і послідовним. Це тому, що більшість розмірів екрана діляться на 8 і тому, що 8 саме по собі є числом, яке легко ділиться (8/2=4, 8/4=2).

Порада: піктограми, текст і деякі елементи всередині компонентів можна вирівнювати за сіткою 4 пікселів, щоб зменшити відстань у невеликих областях і полегшити впровадження.

Розміри

Висоту та ширину елементів інтерфейсу користувача слід вимірювати з кроком базової одиниці (тобто 8, 16, 24), коли це можливо. Це створює чітку ієрархію, акуратно вирівнює елементи та забезпечує послідовний візуальний ритм. Наприклад, можна очікувати, що висота рядка, кнопки та вхідні дані форми матимуть однакову висоту в усіх ваших дизайнах.

Підкладка

Відступ відноситься до простору між елементами інтерфейсу і також вимірюється в приростах базової одиниці. Передбачуваний відступ є естетично привабливим, прояснює зв’язок між елементами та покращує читабельність. Наприклад, заповнення всередині компонента має створювати цілісний візерунок інтервалів між усіма його елементами.

Основи сітки макета

Сітки макетів виникли в ранньому друкарському дизайні для визначення блоків тексту та зображень, і їхні основні принципи все ще застосовуються до того, як ми сьогодні організовуємо двовимірну інформацію в Інтернеті. Оскільки кількість пристроїв і розмірів екранів зростає, сітки є життєво важливими для підтримки послідовності та створення цілісного дизайну.

Останнім часом сітки стали більш гнучкими та потужними в таких інструментах, як Figma, із розширеною функціональністю, як-от стилі, обмеження розміру та вкладені фрейми (про це пізніше).

Анатомія сітки

Усі сітки складаються з трьох елементів: стовпців (Columns), пробілів (Gutter) і крайніх полів (Margin). Стовпці є будівельними блоками сітки та позначають місця розміщення елементів. Пробіли — це негативний простір між колонами, їх ширина має бути кратною базовій одиниці. Крайні поля — це негативний простір між краєм зовнішнього стовпця та рамкою.

Існує багато способів комбінувати стовпців, пробілів та крайніх полів для створення різних макетів сітки. Нижче наведено декілька стандартних типів сіток.

Рукописна сітка

Це найпростіший макет із лише одним стовпцем, що охоплює ширину всієї області вмісту. Сітка рукопису може бути корисною під час визначення полів на блоці тексту (як у рукописі).

Сітка стовпців

Сітки стовпців є найпоширенішим макетом для веб-додатків. Сітка розбиває кадр на рівномірно розташовані вертикальні поля, за якими вирівнюються об’єкти. Ці сітки, як правило, складаються з 12 стовпців, які потім можна розділити на половини, третини, четверті та шості під час проектування адаптивних розмірів екрана.

Модульна сітка

Це різновид сітки стовпців. Модульні сітки мають як вертикальні стовпці, так і горизонтальні рядки, які перетинаються і створюють матрицю клітинок або модулів. Ці модулі надають додаткові вказівки щодо компонування як окремих блоків, так і більших блоків, якщо їх об’єднати.

Адаптивні сітки макета

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

Проектування за допомогою сіток у Figma

Figma є одним з найпотужніших і найгнучкіших інструментів для проектування за допомогою сіток компонування завдяки використанню вкладених фреймів, стилів, обмежень і можливостей налаштування.

Застосуйте сітки макета до будь-якого кадру

У Figma сітки можна застосовувати до будь-якого кадру, а не лише на рівні монтажної області. Це означає, що сітки можна застосовувати до фреймів верхнього рівня (настільний комп’ютер, планшет, мобільний пристрій), а також до вкладених фреймів (тобто обрамлених областей вмісту або компонентів у вашому дизайні).

Застосуйте обмеження для адаптивного дизайну

Обмеження дозволяють контролювати поведінку зміни розміру будь-якого елемента по відношенню до його батьківського кадру. Наприклад, ви можете закріпити елемент (наприклад, кнопку) до кута рамки та зберегти точний розмір і відступ, коли рамку розширюють або стискають.

При використанні з розтягнутою сіткою макета обмеження будуть відносними до найближчого стовпця, щоб зберегти фіксований простір (жолоб) між елементами. Це особливо корисно при проектуванні для пристроїв кількох розмірів.

Зберегти стилі сітки

Створіть і збережіть кілька власних стилів сітки. Це надзвичайно корисно для підтримки узгодженого розміру пов’язаних областей вмісту, типів компонентів і розмірів пристроїв.

Налаштувати вигляду сітки

Зробіть макети сітки легшими для перегляду, оновивши їхній колір і непрозорість.

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