Что такое скевоморфный дизайн?

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

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

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

Зачем тогда нужен скевоморфный дизайн? В конце концов, если он не несет никакой функции в продукте, то и включать его не стоит, верно?

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

Подробнее о скевоморфизме

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

Очень наглядный пример скевоморфизма — значок «сохранить».

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

Зачем именно этот символ сохраняют? Почему бы не заменить его символом USB или просто словом «сохранить»?

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

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

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

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

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

Скевоморфный дизайн мертв?

По мере того, как время идёт, а пользователи становятся всё более технически подкованными, скевоморфизм начал выходить из моды. Этот сдвиг стал особенно заметен, когда в 2013 году Apple выпустила крупное обновление iOS 7, в котором плоский дизайн был представлен в программном обеспечении iPhone.

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

Apple ни в коем случае не была первой, кто применил плоский дизайн в своём программном обеспечении. Компания Windows использовала этот дизайн ещё в 2006 году, когда выпустила Zune. Однако именно это изменение в пользовательском интерфейсе iPhone вывело этот метод дизайна на первый план, заставив многих смело заявить: «Скевоморфизм умер!»

Но действительно ли он мертв?

Конечно же, скевоморфизм все еще может быть актуален.

Причина этому проста: по мере развития технологий пользователям по-прежнему будет требоваться помощь в освоении новых технологий.

Даже Apple, приверженцы минималистичного дизайна, всё ещё используют скевоморфизм в своих Apple Watch.

Видите аналоговые часы? Это чистой воды скевоморфизм. Нет причин, по которым они должны быть там, если их можно заменить цифровыми, но они всё равно будут там, потому что пользователи привыкли к ним.

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

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

Примеры скевоморфного дизайна

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

1. Музыкальное программное обеспечение

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

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

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

2. Приложения для заметок

Отличные примеры скевоморфного дизайна можно увидеть во многих приложениях для создания заметок. Apple часто прибегала к этому в своих ранних версиях iOS для iPad и iPhone.

В приведённом выше примере они использовали жёлтые блокноты для своих приложений для заметок.

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

Аналогичным образом, приложение-календарь Opus One также использует скевоморфный подход к дизайну.

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

«[Opus One] попал на главную страницу Dribbble. Явно скевоморфный дизайн попал на популярную страницу Dribbble между плоским интерфейсом и иллюстрациями. Для меня это самый большой комплимент и открытая возможность для альтернативного мышления в дизайне интерфейсов».

3. Цифровые дисплеи

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

Калькуляторы — ещё один отличный пример скевоморфизма в цифровых продуктах. Например, ранние версии калькулятора в iOS для iPhone имитировали внешний вид настоящих калькуляторов.

Приведённый выше пример показывает, как дизайнеры Apple были вдохновлены линейкой продуктов Braun и изо всех сил старались ей подражать.

4. Значок «удалить»

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

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

5. Файлы и папки

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

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

Все эти элементы необходимы? Нет. Но это яркий пример скевоморфизма в действии!

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

Хотите узнать больше про коммерческий дизайн?

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