В прошлом году появилась новая тенденция в дизайне: Soft UI или Neumorphism. И сейчас эту тенденцию можно наблюдать повсюду.
Даже Apple в тренде; компания внесла множество изменений в свои операционные системы, использующие этот стиль. Элементы Soft UI, представленные Apple, также отражают различные аспекты дизайна пользовательского интерфейса Microsoft Fluent.
Итак, если мягкий интерфейс — это такая огромнаяконцепция, что нам нужно о нем знать? Как работает SoftUI, и каковы плюсы и минусы его использования?
Содержание статьи
Что такое Soft UI (Neumorphism)?
SoftUI предполагает использование бликов и теней в элементах дизайна, чтобы они выглядели так, как будто они расположены на странице.
Термин «неоморфизм» происходит от предыдущего стиля дизайна — скевоморфизма, когда дизайнеры создают что-то, максимально приближенное к его реальному аналогу. Если вы помните переход между iOS 6 и 7, вы помните переключение между скевоморфным и плоским дизайном. Однако неоморфный дизайн не так драматичен.
Неоморфизм не фокусируется чрезмерно на таких вещах, как контраст или сходство между реальными и цифровыми элементами. Вместо этого эта практика «мягкого пользовательского интерфейса» создает более плавный опыт для пользователей.
С помощью неоморфизма создается ощущение, что кнопки и карточки на самом деле являются частью фона, на котором они находятся. Эта тенденция устраняет более яркие аспекты типичного интерфейса и сосредотачивается на более мягком стиле, который остается неизменным во всем дизайне.
ОБЩИЕ ОСОБЕННОСТИ SOFT UI
Soft UI призван упростить взаимодействие, сделав все более связанным. В эстетике нет ничего слишком резкого, отсюда и термин «мягкий».
Итак, каковы особенности?
Закругленные углы:мягкий пользовательский интерфейс удаляет некоторые более острые части интерфейса, такие как углы модулей и сегментов. Это обеспечивает нежный, мягкий внешний вид. В этом эксперименте от Iqonic Designмы можем увидеть, как скругленные углы связывают все вместе.
Прозрачность и размытие фона:размытие фона и прозрачность стали более популярными сегодня после появления печально известного решения iOS 7. Большинство людей ненавидели внешний вид ультра-минимализма в сочетании с тонкими шрифтами. Однако более популярным был эффект размытия фона. Размытие в программном интерфейсе показывает, что часть окна связана с остальной частью ОС. Кажется, что части фона в приложении выходят на поверхность.
Унифицированные символы:все должно идеально вписываться в мягкий дизайн пользовательского интерфейса. В этом дизайнерском эксперименте Сурджа Сен Дас Раджвы можете увидеть, как все цвета, тени и градиенты последовательно связаны друг с другом. Поскольку все более единообразно, опыт идеален для конечного пользователя.
Внедрение мягких элементов пользовательского интерфейса в ваш дизайн
Как выглядит неоморфизм в процессе проектирования пользовательского интерфейса?
В конечном итоге все дело в тонком контрасте и выровненных цветах. Каждая часть вашего интерфейса должна выглядеть как часть одной и той же формы. Ваши элементы и фон должны быть одного цвета, чтобы вы могли создать ощущение, будто объекты выступают из фона.
С Soft UI ключом к успеху являются тени и блики.
Давайте посмотрим на некоторые ключевые шаги.
ДОСТИЖЕНИЕ МЯГКОГО ВНЕШНЕГО ВИДА
При разработке интерфейса помните, что острые края делают интерфейс более серьезным и формальным. Закругленные углы более дружелюбные.
Что также делает дизайн легким и нежным, так это обилие глубоких теней и бликов. Когда вы добавляете тени к элементам, вы создаете визуальную иерархию. Предметы, которые отбрасывают большую и глубокую тень, — самые близкие к вам. Вот почему только несколько элементов должны отбрасывать интенсивную тень. Все остальное должно работать в фоновом режиме.
Взгляните, например, на этот дизайн Александра Плюто.
СОЗДАНИЕ ПЛАВНЫХ И НЕЖНЫХ ГРАДИЕНТОВ
Градиенты являются частью процесса тени и выделения в дизайне Soft UI. В идеале вам нужно будет выбирать цвета из той же палитры, только тонированные или светлые, в зависимости от ваших потребностей. Градиент должен быть едва заметным, но достаточно, чтобы элементы выделялись.
Для белых градиентов, таких как блики, используйте очень нежный цвет где-то между белым и фоновым оттенком. Вот пример дизайна от Марины Теричевой.
ОБРАТИТЕ ВНИМАНИЕ НА МЕЛКИЕ ДЕТАЛИ
Наконец, помните, что принцип дизайна неоморфизма заключается в мелких деталях.
Шрифт, который визуально сочетается с фоном, — отличный выбор. Однако вы также можете выбрать что-то более контрастное, так как это поможет выделить информацию.
Также может подойти добавление небольшого количества фона в ваши шрифты. Например, если у вас зеленый шрифт и серый фон, добавьте немного серого.
Дополнительные элементы в вашем дизайне, такие как возможность перехода кнопки в более утопленное состояние после нажатия, — отличный способ сделать программный интерфейс более привлекательным. Все, с чем взаимодействует ваш конечный пользователь, должно быть гладким и идеально унифицированным.
Проблемы с мягким дизайном пользовательского интерфейса
То, что этот вид дизайна в тренде, не означает, что у него не будет проблем.
Неоморфизм — это интересный способ сделать приложения, операционные системы и веб-сайты более дружелюбными и неформальными. Однако у этого более мягкого подхода есть и слабое место.
Когда вы имеете дело с небольшим запасом контрастности и цвета, когда неоморфизм работает хорошо, трудно каждый раз получать правильный эффект. Например, этот полностью желтый дизайн для Dtail Studioможет кому-то не понравиться.
Небольшое отклонение в насыщенности или проблема с вашим затемнением могут сделать весь эффект Neumorphism полностью бессмысленным.
Еще одна важная проблема — доступность. Мягкий дизайн пользовательского интерфейса отлично подходит для здоровых людей. Однако пользователи с ослабленным зрением могут не увидеть тех же преимуществ. Для них важные элементы могут затеряться на заднем фоне.
Проблемы могут испытать не только люди со слабым зрением. Дизайн — это мягкость, благодаря которой элементы почти смешиваются друг с другом. Люди с некачественными экранами не увидят эти элементы.
ПРОБЛЕМЫ С КНОПКАМИ И ПРИЗЫВАМИ К ДЕЙСТВИЮ
Еще одна важная проблема неоморфизма заключается в том, что его тонкость может привести к проблемам с привлечением кликов и конверсий. Удобство использования — наиболее важный аспект любого дизайна пользовательского интерфейса.
К сожалению, когда вы сосредотачиваетесь на тонких элементах всего интерфейса, удобство использования иногда страдает.
Возьмем, к примеру, кнопки — они необходимы для любого интерфейса. Чтобы упростить путь к покупке, эти кнопки должны быть заметными, и они должны переходить в разные состояния, когда ваши клиенты взаимодействуют с ними.
Чтобы кнопки были удобными, пользователи должны сразу обращать внимание на дизайн. Однако в основе неоморфизма лежит идея о том, что ничто не выделяется слишком сильно.
Это не просто проблема доступности; это проблема и для конверсий.
Неоморфизм мягкий для глаз, с минимальным цветовым контрастом и небольшим количеством цветовых пятен. Это означает, что кнопки CTA не выделяются так сильно, как должны. Кнопки почти сливаются с фоном, и веб-сайт изо всех сил пытается привлечь внимание к тем областям, которые этого требуют больше всего.
Как экспериментировать с программным интерфейсом
Ключ к раскрытию преимуществ мягких интерфейсов — это правильные эксперименты. Как и в случае с любыми новыми тенденциями в дизайне, профессионалам и художникам необходимо научиться объединять элементы
программного интерфейса воедино таким образом, чтобы это не ухудшало удобство использования.
Тенденции в дизайне пользовательского интерфейса не могут быть сосредоточены исключительно на эстетике, поскольку комфорт клиента всегда будет неотъемлемой частью процесса.
Если вы хотите начать изучение, вот некоторые из лучших комплектов и бесплатных предложений, которые помогут вам начать:
Заключительные мысли о Soft UI
Тенденции, которые мы используем, постоянно меняются (как мир дизайна в целом). Компании всегда ищут лучшие способы связи со своими пользователями. Часто это означает сосредоточение внимания на интерфейсе, который действительно связан с вашей целевой аудиторией и обеспечивает наилучшие возможные результаты.
Тенденция дизайна мягкого пользовательского интерфейса имеет свои преимущества и недостатки. С одной стороны, плавный внешний вид каждого элемента на комбинированном экране может обеспечить восхитительную эстетику. Кнопки кажутся менее впечатляющими, а элементы более дружелюбными и с ними легче взаимодействовать.
С другой стороны, неоморфизм также мешает по-настоящему привлечь внимание вашей аудитории к тем местам, где это наиболее важно. Он страдает от проблем с доступностью и требует большого внимания и практики.
Источник
Загрузка...
