Сетка и интервалы в Figma


19.01.2020 Время чтения - 7 минут 4776

Ключом к восхитительному дизайну является организация его информации. Методы разметки и сетка макета определяют структуру, иерархию и ритм вашего дизайна. При правильном использовании они сокращают процесс принятия решений и помогают установить рациональный подход к масштабированию, позиционированию, размеру и интервалу.

В этом руководстве будут рассмотрены лучшие методы построения интервалов и сетки, основанные на Material Design, Bootstrap и Figma.

Основы интервалов

Прежде чем мы углубимся в сетку макетов, давайте рассмотрим некоторые основы интервалов, которые влияют на размер и расстояние (включая конфигурацию сетки).

Базовая единица

Базовая единица определяет то, на что каждое измерение будет кратно. Это обеспечивает согласованность проектов, улучшает связь с разработчиками и уменьшает количество решений, которые должен принимать дизайнер. Самый рекомендуемый базовый блок — 8px, потому что он делает масштабирование для широкого спектра устройств простым. Это связано с тем, что большинство размеров экрана делится на 8, а само число легко поделить на 4 и 2.

Совет: Значки, текст и некоторые элементы в компонентах могут быть выровнены по сетке размером 4 пикселя, чтобы уменьшить расстояние в небольших областях и упростить реализацию.

Размерность

Высота и ширина элементов пользовательского интерфейса должны измеряться с шагом базовой единицы (т. е. 8, 16, 24), когда это возможно. Это создает четкую иерархию, аккуратно выравнивает элементы и обеспечивает согласованный визуальный ритм. Например, можно предположить, что высота строки, кнопки и входные данные формы будут иметь одинаковые инкрементные высоты во всех ваших проектах.

Заполнение

Заполнение ссылается к интервалу между UI-элементами, а также измеряется с шагом базовой единицы. Последовательное, предсказуемое заполнение эстетически приятно проясняет отношения между элементами и улучшает удобочитаемость. Например, заполнение внутри компонента должно создавать целостный шаблон с одинаковым расстоянием между всеми его элементами.

Подсказка: в Figma вы можете избавить себя от головных болей, изменив величину «смещение» с 10 до 8 (Menu > Preferences > Nudge amount > 8).

Основы сетки

Сетки макетов возникли в раннем печатном дизайне для определения блоков текста и изображений, их основные принципы все еще применяются для организации двумерной информации в Интернете. С большим количеством устройств и размеров экранов сетки жизненно важны для поддержания согласованности и создания целостного дизайна.

В последнее время сетки стали более гибкими и мощными в Figma, с расширенными функциональными возможностями, такими как стили, ограничения размеров и вложенные фреймы (подробнее об этом ниже).

Анатомия сетки

Все сетки состоят из трех элементов: столбцы, зазоры и поля. Столбцы являются строительными блоками сетки и отмечают, где должны размещаться опредённые элементы.

Зазоры — это пространство между столбцами, а их ширина должна быть кратна базовой единице. Поля — это отрицательное пространство между краем внешнего столбца и рамкой.

Существует много способов объединить столбцы, зазоры и поля для создания различных макетов сетки. Ниже приведены несколько стандартных типов сетки.

Рукописная Сетка

Это простейший макет с одним столбцом, охватывающим ширину всей области содержимого. Сетка рукописи может быть полезна при определении полей в блоке текста (как в рукописи).

Сетка столбцов

Сетки столбцов являются наиболее распространенным макетом, используемым для веб-приложений. Сетка разбивает рамку на, равномерно расположенные вертикальные поля, по которым выравнивают объекты. Эти сетки обычно состоят из 12 столбцов, которые затем можно разделить на половинки, трети, четверти и шестые при проектировании адаптивных размеров экрана (подробнее об этом позже).

Модульная сетка

Это еще один вариант сетки столбца. Модульные сетки имеют как вертикальные столбцы, так и горизонтальные строки, которые пересекаются и создают матрицу ячеек или модулей. Эти модули предоставляют дополнительные рекомендации по компоновке в виде отдельных блоков или более крупных блоков в сочетании.

Базовая сетка

