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

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

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

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

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

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

Процесс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Неоморфизм

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

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

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

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

Заключение

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

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

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

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

55
1 комментарий

Статья отличная... Но с момента выхода оригинала, я уже 4 раза встречал переводы разные на просторах рунета. И вроде один даже тут! И вот опять. 

Ответить