article section code og 4 1160x620 - Организация пространства в дизайне. Отступы, сетки и лейауты

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

Что такое пространственная система?

Дизайнеры принимают пространственные решения каждый день от определения высоты кнопки до пространства вокруг иконки. Пространственная система – это набор правил для измерения размера и пространства элементов интерфейса. Единообразие на пространственном уровне позволяет вашему продукту быть более последовательным, улучшает общение вашей команды и сокращает количество решений, которые дизайнеры должны принимать в течении дня. Одним из примеров пространственной системы является «сетка 8pt». Однако есть много вариантов и конфигураций на выбор.

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

Организация пространства в дизайне. Отступы, сетки и лейауты

Когда эта же форма входа настраивается в соответствии с пространственной системой 8pt, ритм становится предсказуемым и визуально приятным. Для пользователей опыт отточен и предсказуем. Это увеличивает доверие и привязанность к бренду.

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

Как заложить основу пространственной системы?

Определение базового блока позволит вам создать шкалу размеров, поддерживаемых вашей пространственной системой. Просматривая различные продукты в Интернете, вы увидите несколько разных подходов. Вы встретите системы 4pt, 5pt, 6pt, 8pt, 10pt. Нет универсальной системы, но важно знать плюсы и минусы каждого варианта.

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

Организация пространства в дизайне. Отступы, сетки и лейауты

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

Потребности пользователей

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

Количество переменных

Выбор меньшего базового блока, такого как 4pt, 5pt или 6pt, может добавить слишком много переменных в вашу систему. Довольно трудно заметить разницу отступа между 12pt и 16pt, что может затруднить согласованность в работе вашей команды. Я считаю, что шаг в 8pt обеспечивает правильный баланс визуального отдаления при наличии разумного количества переменных. Я также использую полушаг 4pt для отступов иконок или настройки небольших блоков текста.

Нечетные числа

Введение в пространственные правила нечетных чисел, таких как шаг в 5pt, может затруднить центрирование элементов без разделения пикселей. Например, центрирование текста и иконок в кнопке высотой 25px может создать размытые пиксели для некоторых пользователей. Аналогичным образом, масштабирование интерфейса под разные мобильные и десктопные экраны, для которых требуется 1,5-кратный масштаб, приведет к размытости с разделением пикселей.

Как применить пространственную систему?

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

Организация пространства в дизайне. Отступы, сетки и лейауты

В этом примере вы можете видеть, что высота строки текста составляет 20px, но, если я использовал отступы 8px сверху и снизу, высота кнопки будет 36px. Какому измерению я должен отдавать приоритет? Есть два способа решения этой проблемы:

Сначала элемент (строгое определение размера элемента)

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

Организация пространства в дизайне. Отступы, сетки и лейауты

Сначала контент (строгие внутренние отступы)

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

Организация пространства в дизайне. Отступы, сетки и лейауты

Размещение границы внутри или снаружи

Элементы с контуром, такие как кнопки или карточки, могут нарушать порядок. Как считать эти 2px границы? Они считаются в коде не так, как в Figma. На что ориентироваться?

Организация пространства в дизайне. Отступы, сетки и лейауты

Figma измеряет элемент, а не его границу. В Интернете это обрабатывается двумя различными способами. Свойство box-sizing может быть border-box или content-box. Чтобы увидеть это в действии, ознакомьтесь с этим кодом и прочитайте эту статью, чтобы узнать больше. Если вкратце, то большая часть современной сети работает со свойством border-box.

Организация пространства в дизайне. Отступы, сетки и лейауты

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

Что такое сетка?

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

Column grid

Column grid помогает организовать контент в равномерно расположенные вертикальные столбцы. Пространство между столбцами называется желобом (gutter). Применение правил пространственной системы к желобам поможет придать вашему проекту согласованный ритм. Типичным примером является сетка из 12 столбцов, поскольку она позволяет разделить выбранную область на половину, трети, четверти, шестые части.

Организация пространства в дизайне. Отступы, сетки и лейауты

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

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

Организация пространства в дизайне. Отступы, сетки и лейауты

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

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

Организация пространства в дизайне. Отступы, сетки и лейауты

Составление макета

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

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

Адаптивный макет

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

Организация пространства в дизайне. Отступы, сетки и лейауты

Отзывчивый макет

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

Организация пространства в дизайне. Отступы, сетки и лейауты

Фиксированный макет

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

Организация пространства в дизайне. Отступы, сетки и лейауты

Как реализовать пространственную систему в существующем наборе дизайнов?

Начинать с нуля легко. Сложность заключается в модернизации существующих дизайнов. Первый шаг – привлечь других членов команды к разговору. Убедить их и заинтересованные стороны изменить текущий процесс разработки продукта, не раскрывая ценность их роли, может быть сложно. Разработчики хотят более четких требований и проводить меньше времени с суетливым дизайнером. Продакт-менеджеры хотят, чтобы пользовательская ценность и бизнес-ценность достигались быстрее. Дизайнеры хотят, чтобы их проекты быстро и эффективно переводились в согласованный пользовательский опыт. Все эти вещи могут быть достигнуты путем инвестирования в общую пространственную систему.

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

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

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

Оригинал: Elliot Dahl

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

История о том, как Dropbox перешел на Figma и структурировал свою дизайн-систему

Опыт перехода дизайн команды Dropbox на Figma

Развитие дизайн-системы: Как мы создавали Slack Kit

Это развивалась постепенно, на основе полученного нами опыта. В этой статье я расскажу вам, как мы ее создавали