Дата обновления: 16 Февраля 2024
08.11.2023
577
13 мин
author-avatar
Настя Воронова

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

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

Узнать больше информации о скевоморфизме можно на курсах «UX/UI дизайнер» от Band Band Education и «Веб-дизайнер с нуля» от Логомашина.

Содержание

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

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

Примеры скевоморфизма:

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

Почему стиль скевоморфизм был популярен?

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

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

Почему скевоморфизм стал исчезать к концу 2000-х годов?

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

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

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

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

Скевоморфизм уже давно устарел, но в дизайне появились новые тренды и инструменты — о них рассказывают на онлайн-курсах с сайта tutortop:

Дизайнер рисует на графическом планшете

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

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

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

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

С помощью чего создаётся дизайн в стиле скевоморфизм?

Когда дизайнеры создают дизайн в стиле скевоморфизма, они как бы играют с имитацией реальности и используют разные приёмы — рассказываем о каждом подробнее.

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

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

Телефоны с дизайном скевоморфизм

Глубина

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

Дизайн радио в стиле скевоморфизма

Тени

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

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

Дизайн пианино в стиле скевоморфизма

Блики

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

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

Дизайн камеры в стиле скевоморфизма

Использование текстур

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

Дизайн иконок в стиле скевоморфизма

Игра со светом

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

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

Дизайн калькулятора в стиле скевоморфизма

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

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