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


21.06.2021 Время чтения - 4 минуты 773

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


Читайте нас в Telegram.


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

Процесс

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

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

Визуализация вида сверху в 1-м ряду по сравнению с двумерными представлениями во 2-м ряду.

Вид сверху в первом ряду и двумерное представление во втором

Скевоморфизм

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

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

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

Bidimensional representation of skeuomorphic components

Двумерное представление скевоморфных компонентов

Трехмерное представление скевоморфных компонентов на изометрической проекции

Трехмерное представление скевоморфных компонентов на изометрической проекции

Детали конструкции скевоморфной кнопки

Плоский дизайн

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

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

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

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

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

Bidimensional representation of flat components

Двумерное представление плоских компонентов

Трехмерное представление плоских компонентов на изометрическом виде

Трехмерное представление плоских компонентов в изометрическом виде

Детали конструкции плоской кнопки дизайна

Неоморфизм

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

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

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

Bidimensional representation of neumorphic components

Двумерное представление неоморфных компонентов

Трехмерное представление неуморфных компонентов на изометрической проекции

Трехмерное представление неоморфных компонентов в изометрической проекции

Детали конструкции неуморфной кнопки

Заключение

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

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

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

Оригинал.

Читайте также: Доступность | Как правильно использовать эмодзи


Читайте нас в Telegram.