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

Cover image for Клейморфизм (Claymorphism) новый тренд в интерфейсах?
Редакція
Редакція

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

Клейморфизм (Claymorphism) новый тренд в интерфейсах?

Как мы жаждем иллюзии глубины на наших плоских экранах.

Формируется новый тренд дизайна, и на этот раз он выходит за пределы мира UI-дизайна в пространство искусства.

Привет, Клейморфизм! ?

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

Переосмысление глубины. Снова

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

Возьмем, к примеру, красную кнопку – хотя она выглядит хорошо, ее чрезвычайно сложно закодить «правильно»

В сообществе разработчиков у него была группа очень преданных сторонников, и некоторые продукты были созданы с использованием этого стиля – к лучшему или к худшему.

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

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

Неоморфизм 2.0?

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

Воздушный, дружелюбный, 3д

С появлением метавселенных и ростом популярности NFT 3D-сцена взорвалась. Такие инструменты, как Spline демократизировали ландшафт, подобно тому, как это сделал Sketch, когда все дизайнеры работали в Photoshop.

3D стал модным и трендовым видом искусства.

Но, похоже, набирает популярность один конкретный стиль 3D, часто смешанный с минималистичным дизайном. Я называю его «воздушным 3D», и впервые я заметил, что он стал мейнстримом, когда стартап Pitch использовал его в качестве симпатичного ключевого визуального элемента. С тех пор Амрит Пал Сингх, Сэм Брискар, команда Icons8 и другие дизайнеры исследовали этот стиль, продвигая его с помощью иллюстраций, UI-ассетов и иконографии.

Слева-направо: Amrit Pal Singh, Icons8, Sam Briskar’s Avatarz

NFT

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

Людям нравятся эти персонажи.

Идеальное совпадение

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

Надувание трехмерных фигур

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

В одном из крупных исследований интерфейсов в 2015 году мы фактически протестировали «воздушную 3D» кнопку с другим вариантом. Только группа технически подкованных пользователей отдала предпочтение классическим плоским кнопкам.

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

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

Мы создали простой генератор CSS, который вы можете использовать, чтобы получить правильные внутренние тени.

Имитация неоморфной и клейморфной карточки, вид сбоку

Как добиться этого эффекта?

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

Клейморфизм может использовать типичную тень только по оси Y, а по оси X тень может быть смещена

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

Это дает нам больше гибкости при выборе стиля и позволяет использовать его на различных типах фона.

Фигуры

Клейморфизм всегда начинается с прямоугольника или квадрата. Следующим шагом является скругление углов, обычно превышающее 50%.

Затем мы используем инструмент «Path», чтобы добавить дополнительные точки точно в середине каждой стороны прямоугольника, переключить их на маркеры-манипуляторы зеркального стиля (mirror-style handles) и перетащить их за пределы прямоугольника. Например, верхняя точка переместится в верхнюю часть, загибая верхний край и делая его слегка изогнутым.

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

Свет или тьма?

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

Слияние трендов

Поскольку глассморфизм стал одним из краеугольных камней современного UI-дизайна, его можно объединить с клейморфизмом для получения интересных результатов. Если все сделано правильно, добавление едва заметной внутренней тени к воздушному глассморфному стеклу может выглядеть интересно и свежо.

VR/AR

И виртуальная, и дополненная реальности, скорее всего, останутся с нами. Вскоре должно появится больше интерфейсов, будь то метавселенная Facebook или очки от Apple.

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

Симуляция клейморфизма в AR

Конечно, в реальном 3D-пространстве этот эффект не нужно симулировать, поскольку панели могут быть просто реальными 3D-объектами.

Вывод

Клейморфный 3D уже какое-то время был в центре нашего внимания в связи с растущей популярностью как более простых в использовании 3D-инструментов, так и возможного изменения мышления пользователей.

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

Утилитарный минимализм имеет свое применение, но, похоже, потребители хотят, чтобы их интерфейсы были дружелюбными.


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

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