Основа работы с базовой сеткой

Основа работы с базовой сеткой

Автор: Саша Окунев Уровень: для начинающих

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

Пример

И сетка и сдвиг настроены на 10 dp. Это позволяет двигать объекты строго по сетке.

Базовая сетка хороша как для веба, так и для мобилок. Может использоваться параллельно с классической модульной 12-колонной, которая популярна у веб-дизайнеров. Нет смысла накладывать 12-колонную на базовую так, чтобы они сходились идеально, это стремление в никуда. Надо смириться с тем, что они существуют параллельно, чаще всего не бьются между собой. Они используются для разного: 12-колонник для плавающей ширины в адаптиве, а базовая для порядка в компонентах.

В Android

По гайдам Material для разработки мобильных приложений на Android долгое время рекомендовали использовать сетку 8 px (в их терминологии, dp), которую авторы Material называют Baseline grid. Но в моей практике она показала себя как слишком крупная для плотных интерфейсов, поэтому с годами я перешёл на 4 px. А потом она и в Material появилась. Теперь 4 px кажется всеобщим стандартом.

В iOS

В мире iOS базовая сетка вообще нигде не упоминается, есть только Layout, который диктует отступы по краям экрана. Но для iOS я всё равно использую 4 px, потому что она даёт успокаивающее чувство контроля и ощущение пространства на холсте.

Хочу подчеркнуть, что доскональное следование сетке само по себе не улучшает дизайн. Важно не быть заложником правил и посылать их к чёрту, когда они портят финальный результат. Особенно это касается отношений сетки с типографикой мелкого кегля.

Теперь главное: Работу с сеткой значительно облегчает настройка шага, на который сдвигаются объекты при зажатом Shift.

Это позволяет очень быстро и точно перемещать объекты с клавиатуры стрелками, не съезжая с сетки и лишний раз не прикасаясь к мыши.

Я развил эту идею для презентаций и стал использовать в них только 40 px. Она отлично ложится на слайд формата Full HD и ощущается просторно. Попробовав этот подход, ты всегда будешь смотреть на любые презентации в PowerPoint как на говно.

📌

О том как настроить шаг сдвига

и включить сетку на фрейме, я написал инструкцию для новой версии справочника по Figma.

Кстати, на slashdesigner.ru/f уже можно найти свыше 100 таких страниц о функциях Figma с примерами. Их можно фильтровать по типам меню и искать через поиск.

Основы дизайна
Основы дизайна