Подвинь на пиксель
блог о дизайне
  • /
Баланс в дизайне интерфейсов


Одна из популярнейших проблем, которые встречаются в устаревшем дизайне интерфейсов — недостаток воздуха. Элементы расположены «притерто» друг к другу, пользователь как будто не может вздохнуть, перевести дыхание при потреблении контента и из-за этого создается ощущение душности.

Как с этим справиться? Как добавить воздуха, чтобы он появился в правильном месте, чтобы он способствовал концентрации пользователя и помогал дизайнеру акцентировать внимание пользователя на конкретных деталях?

Для этого должен соблюдаться баланс пустот и общий визуальный баланс в дизайне.
Общий баланс касается выравнивания и визуального равенства элементов, которые должны быть одинаковыми.

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

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

Яркие цвета будут перевешивать более нейтральные, темные превалировать над светлыми.

Эти правила нужно понимать и для того, чтобы не допускать перевешивания среди одинаковых элементов и для того, чтобы иметь возможность выравнивать вес за счет этих приемов.

Например, сделать круг того же размера, что и квадрат, но ярче (кстати, для работы с логотипами в фигме есть очень классный плагин logo layout)

Баланс пустот касается пресловутого «воздуха» в интерфейсе. Поскольку мы хотим получить картинку, в которой пустоты будут не притягивать к себе взгляд, а наоборот, будут давать взгляду отдыхать, нам нужно сделать так, чтобы эти пустоты не перевешивали контент. Здесь важно знать 2 вещи:
1 — Мозг человека устроен так, что близкие друг к другу объекту мы воспринимаем, как более общные

(именно поэтому важно соблюдать иерархичность в отступах: расстояния между блоками должны быть больше, чем расстояния от заголовка до блока, расстояния от заголовка до блока — больше, чем между внутриблочных элементов…).

Из-за этого самые безопасные отступы — те, которые находятся между теми элементами, которые отделены друг от друга по смыслу.
Наименее безопасные, соответственно, между элементами, которые образуют из себя смысловой блок.

Соответственно, если между элементами, относящимися друг к другу, возникает большая пустота — эти элементы визуально разъединяются, такие пустоты лучше заполнять.

2 — Наиболее легко воспринимаемый человеком контент укладывается в визуальный квадрат/прямоугольник. Экраны, книги — все прямоугольное и если где-то сбоку создается визуальная пустота, она перетягивает на себя внимание, отвлекает от контента, именно поэтому неудобно читать текст, написанный вот такой лесенкой (максимально удобное для восприятие выравнивание — по ширине с переносами) и поэтому если у нас невольно создается подобная пустота, её тоже стоит компенсировать — иллюстрацией/графическим элементом или текстом.

Воздух в интерфейсе очень важен, но он должен быть распределен равномерно, чтобы не отвлекать от сути, так же как важно дышать ровно, а не задерживать дыхание на минуту, а потом судорожно пытаться вдохнуть.
Я не хочу следовать правилам!

Дизайн - это и про функциональность, и про творчество. Если дизайнер уверен в своих силах, если получившийся проект гармоничен и осмысленнен, совершенно неважно, следовал ли он каким-то правилам. Но часто прежде чем выработать свой собственный уникальный стиль, художники учатся рисовать “как нужно”.

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

since 2020
Тех. разработка: Седов Александр
Политика конфиденциальности
Техподдержка: helga.more@mail.ru
Сайт создан: