Почему Manifold использует сетку 8pt

Предупреждение! Модный дизайн ниже! Возвращайся, если тебе все равно!

TL; DR: продукты Manifold теперь будут использовать сетку размером 8 пунктов, потому что она проста, единообразна и содержит ограничения. Это относится как к визуальным макетам, так и к интерфейсной реализации.

На протяжении большей части срока службы продукта Manifold в нашей дизайн-системе отсутствовала сетка. Мы используем взгляд нашего дизайнера, чтобы перемещать элементы. Хотя мы можем создавать визуально привлекательные вещи, это в конечном итоге непоследовательно, особенно при интеграции во внешний интерфейс продукта. Представляем сетку, которая выгодна как дизайнерам, так и интерфейсным инженерам: сетка 8pt.

Сделаем шаг назад.

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

Нет глупых вопросов. Есть много разных типов сеток. Сетки столбцов выравнивают содержимое по горизонтали (а-ля Bootstrap или Material Design), базовые сетки для набора текста, модульные сетки для макета печати и многое другое. Здесь мы сосредоточимся на сетке системы макета: сетке, использующей заданное приращение пикселей для присвоения размерных значений элементам.

Наша сетка 8pt - это пиксельная структура для создания согласованного пользовательского интерфейса.

Так почему 8pt?

Наши цели при выборе системы

Важное замечание: эта система предназначена для продуктовой линейки Manifold (например, приборной панели), а не для маркетинговых веб-материалов (например, manifestold.co).

Итак, есть много систем сетки, из которых можно выбирать ... Что мы хотим от нашей?

  1. 📐 Он должен обеспечивать согласованность между компонентами, продуктами, разрешением и размером экрана.

2. 🛠️ Это должно быть просто реализовать в CSS.

3. 🖥️ Это должно упростить принятие решений по дизайну экрана.

4. 😎 Он должен хорошо выглядеть.

Сетка 8pt как решение

Теперь о хорошем. Сетка 8pt - это именно то, что нам нужно! Он проверяет все наши поля на наличие системной сетки макета!

Вот как Брин Джексон определяет сетку 8pt:

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

Последовательность

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

Поскольку это четное число, кратное 8 легко вписывается в наш рабочий процесс. Мы разрабатываем все наши макеты в формате 1x и экспортируем любые активы с правильным целым числом, кратным для размеров экрана с более высоким разрешением: @ 2x, @ 3x, @ 4x и т. Д. Использование четного числа позволяет избежать размытых активов и половин пикселей.

Реализация в CSS

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

Упростите визуальные дизайнерские решения

Немного эзотерическая цель, но, тем не менее, важная. Как дизайнеры, мы оставляем некоторые вещи (например, интервалы, размеры и т. Д.) На усмотрение «дизайнерского взгляда». Это приводит к непоследовательности, поскольку у всех нас разные глаза. Использование сетки 8pt позволяет нам равномерно распределять пространство и размер и предоставлять пример для каждого нового дизайнера.

Снова через Брин Джекон:

Удаляя 7 из каждых 8 вариантов интервалов, вы уменьшаете объем доступной вам возни и, следовательно, уменьшаете скорость кода.

Это отражает наш бренд! Это выглядит хорошо!

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

Применение сетки 8pt в действии

Реализация для дизайна прототипа

Наша основная система и библиотека макетов Dashboard.sketch теперь преобразована в сетку 8pt. Это будет основной файл эскиза в дальнейшем. Следите за обновлениями, чтобы увидеть еще один пост, в котором будет подробно описано, как использовать библиотеку эскизов, потоки прототипов invision и нашу новую библиотеку системы дизайна.

Вот сетка в действии:

Настройки эскиза

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

  • Установите StickyGrid (если вы еще этого не сделали, используйте SketchRunner для установки плагинов)
  • Установите настройки малого и большого смещения на 1 и 8 соответственно. "Нравится".
  • Установите настройки макета на нашу новую базовую сетку 4pt. "Нравится".
  • Установите настройки сетки на 8 пикселей. "Нравится".

Реализация для front-end

Поскольку наша база font-size составляет 16 пикселей и делится на 8, это делает наши переменные макета легко заменяемыми на rems. Пример: чтобы поместить что-либо на 8px, вы должны использовать .5rem. Чтобы сделать интервал на 32px, используйте 2rem. Это легко перевести из макетов, поскольку у вас есть доступ к визуальной сетке 8pt.

дальнейшее чтение