Когда было предсказано, что неоморфизм станет одной из главных тенденций дизайна пользовательского интерфейса 2020 года, я хотел попробовать. Сказав это, я хотел изучить не переборщить — попробовать неоморфизм в темном режиме.
Почему именно Spotify?
Что же, ища вдохновения, я остановился на Spotify в основном потому, что:
- База пользователей Spotify составляет 286 миллионов человек, и этот продукт также используют многие дизайнеры, что увеличивает вероятность его охвата.
- В Spotify есть все виджеты, от карточек, чипсов, списков, слайдеров до текстовых полей, что затрудняет разработку для этого стиля с учетом иерархии элементов.
- Архитектура Spotify довольно проста с точки зрения определения основных пользовательских потоков и ключевых экранов, что делает ее идеальным вариантом использования неоморфизма.
Неоморфизм простыми словами
Это минималистичный мягкий интерфейс с двумя основными принципами:
- Он использует блики и тени для определения формы объектов на экране.
- Контрастность обычно снижена; полностью белый или черный не используются, что позволяет выделить светлые участки и тени.
Давайте начнем!
Первым решением было сохранить цветовую палитру, шрифты и структуру приложения очень похожими на то, что есть на самом деле. Если вы посмотрите на заставку и экран входа в систему, то поймете, что я стремился сохранить то, как эти элементы уже работают, смешивая их с другими стилями. Таким образом, мы можем использовать неоморфизм, чтобы не везде использовать исключительно «мягкий экструдированный пластик», а дополнить уже используемые конструкции неинвазивными способами.
На экране-заставке вокруг логотипа Spotify я добавил к нему губу/оверлей, как на настоящих кнопках, которые имеют слегка приподнятые края по всему периметру. Это придает логотипу более четкую границу, не теряя при этом неоморфного очарования. С другой стороны, логотип имеет отступ.
Сделать это очень просто. Вам нужно дать светлую и темную внутреннюю тень внешнему слою вместе с падающей тенью.
Вот значения, которые я использовал для внешнего слоя
shadow 1: (color.dark, blur 10, x: -6, y: -6)
shadow 2: (color.light, blur 10, x: 6, y: 6)
и перевернул тени для внутреннего слоя (логотип Spotify), поменяв местами светлые и темные значения X и Y:
shadow 1: (color.dark, blur 10, x: 6, y: 6)
shadow 2: (color.light, blur 10, x: -6, y: -6)
Переходя к экрану входа в систему, я решил, что мы не должны переусердствовать, но должны сохранять простоту, поэтому только кнопки сделаны неоморфными, а остальная часть экрана остается как есть. Когда вы создаете кнопку с важным призывом к действию, вы часто учитываете и учитываете коэффициент контрастности, чтобы она выделялась, а также была легко читаемой. Думая об этом, я оставил кнопки как есть. Единственное, что добавлено — это углы и множество мягких теней. Тот же метод применяется даже к кнопкам, но вместо того, чтобы придать им вид с отступом, я сделал их выдавленными, придав одинаковую важность всем трем точкам входа в систему. Вот значения, которые я использовал для внешнего слоя кнопки
shadow 1: (color.dark, blur 10, x: 6, y: 6)
shadow 2: (color.light, blur 10, x: -6, y: -6)
и перевернул тени для внутреннего слоя, поменяв местами светлые и темные значения X и Y:
shadow 1: (color.dark, blur 10, x: -6, y: -6)
shadow 2: (color.light, blur 10, x: 6, y: 6)
Немного экспериментов!
Я подумал, что это отличная возможность поэкспериментировать с тенденцией, но при этом помня, что все важные элементы на экране должны иметь достаточно высокий контраст. Я попытался создать плавный эффект выпуклости для всех значков действий на экране вместе с нижними значками навигации, чтобы сделать их более заметными. Наряду с этим эффектом «подушки» я опробовал три изменения, чтобы кнопки немного выделялись.
- Несмотря на то, что это противоречит принципу неоморфного дизайна с низким уровнем контрастности, я все же отказался от серого значка и выбрал белый, чтобы он действительно выделялся.
- Добавил оверлей к нажатому/с отступом для кнопки — он не только больше похож на физическую плоскую нажатую кнопку, но также помогает отличить нажатое состояние от не нажатого состояния.
- Добавил оверлей к не нажатому состоянию, чтобы отметить, что это кнопка.
Другой вопрос, что показывать при нажатии кнопки.
Эффект с отступом может быть недостаточен сам по себе и может заставить пользователей задуматься, какое состояние сейчас — активно или неактивно. Я думаю, что в этот момент мы могли бы изменить используемый цвет или значок (или и то, и другое), чтобы пользователь знал, что что-то сейчас активно.
Следовательно, для выбранных вкладок я изменил цвет значка, придав ему достаточный контраст с ненажатымисостояниями.
То же правило было применено ко всем остальным экранам. В музыкальном проигрывателе центральная карточка, элементы управления и ползунки сделаны неоморфными. Центральная карточка выдавлена из фона, в то время как изображения не имеют абсолютно никаких эффектов, что делает ее присутствие очень тонким, так как это уже самый большой элемент на экране. Все элементы управления имеют одинаковый эффект подушки, единственное отличие состоит в том, что кнопка «Воспроизведение» не нажата, а кнопка «Пауза» нажата, а цвет отличается, поскольку это, по сути, наиболее важные действия в визуальной иерархии.
Все карточки выдавлены из фона с низким контрастом, поскольку они не так важны, если мы делаем правильную иерархию для важных элементов с помощью типографики, близости и контраста.
Чтобы усложнить себе жизнь, я сделал фон градиентным. Проблема с градиентным фоном для неоморфизма заключается в том, что вам нужно постоянно менять материал карточек в зависимости от положения на экране, чтобы он соответствовал фону. Базовый цвет продолжает меняться по мере того, как мы спускаемся по экрану, что означает, что меняются также светлые и темные цвета тени.
Еще один ключевой момент, о котором следует помнить, — это то, что значения X и Y увеличиваются или уменьшаются в зависимости от размера элемента, которому вы назначаете тени.
Иерархия между изображениями, значками и шрифтами должна быть четкой, а интервалы четко определены. Как и в случае с плейлистами, я мог бы сделать неоморфные ячейки для карточек, но это отвлечет все внимание, которое здесь не нужно. Я также не ввел неоморфный стиль для каких-либо текстовых элементов.
Чтобы решить проблемы с доступностью, вам нужно найти правильный баланс между элементами, которые вы делаете неоморфными.
Обучение
С неоморфизмом, где большинство элементов плавают и выделяются, конкурируя друг с другом на одном экране. Вам нужно, чтобы другие элементы были тонкими, чтобы пользователю не было сложнее воспринимать иерархию дизайна и сохранять фокус. Вам нужно думать о процессе принятия решений пользователем, а также о его мыслительном процессе.
Каждый продукт, в котором применяется неоморфизм, может иметь собственные правила построения этапов пользовательского интерфейса в зависимости от функций и требований продукта.
Как дизайнер, вы должны обеспечить удовлетворение стандартных потребностей в доступности.