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

Оригинал. By Rodrigo Osornio

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

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

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.

Почему именно они? Существует множество стилей дизайна и их вариаций. Так уж исторически сложилось, что определялись они в 2 этапа. Первый – технические ограничения (количество пикселей, цвета и использование памяти). На втором этапе компьютеры дали дизайнерам больше возможностей, из-за чего появились более продуманные визуальные стили. Наиболее актуальными для этого этапа являются скевоморфизм и плоский дизайн. Неоморфизм – это не единый стиль, но он включен в это исследование по причинам, которые описаны ниже.

Изучив характерные черты каждого из стилей, был создан концептуальный интерфейс для каждого из них. Используя инструмент CAD, были составлены соответствующие 3D-модели с фоном и освещением. Затем были созданы несколько рендеров с видом сверху и изометрии. Вид сверху был сделан с помощью Figma. Эти компоненты используют обычные шаблоны, которые можно построить с помощью кода и использовать в конечных продуктах.

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

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

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

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

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

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

Ортодоксальные варианты плоского дизайна полагаются исключительно на двумерность экрана. Нет отсылок на реальный (физический) мир, такие элементы как тени, прозрачные пленки или рельефы стали не нужны.

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

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

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

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

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

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

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

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.