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

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

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

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

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

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

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

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

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

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

Ясность.

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

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

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

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

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

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