Все регионы
Искать объявления по всей стране
  • В
  • Восточно-Казахстанская область
  • Ж
  • Жамбылская область
  • З
  • Западно-Казахстанская область
  • К
  • Карагандинская область
  • Костанайская область
  • Кызылординская область
  • М
  • Мангистауская область
  • П
  • Павлодарская область
  • С
  • Северо-Казахстанская область
  • К
  • Караганда
  • П
  • Павлодар
14.01.2020 в 15:50

Жесткие и мягкие сетки. Часть 1

Недавно я проводил экспертную оценку исследований компонентов дизайн-системы O’Reilly. Во время обзора я заметил, что некоторые вертикальные интервалы казались «выключенными». После дискуссии с дизайнером мы предположили, что, возможно, измеряем дизайн по-разному.

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

Во время этой беседы мой коллега сказал: «Таким образом, мы, на самом деле, используем базовую сетку 4px, а не 8 px». Это заставило меня задуматься. Мы настроили наши шаблоны сетки на провал? Изменение базовой линии всего на 4px исправит проблемы, которые мы видели? Я не был в этом уверен, поэтому начал проводить исследования, чтобы выяснить это.

В первую очередь, я обратился к статье, которую недавно добавил в закладки. Эта публикация от Spec дает исчерпывающий обзор системы сетки 8pt, которая выделяет важную и часто упускаемую из вида деталь проектирования с помощью базовой сетки: использование «жестких» или «мягких» сеток. На первый взгляд казалось, что выбор «жесткой» или «мягкой» сетки решит основную проблему, с которой мы столкнулись, и, что речь идет не о настройке параметров базовой сетки. Мне нужно проверить оба метода, чтобы увидеть, как они работают в реальном мире, и сравнить их с нашими текущими проектами.

Для начала давайте посмотрим на аргументы в пользу каждого варианта:

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

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

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

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

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

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

Это означает, что в идеале предлагаемое решение:

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

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

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

Наблюдения

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