Построение системы проектирования — с чего начать? (Часть 3 — Размер и расстояние)

Интервалы часто упускаются из виду, но являются одним из главных факторов, влияющих на создание отличительного бренда. Многие популярные фреймворки, такие как Bootstrap и Foundation, игнорируют идею сплошной базовой сетки. Будьте осторожны, выбирая такие полки, как эти. Отсутствие единой единицы измерения может привести к несогласованности макета страниц, особенно в проектах с двумя или более дизайнерами. «Система» хороша только в том случае, если за ней легко следить и повторять.

Система точечных координат 8

Существует множество способов определения единиц измерения, я рекомендую использовать кратные восемь. Почему восемь вы спрашиваете? Скважина восемь делится на 2 и 4. Это становится важным при рассмотрении дисплеев, которые умножают размеры в пикселях из-за более высокого разрешения. Например, разрешение 1,5 умножит 5px на это число, что приведет к смещению на половину пикселя. В результате получается размытый край, вызванный сглаживанием этого полупикселя. Половина пикселей не встречается в сетке 8pt.

Точка (pt) — это измерение пространства, которое зависит от разрешения экрана. Самое простое объяснение состоит в том, что при разрешении «1x» (или @ 1x) 1pt = 1px.
При разрешении «2x» (@ 2x) 1pt = 4px, поскольку разрешение удваивается по осям X и Y, что делает его 2 пикселя в ширину и 2 пикселя в высоту (2 пикселя x 2 пикселя).
При разрешении «3x» (@ 3x), 1pt = 9 пикселей (3px x 3px) и т. Д.
(
https: / /blog.prototypr.io/design-system-ac88c6740f53) ~ Marco Lopes

Использование базы 8 также соответствует базовому размеру шрифта браузеров по умолчанию, равному 16px (8×2). Некоторые из самых популярных размеров экрана также делятся на 8 по меньшей мере на одну ось, что облегчает подгонку.

Масштабирование с шагом 8 предлагает большое количество вариантов, не перегружая вас переменными, такими как 6-балльная система, или не ограничивая вас, как 10-балльная система. В конечном итоге вы должны решить, какой размер подходит вашей аудитории. ~ Эллиот Даль

Шкала

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

Если вам подходит система координат из 8 точек, определите модульную шкалу, выберите размеры, кратные 8 или 4, и используйте это для информирования ваших элементов интервалов (округление размеров до ближайшего кратного 8). Это позволяет избежать ловушек строгой шкалы, когда вы получите сумасшедшие числа, например 2.618, каждый браузер попытается округлить это по-своему, что приведет к меньшей предсказуемости.

Значимые размеры

Эллиот В своих работах Даль упоминает три общих архетипа системы типографики, которые также могут применяться к пробелам.

1. Маркетинг — Создан для того, чтобы рассказывать определенную историю и вдохновлять посетителей тратить свое время и / или деньги на сайте. Пробелы охватываются, часто более драматично, с использованием большего масштабного отношения, что приводит к более драматическим промежуткам между промежуточными элементами.
2. Редакция — Для передачи большого количества информации. Интервалы обычно менее драматичны в этом случае с более узким интервалом по сравнению с маркетинговым архетипом.
3. Данные — Созданы для решения пользовательских проблем, таких как подача налогов, управление git-репо или визуализация показателей производительности , Интервалы здесь могут быть намного более жесткими из-за большого количества данных, которые необходимо представить, соотношение между интервалами часто намного меньше, чем два других архетипа, упомянутых выше.

EM и REMs против пикселей

Можно было бы использовать как EM, REM или Pixels. Самое замечательное в пикселях — они жесткие и точные, а плохие — жесткие и точные. Таким образом, 1px всегда будет отображаться как 1px. Если вы хотите быть жесткими и менее гибкими, вам стоит рассмотреть пиксели.

Самое замечательное в EM и REM — это то, что они абстрактны и основаны на размере шрифта. Недостаток EM и REM в том, что они абстрактны и основаны на размере шрифта. Таким образом, 1em или 1rem могут переводиться в 16px или 160px, в зависимости от размера шрифта. Это, однако, не означает, что EM и REM не могут быть жесткими и такими же точными, как пиксели.

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

Так в чем же реальный недостаток?
Использование EM и REMS чертовски запутанно, и все программные средства разработки используют пиксели в качестве своей единицы измерения. Это делает его очень трудным для использования как дизайнерами, так и разработчиками.

Что такое EM?
При использовании единиц em, значение пикселя, которое вы в итоге получите, является умножением Размер шрифта стиля элемента.

Например, если div имеет размер шрифта 18px, 10em будет равняться 180px, то есть 10 x 18 = 180.

Что такое REM?
При использовании единиц REM размер пикселя, в который они переводятся, зависит от размера шрифта корневого элемента страницы, то есть элемента HTML. Этот размер корневого шрифта умножается на любое число, которое вы используете с вашим модулем REM.

Например, если размер шрифта корневого элемента равен 16px, 10rem будет равняться 160px, то есть 10 x 16 = 160.

Для более глубокого погружения в REM и EM, у Evanto Tuts + есть отличная статья, озаглавленная: «Полное руководство: когда использовать Em против Rem»

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

Борьба с REM и путаницей в пикселях

С этой путаницей можно заранее бороться с несколько вычислений, сфокусированных на REM и абстрагирующих их в токены.

Шаг 1. Математика заранее

Установите базовый размер шрифта заранее, а затем выполните математические расчеты, выстраивая отношение px к REM в строке с вашей шкалой.
Пример: Если установить базовый шрифт на
16px 1rem равняется 16px .
Поэтому:
1rem = 16 пикселей
[1245ре] 20px

Если установить базовый шрифт на 8px 1rem равняется 8px .
Поэтому:
2rem = 16px

= 20px

Шаг 2. Наименование ваших размеров

Абстрагирование ваших значений в именованные токены помогает устранить путаницу. Он предоставляет общий язык, который могут использовать как дизайнеры, так и разработчики. Дизайнеры все еще могут проектировать, используя пиксели, а разработчики могут кодировать в REM, в то время как целостность системы остается неизменной.

В этом случае существует два общих соглашения об именах токенов: