book-open 1 test
Курс «Основы UX»

Принципы дизайна: Линейное и краевое натяжение | Урок 15

Визуальное “натяжение” — это концепция, которая выглядит очень простой, но на деле является на удивление полезной.

← Предыдущий урок

(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала)

Как мы узнали вчера, паттерн создается тогда, когда что-либо повторяется. Однако, в некоторых случаях повторяющиеся элементы могут создавать некое подобие “фигур”, и это влияет на то, куда “упадет” взгляд пользователя. Поэтому сегодня объектами нашего изучения будут:

Линейное и краевое натяжение

Вы видите прерывающуюся линию из уточек. Почему же вы не видите просто 8 отдельных уточек?

Вы видите 12 уточек или рамку из уточек? Вот это и есть краевое натяжение.

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

Вы еще не устали от уточек? Я так не думаю.

Визуальное “натяжение” — это концепция, которая выглядит очень простой, но на деле является на удивление полезной. Наши мозги отчасти слишком хорошо ищут паттерны там, где их нет. И вы, как дизайнер, можете этим воспользоваться.

Линейное натяжение:

На первой картинке 8 уточек стоят в ряд. Мы не воспринимаем их как 8 отлельных уточек, мы просто видим линию. Это и есть линейное натяжение — видеть линию или “путь” там, где их нет.

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

И если путь прервать (как и в случае с разрывом паттерна), внимание будет обращено на место разрыва.

Краевое натяжение:

До сих пор мы предполагали, что воображаемая линия лишь одна. Но что, если мы создадим при помощи линейного натяжения сразу несколько линий?

В результате получатся “фигуры”.

На второй из представленных выше картинок уточки стоят таким образом, чтобы образовывать “углы” рамки. Вы могли бы, конечно, видеть 12 уточек, или четыре группы по 3 уточки, но ваш мозг хочет видеть рамку — ее он и видит.

Более того, теперь можно поместить что-то внутрь рамки (еще уточек?!) или в пробелы между уголками из уточек. Как и в случае с линейным натяжением, при пограничном натяжении внимание также концентрируется на разрывах.

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

И вот что удобно — этот прием делает макет ощутимо “проще” и “сплоченнее”, потому что путь, линия или рамка — это один ментальный объект, а 12 отдельных уточек — это слишком круто для восприятия.

Комбинируйте принципы:

В этом уроке рамка, формируемая путем краевого натяжения, остается пустой, но вам не обязательно делать так же. Кроме того, вы можете использовать цвет для создания пути, как, например, в этом градиентном списке. Или вы можете увеличить визуальный вес группы элементов, превратив их в одну цельную фигуру, вместо множества отдельных кусочков. Это отличный способ направить взгляд пользователя в нужное место и при этом не “утяжелить” макет лишними элементами.

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

Выравнивание и близость→

И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле

Курс «Основы UX»