<aside>
ℹ️ Примерное время на прочтение: 10 минут.
Не забывайте о полезных ссылках для самостоятельного изучения темы.
</aside>
Композиция (лат. compositio — составление, связывание, сложение, соединение) — составление целого из частей.
Композиция в продуктовом дизайне — это взаимодействие элементов интерфейса с целью передать какой-либо смысл самого интерфейса. Основная задача композиций — дать возможность пользователю легко понять, как с помощью интерфейса можно удовлетворить его потребности.
В статической композиции есть одно ключевое действие, на которое мы хотим обратить внимание, и вся остальная композиция строится вокруг него. В динамической композиции иерархия элементов сложнее: мы выделяем самые важные элементы, затем второстепенные и так далее.
Выделить информацию, добавить ей визуального веса можно размером, цветом, формой и негативным пространством. Сложная форма выделяет один объект среди других объектов с простой формой. Также пустое место вокруг объекта выделяет его.
Две основные задачи, которые помогает решить композиция
- Управление вниманием пользователей. Используя законы композиции, проектирование интерфейс строится на понимании того, что пользователь сперва обратит внимание на один блок, затем на другой. Тогда восприятие пользователя представляет собой своеобразную тропу, по которой он продвигается по интерфейсу, изучая его визуальную составляющую. Пользователь будет следовать по маршруту, который для него был задуман дизайнером.
- Сохранение внимания пользователя. Человек так устроен, что ему проще воспринимать структурированную информацию, на её усвоение тратится меньше усилий, и, как следствие, пользователь получает удовольствие от использования вашего интерфейса.
Что помогает создать гармоничную композицию
- Расположение якорных объектов (самых заметных объектов) в одном из углов, в центре прямоугольника или у одной из его сторон.
- Соблюдение ритма, когда одинаковые объекты обладают одинаковым размером, отступом и так далее.
- Близкое расположение связанных объектов. Создание таких групп облегчает восприятие информации.
Полезные ссылки