UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Жесткие и мягкие сетки в дизайне инттеррфейсов
Редакція
Редакція

Опубліковано • Оновлено

Жесткие и мягкие сетки в дизайне инттеррфейсов

Недавно я проводил экспертную оценку исследований компонентов дизайн-системы O’Reilly. Во время обзора я заметил, что некоторые вертикальные интервалы казались «выключенными». После дискуссии с дизайнером мы предположили, что, возможно, измеряем дизайн по-разному. Несмотря на то, что мы оба использовали одну и ту же базовую сетку 8px, наши результаты сильно отличались. Во время этой беседы мой коллега сказал: «Таким образом, мы, на самом деле, используем базовую сетку 4px, а не 8 px». Это заставило меня задуматься. Мы настроили наши шаблоны сетки на провал? Изменение базовой линии всего на 4px исправит проблемы, которые мы видели? Я не был в этом уверен, поэтому начал проводить исследования, чтобы выяснить это. В первую очередь, я обратился к статье, которую недавно добавил в закладки. Эта публикация от Spec дает исчерпывающий обзор системы сетки 8pt, которая выделяет важную и часто упускаемую из вида деталь проектирования с помощью базовой сетки: использование «жестких» или «мягких» сеток. На первый взгляд казалось, что выбор «жесткой» или «мягкой» сетки решит основную проблему, с которой мы столкнулись, и, что речь идет не о настройке параметров базовой сетки. Мне нужно проверить оба метода, чтобы увидеть, как они работают в реальном мире, и сравнить их с нашими текущими проектами. Для начала давайте посмотрим на аргументы в пользу каждого варианта:

«Жесткая сетка»

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

«Мягкая сетка»

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

«Не зацикливайтесь на слове «сетка», когда говорите о мягкой сетке. На самом деле речь идет о фиксированном приращении размера / интервала (в данном случае 8px) элементов относительно друг друга». ~Anthony Collurafici

Я взял на себя задачу проанализировать эти методы в надежде найти решение, которое приблизило бы команду дизайнеров O’Reilly к достижению нашей основной цели: найти последовательный метод измерения, как для проектирования, так и для разработки. Это означает, что в идеале предлагаемое решение:

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

Жесткий метод

Первым упражнением, которое я выполнил, было расположение образца компонента карточки с использованием жесткого метода с базовой сеткой 8pt и 4pt. [caption id="attachment_55712" align="aligncenter" width="1920"] Расположение компонента карточки с использованием метода жесткой сетки 8px и 4px[/caption]

Наблюдения

  • Верхняя левая иконка / текстовый элемент имеет высоту объекта 20px, потому что мы следуем рекомендациям Material Design, которые позволяют изменять размеры иконок с шагом 4px. Я решил выровнять только текстовую часть группы («video») с базовой линией, хотя ограничивающий прямоугольник находился вне сетки (см. увеличенный элемент во втором столбце).
  • Хотя базовая сетка 4px создавала больше визуального шума при проектировании, она позволила повысить гибкость визуального выравнивания текста без необходимости его смещения. Даже с предустановленной настройкой смещения вы можете потеряться в более сложных макетах, которые требуют сброса текста на базовую линию и повторного смещения. Я слегка зациклен на точности, поэтому мне нравилось видеть, как все элементы идеально вписываются в линии.
  • Вы все еще должны провести расчеты, чтобы убедиться, что все объекты, кроме иконок и текста, делятся на 8.

Далее я использовал несколько распространенных методов измерений для каждого макета. [caption id="attachment_55713" align="aligncenter" width="1920"] Тестирование нескольких распространенных методов измерений жесткой сетки 8px[/caption]

Наблюдения

  • Выделение строк вручную для установки высоты и расстояния между объектами обеспечивает точность, но может быть обременительным при масштабировании.
  • Измерения в Sketch (с использованием прямого выбора) и InVision Inspectработают так же хорошо, как настройки высоты текстового поля. Даже если высота текстовой строки составляет 20px, инспектор считывает высоту текстового контейнера при выборе объектов, для которых может быть установлено другое значение (например, 44px). Это заставит вас проверить настройки высоты строки и подтвердить расчеты на основе количества строк текста (например, высота строки 20px * 2 строки текста = высота ограничивающей рамки 40px).
  • Элементы, соответствующие базовой линии 4px, такие, как иконки размером 20px, отвергают измерения, производя такие значения, как 10px вместо 8px.
  • Измерения базовой линии не имеют смысла при использовании метода жесткой сетки.

