Реализм возвращается в UI (но это не точно)
В конце 2019 на Dribble и Instagram выстрелил новый тренд, а именно – пара примеров воплощения этого тренда от украинского дизайнера Alexander Plyuoto. Так, его пост на Dribbble “Skeuomorph Mobile Banking” от 5 ноября 2019 года собрал на данный момент уже 4950 лайков (что редкость для Dribbble – в хорошем смысле). Это скевоморфическое представление интерфейса приложения мобильного банка.
Пост Александра выстрелил настолько громко, что для него наскоро придумали целое название «Неоморфизм», которое основательно село нам на уши. Но для того, чтобы разобраться, почему всех так заинтересовал шот объёмных картинок с закосом одновременно под реализм и минимализм, нужно разобраться в массивном бэкграунде пользовательских интерфейсов.
Приучить глаза и пальцы
Скевоморфизм был популярен в конце нулевых – начале 10-х годах нынешнего века, веху тренду задавала тогда – как не трудно догадаться – Apple. Их iOS должна была быть максимально простой и понятной даже пятилетнему ребёнку – и дизайнеры айфоновской операционки выбрали скевоморфизм – воплощение формы реальных объектов посредством не свойственных ему материй. Например, вполне можно назвать скевоморфической полимерную самоклейку с закосом под дерево, которые все бабушки мира используют для того, чтобы придать лоска старым предметам.
«Реальность — это просто проверка, как проверка в эксперименте. Если вы можете создать убедительную компьютерную картинку шелкового шарфа, падающего на деревянный стол, то вы сможете создать и убедительную картинку деревянного шарфа, падающего на шелковый стол», — Маргот Лавджой об экспериментах с реализмом от Lucasfilm, 1990-е («Цифровые течения искусства в электронную эпоху»).
По сути, Apple переизобрела скевоморфизм в цифре – всё для удобства пользователей. Самая первая мобильная операционная система, представленная Стивом Джобсом, была максимально скевоморфичной.
Ремарка для зануд: скевоморфизмом можно назвать всё, что угодно – даже калькулятор в последней версии Widows, насколько бы минималистичным не был, выглядит именно как старый добрый кнопочный калькулятор, а не как программируемая модель в MathCad. Так что можно сказать, что термин «скевоморфизм» я использую здесь исключительно в связке с «реализмом».
Причин тому масса: начиная от тезиса «всё, что реально – то понятно», заканчивая личной тягой Джобса ко всему реалистичному. Несколько фанатичной, стоит заметить. Яркий пример: рамка iCal имитировала кожаную обшивку кресел личного самолёта почившего CEO Apple.
Если последнее – просто забавный исторический факт, то первое требует некоторого пояснения. Реализм пришёл в пользовательские интерфейсы изначально, как императив. Командная строка выглядела приятно и понятно только для специалистов и гиков, а персональные компьютеры тем временем набирали тот функционал, которым начинали интересоваться простые люди, не сведущие в тонкостях программных кодов. Решение пришло само собой: пресловутые «корзины», «папки» и «лупы» – аналоги реальных концептов, реальных предметов, которые ввели в ассоциацию с программными процессами внутри чипов железных коробок. Забавно то, что это тоже изобретение Apple в рамках реализации проекта Macintosh.
Когда истоки творческой мысли Джобса обоснованы и понятны, то перейдём к конкретике: очевидно, что реалистичный скевоморфичный дизайн – это максимально комфортное решение для неискушённого пользователя. Если в MacOS к моменту появления iPhone реализм был не так популярен (искушённые пользователи таки появились): оставался, пожалуй, только общий «стеклянный» стиль, то iOS – на тот момент – вместилище всего скевоморфизма, который только можно было придумать (вплоть до звуков, имитирующих реальные объекты и механизмы). Это был тот самый «деревенский» и «колхозный» дизайн, который сделал iPhone самым продаваемым девайсом в мире: пользователей не интересовала лаконичность, их интересовало визуальное богатство и максимальная понятность интерфейса.
Возникает вопрос – если на тот переломный момент скевоморфизм – это манна небесная, то почему он не захватил обычные кнопочные телефоны? И ответ на него максимально техничен: на экране для таких выкрутасов просто не было места. iPhone же радовал пользователей полноэкранным бескнопочным интерфейсом, а специфика ёмкостного сенсора (для того, чтобы в него пальцем тыкать), подразумевала размеры областей касания от 44х44 пикселей. Это сделано для того, чтобы перекрывание подушечкой пальца было либо неполным – для основных иконок интерфейса, – либо чтобы не было случайного нажатия соседних кнопок или иных интерактивных элементов.
Apple получила возможность показывать в iphone меньше, но крупнее и богаче. Оттого и вырисовываются кресла Стива Джобса в цифровой профиль.
Скевоморфизм царил в iOS на протяжении шести лет. В Android он пробыл меньшее количество времени – как тренд, производители оболочек (да и сама Google) пытались его копировать, соответствовать моде, зачастую не особо задумываясь, для чего и как – лишь бы не хуже, чем у «яблока». Сложности на андроид состояли в том, что спецификаций устройств изначально было слишком много – разработчикам приходилось адаптировать интерфейс приложений под различные дисплеи и железо – это было сложно и затраты на эти сложности окупались не так хорошо, как хотелось бы. Поэтому следующий тренд первым делом пришёл на мобильный софт от Google.
Материализм в коме: плоскость рулит всем
Многое изменилось с тех пор, как пользователь познакомился с сенсорными интерфейсами в 2007 году. Произошёл, наверное, самый массивный и самый быстрый сдвиг в человеческом сознании с тех самых пор, когда homo habilis взяли в руку палку. Цифровые интерфейсы стали такой же частью реальности, как и любые бытовые предметы – и даже больше. Современный человек чаще видит интерфейс смартфона, чем собственное отражение в зеркале. Это важный момент: модель реальности стала реальностью сама по себе.
Так как скевоморфизм служил только для того, чтобы приучить пользователей к пониманию новых для него интерфейсов, довольно закономерным событием стал его отход на тот свет. Как только начинаешь интуитивно знать все значения всех иконок, реализм выглядит массивным, перегруженным мелкими элементами и странными цветовыми решениями, безвкусным.
«Всего 3 года прошло, а скевоморфизм в айфоне выглядит, словно попал в колхозили купил подделку». Пользователь Никита Горяинов, рассказывая об интерфейсе iphone 4 в 2016 году https://www.iphones.ru/iNotes/642804.
К этому подключается проблема вообще всего достаточно реалистичного отображения любых объектов – «зловещая долина». А точнее её аналог для неодушевлённых предметов: человеческое зрение устроено настолько тонко, что обмануть его, конечно, можно. Но чрезвычайно сложно. А если получится – то жди отвращения – как только происходит тактильный контакт, мозг понимает, что перед ним лежит подделка.
Тут стало понятно, что мы ждём упрощения – причём, непонятно в какую сторону. Ясно, что менее реалистичного, чем сабж. Но не ясно, в какую сторону – легко сделать интерфейс похожим на что-то и удобным. Также легко сделать его всратым и неудобным. А вот каким образом он станет ни на что непохожим, при этом шустрым и интуитивным?.. Для того, чтобы понять, какого верблюда ожидать, большие дяди из крупных компаний тратили миллионы долларов на «предсказания трендов в дизайне».
По большей части впустую: Microsoft, вероятно, сама не ожидала, что её палка выстрелит. А точнее – разноцветные плитки.
В 2012 году «Майкрософт» выпустила новую версию операционной системы Windows 8. В ней использовалось совершенно нетипичное для мелкомягких дизайнерское решение, частичный отход от доминанты в виде рабочего стола к системе меню Metro. И если функционально это вызывает нарекания у многих пользователей, мало кто сможет сказать, что визуально это – плохое дизайнерское решение.
Мне кажется нелепой причина появления Metro, которую приводят некоторые другие обозреватели – сделать не так, как у Apple. На тот период было очевидно, что от скевоморфизма и реализма уже вполне возможно отойти – и, что самое главное, выиграть и в производительности и (частично) в юзабилити. Это решение было одновременно и очевидным, и рисковым. Microsoft не могла выпустить свой основной продукт, рискуя чуть ли не банкротством, руководствуясь только мантрой: «не так, как у Apple».
Вспоминая, какой глючной была Win8, я по-своему вальяжно ткну пальцем в небо: скорее всего, усложнение дизайна планировалось и даже тестилось, но выдавало такое провисание в оптимизации, которого пользователь не видел со времён Vista. Нужно было выпускать продукт – и майки сделали это стильненько, скорректировав дизайн, но не трогая код.
И такой отчаянный минимализм внезапно зашёл. Он открывал море возможностей: зачем играть с формой, когда можно играть с движением? Зачем отрисовывать реалистичную ткань, когда качество экранов по восприятию приблизилось к настоящей, материальной бумаге? Бумага всегда стремилась к однотонному, ровному цвету, а издатели всегда стремились к приятным, читабельным шрифтам. В общем, плюсов много; минус один – можно заиграться и убрать вообще весь интерфейс к чертям, потеряв даже намёк на юзабилити.
Apple, со свойственным ей консерватизмом (особенно в те годы), отошла от скевоморфизма только через год после успеха Microsoft и через два года после смерти отца-основателя Джобса. Представленная осенью 2013 года iOS 7 заимела компромиссный минималистичный дизайн.
Во времена Джобса скевоморфизм в iOS воспринимался «на ура». Однако сейчас он выглядит никчёмно и безнадёжно устаревшим. Нам больше не нужны ассоциации с материальным миром в интерфейсе. Или не были нужны до недавних событий.
Второе пришествие
Мода во всём имеет циклический эволюционный характер – как длина юбки, которая то ползёт вниз, то поднимается до бёдер. Логично, что рано или поздно, реализм в какой-то мере просочится обратно в мир незашкварного дизайна. Также, логично это потому, что железо развивается скачкообразно – и от тех дизайнерских выкрутасов, которые есть сегодня, мы уже начинаем неиллюзорно скучать. Нужны новые средства выражения, которые радикальный майкрософтовский минимализм уже не может дать – и некоторые дизайнеры думают, что новое – это хорошо забытое старое.
Так, Майкл Фларуп, основатель студии Pixelresort, ещё в первом квартале 2018 года выкатил на Dribbble шот с редизайном таск-менеджера Opus One. Здесь он умеренно использовал скевоморфизм – и, на удивление сообщества, этот шот оказался хорош и зашёл большому количеству людей. Впрочем, сам Майкл не был этому удивлён.
«С появлением Material Design тень и градиент перестали быть чем-то непростительным. И сейчас я замечаю гораздо больше осязаемости в интерфейсах. Кнопки начали выделяться. Whimsy-дизайн стал отличительным признаком – не только в анимации и взаимодействии (где он использовался, пока везде царил минимализм), но и в визуальном дизайне», — Майкл Фларуп.
Известный дизайнер считает, что дизайнерский взгляд сейчас под тупым углом сфокусирован на функциональность, вариации же формы практически отсутствуют в UI, но пользуются той же популярностью в дизайне логотипов, компьютерных игр и прочих областях, где всё ещё выгодно выделяться. Однако, это изменится – одинаковые приложения будут навевать скуку и в дизайн вернётся нотка сумасбродного творчества.
Но это всё ещё обычный, намеренно скевоморфный дизайн, хоть и знатный камень в огород минимализма. Есть другой случай, о котором я уже упомянул в этой статье. Называется он «Неоморфизм».
Ранее этот минималистично-реалистичный стиль отображения пользовательских интерфейсов назывался «New skeuomorphism». В комментах «Дрибббла» его сократили до «Neomorpism», мы же любезно начали переводить его на великий и могучий как «Неоморфизм». Неклассическое во всех смыслах представление интерфейса банковского приложения от украинского дизайнера Alexander Plyuoto создало локальный тренд в дизайнерском сообществе.
По размерам хайпа неоморфизм действительно стоит рассматривать как новый тренд 2020 года в UI. Конечно, всё не так романтично, как представляется многим дизайнерам, которые активно сёрфят инстаграм и дрибббл в поисках свеженьких шотов. Неоморфизм функционально не универсальный стилевой инструмент. Но обо всём по порядку.
Как и предсказывал Майкл Фларуп, в обществе нарастает потребность перехода от безжизненных и бесчувственных воплощений форм к чему-то, что находится от этих форм на полпути к реализму. Словом: метамодерн, пацаны.
Та же Apple, как апологет дизайнерской моды, тоже показывает некоторые подвижки в эту сторону: Material Design потихоньку размазывается по iOS с каждым новым обновлением операционки.
В неоморфной репрезентации от Алекса отхождений от современного материального дизайна не настолько много на первый взгляд, особенно в дизайне кнопок, однако карты имеют очень приятный «софт-тач» эффект, который мистическим образом захватил сердечки многих.
Дело в том, что сейчас в UI материальность карточек подчёркивается по всем канонам скевоморфизма (особенно у Apple): они полностью отделены от фона и существуют как объёмный предмет, который «парит» над поверхностью. Неоморфные карты как бы «расположены за фоном», то есть, являются частью общего материала. Это любопытный консенсус: скевоморфизм здесь служит не для того, чтобы копировать реальный объект, а для того, чтобы дать мягкое ощущение объёма.
Тут есть один нюанс – фон не может быть полностью белым или полностью чёрным, иначе никакого «мягкого объёма» мы не добьёмся. В фоне должен быть оттенок: так, и «светлые» и «тёмные» тени будут видны.
В этой мягкости и совпадении цвета элемента с цветом фона намечается проблема контрастности, которую придётся решать, особенно если мы решим сделать неоморфные кнопки. Во-первых, неоморфная кнопка выделяется, но недостаточно для того, чтобы заставить пользователя лихорадочно на неё нажимать. Во-вторых, разница между исходным и нажатым состоянием такой кнопки будет минимальной.
С кодом тут всё просто. В CSS эффект «софт-тач» достигается крайне просто. С Swift и Kotlin возникнуть какой-то проблемы тоже не должно.
Пациент скорее жив, чем мёртв?
Пока дизайнеры сломя голову, испускают тонны слюней на неоморфизм, мы здесь отнесёмся к нему серьёзно и критично. Очевидно, что из-за проблем с контрастом, придётся танцевать с бубном вокруг кнопок, чтобы они стали удобоваримыми для пользователя. Если очень нужен софт-тач эффект – резон есть. Но для всего остального подходит никуда не уходившее правило (даже во времена скевоморфизма) – если ты можешь убрать из дизайна ненужную мишуру и не потерять ни в функциональности, ни в форме – делай это.
Неоморфные карточки выглядят сочно и приятно, да и этот элемент UI не настолько требователен к контрасту как кнопки. Однако наполнение карт тоже должно соответствовать общему ощущению: изображения и текст должны быть грамотно и «чисто» структурированы. Неоморфизм очень требователен к балансу наполнения формы.
Тёмная тема в неоморфизме вообще нереальна – мы не можем использовать чистый чёрный, а, если вспомнить, почему вообще тёмные темы хайпанули – OLED-матрицы – то и заикаться даже об энергосбережении не получится. Органические светодиоды будут работать в любом случае в любой точке интерфейса.
Неоморфизм подходит для арта любого типа: плоскость, 3D, изометрия и анимация. Но появляются стилистические ограничения: тот самый пресловутый софт-тач. Если вам нужно что-то более жёсткое и угловатое, тогда вам не к сабжу.
По итогу и получается, что неоморфизм – это сильно переоценённый на данный момент тренд. Сам по себе он слишком специфичен, чтобы заложить веху «нового дизайна», особенно в пользовательских интерфейсах, где функционал превалирует над формой. Однако использовать его частично – для передачи тех же карт или для придания низкоконтрастного выделения любым элементам UI – пожалуйста.
Как новый стилистический инструмент неоморфизм хорош, использовать его будут далеко не все. Тот же Material зачастую смотрится куда лучше. Но стоит отметить всё же неожиданно мощный пассаж скевоморфизма в сторону минимализма. Что будет дальше? Хрен его знает, но вряд ли внезапный и нежданный рывок из тёмного угла а-ля Microsoft Metro. Но неоморфным мир UI уж точно не станет.
