Принципы дизайна: Выравнивание и близость | Урок 16
Это очень тонкая тема, но она касается всего, что мы видим, каждый день.

Это очень тонкая тема, но она касается всего, что мы видим, каждый день.
(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала)
Последний принцип дизайна, который мы рассмотрим, расскажет нам, как упорядочить и добавить значимости элементам дизайна, при этом не используя дополнительных элементов. Это очень тонкая тема, но она касается всего, что мы видим, каждый день:
Выровненные уточки кажутся более связанными.
Чем ближе уточки друг к другу, тем сильнее они связаны.
Сегодня мы прощаемся с нашими старыми-добрыми резиновыми уточками, но сначала они продемонстрируют нам пару фундаментальных принципов визуального восприятия. Уточки — они такие, не просто красивые мордашки!
На первом рисунке (сверху) мы видим группу из 6 невероятно красивых уточек, а еще мы видим много связей, которые возникают благодаря выравниванию:
Все 6 уточек идентичны. Все перечисленные эффекты создаются за счет выравнивания. Выравнивать можно сходные по функции кнопки. Разные уровни информации. Информацию вообще можно представлять в виде “сетки” из рядов и колонок — это позволяет заложить более сложную структуру.
Когда два объекта находятся вблизи или на расстоянии, создается впечатление, что они связаны или, соответственно, не связаны. Это расстояние между объектами и называется “близостью”.
На второй картинке мы видим 6 одинаковых уточек, которые не выровнены ни по горизонтали, ни по вертикали; тем не менее, мы видим две группы. Уточки из каждой группы держатся вместе, как команда или семья. Единственное, что создает такое ощущение — это близость.
Придерживайтесь этого принципа при проектировании: размещайте родственные элементы ближе друг к другу, а несвязанные — на расстоянии.
К примеру: заголовок, текстовый блок и кнопка, связанные с каким-то одним действием, — например, с покупкой или загрузкой приложения — обычно проектируются единым блоком. Это позволяет пользователю сразу, не вникая, понять, почему они размещены вместе.
Теперь вы — гении дизайна, поэтому переходим к макетам. Завтра мы выясним сильные и слабые стороны лейаутов (расположения элементов на странице): Z-паттерн, F-паттерн и визуальная иерархия →
И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле
Продуктовые дизайнеры
Продакты
UX/UI-дизайнеры
UX-аналитики
Веб-дизайнеры
Менеджеры проектов
Продуктовые аналитики
Бренд-менеджеры
Digital-стратеги
Арт-директора
Аналитики данных
UX-исследователи
Графические дизайнеры
Веб-разработчики
Дизайнеры интерфейсов