Скевоморфизм в цифровых интерфейсах и художественных программах.

Дмитрий Некрасов
Дизайн-кабак
13 min readJun 1, 2015

--

Аннотация: Эволюция графического решения компьютерных интерфейсов, имитирование реальных материалов в цифровой среде, периоды адаптации и упрощения интерфейсов цифровых программ. Научно–популярная статья.

Ключевые слова: имитирование, интерфейс, скевоморфизм, компьютер, программа, графическое решение, лаконизм, материальность, гипперреалистичность.

Skeuomorphic elements in digital interfaces and art software.

Abstract: This article describes the evolution of graphical solutions for digital interfaces, analyzes the simulations of real materials in the digital environment and determines the periods of adaptation and simplification in digital software.

Keywords: miming, digital interface, skeuomorphic, computer software, graphical solution, laconic, materiality, hyperrealism, art.

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

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

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

Период привыкания и освоения виртуальной реальности в быту и на работе можно символически определить временным промежутком в 29 лет. Началом массового пользования бытовыми домашними компьютерами можно назвать 1984 год — выпуск компьютера Apple Macintosh, первого популярного домашнего компьютера с графическим интерфейсом.

1984 год. Apple Mac OS 1.0 — первая популярная операционная система с графическим интерфейсом.

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

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

Рассмотрим чем характерен период адаптации общества к цифровой реальности:

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

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

Это направление называют «Скевоморфизм»( англ. skeuomorph (скюаморф); греч. σκεῦος — «сосуд», «орудие», μορφή — «форма») — воспроизведение формы или характеристик объекта в других материалах или другим способом. Фактически роспись стен под мрамор, живописные «обманки», искусственные кракелюры и состаривание декоративных предметов тоже являются примерами скевоморфизма. Понятие «скевоморфизм можно применить, например, к ткани с рисунком леопардовой шкуры, или к бумажным обоям с рисунком кирпича: эти предметы имитируют другие материалы и их визуальные свойства, происходит подмена понятий.

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

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

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

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

1981 год. Xerox 8010 Star — первый компьютер с графическим интерфейсом.

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

Для сравнения приведу пример текстового интерфейса, «консоли», который использовался в компьютерах до массового внедрения GUI (graphic user interface) графического интерфейса пользователя, где пользователь общался с компьютером посредством набора команд, что требовало навыков программирования:

Командная оболочка UNIX — bash

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

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

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

Эволюция иконки Корзины в Mac OS с 1984 по 2001 год

Фактически это начало подготовки «переселения» многих процессов (профессиональных и повседневных) в виртуальную среду.

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

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

Слева — реальный блокнот «Legal Pad», в центре интерфейс программы «Заметки» Apple iOS 6, справа — иконка программы «Заметки» Mac OS 10.8

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

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

Можно провести аналогию между приемом имитирования реальности в цифровых интерфейсах (что, как мы поняли, несет практическую функцию) и приёмами гиперреалистов в живописи 1980–2000-х годов.

Работа художника–гиперреалиста. Бумага, гуашь.

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

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

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

В книге Маргота Лавджоя «Цифровые течения искусства в электронную эпоху», описываются эксперименты с созданием реалистичного цифрового изображения на студии Lucasfilm в начале 1990–х годов. Художники и программисты, работавшие там вместе, руководствовались следующей логикой:

«Реальность — это просто проверка, как проверка в эксперименте. Если вы можете создать убедительную компьютерную картинку шелкового шарфа, падающего на деревянный стол, то вы сможете создать и убедительную картинку деревянного шарфа, падающего на шелковый стол».

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

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

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

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

Процесс смешивания «красок» в Corel Classic Painter

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

Эвоюция внешнего вида ползунка прокрутки в Windows с 1985 по 2012 годы

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

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

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

Графический сенсорный экран и графический планшет.

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

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

В художественных компьютерных программах интерфейсы разработаны художниками для того, чтобы другие художники могли интуитивно ими пользоваться. Создается некая преемственность использования символов, обозначений, пиктограмм и идеограмм. Полный набор профессиональных цифровых художественных инструментов может быть представлен в виде 10–20 лаконичных иконок, каждая из которых отображает главную отличительную особенность того или иного инструмента. Здесь не нужна реалистичность, не обязательно копировать внешний вид реального инструмента, — достаточно лишь обобщенно показать его свойства в виде пиктограммы. Но в любом случае, обозначение кисти на ее иконке соответствует традиционной форме этого инструмента, легко воспринимается и считывается. Еще очень не скоро можно будет полностью отказаться от аналогий с реальными предметами, заменив их изображения полностью схематичными обозначениями. Cегодня цифровое искусство базируется на опыте традицонного, использует его в оформлении программ и обозначении их возможностей.

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

Пример фотореалистичного трехмерного рендера

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

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

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

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

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

Пример вылепленной трехмерной модели, и ее копия с пониженным количеством полигонов — «обрубовка».

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

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

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

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

«Фальшивость» виртуальных элементов управления в виде теней, полутеней, рефлексов и бликов постепенно уходит в прошлое. Будущий визуальный язык компьютеров, которым он будет общаться с пользователем, станет более честным, основанным на плоскостях и контрастах; плоскому экрану не нужно больше приписывать пространственных свойств.

Истоки такого художественного движения лежат в конструктивизме и функционализме.

Радио фирмы Braun. 1960-е годы

Похожий путь от вычурности, сложности форм к минимализму и лаконичности в свое время прошел промышленный дизайн. Хорошим примером является инновационный подход в серийном промышленном дизайне бытовых приборов 1960-х годов. Компания Braun уже тогда смогла предложить минимализм и «силу простоты» в линейке своих новых товаров, придерживаясь простых, чистых форм и предлагая богатый функционал. Аналогичная ситуация с восприятием и преобразованием внешнего вида цифрового пространства происходит сегодня.

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

Статья опубликована в альманахе ГИТИС «Театр. Живопись. Кино. Музыка»№1 за 2015 год.

Список литературы:

  1. Алан Купер. Психбольница в руках пациентов или Почему высокие технологии сводят нас с ума. Символ-Плюс, 2004г.
  2. Джеф Раскин. Интерфейс. Новые направления в проектировании компьютерных систем. Символ-Плюс, 2004г.
  3. История развития графического интерфейса
  4. Искусство Нового времени: опыт культурологического анализа / отв. ред. О.А. Кривцун. СПб., 2000. С. 47.
  5. Постмодернизм. Энциклопедия. Мн.. 2001. С.522.
  6. Скевоморфизм и повествование
  7. Человеко-компьютерный интерфейс — миф или реальность?
  8. Яковлева Н.А. Сотворческое восприятие произведения искусства // Анализ и интерпретация произведения искусства / под ред. Н.А. Яковлевой. М.. 2005
  9. Lovejoy M. Digital Currents: Art in the Electronic Age. N. Y., 2004
  10. http://www.joomlaworks.net/blog/item/192-flat-design-as-part-of-an-on-going-evolution

--

--

Дмитрий Некрасов
Дизайн-кабак

Привет, я художник кино и режиссер анимации. Мой блог www.dmitrynekrasov.ru/blog/all/. Мое портфолио www.dmitrynekrasov.ru