Новое в дизайне macOS Big Sur, или Почему Apple не возрождает скевоморфизм


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

Публикация: 14.05.2018 Kirill Lipovoy CloudMakers CloudMakersru

Дизайн взаимодействия — это искусство. Это искусство создания опыта, который поощряет человеческое взаимодействие и сопоставляет поведение с ожидаемыми результатами.

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

Приложение калькулятор в стиле скевоморфизм и в стиле flat:

Скевоморфизм калькулятор

Дашборд в стиле скевоморфизм:

Дашборд в стиле скевоморфизм

Для примера, можно рассмотреть повсеместно применение гамбургер-меню:

После мы наблюдали рассвет минимализма

Минимализм

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

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

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

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

А началось всё с пары джинс

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

Тем не менее он приобрёл несколько рулонов джинсовой ткани в довесок к обычным материалам и сел за работу. Удобные и просторные брюки он дополнил массой продуманных деталей, таких как небольшой карман спереди, в котором удобно было хранить часы на цепочке. Чтобы упрочнить брючную «конструкцию» Дэвис использовал медные заклёпки, которыми обычно крепил ремешки к попоне.

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

В 1873 году Дэвис вместе с партнёром запатентовали свой дизайнерский продукт под именем Levi Strauss & Co. Известная и по сей день марка производит 20 миллионов пар джинс каждый год, однако их дизайн мало изменился с того самого первого заказа для лесоруба.

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

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

Джинсы — идеальный пример концепции скевоморфизма.

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

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

Критики скеоморфизма утверждают, что дизайнеры создавали театральность вместо переживаний. Примером может служить приложение для чтения книг на iPad:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Возрождение

Сегодня все больше вещей переходят в цифровое пространство — от часов до автомобилей и бытовой техники. Интернет вещей (IoT) приносит скевоморфизм дизайн обратно в авангард.

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

Например, возьмем Apple Watch. Мы привыкли смотреть на часы и видеть время. Нас учат, как часы работают и как они выглядят — мы знаем, что секундная стрелка «тикает и тикает».

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

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

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

2011-2012: скевоморфизм на троне, зарождение флета

Годы становления, активного развития и вот, в 2011 году начинается практически единоличное царствование скевоморфизма. Иными словами – да здравствует реализм во всех его проявлениях! А именно в следующих трендах:

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

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

Стоит сказать, что дизайнеры очень долго уходили от реализма, считая именно этот стиль эталонным в оформлении виртуального пространства. Сколько было споров на тему «следовать-не следовать» модным течениям, оставаться при реализме или погружаться в минимализм – просто не счесть! Но прогресс ничем не остановить и отчетливые «звоночки» флета уже давали о себе знать в конце 2011, когда компании Microsoft и Twitter заставили всех обратить внимание на не столь характерный еще для того времени карточный дизайн. Простота, ставка на чистый цвет, читабельную типографику, минимальное количество линий, объектов, наличие воздушных пространств в композиции – все это не могло пройти незамеченным.

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

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

Неоморфизм: только карточки?

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

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

Ни в коем случае

Проблема здесь в самом деле серьезная.

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

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

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

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

Рейтинг
( 2 оценки, среднее 4.5 из 5 )
Понравилась статья? Поделиться с друзьями: