17 января в 13:29

Введение в систему 8pt сеток перевод

Любому дизайнеру, над чем бы он ни работал — сайтами, журналами или мобильными приложениями, — наверняка приходилось слышать термин «сетка». Существуют сетки для всевозможных вариантов расположения контента. Мы применяем колоночные сетки, чтобы выстраивать контент по горизонтали, сетки базовых линий, чтобы выравнивать блоки текста по вертикали, гибкие (soft) и жесткие (hard) сетки — в зависимости от того, насколько строго собираемся их придерживаться. Я заинтересовался системой 8pt сеток, когда услышал, с каким увлечением говорит о ней Брин Джексон, и решил посмотреть, какие преимущества она может дать моим дизайнам (и может ли вообще).





А в чем проблема? Как-то же я справлялся до сих пор без системы 8pt сеток

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

Ниже представлено сравнение: на картинке слева компоненты формы построены по системе 8pt сеток, справа — по другой системе, в которой можно задавать произвольные числовые значения для размеров и расстояний.



Но почему в моем интерфейсе должно соблюдаться постоянство?

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

Чем плохи системы вроде Bootstrap?

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

В процессе выработки фирменного стиля для Pivotal нам часто приходилось создавать уникальные элементы и макеты. Недавно, работая над унификацией UI-системы, мы обнаружили, что логотип в верхнем углу отличается от продукта к продукту. Этими продуктами занимались разные команды, разбросанные по всему миру — в итоге общая концепция выдерживается везде, но исполнение немного отличается. Какой же из логотипов сделан неправильно?



Если честно, то никакой. У них у всех разная высота и разные отступы, но ведь системы, которая бы ясно объясняла, на каком основании вводится тот или иной стандарт, у нас нет, так с какой стати тогда придерживаться стандартов?

Ну и что ты тогда предлагаешь, умник?

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



Почему именно 8?

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

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



Ладно, с четными числами все понятно, но правда, почему 8, а не 6 или 10?

У большинства распространенных девайсов размер экрана в пикселях кратен восьми, а значит, подгонять интерфейс с этой системой будет проще. Шаг в восемь пикселей дает достаточное количество разных вариантов, не перегружая вас переменными, в отличие от системы 6pt, и не ограничивая, как 10pt. В конечном счете, вам нужно выбрать размер, который будет удобен для вашей аудитории. Хороша только та «система», которой легко следовать и которую легко воспроизводить.

В чем ценность системы 8pt?

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

Для команды: Удобная система для взаимодействия между дизайнерами и разработчикам (меньше возни из-за пикселей). Разработчику проще прикидывать на глаз отрезок в 8 пикселей, чем делать замеры каждый раз.

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

С чего начать?

Вот несколько статей о внедрении метода 8pt сеток для дизайнеров и разработчиков.

Пост Брина Джексона о системе 8pt сеток — самое развернутое руководство, в котором есть все: от определений терминов до инструкций по внедрению.

Пост Энтони Колурафичи о его опыте применения 8pt сеток при работе со Sketch будет полезен для ознакомления с системой.

Статья от Google «Material Design — Metrics & keylines» — еще один хороший ресурс с примерами и пояснениями.

Дизайн-система Harmony от Intuit предлагает информацию об адаптивных (responsive) сетках базовых линий и доходчивое объяснение, почему каждый пиксель имеет значение.

Вопросы

Мы, команда дизайнеров и разработчиков из Pivotal, еще не до конца изучили все возможности системы. В будущих постах я буду делиться новыми открытиями по ходу дела. А вы пользуетесь чем-то подобным? Если нет, то почему? Если да, чему вас научил этот опыт?
Автор: @EverydayTools Elliot Dahl
Everyday Tools
рейтинг 432,72

