Soft UI: немного о свежей тенденции в дизайне

Автор: Ольга Маркова

Автор Freelance.Today

В прошлом году появилась новая тенденция в дизайне: Soft UI  или Neumorphism. И сейчас эту тенденцию можно наблюдать повсюду.

Даже Apple в тренде; компания внесла множество изменений в свои операционные системы, использующие этот стиль. Элементы Soft UI, представленные Apple, также отражают различные аспекты дизайна пользовательского интерфейса Microsoft Fluent. 

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

Что такое Soft UI (Neumorphism)?

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

Термин «неоморфизм» происходит от предыдущего стиля дизайна — скевоморфизма, когда дизайнеры создают что-то, максимально приближенное к его реальному аналогу. Если вы помните переход между iOS 6 и 7, вы помните переключение между скевоморфным и плоским дизайном. Однако неоморфный дизайн не так драматичен. 

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

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

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

Итак, каковы особенности?

Закругленные углы:мягкий пользовательский интерфейс удаляет некоторые более острые части интерфейса, такие как углы модулей и сегментов. Это обеспечивает нежный, мягкий внешний вид. В этом эксперименте от Iqonic Designмы можем увидеть, как скругленные углы связывают все вместе.

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

Унифицированные символы:все должно идеально вписываться в мягкий дизайн пользовательского интерфейса. В этом дизайнерском эксперименте Сурджа Сен Дас Раджвы можете увидеть, как все цвета, тени и градиенты последовательно связаны друг с другом. Поскольку все более единообразно, опыт идеален для конечного пользователя. 

Внедрение мягких элементов пользовательского интерфейса в ваш дизайн

Как выглядит неоморфизм в процессе проектирования пользовательского интерфейса?

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

С Soft UI ключом к успеху являются тени и блики. 

Давайте посмотрим на некоторые ключевые шаги. 

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

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

Взгляните, например, на этот дизайн Александра Плюто.

Градиенты являются частью процесса тени и выделения в дизайне Soft UI. В идеале вам нужно будет выбирать цвета из той же палитры, только тонированные или светлые, в зависимости от ваших потребностей. Градиент должен быть едва заметным, но достаточно, чтобы элементы выделялись. 

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

Наконец, помните, что принцип дизайна неоморфизма заключается в мелких деталях. 

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

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

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

Проблемы с мягким дизайном пользовательского интерфейса

То, что этот вид дизайна в тренде, не означает, что у него не будет проблем. 

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

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

Небольшое отклонение в насыщенности или проблема с вашим затемнением могут сделать весь эффект Neumorphism полностью бессмысленным. 

Еще одна важная проблема — доступность. Мягкий дизайн пользовательского интерфейса отлично подходит для здоровых людей. Однако пользователи с ослабленным зрением могут не увидеть тех же преимуществ. Для них важные элементы могут затеряться на заднем фоне.

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

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

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

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

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

Это не просто проблема доступности; это проблема и для конверсий. 

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

Как экспериментировать с программным интерфейсом 

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

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

• Набор кнопок Neumorphism: набор кнопок, доступный в темном и светлом режимах, чтобы помочь вам создать лучшие кнопки для вашего следующего проекта. 
• Файл эскиза Neumorphic Elements: бесплатный файл для творческого использования, который поможет вам встроить нужные элементы в дизайн Soft UI. 
• Набор пользовательского интерфейса Neumorphism: современный набор Soft UI для Figma, доступный в трех цветовых переменных. 
• Комплект Neumorphic UI для Adobe XD: Легкий набор Neumorphic для приложения Adobe XD. 
• Пользовательский интерфейс Dashboard Interface для Sketch: полный комплект интерфейса пользовательского интерфейса для приложения Sketch. 

Заключительные мысли о Soft UI

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

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

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

Источник