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

No items found.
Аудио перевод статьи
0:00
0:00
·

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

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

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

⦁   ⦁   ⦁

Процесс

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

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

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

⦁   ⦁   ⦁

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

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

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

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

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

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

⦁   ⦁   ⦁

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

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

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

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

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

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

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

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

⦁   ⦁   ⦁

Неоморфизм

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

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

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

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

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

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

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

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

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

Источник:
uxdesign.cc
·
comments powered by HyperComments