Просто Джокер
Просто Джокер
Красиво
Read 3 minutes

Про правильные отступы. Близость, ясность, целостность.

В процессе написания этой статьи я изучил множество обучающих материалов, мнений, сайтов и приложений для того, что бы понять как делать отступы. Какие отступы выглядят хорошо? Как они влияют на удобство использования? Поддаются ли они систематизации? Ответы на эти вопросы оказались гораздо сложнее, чем я думал, но я постараюсь всё объяснить.

Хороший интерфейс хорош во всём: он простой, красивый, пользователь при взаимодействии с ним чувствует себя как рыба в воде. И отступы играют очень важную роль в дизайне, сразу после расположения элементов друг относительно друга и того, как они выглядят. Так что я с уверенностью могу сказать, что дизайн без отступов - не дизайн.

Пытаясь структурировать всю собранную информацию я пришел к некому набору правил - это близость, ясность и целостность. Далее я буду называть их БЯЦ. Давайте поговорим о них по порядку.

Ближе - значит вместе.

Близость объектов говорит о них многое. Возьмите текст, прямоугольник и что вы получите? Текст и прямоугольник. Но разместите одно на другом и вы создадите кнопку.

Image for post

То же самое происходит с абзацами и заголовками, посмотрите на текст над иллюстрацией - вы точно знаете что "Ближе - значит вместе." относится к тексту, находящемуся прямо под ним, на небольшом расстоянии, а не к тому, что находится выше, чуть дальше. Так мы приходим к выводу, что человеческий мозг склонен группировать объекты в одно целое, вероятно, что бы упростить мыслительные процессы, ведь он тот еще лентяй.

Посмотрите на клавиатуру, которая находится под вашими пальцами - она является одним целым, но поставьте две клавиши дальше друг от друга и они станут просто двумя клавишами. Однако, всё не так просто. Оставьте расстояние между двумя клавишами таким же большим, но верните прежнее количество. Сейчас вы видите разрозненные клавиши. Удалитесь от них, и они снова станут одним целым.

Image for post
Клавиатура является цельным объектом, клавиши формируются в группу.
Image for post
Две клавиши, находящиеся достаточно далеко друг от друга, становятся двумя отдельным объектами.
Image for post
Таких объектов может быть много.
Image for post
Но если взглянуть на них с большего расстояния, они опять станут группой.

Из этого следует простой вывод: наш мозг выделяет группы на фоне других объектов и групп, но если рядом находятся схожие объекты и ничего более, он будет анализировать их как отдельные единицы или объединять в более мелкие группы(подгруппы), например, ряд чисел на клавиатуре, буквы, и клавиши f1-f12.

Image for post

Теория близости - важная часть дизайна, но мало кто понимает её, и ещё меньшее количество людей - использует.

Ясность.

Ваши отступы должны быть ясными. Они должны идти от одного объекта - до другого. Объект - это то, что воспринимается как целое, исключая побочное. Тень - это не часть объекта, не нужно считать отступ от неё. Текст на кнопке - это не объект, не надо считать отступ от него.

Пользователь должен всегда понимать где заканчивается один объект и где начинается другой. Ясность - вот настоящая цель отступов. Они как самые преданные бойцы, готовы сражаться и поддерживать других, оставаясь в тени и не получая заслуженных почестей. Помните об этом, когда откроете новый проект.

Целостность.

Используйте полноценную систему отступов. Создайте её для себя до или во время разработки, соблюдая следующие правила:

  1. Между одинаковыми объектами одинаковые отступы.
  2. В системе должно быть минимальное количество вариантов. Не должно быть 20 и 18, 40 и 42. Выберите что-то одно.
  3. Отступы не обязательно должны быть кратными.

Помните, что отступы - это пустота, а не наполнение, когда будете создавать систему и использовать их. Пустота должна разделить объекты, очертить их границы, собрать всё в цельные куски, отличные друг от друга. Отступы должны помочь пользователю отделить Ф от У, что бы получилось функционально и удобно, а не ФУ. Помните про БЯЦ всегда, когда создаете отступы и они будут великолепны.

1 521 views
Add
More
Просто Джокер
Follow