Это база: геометрические и оптические нюансы в дизайне интерфейсов

Привет, vc.ru! Вы задумывались о том, как особенности нашего восприятия отражаются в дизайне интерфейсов? Какие нюансы возникают в связи с этим, что с ними делать, как использовать или как с ними бороться, читайте в нашей статье.

Это база: геометрические и оптические нюансы в дизайне интерфейсов

Геометричный мир

Мы живем в геометрическом мире. В мире, который мы сами для себя выстроили. Мы живем в прямоугольных или круглых домах, ходим по прямым дорожкам. Все подчиняется определенным геометрическим размерам.

Отчего мы строим наш мир именно геометрическим? Первое, потому что он максимально комфортный для человека. Например, рассматривая картины прямоугольной формы или кино на прямоугольных экранах, человек чувствует себя комфортно. Второе: легко строить. Упрощенно: дома прямоугольной формы строить легче, чем изогнутые. Здесь работают принципы архитектуры.

Геометричный мир + оптическое восприятие

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

Глаз — это оптический прибор со своими особенностями, который не подчиняется геометрическим законам. В следствие чего возникают нюансы восприятия, которые нужно знать и учитывать в дизайне интерфейсов.

Игорь, дизайнер

Силовые линии

Самый общий нюанс — это силовые линии. Если вам задать вопрос: «Какая геометрическая фигура изображена на картинке ниже?», то сразу же ответите: «Треугольник».

Это база: геометрические и оптические нюансы в дизайне интерфейсов

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

Отсюда определение: силовая линия — это невидимая или оптическая (что в принципе одно и то же) линия, относительно которой движется наш взгляд или наше восприятие.

Метод силовых линий — так называемый прием Гештальт. Его в графическом дизайне часто используют в дизайне логотипов. Например, вместо буквы «А» делают стилизованные треугольники, или промежутки между буквами складываются в другую букву. То есть существуют невидимые и видимые части.

Это база: геометрические и оптические нюансы в дизайне интерфейсов

F и Z-паттерны

В дизайне интерфейсов силовые линии используются в F- и Z- паттернах. Это довольно старый прием, сейчас уже менее популярный.

В F-паттерне силовые линии (они бывают вертикальные, горизонтальные, диагональные), по которым размещается контент, образуют форму «F».

Это база: геометрические и оптические нюансы в дизайне интерфейсов

Три точки на примере выше формируют вертикальную силовую линию, а текст формирует горизонтальные силовые линии. Появляется F-паттерн.

Z-паттерн - разновидность F-паттерна. Просто взгляд при просмотре слева-направо не возвращается обратно, а по диагонали переходит к нижней точке.

Это база: геометрические и оптические нюансы в дизайне интерфейсов

Вертикальная силовая линия

Дизайн сайтов в период с 2020 г. сильно поменялся концептуально. Связано это с тем, что сменились паттерны восприятия. Сейчас новый паттерн восприятия — вертикальная силовая линия, вокруг которой строится весь контент.

Есть два вида размещения вертикальной силовой линии:

По центру

Силовая линия делит интерфейс ровно посередине и весь контент выстраивается относительно центральной силовой линии.

Слева

Силовая линия смещается левее центра, где-то наблюдается сильное смещение, где-то менее, но тем не менее это левая сторона.

Речь только о европейском восприятии. Японская, китайская и арабская письменности стоят обособленно, подчиняются своим правилам. Всё завязано на том, как человек пишет и читает: справа-налево или слева-направо.

Вертикальные силовые линии дают намного лучше восприятие, чем F- и Z- паттерны. Пользователь идет взглядом по центру сайта, и слева, и справа примерно одинаковое расстояние, охватываются сразу все области. Если мы хотим сделать акцент на чем-то важном, то ставим этот элемент на силовую линию.

Это база: геометрические и оптические нюансы в дизайне интерфейсов
Это база: геометрические и оптические нюансы в дизайне интерфейсов

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

Это база: геометрические и оптические нюансы в дизайне интерфейсов

Почему? Потому что показывать левую нет смысла, т.к. не позволяет размер. Связано это с тем, что контент уходит не в горизонт, а в вертикаль.

Была проведена масса разных исследований на данную тему, в частности от Instagram (Принадлежит Meta, запрещенной в РФ организации). В 2018 г. разработчики соцсети тестировали насколько людям нравится вертикальный скроллинг. Были проведены А/В-тесты горизонтальной/вертикальной прокрутки. Результатом исследования стал вывод о том, что людям гораздо удобнее скроллить бесконечно вниз. Собственно, по этой причине появились вертикальные силовые линии. При создании интерфейсов становится важно, чтобы пользователи скроллили относительно какой-то линии, оттого весь контент размещают у этой линии.

Текстовые блоки

Мы описали общий принцип построения контента по силовым линиям, который действует и на некоторые частные случаи.

Первый частный случай — это текстовые блоки. Они тоже претерпели изменения в соответствии с изменениями парадигмы восприятия контента.

