Я пользуюсь базовой сеткой 4px уже более 2-х лет и пытаюсь заставить мою команду начать использовать ее. Я наконец-то преодолел прокрастинацию и решил рассказать об этом в своей первой статье. Жду ваши отзывы об этом методе, поэтому, пожалуйста, поделитесь своими мыслями!
Сетка на основе 8pt: обводка и разметка
Проблема
Меня сводит с ума, что ограничивающая текст рамка почти всегда добавляет дополнительное пространство над и под фактическим текстом. Поэтому, когда ограничивающая рамка используется для измерения пространства, оно оказывается больше, чем вы предполагали. Чем больше высота строки, тем больше проблема. В приведенном ниже примере дизайн был создан путем измерения отступа между ограничивающими рамками. Когда все интервалы установлены на 32px (на 1-й карточке), визуально вертикальные интервалы на самом деле намного больше, чем 32px (как показано на 2-й карточке), даже если вы подразумеваете, что они равны, устанавливая их все на 32px.
Фото Max Delsid с Unsplash
Решение
Из-за этой проблемы я использую базовую сетку 4px для достижения лучшей визуальной точности. Вот мой процесс:
- Я устанавливаю сетку 4px в фоновом режиме
- Я привязываю все элементы интерфейса и базовые линии шрифта к базовой сетке
- Я использую сетку для измерения вертикального пространства вокруг текста вместо того, чтобы использовать ограничивающую текст рамку. В частности, я измеряю пространство над текстом от линии сетки, которая ближе всего к высоте прописных букв шрифта, и пространство под текстом от базовой линии шрифта
- Кроме того, я определил набор значений интервалов для нашей команды, вдохновленный этой статьей на Medium: Интервалы в дизайн-системахот Nathan Curtis
Чтобы все базовые линии располагались на сетке, этот подход, по существу, округляет визуальную высоту текста (высота прописной буквы до базовой линии), кратную 4px (показано на рисунке ниже). Это может привести к ошибке в 1–2 пикселя; однако это все же точнее, чем использование ограничивающей рамки для определения интервалов.
Измерьте пространство над текстом от ближайшей сетки до высоты прописной буквы
Есть исключение: я вертикально центрирую иконки или текст в компоненте или контейнере независимо от того, находятся ли они на базовой сетке или нет, потому что большую часть времени разработчики могут использовать flexbox для центрирования элемента, и для обеих сторон это проще, чем использование статического расположения интервалов для центрирования ?.
Текст в каждой строке таблицы центрируется с помощью команды «Align layer to middle» в Sketch, и это нормально, что базовая линия не привязывается к сетке
Зачем
Базовая сетка традиционно использовалась в полиграфическом дизайне для создания вертикального ритма. В моей повседневной работе по разработке веб-приложений я редко сталкивался со случаями, когда такой ритм, очевидно, необходим для улучшения согласованности.
Для меня использование базовой сетки 4px – это баланс между визуальной точностью (для пользователей) и эффективностью дизайна (для меня). В разделе «Проблема» я говорил о том, как измерение от ограничивающей рамки текста приведет к появлению дополнительного пространства. В конце концов, пользователь не может видеть ограничивающую рамку. Поэтому не имеет смысла использовать этот подход, особенно если он создает визуальный дисбаланс и не приносит пользы пользователям. С другой стороны, игнорирование ограничивающей рамки и измерение с использованием базовой сетки позволяет достичь лучшей визуальной точности. Ниже приведено сравнение этих двух подходов. Как мы видим, когда используется один и тот же набор значений интервалов (32px, 12px, 32px, 32px), дизайн, измеренный с использованием базовой сетки, отражает предполагаемый интервал гораздо точнее.
Можно сказать, что, если измерение от ограничительной рамки дает слишком много места, то, например, на первой карточке уменьшение первого значения интервала с 32px до 28px или 24px сделает верхний и левый отступы слова «Seattle» похожими. Но вы никогда не узнаете наверняка, если не посчитаете пиксели. С другой стороны, метод сетки 4px обеспечивает более точный и предсказуемый способ узнать, что это ~ 32px (с учетом ошибки 1–2px, возникающей при округлении).
С точки зрения эффективности проектирования — это может показаться более трудоемким, но благодаря сетке инструмент дизайна (Sketch или Figma) может помочь привязать элементы и ввести базовую линию в сетку, поэтому выравнивание и установка интервалов становятся относительно простой задачей. Ниже мой рабочий процесс с использованием базовой сетки для размещения текста.
Мой рабочий процесс с использованием базовой сетки для размещения текста
В качестве альтернативы, вы можете не использовать сетку и вручную произвести измерения от высоты прописной буквы (как показано на рисунке ниже), но для этого потребуется изменить масштаб пиксельной сетки. Кроме того, размер контейнера, в котором хранится ваш текст, может не быть кратным 4px.
Выше альтернативный рабочий процесс, который измеряет интервал непосредственно от высоты прописной буквы
Передача проекта разработчикам
Значения интервалов, полученные с помощью подхода базовой сетки, будут казаться случайными, когда разработчики проверят дизайн в инструментах проектирования (InVision / Zeplin / Figma). Дизайн ниже был создан с использованием базовой сетки. Цифры показывают, что вы увидите во время такой проверки.
Выше я упомянул статью Интервалы в дизайн-системах. В ней рассказывается о том, как значения интервалов могут быть представлены с помощью классов CSS, что помогает обеспечить согласованность как для дизайнеров, так и для разработчиков. К сожалению, при использовании подхода базовой сетки практически невозможно представить значения интервалов в виде набора классов CSS из-за рандомности, которая сопровождается различными комбинациями шрифтов.
Мы также рассмотрели популярную технику, предложенную многими для смягчения проблемы рандомности, которая заключается в использовании псевдоэлементов CSS ::before и ::after для «обрезки» ограничивающей рамки (которые, по сути, применяют интервал коррекции к линейному блоку). Тем не менее, мой друг Chris Caruso сказал мне:
Использование псевдоэлементов CSS ::before и ::after не является идеальным, поскольку оно несовместимо с различными шрифтами, браузерами, операционными системами и даже разрешениями экрана. Ориентация на одну комбинацию может привести к проблемам с интервалами в других. С точки зрения разработчика, этот метод не следует передовым практикам кодинга, поскольку он использует отрицательные поля и применяет к DOM посторонние элементы, что может привести к непреднамеренным побочным эффектам. Поэтому в производственных приложениях этот метод не стоит применять.?
Что насчет локализации?
Однажды я провел исследование по локализации и рассмотрел 8 алфавитов и вариантов письменности (латинский, китайский, кириллица, деванагари, греческий, хангыль, кана и тайский), которые поддерживает наш продукт. Затем я понял, что независимо от того, какой метод измерения вы используете, в конце концов, это интервал ограничивающей рамки, который разработчик берет из инструмента дизайна и вставляет в CSS. В зависимости от шрифта, который вы используете для других языков, даже если интерлиньяж одинаков, визуальная высота шрифта может быть больше или меньше, чем у латинских букв. Их базовые линии также могут измениться. Поэтому, независимо от того, какой метод измерения вы используете, локализация всегда немного изменит интервал. Однако, как показано в приведенном ниже примере, текст на всех языках оставался относительно центрированным в пустом пространстве, несмотря на эти незначительные изменения.
(Я до сих пор мало знаю о нелатинских алфавитах, но хочу узнать больше. Пожалуйста, дайте мне знать, если какое-либо из приведенных выше соображений ошибочно или может быть улучшено. Я знаю только английский и китайский языки. Большое спасибо, моим коллегам, которые помогли перевести эту строку на другие языки!)
Дизайн, созданный на английском языке и локализованный на 7 языков. Фото Joshua Sortino с Unsplash
Вопросы?
Пожалуйста, пишите свои замечания, вопросы, отзывы или лучшее решение! Я давно занимаюсь исследованиями по этой теме, поэтому мне интересно услышать ваши мысли! Пожалуйста, не стесняйтесь обращаться ко мне напрямую через электронную почту (ethanw@microsoft.com), если вы хотите пообщаться!
Перевод статьи Ethan Wang
Топ коментарі (0)