Модульная сетка или как мерить в попугаях
Привет!
Эта статья входит в цикл «Создание дизайн-системы». Здесь я рассказываю про основные преимущества модульной сетки, помогаю выбрать подходящую и понять, как применять её на практике.
Модульная сетка имеет очень важное значение в деле построения любой системы дизайна. Пожалуй, это первое с чем стоит определиться, когда вы приняли решение подойти к своему проекту системно. Сейчас я постараюсь обьяснить что же такое модульная сетка. Начнем с понятия самого модуля.
Начнем с определения самого модуля. Модуль — это базовая единица измерения. По умолчанию в вебе это 1 px, при создании мобильных приложений — 1 dp. Однако это слишком маленькая величина, которая не помогает при создании дизайн-системы. Так какой сделать отступ: 15 или 16 пикселей? Как решить, если на глаз разницы почти нет?
Почему в мобильных приложениях применяется именно dp, а не px
Px — это относительная единица измерения. Один px может быть физически разного размера, это зависит от устройства. Если вы разрабатываете веб-интерфейс, пользуйтесь обычными пикселями. Для вас 1 dp=1 px. Если делаете мобильное приложение , лучше не используйте px, иначе ваши размеры будут сильно различаться на разных устройствах. В вебе тоже можно заметить разницу, просто она не так критична.
Модульная сетка — это сетка из базовых модулей. Например, если ваш модуль равен 8х8 dp, это и будет одна клетка вашей сетки. Модуль может быть разной формы и пропорций, но мы будем рассматривать модульную сетку с квадратными модулями, которая подходит для создания дизайн-системы и веб, и мобильного дизайна.
Существуют и другие варианты сеток, но в этой статье я расскажу о тех, которые сама применяю в работе. Для квадратных модулей это сетки 8, 4 и 5 px или dp.
Сетка 8 dp родом из Material Design, поэтому так широко распространена. Но 8 dp — слишком большой шаг для сложных интерфейсов. Если её выбрать, вам придется часто использовать половину модуля, чтобы интерфейс был более аккуратным. Новая версия гайдлайнов Material уже использует сетку 4 dp: она гораздо более гибкая и способна закрыть почти все потребности.
Сетка 5 dp более воздушная, но использование половины модуля станет проблемой: 5 не делится ровно на 2, а использовать 0,5 пикселя — априори плохая идея. Такая сетка подходит не для всех интерфейсов, потому что отступы кратные 5 будут довольно большими. Самым маленьким будет 5, следующий — 10, и так далее. А для отступов это весьма значительные расстояния.
Как понять, какой вариант сетки вам подходит
Примерьте понравившийся вариант на несколько макетов с максимально разным содержанием: например, на главную страницу проекта и сложную форму.
Если у вас уже есть UX проекта, выделите основные типы страниц и наложите на них сетку. Так, за минимальное время вы поймете, как модульная сетка ляжет на весь проект — а значит, сэкономите кучу времени и избежите ситуации, когда надо переделывать сотни макетов. Если макетов пока нет, по умолчанию советую взять сетку с модулем 4.
Если вы до сих пор сомневаетесь, стоит ли внедрять сетку в свой проект, посмотрите, сколько еще в ней пользы:
- С сеткой намного меньше головной боли при определении отступов, размеров кнопок, формировании макетов, выборе ширины и высоты элементов.
- Дизайн выглядит аккуратнее за счет одинаковых размерностей и структуры.
- Если вы работаете в команде, с сеткой намного проще поддерживать единообразие на ваших проектах.
- Легко проверить, не закрался ли лишний пиксель в отступах. Просто включите сетку на макете.
- Если вы всё же не заметили ошибки, разработчик сам сможет понять, что вы имели в виду, особенно если он в курсе (а он должен быть в курсе) вашего модуля.
Пробуем сетку на практике
- Давайте попробуем воспользоваться модульной сеткой и начнем с типографики. Для проекта нам нужно определиться со стилями текста, и в этом нам частично поможет наш модуль. Для примера выберем модуль 4 dp.
Такой таблицы недостаточно для создания полноценных стилей текста, потому что она должна включать и другие свойства шрифта — выключку и цветовую гамму. Но этого хватит для изучения материала по построению модульной сетки.
Мы построили наши стили, используя шаг в 4 единицы. Размер межстрочного расстояния тут важнее размера шрифта — расстояние влияет на горизонтальный ритм, а размер шрифта может как подчиниться модулю, так и отойти от него. При этом у вас ничего не поедет, если межстрочное расстояние укладывается в сетку — то есть стиль с размером 15 и межстрочным отступом 20 тоже вполне подойдет.
Удачное межстрочное расстояние для заголовков примерно равно 1,25 размера вашего шрифта, а для обычного текста — это 1,5 размера. Мы округляем эти цифры и получаем комфортное межстрочное расстояние, которое ложится в нашу сетку.
Бывают ситуации, когда нужно несколько вариантов межстрочного. Самый яркий пример — текст 16 кегля. Для коротких текстов, названий и подписей подойдет межстрочное расстояние 20, а для длинного текста лучше взять 24. Я часто так делаю: создаю два стиля 16 кегля с разным межстрочным под разные задачи, чтобы система была гибкой.
2. Теперь попробуем создать поле ввода
Выглядит неплохо. Мы применили наш модуль ко всем возможным величинам — высоте поля, скруглению углов и внутренним отступам — , а типографику взяли из сетки, которую только что создали.
Вы могли заметить, что в примере есть цифры 2 и 18: и это не целая единица модуля, а его половина. Но это не сбивает горизонтальный ритм, поэтому мы спокойно можем себе такое позволить, не выходя за рамки системы.
Важно: отрисовать только два состояния для поля ввода — недостаточно. Поле — крайне важный интерактивный компонент, который сильно влияет на пользовательский опыт. Не забывайте как минимум про наведение, фокус и валидацию.
3. Теперь создадим последний в этом материале компонент — кнопку, и соберем небольшую форму на основе созданного набора
Мы сделали стандартную форму авторизации, которая полностью подчинена нашей модульной системе.
Модульная сетка + колоночная сетка = ❤️
Колоночная сетка — это система равных колонок с одинаковыми отступами между ними. Очень часто она используется для создания гармоничных макетов. Самые популярные колоночные сетки: 12-колоночная и 16-колоночная.
Колонки могут быть горизонтальные: при наложении друг на друга они образуют модули более крупного порядка. Этот модуль тоже можно использовать, но я эту систему не применяю. Почему? На мой взгляд это слишком большие модули. Иногда они только мешают и заставляют делать неправильный выбор.
Зачем нужна колоночная сетка
Если коротко, она поможет вам построить страницы. А если вы договоритесь с front-end разработчиком, чтобы он использовал сетку с вашими параметрами, процесс работы станет легче для всех. Так, разработчику не придется мерить ширину каждого блока и смотреть каждый отступ, а вам не надо будет проверять, совпадают ли отступы с макетом.
Очень здорово, когда получается подружить модульную сетку с колоночной. После достаточно мучительных вычислений можно найти ту самую грань, когда колоночная сетка и модульная сходятся в идеальной гармонии. Большой вам респект, если это так на всех разрешениях экрана, которые вы делаете (для веб-проектов это обычно 1366+, 1366, 1280, 1024, 768 или 320).
Но если вдруг это не так, мне кажется, трагедии тут нет. На самом деле колонки резиновые, и важен только отступ между ними — именно отступ должен подчиняться вашему модулю, а ширина самих колонок может и не попадать в сетку. Это в любом случае произойдет, если верстка резиновая.
Надеюсь, статья была вам полезна. Буду рада вашим лайкам, репостам и просто добрым словам :)
Смотрите другие статьи из цикла «Создание дизайн-системы»:
