Плоский дизайн или скевоморфизм?

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

Поэтому, вот экспресс-тест. Который из двух калькуляторов относится к скевоморфному дизайну?

Которое из этих двух приложений является скевоморфным?

Если вы ответили «скевочто?», то вы очевидно не прочли ни одного из примерно 5000 постов в блогах, раскрывающих тему, ставшую популярной в последние месяцы, поэтому эта статья – ваш шанс наверстать упущенное.

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

Определение скевоморфизма

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

Или, как говорится в Википедии:

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

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

Эстетика дизайна “Metro” от Microsoft в Windows RT

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

Скевоморфизм или реализм?

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

Оба приложения имитируют внешний вид настоящего калькулятора, поэтому они оба являются скевоморфами.

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

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

Поэтому, так как реализм представляет собой чистой визуальный стиль, скеворморфизм влияет на дизайн на более глубоком уровне. Но в самих этих техниках проблем как таковых нет. Как недавно отметил Лорен Бричтер (известный по Tweetie и Letterpress) в своем интервью:

Скевоморфизм – это совсем [не]плохо. Он нам нужен для взаимодействия с устройствами человеческим образом. Кричащие текстуры – это проблема только визуального дизайна… я надеюсь, получится их ослабить.

Так если проблема только в «кричащих текстурах», почему мы с ними покончили в первую очередь? И почему же нам так внезапно они надоели?

Find My Friends: яркий пример кричащих текстур.

Все началось с iPhone

Мне кажется, что тенденция реализма и недавняя отрицательная реакция на него начались с одного продукта: iPhone.

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

Пользовательский интерфейс Diablo 2, как и многих других видеоигр, отличается реалистичными (но не скевоморфными) текстурами. А также ходящими коровами.

Но в более «серьезном» контексте, реализм все равно был ограничен. Единственным примечательным исключением были стеклянные кнопки «в стиле Web 2.0», унаследованные из более ранних версий Mac OS X.

Вы можете сказать, что эти довольно броские кнопки стали первым признаком страсти Стива Джобса к реализму (в качестве доказательства любви Джобса к реалистичным материалам, Fast Company сообщила, что кожаная обшивка в iCal была основана на креслах в личном самолете Джобса).

Реализм ранних версий OS X заключался в большом количестве стекла.

С iOS, компания Apple решила еще больше уйти в реализм. Но мне кажется, у них на это было несколько разумных причин.

Анимация при переворачивании страниц в iBooks – скучная сегодня и революционная в момент появления.

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

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

Аргумент в пользу реализма

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

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

Настройки и Погода: та же платформа, тот же разработчик, но абсолютно разные стили.

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

К тому же, iPhone был разработан для того, чтобы вы пользовались им при помощи пальца, а не при помощи более точного стилуса. Дизайнеры компании Apple быстро поняли, что это означает, что размер областей касания должен быть не меньше определенного размера (в Руководстве Apple по созданию пользовательских интерфейсов рекомендуется как минимум 44 на 44 пиксела).

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

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

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

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

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

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

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

Проблема скевоморфизма

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

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

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

Приложение Apple «Контакты» для iPad выглядит как блокнот, однако не позволяет листать страницы для поиска контактов.

Ярким тому примером является приложение Apple «Контакты» для iPad, которое, как и iBooks, использует зрительный образ книги. Но, в отличие от iBooks, Контакты не позволяют переворачивать страницы влево и вправо, что полностью нарушает образ книги.

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

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

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

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

Calculator, Calcbot, и Soulver: три различных варианта калькулятора. Обратите внимание, что ради реализма Apple использует традиционную кнопку «С» для очистки экрана, вместо более понятного символа «backspace», как в приложении Calcbot.

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

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

А приложение Soulver для Mac пошло еще дальше, полностью нарушив образ калькулятора и вместо этого используя его платформу.

Эти элементы пользовательского интерфейса выглядят шикарно, однако они все равно содержат неявные признаки физических ограничений (Braun UI Адриена Олкзака).

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

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

