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

Скевоморфизм — приём проектирования графических интерфейсов, при котором элементы программного обеспечения визуально имитируют реальные физические объекты, материалы и механизмы. Термин образован от греч. σκεῦος («сосуд, орудие») и μορφή («форма») и впервые в применении к цифровому дизайну был популяризирован в конце 2000-х годов. Скевоморфные интерфейсы используют текстуры дерева, металла, кожи, тени, блики, объёмные кнопки и другие приёмы, имитирующие физические свойства объектов.

¶История

¶Ранние интерфейсы

Идея имитации реальных объектов в графических интерфейсах появилась вместе с первыми GUI. В 1980-х годах Apple и Microsoft использовали элементы, напоминающие физические приборы: окна с рамками, «мусорные корзины», «столы». В 1984 году в Macintosh Finder появилась иконка корзины, визуально напоминающая настоящую. В 1990-е годы программы Microsoft Office и Windows 95 использовали объёмные кнопки с тенями и бликами, имитирующие физические клавиши.

¶Расцвет в 2000-х

Скевоморфизм достиг пика популярности в конце 2000-х — начале 2010-х годов. Ключевую роль сыграла компания Apple: в iOS 1–6 (2007–2012) и Mac OS X интерфейсы буквально воспроизводили реальные материалы. Примеры:

• приложение «Заметки» (Notes) с имитацией жёлтого линованного блокнота и кожаной обложки;
• приложение «Компас» (Compass) с реалистичной шкалой и металлической рамкой;
• приложение «Часы» (Clock) с аналоговым циферблатом;
• iBooks с имитацией деревянной полки и книг;
• калькулятор с металлической панелью.

В Android-приложениях также встречались скевоморфные элементы, хотя Material Design (2014) от Google изначально опирался на плоский дизайн.

¶Отход от скевоморфизма

К 2012–2013 годам в индустрии наметился перелом. В 2013 году Apple представила iOS 7 с полностью плоским дизайном — без теней, градиентов и имитации материалов. Разработчики Android перешли к Material Design. Критики скевоморфизма утверждали, что он перегружает интерфейс, отвлекает от контента и устаревает вместе с реальными объектами. Сторонники возражали, что визуальные подсказки помогают пользователям быстрее понять функции элементов.

¶Виды

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

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

¶Механический скевоморфизм

Имитация механизмов и приборов: циферблаты, шкалы, тумблеры, ручки, «клавиши». Пример — аналоговые часы на экране смартфона.

¶Функциональный скевоморфизм

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

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

Термин используется и в других областях:

• Архитектура: здания, декор которых имитирует другие материалы (например, бетонные колонны, окрашенные под мрамор).
• Техника: корпуса приборов, выполненные из пластика с имитацией дерева или металла.
• Игровой дизайн: интерфейсы видеоигр, воспроизводящие физические объекты (например, «инвентарь» в виде сундука).

¶Критика и современное положение

Основные претензии к скевоморфизму:

• визуальный шум и перегруженность;
• сложность масштабирования на разных размерах экранов;
• быстрое устаревание: имитация реальных объектов выдаёт возраст приложения.

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

¶Источники

• Аарон Уолтер. «Дизайн эмоций» (Designing for Emotion)
• Стивен Хеллер, Вероника Вейт. «История графического дизайна»
• Материалы конференций Apple Worldwide Developers Conference (2007–2013)
• Статьи журнала «Smashing Magazine» о скевоморфизме и плоском дизайне
• Книга Марка Уилера «The Elements of User Interface Design»