На прошлой неделе мы исследовали несколько многообещающих новых тенденций в дизайне пользовательских интерфейсов, причем, один из этих трендов недавно привлек массу внимания как в Dribbble, так и в Instagram. Джейсон Келли в одном из своих комментариев окрестил этот «новый скевоморфизм» словом «неоморфизм».
Кому скевоморфизма?
В то время, как различные образцы скевоморфизма по-прежнему встречаются в дизайне пользовательских интерфейсов (посмотрите, например, как выглядит корзина на рабочем столе вашей ОС), более явственно прослеживается тренд в направлении одной из граней этого стиля.
Как отметил Камиль Фалана, на наших глазах намечается переход от безжизненных «представлений» к более реалистичным изображениям.
Мы также отметили, что некоторое время назад такие перемены стали происходить повсюду вокруг нас; хороший пример — Apple. Тяга к «суперплоскому минимализму» сменилась отдачей, и теперь мы видим нечто большее, чем 3D объекты, которые были лишены всяких текстур. Причем, людям новые веяния и неоморфизм, кажется, пришлись по нраву.
Откат наполовину, но стало лучше?
Весь хайп вокруг неоморфизма начался с единственного шота в Dribbble, который вскоре стал вирусным.
Этот шот, сделанный пользователем Dribbble под ником alexplyuto, набрал более 3000 лайков и дал толчок развитию нового тренда. Вскоре начался взрывной рост его популярности, и стали появляться схожие концепты. Мы также сделали парочку :-)
Этот шот запустил новый тренд и, хотя, по частям он кажется весьма легкомысленным (слайдер для перехода назад?), именно это нам и требовалось, чтобы вновь испытать восхищение от пользовательских интерфейсов. Алекс, спасибо!
Неоморфизм: что в нем особенного?
Поскольку кнопки особенно не изменились, давайте сосредоточимся, собственно, на концепции карточек, благодаря которым такой визуальный стиль становится таким привлекательным.
Современные/Материальные карточки
Современная/материальная (улучшенная) карточка обычно представляет собой поверхность, парящую над воображаемым фоном и отбрасывающую на него тень. Тень не только придает фигуре глубину, но и во многих случаях очерчивает саму фигуру — так как у этой фигуры зачастую собственных четких границ нет.
Неоморфные карточки
Однако, неоморфная карточка должна словно выступать над задним планом. Ее выпуклый контур делается из того же самого материала, что и фон. Взглянув на нее сбоку, мы убедимся, что она не «парит».
Достичь такого эффекта не составляет труда, поиграв с двумя тенями и задав для одной положительные значения, а для другой — отрицательные. Однако, чтобы такой прием сработал, фон нельзя делать абсолютно черным или абсолютно белым. У него должен быть хотя бы минимальный оттенок, чтобы на нем были различимы темные и «светлые» тени. Фон можно окрашивать в любой оттенок, чтобы он получался «холоднее» или «теплее» в зависимости от ваших предпочтений. Однако, на нем должны быть видимы как темные, так и светлые тени — хотя бы чуть-чуть.
Вот вам рецепт — совершенствуйте его на свой вкус:
Неоморфизм: за и против
Основное достоинство этого стиля заключается в его «свежести», (по крайней мере, сейчас, пока она сохраняется). Он привносит в интерфейс те «новые нотки», благодаря которым интерфейс выделяется. Также этот интерфейс можно сочетать с другими, чтобы не было повсюду этого засилья «мягкого тисненого пластика».
Однако, этому стилю присущи и некоторые проблемы, на которых необходимо остановиться. Пока найдены две наиболее серьезные проблемы (поиск иных проблем продолжается), и они таковы.
- Доступность
- Возможность все это эффективно выразить в коде
Видимость — Доступность
Основная проблема с уровнем контрастности между фигурой и фоном заключается в следующем: когда фон и фигура одного цвета — никакого контраста нет, и измерять нечего ;-) Объективно тень есть, поэтому можно аппроксимировать и измерить первый пиксель за ее границей. В вышеприведенном примере получим следующие значения контрастности:
Как видите, у обеих карточек — современной и неоморфной — контрастность достаточно низкая. Конечно же, отчасти и в этом заключается их привлекательность, а сами карточки не задействуются в активных элементах — поэтому, пока кнопки у нас остаются хорошо заметными и обладают достаточно высокой контрастностью, все должно быть нормально.
Разница между ними минимальна и, если бы мы хотели добиться с этими карточками гораздо более качественной контрастности, то должны были бы сделать их вот так:
Поскольку почти никто не делает столь нарочитых теней, нужно позаботиться и о доступности для остальных элементов пользовательского интерфейса. Исходя из этого, делаем вывод, что такие карточки/тисненые пластиковые карточки на самом деле не первостепенны, если выстроить правильную иерархию, умело обращаться с типографикой, расположением и контрастностью важных элементов.
Это еще предстоит проверить (и я постараюсь найти для этого время), но пока мы исходим из того, что оба «варианта» оформления элемента, приведенные ниже — «пойдут». Даже если кто-то и не замечает здесь мягких теней, контрастности хватает, чтобы пользователь заметил иконку и смог с ней работать.
Доступность
Хотя, кнопка и должна выглядеть как «кнопка», ею вполне можно будет пользоваться, если сама иконка будет хорошо контрастировать с фоном. Поэтому, в данном случае важнее всего запомнить вот что: если вы решили придерживаться такого стиля, то позаботьтесь, чтобы все ваши элементы обладали достаточно высокой контрастностью.
В конце концов, большинство вариантов карточек в «современном» оформлении также не облают достаточной контрастностью с собственными тенями.
Неоморфизм: только карточки?
Однако, основная проблема с доступностью возникает в случае, когда мы решаем использовать наши компоненты как кнопки, а не как карточки.
Не составляет труда создать кнопку в утопленном состоянии с инвертированными внутренними тенями, как в примере ниже.
Ни в коем случае
Проблема здесь в самом деле серьезная.
В таком утопленном состоянии контрастность у кнопки слишком низкая, что не позволяет заметить разницу. Тогда как в случае карточек было нормально, чтобы они «скрадывались», если весь остальной интерфейс сообщает нужную информацию, состояние активного элемента должно четко опознаваться в любой момент.
В данном случае есть пара идей по поводу использования обводок и и заливки, подчеркивания. В конце концов, о том, что кнопка нажата, можно сообщать, придав ей соответствующий цвет.
Поэкспериментируйте с разными идеями, но помните, что все состояния должны опознаваться мгновенно
Помните об этом, занимаясь дизайном. Всем нам хочется, чтобы было «красиво», но не забывайте и о том, что наш дизайн должен быть удобен в использовании для каждого.
Пишем код
Давайте считать, что написание кода в данном случае — бонус-раунд, так как достичь такого внешнего вида в стиле «мягкого пластика» при помощи CSS на самом деле проще, чем кажется. Конечно, нам еще придется заглянуть в Swift и Kotlin, но не думаю, что с этим возникнут проблемы.
Разумеется, можно объединить два свойства box-shadow, поставив между ними запятую.
Другие эффекты
Конечно, фоновые фигуры — это уже кое-что. Такой новый стиль — это еще и более «графически насыщенные» кнопки и переключатели. Зачастую стоит просто вернуться к «старым добрым» растровым рисункам. Кому-то это покажется регрессом, но не волнуйтесь — это не так. Можно легко и с большим успехом комбинировать современные, полностью программируемые кнопки — и такие карточные фигуры.
В самом ли деле нам все это нужно?
Притом, как много дизайнеров вдохновил неоморфизм и этот новый тренд, связанные с ним сложности далеко не так серьезны, как проблемы доступности, возникавшие с карточными компонентами, что использовались ранее.
Так что дерзайте! Экспериментируйте с этим трендом и дорабатывайте его под себя. Дело дизайнера пользовательских интерфейсов — тасовать прямоугольники, поэтому всякий раз, когда прямоугольники становятся немного «иными» или «новыми», это привносит в нашу работу немного той самой подзабытой радости. Без постоянного творческого поиска все продукты вскоре вновь станут однообразными.
Давайте насладимся делом!
Но также не забывайте, что у каждой новой тенденции есть свои подводные камни, и все удобное — это грамотно спроектированное.