Базовые сетки состоят из плотных горизонтальных рядов, которые обеспечивают ориентиры для выравнивания и интервала для текста, аналогично тому, как вы пишете на разлинеенном листе. В приведенном ниже примере каждая строка размером 8px чередуется красным и белым.

Совет: важно, чтобы все высоты линий были равны шагу вашей базовой единицы (8x или 4px) и ваш текст идеально совпадал с базовой сеткой.

Адаптивные Сетки

Чтобы поддерживать удобство использования сетки, макеты должны быть адаптивными, масштабироваться вверх и вниз, отображать информацию на широком диапазоне размеров экрана. Это достигается путем создания согласованного поведения сетки макета и установки определенных точек останова для поддержки ваших проектов.

Фиксированное поведение

Это поведение имеет «фиксированную» ширину сетки и её положение. При изменении размера экрана сетка сохраняет все свои точные измерения, в то время как размер поля увеличивается или уменьшается. Это позволяет всем элементам оставаться пропорциональными, но также приводит к слишком свободному пространству на полях при очень больших размерах устройства.

Динамическое поведение

Динамическое поведение измеряется в процентах, а не в пикселях, поэтому ширина сетки увеличивается и уменьшается при изменении размера экрана. Ширина сетки регулируется за счёт того, что ширина полей и зазоры остаются постоянными, в то время как размер столбца увеличивается или уменьшается. Это поведение использует доступное пространство экрана, но может вызвать растяжение элементов.

Контрольные точки

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

Точки останова обычно представлены в единицах «px» и отмечаются  в диапазоне. Не существует обязательного набора контрольных точек, но вот парочка, с которых можно начать.

Контрольные точки:

  • Маленькие (0px-599px)
  • Средние (600px-899px)
  • Большие (900px-1199px)
  • Очень большие (1200 пикселей и выше)

Совет: эти контрольные точки основаны на статье Дэвида Гилбертсона «100% правильный способ создания контрольных точек CSS», если вы хотите погрузиться и узнать больше.

Что они они означают? Когда вам нужно показать, как дизайн реагирует на масштабирование, используйте следующие размеры фрейма в Figma:

Размеры фрейма:

  • 375px, чтобы показать «Маленькую» точку останова
  • 600px, чтобы показать «Среднюю» точку останова
  • 900px, чтобы показать «Большую» точку останова
  • 1200px, чтобы показать «Очень большую» точку останова

Помимо «Малой» точки останова, мы по умолчанию используем наименьший размер устройства в заданном диапазоне точек останова при отображении адаптивного поведения.

Видоизмененные макеты для каждой точки останова могут изменяться незначительно (т. е. Увеличение размера желоба) или более резко (т. е. Изменение количества столбцов, макета содержимого и используемых элементов пользовательского интерфейса).

Ниже приведен адаптивный интерфейс, использующий динамическое поведение. Каждый макет расширяется до достижения точки останова, после чего макет обновляется до следующего размера точки останова. Например, когда небольшой макет достигает 600 пикселей — он обновляется до среднего макета.

Проектирование с сетками в Figma

Figma является одним из самых мощных и гибких инструментов для проектирования с использованием макетов сеток, поскольку они используют вложенные рамки, стили, ограничения и настраиваемость.

Применение макета сетки для фрейма

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

Применения ограничений для адаптивных проектов

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

При использовании растягивающейся сетки ограничения будут относиться к их ближайшему столбцу, чтобы поддерживать фиксированное пространство (Разделитель) между элементами, что помогает при проектировании для устройств разных размеров.

Сохранение стилей сетки

Создайте и сохраните несколько пользовательских стилей сетки. Это поможет поддержать согласованный размер в связанных областях содержимого, типах компонентов и размерах разработки.

Настройки внешнего вида сетки

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

Заключение

Пространственные методы и макеты необходимы для каждого веб-дизайна. Они должны быть определены на ранних стадиях процесса проектирования и все участники команды должны их принять. Это обеспечит согласованность проектов, четкие требования к разработке и более быстрое выполнение задач.

Оригинал статьи.

Читайте также: Как анимация влияет на UX

Как анимация влияет на UX