О дополнительных принципах гештальта
Напоминаем, что принципы гештальта описывают, как люди группируют похожие элементы, распознают паттерны и упрощают сложные изображения при восприятии объектов. Другими словами, человеческий мозг пытается организовать информацию, подсознательно упорядочивая части в единое целое. Применение принципов гештальта в ваших макетах поможет создать удобные дизайны, основанные на психологии и человеческом поведении.
На данный момент в этой сертификационной программе вы узнали о трех принципах гештальта:
- Сходство: элементы, которые выглядят одинаково, воспринимаются как имеющие одну и ту же функцию.
- Близость: элементы, расположенные близко друг к другу, кажутся более связанными, чем элементы, расположенные дальше друг от друга.
- Общая область: элементы, расположенные в одной области, воспринимаются как сгруппированные вместе.
Теперь вы изучите три дополнительных принципа гештальта: замкнутость, непрерывность и симметрия.
Гештальт-принцип закрытия описывает, что, когда человек смотрит на незавершенный объект, он подсознательно завершает изображение, чтобы увидеть целый, завершенный объект. Посмотрите, например, на рисунок выше. Технически на графике изображено множество линий разного цвета, но ваш мозг воспринимает эти линии как красный квадрат, синий круг и желтый треугольник из-за стремления к завершению. Использование гештальт-принципа замыкания может удержать пользователей вовлечёнными в ваш дизайн, улучшая их внимание к объектам.
А как насчет закрытия в реальном мире? В логотипе FedEx, показанном выше, есть тонкий пример закрытия. Можете ли вы это заметить? Между буквами E и x пробел образует стрелку, указывающую вправо. На этой стрелке нет контура или различий, но пользователи могут видеть стрелку, потому что форма букв E и X объединяется, создавая иллюзию стрелки. Для FedEx эта стрелка — нечто большее, чем просто принцип закрытия; это также соответствует цели их бренда по доставке товаров своим пользователям, поскольку стрелка подразумевает движение вперед.
Чтобы узнать больше о замыкании в дизайне, прочтите статью UX Collective: [Улучшите свои проекты с помощью принципов замыкания и фигурного фона] (https://www.smashingmagazine.com/2016/05/improve-your-designs-with-the-principles-of-closure-and-figure-ground-part-2/).
Гештальт-принцип непрерывности гласит, что элементы, расположенные на линии или кривой, кажутся более связанными, чем элементы, не лежащие на линии или кривой. Другими словами, непрерывность направляет взгляд пользователя от объекта к объекту, следуя по линии, и фокусирует внимание на определенных частях экрана.
Например, на рисунке выше ваши глаза направляются от первого круга через второй круг и к третьему кругу, потому что ваши глаза следуют за белой линией, когда она движется по изображению.
В реальном мире гештальт-принцип непрерывности часто используется при показе пошаговых процессов и при отображении списка элементов, связанных друг с другом. Непрерывность также можно использовать в меню навигации, как показано на веб-сайте Почтовой службы США (USPS) на изображении ниже.
Представьте, что вы ищете информацию об отправке посылки. Сначала вы должны нажать «Отправить» в меню навигации. Далее ваш взгляд перемещается на заголовок «Подробнее», потому что вам интересно узнать, как отправить посылку. Затем ваш взгляд перемещается вниз к подзаголовку «Отправка», где вы найдете ссылку на информацию об отправке пакетов. Почему? Ну а принцип непрерывности используется для того, чтобы вести взгляд по вертикальной линии по меню навигации. Переход по такой строке происходит так быстро, что вы, вероятно, даже не осознаете, что прошли три уровня меню, чтобы найти искомую ссылку!
Другой способ, которым пользователи могут воспринимать элементы дизайна, основан на том, как они выглядят по отношению друг к другу, или на том, являются ли элементы дизайна симметричными или асимметричными.
Гештальт-принцип симметрии описывает, что элементы визуально более приятны, когда части объекта сбалансированы или являются зеркальным отражением друг друга. Симметричные объекты не только красиво выглядят, но и воспринимаются как связанные друг с другом. На рисунке выше темно-зеленая фигура слева дублируется светло-зеленой фигурой справа. Единственная разница в этих двух симметричных формах — это используемый оттенок зеленого.
С другой стороны, асимметрия, то есть отсутствие баланса и равенства, может подчеркнуть важность элемента и создать визуальный интерес. Использование асимметрии в ваших проектах может помочь привлечь внимание к конкретному предмету или группе предметов. На рисунке выше зеленая фигура слева использует прямые линии, а желтая фигура справа — изогнутые линии, что делает их асимметричными.
На изображении ниже показан веб-сайт Института Алана Тьюринга, где асимметрия в действии. Здесь различные размеры текста и расположение текстовых полей направляют пользователей к более важной информации на странице.
Размышляя о том, как использовать симметрию и асимметрию в своих проектах, посмотрите это видео от Skillshare о симметрии и асимметрии, чтобы узнать больше.
Помня о гештальт-принципах, вы находитесь на пути к созданию умного, визуально привлекательного и удобного для пользователя дизайна. Не забывайте думать о потребностях ваших пользователей во время проектирования и не бойтесь вернуться к чертежной доске, чтобы воплотить некоторые из этих принципов в жизнь в своих проектах!