Неоморфизм в пользовательских интерфейсах

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

Кому скевоморфизма?

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

Как отметил Камиль Фалана, на наших глазах намечается переход от безжизненных «представлений» к более реалистичным изображениям.

Мы также отметили, что некоторое время назад такие перемены стали происходить повсюду вокруг нас; хороший пример — Apple. Тяга к «суперплоскому минимализму» сменилась отдачей, и теперь мы видим нечто большее, чем 3D объекты, которые были лишены всяких текстур. Причем, людям новые веяния и неоморфизм, кажется, пришлись по нраву.

Откат наполовину, но стало лучше?

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

Этот шот, сделанный пользователем Dribbble под ником alexplyuto, набрал более 3000 лайков и дал толчок развитию нового тренда. Вскоре начался взрывной рост его популярности, и стали появляться схожие концепты. Мы также сделали парочку :-)

Этот шот запустил новый тренд и, хотя, по частям он кажется весьма легкомысленным (слайдер для перехода назад?), именно это нам и требовалось, чтобы вновь испытать восхищение от пользовательских интерфейсов. Алекс, спасибо!

Неоморфизм: что в нем особенного?

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

Современные/Материальные карточки

Современная/материальная (улучшенная) карточка обычно представляет собой поверхность, парящую над воображаемым фоном и отбрасывающую на него тень. Тень не только придает фигуре глубину, но и во многих случаях очерчивает саму фигуру — так как у этой фигуры зачастую собственных четких границ нет.

Неоморфные карточки

Однако, неоморфная карточка должна словно выступать над задним планом. Ее выпуклый контур делается из того же самого материала, что и фон. Взглянув на нее сбоку, мы убедимся, что она не «парит».

Достичь такого эффекта не составляет труда, поиграв с двумя тенями и задав для одной положительные значения, а для другой — отрицательные. Однако, чтобы такой прием сработал, фон нельзя делать абсолютно черным или абсолютно белым. У него должен быть хотя бы минимальный оттенок, чтобы на нем были различимы темные и «светлые» тени. Фон можно окрашивать в любой оттенок, чтобы он получался «холоднее» или «теплее» в зависимости от ваших предпочтений. Однако, на нем должны быть видимы как темные, так и светлые тени — хотя бы чуть-чуть.

Вот вам рецепт — совершенствуйте его на свой вкус:

Неоморфизм: за и против

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

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

• Доступность
• Возможность все это эффективно выразить в коде

Видимость — Доступность

Основная проблема с уровнем контрастности между фигурой и фоном заключается в следующем: когда фон и фигура одного цвета — никакого контраста нет, и измерять нечего ;-) Объективно тень есть, поэтому можно аппроксимировать и измерить первый пиксель за ее границей. В вышеприведенном примере получим следующие значения контрастности:

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

Разница между ними минимальна и, если бы мы хотели добиться с этими карточками гораздо более качественной контрастности, то должны были бы сделать их вот так:

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

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

Доступность

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

В конце концов, большинство вариантов карточек в «современном» оформлении также не облают достаточной контрастностью с собственными тенями.

Неоморфизм: только карточки?

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

Не составляет труда создать кнопку в утопленном состоянии с инвертированными внутренними тенями, как в примере ниже.

Ни в коем случае

Проблема здесь в самом деле серьезная.

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

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

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

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

Пишем код

Давайте считать, что написание кода в данном случае — бонус-раунд, так как достичь такого внешнего вида в стиле «мягкого пластика» при помощи CSS на самом деле проще, чем кажется. Конечно, нам еще придется заглянуть в Swift и Kotlin, но не думаю, что с этим возникнут проблемы.

Разумеется, можно объединить два свойства box-shadow, поставив между ними запятую.

Другие эффекты

Конечно, фоновые фигуры — это уже кое-что. Такой новый стиль — это еще и более «графически насыщенные» кнопки и переключатели. Зачастую стоит просто вернуться к «старым добрым» растровым рисункам. Кому-то это покажется регрессом, но не волнуйтесь — это не так. Можно легко и с большим успехом комбинировать современные, полностью программируемые кнопки — и такие карточные фигуры.

В самом ли деле нам все это нужно?

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

Так что дерзайте! Экспериментируйте с этим трендом и дорабатывайте его под себя. Дело дизайнера пользовательских интерфейсов — тасовать прямоугольники, поэтому всякий раз, когда прямоугольники становятся немного «иными» или «новыми», это привносит в нашу работу немного той самой подзабытой радости. Без постоянного творческого поиска все продукты вскоре вновь станут однообразными.

Давайте насладимся делом!

Но также не забывайте, что у каждой новой тенденции есть свои подводные камни, и все удобное — это грамотно спроектированное.

Источник