Модульні сітки в UI: найкращі практики використання

Сьогодні ми завершуємо дуже пізнавальний лонгрід про .

Найкращі практики використання макетів сітки

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

Вибір потрібної сітки

“Скільки колонок?” – це перше питання, яке ставлять дизайнери, починаючи працювати з сіткою.

Багато популярних фреймворків використовують систему сіток на 12 стовпців з однаковою шириною. З досить невеликих чисел 12 – дуже добре ділити. Можна мати 12, 6, 4, 3, 2 або 1 рівномірно розподілених колонки. Це дає розробникам величезну гнучкість макета.

Система сітки з 12 колонками рівної ширини є надійною, гнучкою і надає різні можливості організації структури

Хоча 12-колонкова є популярним вибором серед багатьох дизайнерів, вона не є універсальним рішенням. Коли ви обираєте сітку, виберіть таку кількість колонок, яка справді необхідна для вашого дизайну.

Немає сенсу використовувати сітку з 12 колонками, якщо вашому макету потрібно всього 8 колонок.

Макет сітки на 8 колонок в Adobe XD

Як дізнатися, скільки колонок використовувати? Перш ніж приймати рішення про кількість колонок, накидайте можливі макети (можна зробити ескіз на папері). Це означає, що вам потрібно знати, який контент буде на екрані. Контент буде визначати сітку, а не навпаки.

З ескізами ви будете краще поінформовані про кількість стовпців, яка вам потрібна.

Паперовий ескіз для макета веб-сторінки. Кількість стовпців має бути визначена вмістом

Враховуйте обмеження

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

Візьміть важливі об’єкти в рамку

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

Обрамлення важливих об’єктів

Не бійтеся виходити за межі сітки

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

При розриві сітки виділяються певні елементи. Позиціонування елемента поза сіткою привертає до нього увагу.

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

Звертайте увагу на горизонтальні і вертикальні інтервали

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

У другому прикладі горизонтальні відступи (простір між блоками контенту) і вертикальні (між колонками) узгоджені, що спрощує візуальне сприйняття загальної структури і контенту.

Зверніть увагу на горизонтальні і вертикальні відступи. Ліворуч – різні вертикальні інтервали. Праворуч – послідовний вертикальний інтервал

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

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

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

Оптимізуйте сітки для мобільних пристроїв

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

Плиткова сітка на мобільному екрані

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

Додаток Yoox для Android

Тестуйте

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

Висновок

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

Як сказав Йозеф Мюллер-Брокманн: “Система сіток – це допомога, а не гарантія. Вона дозволяє використовувати кілька можливих застосувань, і кожен дизайнер може знайти рішення, відповідне його особистому стилю. Але потрібно навчитися використовувати сітку – це мистецтво, яке вимагає практики”.

Джерело: www.smashingmagazine.com

Вас також ЗАЦІКАВИТЬ:

 

Вам сподобалося?

Читайте щотижня наші кращі статі про дизайн!

email рассылки

Корисна розсилка!

Все найцікавіше про дизайн і дизайнерів!
А ще свіжі вакансії і трішки гумору)

Ваш email:
email рассылки
Позначки:

Залишити відповідь