Иерархия
Задача интерфейса — донести до пользователя послание продукта. И сделать это так, чтобы человек не «утонул» в большом объёме информации — не потратил много когнитивных усилий и выхватил сначала самое важное.
Иерархия помогает расставить акценты и выстроить элементы последовательно, в понятную историю: от самой важной информации к поясняющей и, наконец, целевому действию.
Визуальный баланс
Понятная и красивая история в композиции складывается тогда, когда элементы расположены гармонично и взаимодополняют друг друга. Когда ни одна из частей композиции не перевешивает из-за «кучкования» элементов или «тяжёлых» акцентных объектов, которые не уравновешены в другой части.
Целостность
Мало расположить объекты в балансе и по иерархии. Чтобы пользователь воспринимал информацию, которую ему рассказывают, как цельную историю, он должен интуитивно улавливать связь между всеми элементами композиции.
Чтобы добиться цельности в интерфейсе, нужно использовать повторяемые элементы и приёмы. А чтобы достичь визуального баланса при верной иерархии, нужно использовать интуицию — врождённое чувство прекрасного. И проверяй её логикой: нестрогими правилами композиции.
Правило якорных объектов
Якорные объекты обладают бóльшим визуальным весом, задают композицию и управляют вниманием смотрящего. Среди них есть:
- домината, самый визуально тяжелый объект — её лучше располагать так, чтобы тяготела к центру;
- остальные якоря — объекты по углам прямоугольника, они обрамляют все элементы в рамку.
Правило третей
Чтобы выделить в композиции доминанту и другие ключевые объекты, сделать на них акцент — разбей рабочую плоскость на три равные части горизонтально и вертикально. А потом располагай объекты на линиях или их пересечениях. Но не обязательно ставить их чётко там — главное, чтобы тяготели к нужной позиции. Массивные объекты лучше располагать не по линиям третей, а между ними — заполнять объектом экран на одну или две трети.
Правило близости
Элементы, объединённые по смыслу, должны быть объединены и визуально — с помощью модуля. Это может быть линия, в которую выстроятся объекты, или общий фон под ними, то есть цветная плашка или подложка. Объекты, объединённые модулем становятся группой, потому что срабатывает принцип группировки.
Правило внешнего и внутреннего
Это принцип — продолжение правила близости. Чтобы объеденить объекты в группу, нужно сделать внутренние расстояния между ними меньше, чем внешние — между группами.
Статика и динамика
Вишенка на торте композиции. Не важно, что ты выберешь. Зависит от задачи продукта и впечатления, которое ты хочешь передать в интерфейсе. Просто помни, что:
Статика — это спокойствие, уравновешенность, стойкость и уверенность. Она выражается в симметричности предметов и расположении их в устойчивом состоянии.
Динамика — это скорость, бунт, радость, неожиданность и лёгкий хаос: связи между объектами композиции чуть размыты, нет перпендикулярности. Динамика выражается в асимметрии композиции, которая появляется из-за ярко выраженного центра тяжести.
Статика — это спокойствие, уравновешенность, стойкость и уверенность. Она выражается в симметричности предметов и расположении их в устойчивом состоянии.
Динамика — это скорость, бунт, радость, неожиданность и лёгкий хаос: связи между объектами композиции чуть размыты, нет перпендикулярности. Динамика выражается в асимметрии композиции, которая появляется из-за ярко выраженного центра тяжести.