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

Cover image for Прощай, сетка 8-pt, привет, сетка 4-pt?
Редакція
Редакція

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

Прощай, сетка 8-pt, привет, сетка 4-pt?

Используйте числа, кратные 4, для большей гибкости пользовательского интерфейса.

С развитием технологий многие графические дизайнеры переходят или уже перешли на UX / UI дизайн. Я изучал режиссуру, поэтому более чем знаком с базовыми сетками в графическом дизайне. Когда я начал заниматься UI дизайном около шести лет назад, я не следовал никаким конкретным рекомендациям. Я в основном смотрел какой интервал использовали другие приложения и сайты, но вскоре обнаружил, что все делали это по-своему. Я видел самые разные числа. Поля / внутренние отступы 12px, 13px, 15px, 20px… Тогда это не казалось очень важным.

Несколько лет назад я прочитал на Spec.fm статью о сетке 8-pt и двух методах, «мягкой сетке» и «жесткой сетке», написанную Bryn Jackson. Для меня, как человека, очень внимательного к деталям, это был рай на земле. Я начал применять сетку 8-pt во всех своих проектах, и меня раздражало, если другие не следовали этому методу. Но вскоре я обнаружил, что в некоторых случаях она ограничивает меня, особенно в корпоративном программном обеспечении или в интерфейсах с большим количеством текста, текстовых полей, гиперссылок, таблиц и кнопок. Я начал менять ее на сетку 4-pt, ничего особо не исследуя. Но, к счастью, оказалось, что я не единственный, кто использовал эту сетку:

Хорошо, но что такое сетка 8-pt?

Ее основной принцип заключается в том, что все значения кратны 8 (8, 16, 24, 32, 40, 48…, 80…, 96…). Это расстояние между всеми вашими элементами. Например, ваше поле ввода имеет высоту 48 px, а расстояние до другого поля ввода будет 16px.

Пример системы сетки 8-pt для экрана входа

Хорошо, но почему именно 4 точки, а не 8?

  • Это значение дает вам больше детализации, то есть больше вариантов. Вместо того, чтобы выбирать между 8 или 16, вы можете выбрать 12. Подумайте о размерах иконок, расстоянии между элементами, горизонтальном расстоянии между текстом и иконкой…

  • Лучшая типографика. Раньше я выравнивал свой текст по базовой сетке 8-pt и всегда сталкивался с проблемой, когда текст в нескольких строках был слишком плотным или слишком большим. Теперь я выравниваю свой текст по базовой сетке 4-pt с высотой строки, кратной 4. Я настоятельно рекомендую для этого хороший инструмент, сделанный Fran Pérez. Я постараюсь проиллюстрировать это несколькими примерами:

Пример размера шрифта 14px с высотой строки 16px

Пример размера шрифта 14px с высотой строки 20px

Пример размера шрифта 14px с высотой строки 24px

Думаю, что в этом случае идеально подходит высота строки 20px. Пример с высотой строки 16px слишком узок, а пример с высотой строки 24px на мой вкус слишком велик. Без сетки из 4 точек вам придется выбирать между первым и последним примером. Ниже вы найдете интервал, который я использовал для 2-го примера:

Пример размера шрифта 14px с высотой строки 20px

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

Я могу нарушить сетку?

В приведенном ниже примере показаны некоторые числа, не кратные 4. Текст 14px с высотой строки 20px внутри строки таблицы приводит к интервалу в 10px сверху и снизу текста. Мы могли бы сделать высоту нашей строки таблицы 44px, как во втором примере, но тогда у нас будет та же «проблема» со значком галочки, которая приводит к интервалу в 14px сверху и 14px снизу. В обоих примерах совершенно нормально нарушить сетку.

Пример строки таблицы с размером шрифта 14px и высотой строки 20px

Пример размера шрифта 18px с высотой строки 24px

«Текст можно разместить за пределами сетки 4dp, если он центрирован внутри компонента, такого как кнопка или элемент списка. При размещении за пределами сетки, но по центру внутри компонента текст все равно может отображаться вертикально с выравниванием по центру»

Google Material Design

Вывод

Ограничения – это нормально, а иногда и необходимо, но разве мы, дизайнеры, не хотим меньше ограничений? 4-точечная сетка даст вам гораздо больше гибкости при проектировании интерфейса. Вы удивитесь, сколько раз вы будете использовать 12px вместо 8px или 16px в качестве значения интервала.


Перевод статьи bootcamp.uxdesign.cc

Найновіші коментарі (0)