Комментарии (22)

  • –5
    У большинства распространенных девайсов размер экрана в пикселях кратен восьми

    Не так. Правильнее — является степенью двойки, 8 = 2^3. А значит можно делать сетку 4х-пиксельную со всеми теми же обоснованиями достоинств и недостатков.

    Нераскрыта тема — почему 8, а не 4 или 2?
    • +2
      У большинства распространенных девайсов размер экрана в пикселях кратен восьми
      Правильнее — является степенью двойки,
      Самое популярное разрешение экрана на сегодняшний день — 1920x1080. Что из этого по-вашему является степенью двойки?
      • 0
        Убедили. Ошибся.
      • –2

        А что из этого является степенью 8? Степенью 8 выраженной в натуральных числах эти величины уж точно не являются. 8 * 8=16, 8 * 8 * 8=512, 8 * 8 * 8 * 8=4096;
        Где вы тут увидели предложенные вами числа 1920 или 1080? Они всего лишь кратны 2 и 8, т.к. оканчиваются на ноль и являются четными натуральными числами. Так что, что 8, что 2 никакой разницы. С 8мью будет просто шаг больше и все.
        А то что первого комментатора минусуют, так то бараноэффект, людей немогущих в математику за 5й класс.

    • +3
      Если выбрать слишком маленькую базу (как сейчас — все кратно единице), то и эффект будет слабее. Появится возможность делать элементы, отличающиеся по размеру на два пикселя. В результате не получаем никаких плюсов.
      Не уверен, но как мне кажется, чем больше база, тем выше вероятность что у разных команд получатся одинаковые элементы.
    • 0
      Я тоже прочёл 8-битную, не переживайте)
  • +5
    Даёшь шрифты 8x8 и 8x16 и заходим на второй круг тридцатилетней давности :)
    • +2
      Так здорово же! Скевоморфизм уже задушили, плоскотня везде. Остался последний логичный шаг. Вытащим из пыльных чуланов всякие TurboVision… Эх, где мои N-цать лет…
  • +1

    А вы знаете, что на мобильных девайсах пиксели ненастоящие? И даже целое и кратное 2 число пикселей может быть смаштабированно в нецелое количество физических пикселей.
    Тут вам уже никакие кратности не помогут.
    96px = 2.54cm

  • +16
    • +2
      Аж в зобу дыханье спёрло от ностальгии. Пойду писать очередной калькулятор.
      • 0
        :))))
        Таже фигня, семерочка, родная…
  • 0
    https://www.kickstarter.com/projects/232193852/font-awesome-5/description

    font-awesome 5 — использует 16px иконки
  • 0
    Вопрос автору: а как пересчитывать размеры элементов между обычным монитором ПК плотностью пикселей 95-100ppi и экраном, например, Nexus 6P с плотностью пикселей 515ppi? Ну, вот будет у меня абстрактная кнопка «Кнопка» на десктопной версии иметь размер 16*64px и, если я хочу её отображать на мобильном устройстве адекватно, то размер 16*64 будет мелковат ведь, если его задавать жестко? Или использовать какие-нибудь трюки типа «Найти размер экрана и выставить множители»?
    • 0
      И часто у вас один «дизайн» для ПК и для мобильника? :)
      Мне показалось, статья не про это…
    • 0
      У производителей в документациях где-то есть формулы расчета даунсемплинга. Думаем, что Вы легко можете их найти при необходимости.
  • +1
    Сразу же вспомнилось Art Studio на Спектруме — там очень удобно было рисовать при увеличении в 8 раз, на разлинованом сеткой экране.
    И только-только сейчас собрались внедрять такую методологию в дизайне на ПЦ?
  • +1
    pt != px
    Некорректность изначального перевода заголовка и понятий меняет статью до неузнаваемости.
    Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
    Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.

    Если посмотреть на какой ресурс ссылаются ТС, то увидим
    WHAT ARE POINTS?
    A point (pt) is a measurement of space that is dependent on screen resolution. The simplest explanation is that at a «1x» resolution (or @1x), 1pt = 1px.
    At a «2x» resolution (@2x), 1pt = 4px because resolution doubles on both the X and Y axes making it 2px wide by 2px tall.
    At a «3x» resolution (@3x), 1pt = 9px (3px x 3px) and so on.

    Это крайне важное разъяснение авторы забыли упомянуть, почему-то.
    • 0
      Спасибо за замечание, подкорректировали.
      • 0
        ну, масштаб слабовидящие читатели могут менять специальными средствами девайсов — это не самая большая проблема. Гораздо большая жесть для слабовидящих — нынешняя мода делать слабоконтрастный текст.
    • 0
      Т.е. иными словами конкретно здесь 1pt это не 1 физический пиксель, а 1css пиксель?
      • –1
        https://spec.fm/specifics/8-pt-grid — вот тут подробно расписано по единицам и определениям.

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

Самое читаемое Дизайн