Отступы устарели
Отступы между блоками пришли из типографского набора. Применительно к дизайну интерфейсов они устарели. И вот почему.
Посмотрите на левую картинку. Что произойдёт, если нажать на отступ, который находится между блоками? Ничего. Пользователь не поймёт почему нажатие не сработало, ведь он целился в иконку и промахнулся всего на один пиксель. Такой UX никуда не годится, от мёртвых зон нужно избавляться!
Иными словами, отступы должны быть включены внутрь интерактивных блоков (как на картинке справа). Дальше я буду называть внутренние отступы “полями”.
Текст – такой же строительный блок, как и все остальные. Нет смысла усложнять дизайн-систему, используя где-то внутренние поля, а где-то внешние отступы. Поэтому текстовый блок также оформим в виде компонента и настроим ему поля.
Такой подход помогает решить одну проблему расхождения макета и конечного продукта. Создайте простой текст в Figma, Sketch, ProtoPie. Ваш текст автоматически обрамится контейнером. При совершенно одинаковых настройках шрифта все три программы по-разному разместят текст внутри контейнера (на картинке ниже дано сравнение). То же самое у программистов: Web, SwiftUI, QT сделают разные отступы. Вы рисуете pixel perfect дизайн, разработчик берёт ваши размеры, но в продукте базовая линия шрифта смещается выше или ниже, визуально отступы получаются не те, что вы задумали.
Чтобы решить проблему, вам нужно измерить поля по скриншотам продукта и подобрать у себя такие же. Цифры у вас с разработчиком разойдутся (это надо будет задокументировать), зато внешний вид совпадёт.
Допустим, вы настроили внутренние поля всех компонентов, и вдруг вам захотелось добавить больше воздуха. Неужели придётся каждому компоненту задавать новые размеры полей вручную? Раньше так и было, но теперь в Figma появились переменные, благодаря ним задача решается за пару секунд.
Кстати, не используйте цифры в именах переменных (типа Space4 и Space8), потому что числовые значения у них могут быть вовсе не 4 и 8. На то они и переменные, чтобы меняться, особенно при адаптивном дизайне.
Когда вы избавитесь от внешних отступов, все блоки раздвинутся на полную ширину экрана, это позволит добавлять и блоки без полей в общий стек. Такое иногда бывает нужно.
Итак, руководство к действию:
- Заведите переменные для всех видов отступов
- Отступы между блоками делайте нулевыми
- На скриншотах продукта (или тестовой программы) измерьте реальные отступы
- Добавьте внутренние поля компонентам так, чтобы их вид совпал с продуктом
- Задокументируйте разницу значений
- Если нужно нарастить поля – пожалуйста. Запишите в документацию значения и для дизайнера, и для разработчика (а если разработка ведётся под несколько платформ, то между ними тоже могут быть расхождения)
- Не заставляйте разработчика устанавливать отрицательные отступы – это может обернуться последствиями, которые трудно представить
- Не бойтесь нечётных значений, вы не в типографии. Нечётные значения встречаются даже у Apple
Если хотите посмотреть больше реальных кейсов продуктового дизайна – заходите ко мне на manwe.ru
Что делаешь, когда используешь компонент с уже заданными паддингами в местах где они не нужны или начинают мешать\спорить с другими элементами и их паддингами?
Если нужно быстро прикинуть результат – просто задаю нулевые паддинги у конкретного инстанса. Если выясняется, что действительно нужны оба варианта – например, самая левая ячейка таблицы должна быть с отступом, а все остальные без него (или наоборот) – делаю два варианта у компонента, называю их согласно смыслу и цели использования.