UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Трехмерность в интерфейсах: скевоморфизм, плоский дизайн и неоморфизм
Редакція
Редакція

Опубліковано

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

#ui

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

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

Процесс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Неоморфизм

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

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

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

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

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

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

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

Вывод

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

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

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


Перевод статьи uxdesign.cc

Топ коментарі (0)