Перевод статьи дизайнера интерфейсов Тесс Гадд
Шпаргалка по интерфейсу:
Дружба отступов
Дружба отступов
Самый простой способ для меня оценить навыки дизайнера интерфейсов — это посмотреть, как он использует отступы в своем дизайне. Цвета, типографика, изображения и так далее обычно задаются в брендбуке, но правильное использование отступов — это умение. Со временем оно становится вторым естеством, но только после того, как вы усвоите и примените базовые правила.
В этой шпаргалке я объясняю метафору, которую использую для новичков, чтобы рассказать, как располагать элементы. Надеюсь, эти базовые правила помогут вам критически относиться к отступам.
В этой шпаргалке я объясняю метафору, которую использую для новичков, чтобы рассказать, как располагать элементы. Надеюсь, эти базовые правила помогут вам критически относиться к отступам.
В этой шпаргалке мы рассмотрим:
- Почему отступы важны?
- Введение в сетки на основе точек
- Дружба отступов
- Три «К» отступов
- Заключительные мысли
- Почему отступы важны?
Когда я была начинающим дизайнером на своей первой работе в сфере продуктового дизайна, я помню, как гордилась собой из-за одного из своих дизайнов. Я передала его одному из старших дизайнеров, которого мы в шутку называли Пит-Идеальный-Пиксель. Когда я снова увидела свой макет, была потрясена. Он выглядел гораздо лучше, хотя использовались те же элементы. Просто улучшив отступы, Пит создал более организованный, чистый и связный макет.
Пит применил новый вид магии, который я только начинала понимать.
Когда вы улучшаете отступы, происходит следующее:
- Пользователям становится легче воспринимать контент.
- Создается иерархия информации, которая передает важность пользователю.
- Обеспечивается согласованность во всем дизайне.
- Это просто выглядит лучше.
2. Введение в сетки на основе точек
Как и многие дизайнеры интерфейсов, я начала свою карьеру как графический дизайнер. При проектировании макетов для печати нас учили (я не шучу) использовать квадратную форму для измерения расстояний между элементами, чтобы создать согласованность.
Но в цифровом дизайне продуктов такой подход не сработает, так как он недостаточно точен.
Мы, дизайнеры интерфейсов, предпочитаем использовать более осознанные методы измерения расстояний между компонентами и формами. И возникает вопрос: на каком расстоянии друг от друга должны располагаться элементы? Человек с десятью пальцами на руках и ногах склонен располагать элементы в единицах по 10. Это удобное круглое число, которое легко запомнить и часто используется в макетах графического дизайна. Но 10pt на самом деле слишком много, и оно плохо делится и умножается.
Здесь на помощь приходит сетка 8pt. Такая сетка позволяет использовать кратные 8 единицы для отступов в дизайне. Эти единицы включают 0, 8, 16, 32, 64 и так далее.
Но в цифровом дизайне продуктов такой подход не сработает, так как он недостаточно точен.
Мы, дизайнеры интерфейсов, предпочитаем использовать более осознанные методы измерения расстояний между компонентами и формами. И возникает вопрос: на каком расстоянии друг от друга должны располагаться элементы? Человек с десятью пальцами на руках и ногах склонен располагать элементы в единицах по 10. Это удобное круглое число, которое легко запомнить и часто используется в макетах графического дизайна. Но 10pt на самом деле слишком много, и оно плохо делится и умножается.
Здесь на помощь приходит сетка 8pt. Такая сетка позволяет использовать кратные 8 единицы для отступов в дизайне. Эти единицы включают 0, 8, 16, 32, 64 и так далее.
Число 8 является своего рода волшебным — оно просто работает.
Однако в дизайнерских кругах ходят слухи, что сетка 8pt выходит из моды, а на смену ей приходит сетка 4pt. Это означает, что вы можете использовать кратные 4 единицы, включая 0, 4, 8, 12, 24, 32, 64, 72 и так далее. Дрис Де Шеппер, дизайнер интерфейсов в Deloitte Digital, утверждает, что 4pt сетка придаст вашей работе больше гибкости, и вы будете удивлены, как часто используете 12pt вместо 8pt или 16pt.
Преимущество сетки 8pt в том, что она предлагает меньшее количество чисел, с которыми нужно работать, что облегчает поддержание согласованности. В то время как преимущество 4pt сетки — большее количество чисел, что упрощает создание более плотных дизайнов.
3. Дружба отступов
Прежде чем я расскажу о дружбе отступов, давайте поговорим о дружбе и обсудим это в контексте класса.
В классе обычно образуются разные группы друзей. И внутри этих групп формируются еще более тесные дружеские отношения. Таким образом, вы получаете лучших друзей в кругу близких друзей, которые находятся в еще большем круге друзей.
В реальности круги дружбы гораздо больше пересекаются, но ради метафоры давайте представим, что это не так.
В классе обычно образуются разные группы друзей. И внутри этих групп формируются еще более тесные дружеские отношения. Таким образом, вы получаете лучших друзей в кругу близких друзей, которые находятся в еще большем круге друзей.
В реальности круги дружбы гораздо больше пересекаются, но ради метафоры давайте представим, что это не так.
Итак, как дружба связана с отступами в дизайне пользовательских интерфейсов?
Представьте расстояние между элементами в вашем дизайне как круги дружбы. Некоторые ближе, другие — дальше. Чем более знакомы два элемента, тем ближе они друг к другу. И наоборот, чем менее они связаны, тем дальше друг от друга расположены.
Представьте расстояние между элементами в вашем дизайне как круги дружбы. Некоторые ближе, другие — дальше. Чем более знакомы два элемента, тем ближе они друг к другу. И наоборот, чем менее они связаны, тем дальше друг от друга расположены.
Сравните два изображения ниже. В первом дизайне использовались одинаковые отступы везде. Во втором — отступы различаются в зависимости от дружбы элементов, что означает, что отступы внутри контейнера, между иконкой, текстом и кнопками разные.
Можете ли вы заметить, что изображение слева выглядит плавающим и беспорядочным? А справа оно кажется сбалансированным и аккуратным?
Если вы посмотрите на пример ниже, вы увидите, как я группирую различные элементы в разные круги друзей.
Если вы посмотрите на пример ниже, вы увидите, как я группирую различные элементы в разные круги друзей.
Как видно на изображении выше, разные элементы разбиты на различные группы друзей. Вы можете решить, насколько «дружелюбны» элементы друг к другу, основываясь на том, насколько они связаны. Например, на изображении выше заголовок и основной текст связаны больше, чем кнопка или графика. Но графика, кнопка и текст имеют схожее сообщение, поэтому они все равно сгруппированы вместе.
Что насчет полноценных макетов? Тот же принцип применим, но с большим количеством элементов.
Если упомянутый выше компонент был бы группой друзей, то макет страницы — это целый класс. Все вместе, но только некоторые из них — друзья. На изображении ниже вы можете увидеть, как я использовала тот же принцип в всем макете также, как и в небольшом компоненте.
Что насчет полноценных макетов? Тот же принцип применим, но с большим количеством элементов.
Если упомянутый выше компонент был бы группой друзей, то макет страницы — это целый класс. Все вместе, но только некоторые из них — друзья. На изображении ниже вы можете увидеть, как я использовала тот же принцип в всем макете также, как и в небольшом компоненте.
Как видно на изображении выше, разделение элементов на разные группы друзей помогает создать согласованность и иерархию. Разумеется, это не идеальная метафора, и могут быть исключения, где вы решите нарушить правила.
4. Три «К» отступов
Приянка Годбол, дизайнер продуктов в Facebook Design System, предлагает похожий, но более структурированный подход к отступам. Она делит элементы на три основные категории: контейнеры, контент и компоненты. Для каждой из этих категорий она использует предопределенные отступы.
Контейнеры (включают карточки, модальные окна, страницы и т. д.) должны иметь наибольшее значение отступов. Например, она использует 16pt как наибольшее значение.
Контент (включает заголовки, абзацы, таблицы и т. д.) касается правильного расположения типографики. Высота заголовков, абзацев и расстояние между ними должны учитываться и корректироваться.
Компоненты (включают кнопки, поля ввода, иконки и т. д.) касаются отступов между небольшими компонентами и внутри них, например, отступы внутри и вокруг кнопки.
Узнайте больше о трех «К» отступов.
Контейнеры (включают карточки, модальные окна, страницы и т. д.) должны иметь наибольшее значение отступов. Например, она использует 16pt как наибольшее значение.
Контент (включает заголовки, абзацы, таблицы и т. д.) касается правильного расположения типографики. Высота заголовков, абзацев и расстояние между ними должны учитываться и корректироваться.
Компоненты (включают кнопки, поля ввода, иконки и т. д.) касаются отступов между небольшими компонентами и внутри них, например, отступы внутри и вокруг кнопки.
Узнайте больше о трех «К» отступов.
5. Заключительные мысли
Использование правильных отступов — это очень интуитивное упражнение, на которое уходят годы для совершенствования. Я готова поспорить, что Пит-Идеальный-Пиксель до сих пор сможет найти ошибки в моих отступах.
Я надеюсь, что, думая о компонентах в дизайне как о «друзьях», вы сможете лучше почувствовать, как должны располагаться элементы.
Я надеюсь, что, думая о компонентах в дизайне как о «друзьях», вы сможете лучше почувствовать, как должны располагаться элементы.
medium.com
UI Cheat Sheet: Spacing Friendships
Learn to space elements in your layout, with the help of a cheesy metephor.