Мягкий метод

Я, как правило, фанат мягких макетов сетки и считаю код источником правды. Я буду использовать в своих файлах интервальные элементы, чтобы помочь расположить базовую сетку, но обычно я просто измеряю элемент за элементом. Я использую сетку 8pt как относительную пространственную систему, а не строгую сетку. ~Elliot Dahl

Итак, как вы измеряете различные элементы, используя мягкую сетку? Elliot Dahl рассматривал этот вопрос в статье «Сетка 8pt: вертикальный ритм» Основной вывод из публикации Эллиота – необходимость выбирать между измерениями от базовой линии или от высоты линии. Используя тот же пример дизайна, я воссоздал макеты, следуя мягкому методу с базовой сеткой 8pt и 4pt. [caption id="attachment_55714" align="aligncenter" width="1920"] Компоновка карточного компонента с помощью метода мягкой сетки 8px и 4px[/caption]

Типографика может быть размещена вне сетки 4dp, если она центрирована внутри такого компонента, как кнопка или элемент списка. ~Google Material Design

Наблюдения

  • Я отключил наложение сетки при размещении иконок и текста внутри компонента и просто полагался на прямой выбор элементов и пространства между ними для получения окончательного результата.
  • В этом конкретном случае базовая сетка 4px не добавляла дополнительного значения, поскольку все мои иконки / текст находились внутри компонента. Я думал, что компоненты карточки могут рассматриваться, как особый случай и более строго придерживаться базовой линии, но я не смог найти ничего конкретного по этому вопросу. «Карточки не имеют единого макета, типографического размера или размера изображения. Все карточки должны быть спроектированы с учетом потребностей контента». ~ Google Material Design
  • Те же меры предосторожности в отношении высоты ограничивающего прямоугольника и высоты линий по-прежнему применяются (см. предыдущие наблюдения).

Я применил к «мягким» макетам те же методы измерения, которые я ранее использовал для жесткого макета 8px. [caption id="attachment_55715" align="aligncenter" width="1920"] Тестирование нескольких распространенных методов измерения мягкого макета 8px[/caption]

Наблюдения

  • Попытка вручную перерисовать спецификации при использовании мягких приращений с шагом в 4px, создала нечетный интервал при использовании настроек наложения базовой сетки 8px.
  • Sketch и InVision Inspect выдают чистые, подходящие спецификации. Ура!
  • Измерения базовой линии здесь не имеют смысла, потому что иконка и текстовые элементы не измерялись от базовой линии в Sketch (Ctrl + Opt).

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

Вывод

  • Я не уверен, стоит ли начинать использовать базовую сетку 4px для макетов в Sketch. Она не принесла особой пользы в этом упражнении с компонентом, но она может быть полезной при настройке шрифта или сложных наборов данных на странице.
  • Очень важно, чтобы высота вашего текстового объекта (ограничивающего прямоугольника) соответствовала расчетам высоты текстовой строки, чтобы обеспечить правильный результат.
  • Полагайтесь на базовую сетку 8px для размещения изображений и контейнеров.
  • Полагайтесь на высоту объекта / строки и игнорируйте наложение базовой сетки 8px при размещении иконок / текста в компоненте. Тогда при проверке результаты измерений будут более ровными.
  • Предоставление измерений по базовой линии в Sketch приводит к десятичным значениям и потребует намного больше работы от всей команды.
  • Я склоняюсь к продвижению метода мягкой сетки 8 / 4px, на основании результатов этого теста, но я хочу сделать дополнительные сравнения с методом жесткой сетки 8 / 4px. Особенно в отношении предпочтений разработчиков и реализации.

Имейте в виду, что при выборе между жесткими и мягкими сетками необходимо учитывать больше факторов:

  • Какие настройки базовой сетки вы используете (например, 4, 8 и т. д.)?
  • Работает ли ваша команда дизайнеров с установленной дизайн-системой или руководством по стилю с заранее определенными стилями шрифтов, высота линий которых соответствует единицам базовой сетки (например, 16/24px)?
  • Все ли дизайнеры в вашей команде используют один и тот же инструмент (например, Sketch, Studio, XD и т. д.)?
  • Все ли в вашей команде используют один и тот же метод / инструмент для ссылки на измерения в проектах? (Source file, InVision Inspect, Sketch Measure и т. д.)
  • Как ваши фронт-энд команды переводят измерения в CSS?

Далее будет часть 2

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


Перевод статьи uxplanet.org

Топ коментарі (0)