Рассвет плоского дизайна

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

Чтобы сильнее отличаться от Apple или потому, что они изначально считали это лучшей философией дизайна, Microsoft выбрали абсолютно другую эстетику для своего пользовательского интерфейса в Metro-стиле.

Пропали тени, подсветка, градиенты и текстуры iOS-приложений. Вместо этого Metro предлагает плоские цветные квадраты с крупным шрифтом.

Metro против Metro

В 2012 году компания Microsoft нарвалась на конфликт с немецкой сетью супермаркетов Metro за нарушение торговой марки, что привело к тому, что ей пришлось отказаться от названия «Metro UI».

Но, так как они не придумали ничего лучше, чем назвать это «Язык дизайна Microsoft», я буду и дальше использовать название «Metro». Я надеюсь, что вы поймете, что я говорю о пользовательском интерфейсе, а не о сети супермаркетов.

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

Несмотря на то, обращает ли основная аудитория внимание на крупные блоки с плоским цветом или нет, новая философия дизайна Microsoft определенно взяла за душу техносферу, восхваляя особое внимание Metro-стиля к шрифтам и цветам.

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

Letterpress – прекрасный пример применения плоского дизайна в играх.

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

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

Две из наиболее обсуждаемых в последний месяц игр, Letterpress и Hundreds, отличаются плоским дизайном. Фактически, Лорен Бричтер, создатель Letterpress, признался, что во всей игре используется только одно изображение!

Влияние шрифта

Приложения вроде The Magazine ставят текст на передний план в центре.

Но Metro – это только половина истории. Пока компания Microsoft работала над Metro, со стороны Apple тоже имела место крупная инновация: были представлены дисплеи с высоким разрешением (или retina-дисплеи), сначала на iPhone, а потом на iPad и ноутбуках.

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

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

Но экраны с высоким разрешением позволили использовать даже шрифты, которые не были оптимизированы для использования на экране, как написал в Твиттере Эрик Спикерман:

Если вы хотите хороший шрифт на Retina-дисплее, прекратите обсуждать хинтовку. Просто ищите шрифты, которые когда-то смотрелись хорошо. Как в прежние времена.

Или, как написал Джон Грубер в своей статье по этой теме:

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

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

Отзывчивое веб-пространство

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

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

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

Недавний редизайн The Next Web является одновременно плоским и отзывчивым.

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

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

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

Ограничения плоского дизайна

Но это еще не говорит о том, что в плоском дизайне нет своих проблем.

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

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

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

Уберите все эти намеки, и у вас получится плоский мир, в котором все элементы внезапно оказались на одном том же уровне, сбивая вас с столку: кнопка это или просто баннер? Произойдет ли что-нибудь, если я нажму на это?

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

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

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

Неожиданный соперник

Одна из основных причин, почему спор «реализм против плоского дизайна» привлек столько внимания в последние месяцы – это то, что он тесно связан с историей «Apple против Microsoft».

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

«Почти плоский» дизайн Google Maps для iPhone.

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

Этот стиль предлагает лучшее из двух миров: возможности и тонкие намеки минимализма в сочетании с чистотой и простотой плоского дизайна.

Но если посмотреть на него с другой стороны – это просто правильно выполненный дизайн: стремление к эффективности и простоте без приношения в жертву юзабилти в пользу минимализма.

Другими словами, Google не столько является первооткрывателем нового стиля, сколько просто показывает нам, как выглядит правильно выполненный цифровой дизайн (… и таким же образом, насколько плохо это делаем мы).

Что дальше

И что же я думаю обо всем этом?

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

Поэтому я выберу поле и поставлю на плоский дизайн (в частности, на менее экстремальный вариант от Google). Но не по тем причинам, что вы думаете.

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

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

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

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

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

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

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

Это перевод статьи под названием “Flat Pixels” от Sacha Greif. Перевели в компании UXDepot с одобрением автора Sacha Greif.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста 🙂