Трехмерность: скевоморфизм, плоский дизайн и неоморфизм

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

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

• первый этап: определяется, как правило, техническими ограничениями (количество пикселей, цветов и использование памяти);
• второй этап: компьютеры открыли для дизайнеров новые возможности, появились более целенаправленные визуальные стили. 

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

1. Процесс

Изучив отличительные особенности этих стилей, я создал концептуальный интерфейс для каждого из них, выполнив для следующий алгоритм действий:

• Шаг 1. С помощью инструмента САПР (от английского – computer-aided design and drafting (CAD/CADD) –  система автоматизированного проектирования) я построил 3D-модели для каждого из стилей, которые включали в себя фон и соответствующее освещение;
• Шаг 2. Я сделал несколько реалистичных визуализаций с видом сверху и изометрическим (ракурс, при котором видны 3 стороны фигуры) видом;
• Шаг 3. Взяв за основу вид сверху, я создал двумерное представление с помощью Figma;

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

Ниже приведены изображения этого процесса, полезные для сравнения различных представлений и стилей.

‍1. Скевоморфизм

Скевоморфизм – это стиль, который представляет собой имитацию объектов физического мира в интерфейсах цифрового мира. Изначально данный стиль использовался с целью сделать взаимодействие более интуитивным для пользователей. В соответствии с этим принципом скевоморфизм объединяет ряд визуальных стилей.

Эти визуализации показывают чистый стиль с геометрическими и однородными элементами в сочетании со слегка закругленными углами.

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

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

‍2. Плоский дизайн

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

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

Плоский дизайн опирается исключительно на двумерное представление, поэтому здесь отсутствуют отсылки к физическому миру, такие как:

• Тени;
• Прозрачность;
• Рельеф.

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

Для этого исследования я использовал простые компоненты, которые напоминают ламинированные объекты, плавающие на холсте. Микровзаимодействия не подчиняются шероховатости материалов или законам гравитации.

Вы можете прочитать более подробное описание Плоского дизайна здесь.

‍3. Неоморфизм

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

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

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

Для визуализации этого стиля я использовал современные парадигмы и спецификации неоморфизма. Эти компоненты являются частью единой поверхности, образованной барельефами и горельефами (отличается от барельефа тем, что изображаемый объект может выступать из фона более чем на половину своего объёма. Также называется “высокий рельеф”). Взаимодействие представляет собой нечто среднее между двумя предыдущими стилями.

Чтобы лучше понять неоморфизм, прочтите эту статью.

Заключительные примечания

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

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

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