Что такое скевоморфизм и как его использовать для дизайна интерфейсов
НАЗАД

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

Направления в дизайне интерфейсов помогают дизайнерам и компаниям показывать цифровые продукты с новой стороны. Metro, flat и material design раскрывают новые качества продуктов и меняют представления целевой аудитории.

В статье поговорим про скевоморфизм. Выясним, актуален ли стиль в 2020 году, и какие альтернативы можно применять без ущерба для пользовательского опыта.

Что такое скевоморфизм

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

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

Можно сказать, что компания Apple придумала скевоморфизм. Когда компьютеры только начали появляться, они считались повседневным инструментом для инженеров и учёных. Люди того времени не могли предположить, что сегодня компьютеры и ноутбуки будут в каждом доме. В первых версиях операционных систем Apple интерфейс выглядел как книга или журнал. Пользователи, который впервые садились за компьютер, могли без труда разобраться, куда нажимать и заранее знали, что произойдёт после выполнения действий.

Есть много удачных примеров использования скевоморфизма. Например, приложение для чтения книг от Apple. Разработчики не стали придумывать ничего необычного. Они взяли прототип книжной полки и переместили её в цифровую реальность. Пользователь открывает интерфейс и видит обычный шкафчик, на котором размещены экземпляры любимых произведений.

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

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

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

У скевоморфизма есть много аналогов, но даже спустя десятки лет после появления стиля, прямых конкурентов нет. У каждого направления есть свои преимущества и недостатки, но ни один не может похвастаться реалистичностью, которая была в продуктах компании Apple. Скевоморфизм в интерфейсах перестал использоваться «яблочной» корпорацией в 2013-2014 годах. Компания перешла на плоский стиль, который отлично воспринимает аудитория.

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

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

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

Особенности направления в дизайне

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

Реалистичность

Реализм раскрывается в скевоморфизме с максимальной отдачей. Важно понимать, что дизайнерам надо не просто сделать цифровой продукт похожим на реальный объект, а и обеспечить идеальный пользовательский опыт. Стандартным калькулятором в Windows удобно пользоваться не только потому, что он похож на физическое устройство. Суть в том, что кнопки быстро отзываются на действия, а структура сделана так, чтобы пользователи быстро находили нужные функции.

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

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

Глубина

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

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

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

Тени

Объёмные тени — один из способов создать глубину. Их можно искажать, растягивать или создавать причудливые формы. Если знать, как правильно использовать тени, можно получить реалистичные объекты в цифровой среде и улучшить визуальное удобство для пользователей.

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

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

Блики

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

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

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

Текстуры

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

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

Посмотрите на необычный концепт мобильной версии сервиса Dribbble. Автор сохранил привычную цветовую гамму, но переосмыслил визуальную подачу. Объёмные фигуры, тени и блики сделали интерфейс игрушечным. Несмотря на простоту и нестандартный подход, цифровой продукт выполняет свою задачу. Он частично подходит для презентации продуктов, но стоит поработать над читабельностью текста.

Пример целиком основан на необычных текстурах, объёмных фигурах и тенях. Здесь явно нарушен баланс, паттерны отвлекают от использования. Интерфейс выглядит чересчур искусственным и не подходит для повседневного использования.

Свет

Работать со светом приходится не только фотографам, но и графическим дизайнерам. Этот важный атрибут часто используется для визуальной композиции. Если свет падает сверху, он выделяет верхнюю область и создаёт тень около нижней. За счёт этого создаётся яркий контраст — низ становится тёмным, а верх светлым.

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

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

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

У скевоморфного дизайна должна быть чёткая цель. Делать интерфейс реалистичным только потому, что это необычно, не стоит. Имитация, которая не будет решать поставленные задачи, только разозлит пользователей. Любой цифровой продукт создаётся под определённую аудиторию и надо понимать, чем она живёт.

Один из неудачных концептов Apple. Дизайн приложения Find My Friends напоминает кожаную записную книжку. По задумке разработчиков, продукт должен был вызвать ностальгию и сильную эмоциональную связь, но идея явно провалилась.

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

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

Плюсы и минусы скевоморфизма

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

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

Минусы

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

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

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

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

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

Плюсы

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

Главное преимущество скевоморфизма — интуитивность. Если сделать UI похожим на объект из реальности, человек сможет без труда им воспользоваться. Это, как сесть за руль автомобиля с автоматической коробкой передач, когда 10 лет ездил на механике. Поначалу будет сложно, но адаптироваться легко, потому что знаешь базовые принципы управления.

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

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

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

Некоторые знатоки дизайна и веб-аналитики прогнозируют, что через 5-10 лет на «арене» дизайна появится переосмысленный скевоморфизм, который станет футуристичным и более простым в реализации.

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

Компаниям, которые хотят расширить границы целевой аудитории, и сделать новые продукты важными для клиентов, лучше выбрать современные визуальные стили. В зависимости от целей подойдёт flat, metro или material design.

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