Система размеров и отступов для более быстрого UI-дизайна
Проектируй с математической последовательностью
При проектировании любого интерфейса один из первых вопросов — какими должны быть размеры и отступы элементов. Это непросто: произвольных значений слишком много, и однозначно правильного ответа не существует. Бесконечный перебор пиксельных значений в поисках идеального размера и отступа значительно замедлит работу и приведёт к непоследовательным дизайнам.
Например, при проектировании карточки — каких размеров должен быть контейнер? Какими должны быть ширина и высота кнопок? И какими должны быть отступы между всеми элементами внутри карточки?
Проектирование без чётких ограничений ведёт к усталости от принятия решений и потере времени на мелочи. Контейнеры карточек и кнопки с разными пиксельными значениями и отступами могут выглядеть почти одинаково — и тогда очень сложно выбрать, какой вариант предпочесть. Как принять решение, когда доступно так много произвольных значений и вариаций?
Ответ — создать собственную систему размеров и отступов.
Построение системы
Не мучайся с произвольными значениями при задании размеров или отступов элементов. Вместо этого ограничь себя заранее определённым набором вариантов — это сократит время на принятие решений и обеспечит последовательность всех элементов и компонентов.
Начни с разумного базового значения, а затем построй шкалу, используя делители и кратные этого значения. Хорошее базовое значение — 12px, потому что это составное число с большим количеством делителей, чем у любого меньшего числа (1, 2, 3, 4, 6, 12). Именно поэтому оно лежит в основе многих систем — времени (12 часов в сутках, 12 месяцев в году) и измерений (12 дюймов в футе, дюжина).
Однако простого использования кратных 6 и 12 недостаточно — вариантов по-прежнему будет слишком много. Чтобы система работала эффективно, необходимо учитывать относительную разницу между соседними значениями.
Например, относительная разница между аватарами 48px и 60px составляет 25%. А относительная разница между шириной карточки 480px и 504px — всего 5%. Это значит, что разница в 5% в пять раз менее значима, чем увеличение с 48px до 60px.
Иными словами, значения в нижней части шкалы должны быть расположены плотнее — там относительная разница высокая. Значения в верхней части шкалы, напротив, должны быть расставлены шире — там относительная разница низкая. Ключевой вопрос — насколько близко или далеко должны находиться соседние значения.
Шкала
Вся шкала обладает гармонией и ритмом, которые можно воспринять только математически. В нижней части шкалы множитель увеличивается на 0,5 — от 6px до 36px. Далее множитель растёт на 1 — вплоть до 120px.
От 120px до 240px рост множителя составляет 2. В верхней части шкалы рост множителя увеличивается до 5. Обрати внимание, как множитель постепенно нарастает по мере перехода от низких значений к средним и высоким.
Вот как выглядит полная шкала. Она заканчивается на 780px, но при необходимости может быть расширена. Рост множителя в итоге увеличится с 5 до 10 и далее.
Установив систему размеров и отступов, ты обнаружишь, что проектирование идёт значительно быстрее. Допустим, нужно спроектировать карточку и подобрать значения для её элементов. Просто берёшь их из заранее определённой шкалы и проверяешь. Поскольку фундаментальная работа уже сделана, принимать решения проще — ты работаешь из меньшего набора вариантов.
Эта карточка использует значения размеров и отступов из системы. Всё выглядит хорошо, кроме одного — карточка слишком большая. Вместо того чтобы переопределять значения для каждого элемента, достаточно просто выбрать следующее значение вниз по шкале от исходной точки. Контейнер уменьшается с 480×360px до 420×300px. Аватар — с 60×60px до 48×48px. Блоки с данными — с 192×96px до 168×72px. Ширина кнопок действий тоже уменьшается на один шаг. Кнопки-бейджи остаются прежними, так как занимают минимум пространства.
Уменьшение размеров элементов карточки нередко приводит к неравномерным отступам. Однако в данном случае значения отступов идеально совпадают с системой. Эта последовательная гармония — результат правильно подобранных размеров. Как только размеры выверены, отступы, как правило, встают на своё место сами.
Поиск оптимального диапазона
Следующий пример — карточка товара для интернет-магазина. Начни с определения необходимых элементов: контейнер карточки, разделительная линия, блок с названием, выбор цвета, выбор размера и кнопка «Добавить в корзину».
Начни с размера контейнера, соответствующего изображению товара — они будут скреплены вместе. Затем выбери ширину разделительной линии, которая оставит достаточные поля. Поскольку ширина контейнера — 480px, достаточно опуститься на один уровень до 420px. Это даёт поля в 30px — вполне достаточно.
Теперь нужно определить подходящие размеры для остальных элементов. Задача упрощается: достаточно найти оптимальный диапазон на шкале, который вписывается в размеры контейнера. Поскольку элементы будут складываться вертикально, их размер не должен быть слишком большим. Но если они слишком малы, пользователям будет сложно кликать по ним.
После проверки разных значений оптимальный диапазон на шкале — от 30px до 48px: 24px слишком мало, а 60px слишком много. Таким образом, идеальные размеры для рассмотрения — 30px, 36px и 48px. На примере хорошо видно, насколько это гармонично.
Следующий шаг — расстановка элементов с оптимальными отступами. Идеальный диапазон отступов — от 18px до 30px: крайние варианты либо слишком малы, либо слишком велики. Если один из крайних вариантов выглядит лучше, проведи ещё одно сравнение, используя его как «среднее» значение — чтобы убедиться, что лучшего варианта нет.
Оптимальные значения для твоего дизайна не всегда будут соседними на шкале. Однако это чаще встречается с отступами, чем с размерами. Как правило, высоты элементов должны быть более согласованными, а ширины — могут иметь более широкий диапазон.
Эта система размеров и отступов поможет создавать более качественные дизайны с меньшими усилиями и временем. Сужая выбор из безграничного множества вариантов, ты не только быстрее принимаешь решения, но и проектируешь с математической гармонией и последовательностью.