Автор: Саша Окунев Уровень: для начинающих
Одним из важнейших технических советов, которые я получал в своей карьере дизайнера интерфейсов, состоит в том, что при работе с компонентами нужно использовать базовую квадратную сетку и синхронизировать её с шагом сдвига объектов.
И сетка и сдвиг настроены на 10 dp. Это позволяет двигать объекты строго по сетке.
Базовая сетка хороша как для веба, так и для мобилок. Может использоваться параллельно с классической модульной 12-колонной, которая популярна у веб-дизайнеров. Нет смысла накладывать 12-колонную на базовую так, чтобы они сходились идеально, это стремление в никуда. Надо смириться с тем, что они существуют параллельно, чаще всего не бьются между собой. Они используются для разного: 12-колонник для плавающей ширины в адаптиве, а базовая для порядка в компонентах.
По гайдам Material для разработки мобильных приложений на Android долгое время рекомендовали использовать сетку 8 px (в их терминологии, dp), которую авторы Material называют Baseline grid. Но в моей практике она показала себя как слишком крупная для плотных интерфейсов, поэтому с годами я перешёл на 4 px. А потом она и в Material появилась. Теперь 4 px кажется всеобщим стандартом.
В мире iOS базовая сетка вообще нигде не упоминается, есть только Layout, который диктует отступы по краям экрана. Но для iOS я всё равно использую 4 px, потому что она даёт успокаивающее чувство контроля и ощущение пространства на холсте.
Хочу подчеркнуть, что доскональное следование сетке само по себе не улучшает дизайн. Важно не быть заложником правил и посылать их к чёрту, когда они портят финальный результат. Особенно это касается отношений сетки с типографикой мелкого кегля.
Теперь главное: Работу с сеткой значительно облегчает настройка шага, на который сдвигаются объекты при зажатом **Shift**.
Это позволяет очень быстро и точно перемещать объекты с клавиатуры стрелками, не съезжая с сетки и лишний раз не прикасаясь к мыши.
Я развил эту идею для презентаций и стал использовать в них только 40 px. Она отлично ложится на слайд формата Full HD и ощущается просторно. Попробовав этот подход, ты всегда будешь смотреть на любые презентации в PowerPoint как на говно.
<aside> 📌 О том как настроить шаг сдвига Nudge Amount и включить сетку на фрейме, я написал инструкцию для новой версии справочника по Figma.
</aside>