Если раньше текстовый блок, заголовок и плашка с текстом выравнивались относительно внешней линии, то сейчас все чаще встречаются варианты выравнивания всего текста по силовой линии. То есть текст в плашке и задает силовую линию, относительно которой выравнивается весь остальной контент.

Это база: геометрические и оптические нюансы в дизайне интерфейсов

Формы

Следующий частный случай — это формы. Формы также стали подчиняться силовой линии относительно контента или относительно текста в полях. Кнопка отправки, кстати, тоже подчиняется силовой линии. Это не догма, а рекомендация, то есть применяется по-разному. Поэтому экспериментируйте, пробуйте разные варианты.

Это база: геометрические и оптические нюансы в дизайне интерфейсов
Это база: геометрические и оптические нюансы в дизайне интерфейсов

Это пошло из книгопечатания и типографики. Как шрифты, кегели и веса. Разделение на силовые линии придумали не дизайнеры, они только подхватили.

Если взять книгопечатание, то там огромное количество правил. Обычный читатель обращает внимание только на удобство чтения. Зачастую, сложные для восприятия книги печатают более простым шрифтом, чтобы не усложнять восприятие. Отчасти, возвращение к силовой линии, отказ от Z и F-паттернов – это упрощение восприятия. Так человеку комфортнее.

Оптические компенсации

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

Это база: геометрические и оптические нюансы в дизайне интерфейсов

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

В чем же загадка? Все в тех же силовых линиях. Когда у нас взгляд идет по силовой линии относительно грани квадрата и скользит до круга, то свободное пространство заставляет наш взгляд «проваливаться». В связи с этим круг начинает уменьшаться оптически, не геометрически. Геометрически фигуры абсолютно одинаковы по высоте и ширине.

Это база: геометрические и оптические нюансы в дизайне интерфейсов

Чтобы фигуры выглядели одинаково оптически, нужно провести так называемую оптическую компенсацию или просто слегка увеличить круг.

Это база: геометрические и оптические нюансы в дизайне интерфейсов

В итоге фигуры визуально стали одного размера или весят оптически одинаково.

Такой прием активно используется в типографике. Ко всем геометрическим гротескам всегда применяется оптическая компенсация. В противном случае при чтении все круглые буквы будут казаться меньше, станет трудно читать, восприятие усложнится.

Это база: геометрические и оптические нюансы в дизайне интерфейсов

Где еще в дизайне интерфейсов применяется оптическая компенсация? Например, в дизайне полей для сообщений, где есть поле для текста, и кнопка «Отправить».

Это база: геометрические и оптические нюансы в дизайне интерфейсов

Многим дизайнерам известно проклятие кнопки Play. Если треугольник вписать ровно по центру круга, то кажется, что треугольник смещен влево. Но на самом деле он находится четко по центру. Здесь на помощь приходит оптическая компенсация. Для этого треугольник надо просто вписать в круг и отцентровать.

Это база: геометрические и оптические нюансы в дизайне интерфейсов
Это база: геометрические и оптические нюансы в дизайне интерфейсов

Оптическое выравнивание

Что же делать, если таких фигур очень много? Когда у нас больше двух фигур разношерстных, разных по оптическому весу, следует делать оптическую компенсацию для каждой фигуры относительно какой-то из них.

Это база: геометрические и оптические нюансы в дизайне интерфейсов

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

Это база: геометрические и оптические нюансы в дизайне интерфейсов
Это база: геометрические и оптические нюансы в дизайне интерфейсов

Как проверить оптический вес целого набора фигур? Для этого нужно наложить на все фигуры прямоугольник с размытием. Сразу станет понятно, насколько фигуры одинаковы по оптическому весу.

Это база: геометрические и оптические нюансы в дизайне интерфейсов

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

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

В самом простом виде блок логотипов партнеров организуют с помощью плашек. То есть каждый логотип размещается в одинаковые плашки. Логотип внутри плашки центруется. Но такой вариант самый простой. Высший пилотаж — это, конечно, без всяких плашек. Какая-то геометрическая основа может быть, но невидимая, прозрачная, чтобы был виден только сам логотип.

Это база: геометрические и оптические нюансы в дизайне интерфейсов

Какие описанные приемы вы применяете на практике? Что показалось самым интересным или необычным?

Если вам нужна помощь в разработке дизайн-концепции IT-продукта, то связаться с нашей командой можно по адресу hello@hawkingbros.com.

3333
1010
12 комментариев

Я не дизайнер, но все равно интересно. Лайк

6
Ответить

Отличный практический материал! Спасибо!

5
Ответить

Теперь я знаю больше о дизайнерских проклятиях.

5
Ответить

Спасибо, очень полезно!

4
Ответить

Для сетов с иконками очень важная тема! Спасибо!

4
Ответить

Отличная статья! Открыл для себя много нового!

3
Ответить

Спасибо авторам, очень познавательно)

3
Ответить