КРАТКОЕ РЕЗЮМЕ ↬ Эта свежая новая тенденция дизайна набирает обороты с ростом популярности красочной раздутой 3D-графики в веб-иллюстрациях и с последними проектами виртуальной реальности, такими как “Миры горизонта”. Давайте посмотрим, есть ли место для клейморфизма в пользовательском интерфейсе и как мы можем создать этот эффект с помощью CSS.
Тенденции в дизайне приходят и уходят, и лишь часть из них сохраняется дольше, чем другие. Плоский дизайн и его более популярный преемник, Material design, уже довольно давно доминируют в веб-интерфейсе, отличаясь минималистичной эстетикой, которая устраняет визуальный беспорядок и улучшает пользовательский интерфейс.
Этот подход очень утилитарен по своей сути, поскольку он устраняет большинство декоративных элементов и функций, оставляя место только для тонких теней и градиентов для достижения некоторой визуальной глубины и добавления плавающего эффекта для элементов, которые должны располагаться поверх других. Визуальная иерархия обычно достигается с помощью цвета и типографии, чтобы сделать конкретные элементы более заметными.
Скевоморфизм и Плоский Дизайн
На заре появления персональных компьютеров процесс обучения должен был быть как можно более плавным, чтобы пользователи могли легко ориентироваться в новом цифровом пространстве. Это было достигнуто с помощью Skeuomorphism, который опирается на эстетику реального мира, чтобы сделать пользовательский интерфейс интуитивно понятным и знакомым. Например, функция удаления была представлена реалистично выглядящим значком корзины.
Skeuomorphism was used similarly in the early days of smartphones in the mid-2000s to easily onboard new users. On Apple’s iPhone OS 1, the YouTube app icon is a television instead of the iconic logo we know today! By leveraging this link between the real world and digital world in form of Skeuomorphism, these new devices managed to garner a wide audience right away.
Независимо от успеха, которого Скевоморфизм добился на этих устройствах, он не нашел своего места в Интернете. Реалистичные и продуманные элементы пользовательского интерфейса не очень подходили для веб-сайтов, которые отличались простотой, чистым макетом и простым удобством использования. Кроме того, по мере роста популярности адаптивного веб-дизайна и повышения производительности мобильных устройств визуально богатая и детализированная графика постепенно исчезала.
В результате минималистичный плоский дизайн и его преемник Material design взяли штурмом сцену веб-дизайна, предоставив настраиваемую, производительную и простую в реализации эстетику, которая может легко адаптироваться практически к любому размеру экрана и разрешению. Даже Apple отошла от скеоморфизма примерно в 2013 году и полностью приняла широко популярный плоский дизайн.
Неуморфизм
Мечта о более тактильно выглядящем 3D-веб-интерфейсе жила, и она вновь появилась в 2020 году как неуморфизм. Он черпает вдохновение как из скеоморфизма, так и из плоского дизайна, и использует другой подход к мягкому 3D-интерфейсу вместо того, чтобы пытаться имитировать реалистичную графику. Вместо того, чтобы элементы пользовательского интерфейса плавали над фоном, как в Material UI, это заставляет их выделяться из фона.
Это достигается за счет использования светлой и темной тени, а также цвета фона, который должен совпадать с цветом элемента за ним. При желании градиенты с более темными и светлыми цветами фона можно использовать для создания выпуклой или вогнутой поверхности, но я не видел, чтобы они использовались в веб-интерфейсе так часто, как более простая плоская поверхность.
Смотрите Неуморфные вариации пера (раздвоенные) Джеффа Грэма
Несмотря на этот свежий взгляд, неуморфизм имел значительные недостатки. Строгое ограничение цвета фона затрудняло достижение визуальной иерархии и привлечение внимания пользователя с помощью цвета. Брендинг веб-сайта не мог быть представлен более заметно, и в результате этого ограничения настройка была серьезно ограничена.
Я говорил о неуморфизме в первые дни его существования и пришел к выводу, что плоский пользовательский интерфейс все еще был значительно лучше и эффективнее при создании удобных и заметных элементов, призывающих к действию. В результате этого неуморфизм довольно быстро стал визуально скучным и устаревшим, так как из-за этих ограничений было трудно создать четкий визуальный стиль.
Неуморфизм также имеет серьезные недостатки в доступности. Плохой контраст сделал пользовательский интерфейс непригодным для пользователей с плохим зрением или дальтонизмом, и трудно воспринимать визуальную иерархию, если эффект используется чрезмерно. В конце концов, неуморфизм мог служить только дополнением к плоскому дизайну. Более конкретно, другой подход к достижению глубины для не взаимодействующих элементов, таких как карты и контейнеры.
2D И 3D Иллюстрации В Интернете
За последние несколько лет цифровые иллюстрации становятся все более популярными, и мы видели, как они используются во многих различных стилях, таких как рисованные, изометрические, абстрактные и другие. Некоторые крупные бренды и компании даже начали включать иллюстрации в свои рекомендации по стилю, делая их основной частью своей дизайнерской идентичности.
С появлением веб-ориентированных инструментов 3D-дизайна, таких как Spline, веб-дизайнеры начнут исследовать мир 3D-иллюстраций. Один из результатов этого эксперимента выделялся среди остальных — мягкий и раздутый 3D-стиль. Результат был поразительным — в сочетании с плоским дизайном или дизайном материалов эти красочные мягкие 3D-иллюстрации придадут новый, энергичный и игривый вид пользовательскому интерфейсу.
Многие наборы мягких 3D-дизайнов, такие как Humans 3.0, 3D hands, 3DIcons, Homies и другие, набирали обороты по мере того, как это новое направление 3D распространялось по Интернету. Некоторые дизайнерские агентства даже начали специализироваться на веб-3D-иллюстрациях и раздвинули границы этого направления дизайна. Совсем недавно такие проекты, как Meta's “Horizon Worlds”, полностью охватили этот мягкий и красочный 3D-образ, чтобы создать яркий и восхитительный опыт виртуальной реальности.
Клейморфизм
Было неизбежно, что эта тенденция начнет распространяться на сам пользовательский интерфейс. Именно здесь родилась идея клейморфизма.
В любом случае, что это за “морфизмы”? Этот суффикс, похоже, для некоторых является любимой обидой, и они думают, что его не следует просто наносить на каждое новое направление искусства. В данный момент мы не будем слишком беспокоиться об именовании и сосредоточимся на изучении этой тенденции дизайна и ее потенциала. Имея все это в виду, этот термин был введен Michal Malewicz, который также стоял за тенденцией неуморфизма несколькими годами ранее.
Клейморфизм строится поверх фундамента нейморфизма. Хотя оба используют закругленные углы, они отличаются тем, как они используют фон и тень. Вместо использования светлой и темной внешней тени для достижения эффекта экструзии, Claymorphism использует две внутренние тени (темную и светлую) и внешнюю (обычно более темную) тень для достижения мягкого 3D и плавающего эффекта. Это позволяет клейморфизму иметь любой цвет фона, независимо от фона, что было основным недостатком неуморфизма.
Коротко о личном — я обожаю этот стиль. Это очаровательно, восхитительно и ярко, но при правильном использовании не подавляет. Это также напоминает мне один из моих любимых мультсериалов детства — " Уоллес и Громит " Аардмана. После многолетней работы с плоским дизайном приятно поэкспериментировать и поиграть с различными стилями дизайна для разнообразия. Если вы дизайнер или разработчик, а также вам нравится эта тенденция и вы считаете, что у нее есть потенциал, попробуйте и посмотрите, что вы можете придумать!
Один из основных моментов критики заключается в том, что чрезмерное использование клейморфизма и чрезмерное использование цветов и типографии может придать пользовательскому интерфейсу несколько детский вид. Михал Малевич признал этот недостаток и дает несколько советов о том, как этого избежать.
“Дружелюбие этих форм наряду с 3D-изображениями создает слегка детский интерфейс. Чтобы противостоять этому, хорошо использовать минимальную типографику, сильные акцентные цвета и хороший контраст ”.
— Michał Malewicz
Возможные варианты использования
Более Заметные Элементы Призыва К Действию
Смотрите сравнение плоской кнопки пера и кнопки клейморфизма [раздвоенная]
Выбор Элементов и Переключение Элементов
Графики
Карточки и Контейнеры
Эффект клейморфизма в CSS
- Фон
Мы будем использовать background или background-color; - Закругленные углы
Мы можем использовать border-radius; - Тени
Мы будем использовать box-shadow с 3 значениями,
2 вставные {inset} тени
1 начальная {outset} тень - Завышенный эффект
Этого нелегко достичь с помощью CSS, поэтому мы будем избегать этого, поскольку это не имеет решающего значения.
Наш CSS будет выглядеть примерно так. Конечно, эти значения могут быть изменены в соответствии с дизайном и размерами элементов.
Повторение этих трех правил для нескольких элементов может стать утомительным и привести к раздуванию кодовой базы, поэтому давайте упростим этот набор правил CSS, создав служебный класс CSS и разрешив настройку, не прибегая к увеличению специфичности или использованию сложных переопределений.
С помощью этого удобного утилитарного микро-класса мы можем легко применять стили Claymorphism, настраивать их и расширять, не раздувая разметку повторяющимися фрагментами стилей.
Я создал clay.css как простой способ включить этот полностью настраиваемый класс micro CSS в ваши проекты либо по ссылке CDN, либо через пакет NPM.
В качестве альтернативы вы можете использовать его как SASS mixin и легко применить этот эффект к псевдоэлементам или любому другому элементу.
Клейморфизм и доступность
Хотя клейморфизм не создает явных проблем с доступностью "из коробки", как это делает неуморфизм, важно помнить о стандартных лучших практиках.
Сохраняйте четкую и логичную визуальную иерархию. В зависимости от варианта использования, клейморфизм делает элементы более заметными с помощью мягкого 3D-эффекта, поэтому мы должны быть осторожны, чтобы не нарушить визуальную иерархию в процессе.
Цвет является важной частью стиля дизайна Claymorphism. Нам нужно быть осторожными с контрастом и цветовыми сочетаниями, поэтому мы можем обеспечить наилучший пользовательский опыт для людей с меньшей чувствительностью к контрасту и для людей с дальтонизмом.
Кроме того, плавающий эффект клеуморфизма позволяет создавать анимацию движения и переходы. Например, нажатие кнопки может быть анимировано с помощью преобразования масштаба для достижения эффекта нажатия 3D-кнопки. Мы всегда должны уважать предпочтения пользователя в движениях, чтобы либо предотвратить запуск подавляющей анимации, либо предоставить более безопасную альтернативу.
В заключении
Плоский и материальный дизайн доминировал в ландшафте веб—интерфейса с первых дней адаптивного дизайна, и на то есть веская причина - он прост в реализации, гибок, надежен и легко поддается адаптации.
Хотя новые тенденции дизайна, такие как неуморфизм, изначально набирали обороты как освежающая новая альтернатива плоскому дизайну и дизайну материалов, они потерпели неудачу из-за проблем с доступностью и ограничений дизайна.
С ростом популярности 2D и мягких 3D иллюстраций, а также в VR-проектах, таких как “Horizon Worlds” от Meta, в результате был создан клейморфизм. Он обеспечивает большую гибкость в настройке и не страдает от проблем, которые мешали запуску Neumorphism. Однако мы увидим, сохранится ли эта тенденция дизайна и наберет ли обороты. Мы уже можем видеть некоторые примеры мягкого 3D, используемого на диаграммах и кнопках, и это подкрепляется уже популярной тенденцией мягкой 3D-иллюстрации.
Я хочу, чтобы клейморфизм сохранился и стал улучшением или даже отличной альтернативой обычному плоскому дизайну и дизайну материалов. Я надеюсь, что дизайнеры и разработчики поймут это и создадут потрясающую работу. Давайте сделаем Интернет немного более ярким и веселым!
Что вы думаете о клейморфизме как о новой тенденции в дизайне? Как бы вы использовали это в своей работе по дизайну или разработке? Рад услышать ваши мысли!
Список цитированной литературы
- “Клейморфизм В Пользовательских Интерфейсах” Michał Malewicz,
- “Неуморфизм В Пользовательских Интерфейсах” Michał Malewicz,
- “Как Создать Клейморфизм С Помощью CS” Albert Walicki
Оригинал статьи
Adrian Bece / Claymorphism: Will It Stick Around?
Спасибо, что дочитали до конца: поддержать меня можно здесь
#web design #development #freelance #design #html #css