Сітки в дизайні мобільних додатків

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

Ми розглянемо:

• Оптимальну кількість стовпців
• Як правильно розрахувати відступи між колонками і від краю сітки
• Фіксовані та адаптивні сітки
• Точність розрахунку сіток
• Сітка всередині окремих елементів (модулів)
• Рядки та вертикальний ритм

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

Отже, приступимо.

Оптимальна кількість стовпців

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

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

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

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

Якщо ви обираєте сітку з 2, 4 або 8 стовпців, пам'ятайте про можливі проблеми з розміщенням непарної кількості елементів у рядку.

Порада

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

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

Відступи та поля (Offsets)

---

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

По-перше, давайте подивимося на рекомендації операційних систем, щоб з'ясувати поля макетів (offsets). Наразі мінімальні рекомендовані поля макета для Android та iOS становлять 16pt. Це означає, що, якщо ви хочете дотримуватися системних рекомендацій, поля не повинні бути меншими за це значення. (Але вони можуть бути більшими)

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

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

Порада

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

Фіксовані та адаптивні сітки

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

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

Порада

Завжди починайте з меншого розміру екрана в системі або з найпопулярнішого. Наприклад, наразі для iOS найменший екран - iPhone SE (320sp), а найпопулярніший - iPhone 8/7/6 (375sp). Далі просто розтягніть самі стовпці та залиште однакові розміри міжколоночних відстаней.

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

Точність розрахунку

В iOS більшість екранів мають непарну ширину і тому не діляться без залишку. В Android ви також можете знайти екрани з подібними розмірами.

У цьому випадку у вас є кілька варіантів:

Компенсація в 1pt через різні розміри полів макета

Наприклад, встановіть ліве поле 24pt, а праве 23pt. Швидше за все, ніхто візуально не помітить різницю, але ваш внутрішній перфекціоніст буде трохи незадоволений.

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

Недоліки: розробники повинні завжди враховувати різницю в полях макетів, і, наприклад, на iPhone SE (320sp) змінити непарне поле на парне.

Залиште точні значення для полів (наприклад, 24pt) і використовуйте дробові розміри стовпців

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

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

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

Сітка всередині окремих елементів (модулів)

Як і при великих розмірах, у вашому дизайні можуть бути окремі модулі. У цьому випадку окремий модуль (елемент) може мати власну сітку.

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

Рядки та вертикальний ритм

Щоб створити більші модулі та підтримувати вертикальний ритм, ви маєте розмістити рядки та міжколонки між ними, які співмірні з основним модулем (у моєму прикладі пропорційно модулю 8pt)

Висновок

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

І пам'ятайте:

"Вивчай правила, щоб знати, як правильно їх порушити"

-Далай-лама

Які прийоми ви використовуєте при створенні сіток для мобільних інтерфейсів? Будь ласка, поділіться в коментарях.

Підписуйтесь на Twitter автора Andrey Zhulidin

---

Переклад статті Andrey Zhulidin