Введення в систему 8-піксельних сіток

Будь-якого дизайнера, над чим би він не працював — сайтами, журналами або мобільними додатками, напевно, доводилося чути термін «сітка». Існують сітки для всіляких варіантів розташування контенту. Ми застосовуємо стовпчик сітки, щоб вибудовувати контент по горизонталі, сітки базових ліній, щоб вирівнювати блоки тексту по вертикалі, гнучкі (soft) та жорсткі (hard) сітки — в залежності від того, наскільки суворо збираємося їх дотримуватися. Я зацікавився системою 8-піксельних сіток, коли почув, з яким захопленням говорить про неї Брін Джексон, і вирішив подивитися, які переваги вона може дати моїм дизайнам (і чи взагалі).





А в чому проблема? Як же я справлявся досі без системи 8-піксельних сіток

Раніше я піднімав проекти за допомогою дизайнерських систем типу Bootstrap і Foundation і навіть сам створив кілька подібних їм. Тільки нещодавно я прийшов до думки, що окремі компоненти — наприклад, кнопки — можуть бути добре реалізовані самі по собі, але псувати дизайн в цілому, коли їх встраиваешь у вінегрет з інших елементів і контенту. Причина в тому, що створити візуально приємну композицію сторінки в єдиному стилі досить складно. Я можу посувати елементи туди-сюди у відповідності зі своїм дизайнерським баченням, але не можна розраховувати, що вся команда дизайнерів і розробників буде розділяти його. Коли немає системи, за якої розраховувалися б розміри і відстані, складно домогтися сталості.

Нижче представлено порівняння: на картинці зліва компоненти форми побудовані по системі 8-піксельних сіток, праворуч — по іншій системі, в якій можна задавати довільні числові значення розмірів і відстаней.



Але чому в моєму інтерфейсі має дотримуватися сталість?

Не повинно. Однак якщо ви хочете, щоб він залишав відчуття надійності і професіоналізму, це не завадить. Якщо ви коли-небудь робили покупки в Мережі, то, напевно, знаєте який скепсис відчуваєш, коли клацаєш на кнопку «Купити» і форма для введення інформації про кредитну картку, виглядає зовсім не так, як інші сторінки сайту. Трохи сталості може дати хороші результати.

Чим погані системи на зразок Bootstrap?

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

У процесі вироблення фірмового стилю для Pivotal нам часто доводилося створювати унікальні елементи і макети. Нещодавно, працюючи над уніфікацією UI-системи, ми виявили, що логотип у верхньому куті відрізняється від продукту до продукту. Цими продуктами займалися різні команди, розкидані по всьому світу — в результаті загальна концепція витримується скрізь, але виконання трохи відрізняється. Який же з логотипів зроблено неправильно?



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

Ну і що ти пропонуєш, розумник?

Систему 8-піксельних сіток. Розраховуйте розміри всіх елементів і відстані між ними з кроком 8 пікселів. Я розумію так: будь-яка задана висота, ширина, розмір поля або відступу будуть кратними восьми.



Чому саме 8?

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

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



Ладно, з парними числами все зрозуміло, правда, чому 8, а не 6 або 10?

У більшості поширених девайсів розмір екрану в пікселях кратний восьми, а значить, підганяти інтерфейс з цією системою буде простіше. Крок у вісім пікселів дає достатню кількість різних варіантів, не перевантажуючи вас змінними, на відміну від 6-піксельної системи, і не обмежуючи, як 10-піксельна. У кінцевому рахунку, вам потрібно вибрати розмір, який буде зручний для вашої аудиторії. Хороша тільки та «система», якій легко слідувати і яку легко відтворювати.

У чому цінність 8-піксельної системи?

Для дизайнерів: Підвищує ефективність, вимагає менше рішень для підтримання якісного єдиного ритму між елементами.

Для команди: Зручна система для взаємодії між дизайнерами і розробникам (менше метушні з-за пікселів). Розробнику простіше прикидати на око відрізок у 8 пікселів, ніж робити заміри кожен раз.

Для користувача: Постійність в дизайні бренду, якому вони довіряють. Ніякої розмитості через offset полпикселя на будь-якому девайсі, якому вони віддають перевагу.

З чого почати?

От кілька статей про впровадження методу 8-піксельних сіток для дизайнерів і розробників.

Пост Бріна Джексона про систему 8-піксельних сіток — саме розгорнуте керівництво, в якому є все: від визначень термінів до інструкцій по впровадженню.

Пост Ентоні Колурафичи про його досвід застосування 8-піксельних сіток при роботі з Sketch буде корисний для ознайомлення з системою.

Стаття від Google «Material Design — Metrics & keylines» — ще один хороший ресурс з прикладами і поясненнями.

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

Запитання

Ми, команда дизайнерів і розробників з Pivotal, ще не до кінця вивчили всі можливості системи. В наступних постах я буду ділитися новими відкриттями по ходу справи. А ви користуєтеся чимось подібним? Якщо ні, то чому? Якщо так, чому вас навчив цей досвід?
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.