Flat

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


Приложение Pocket Lists до iOS 7 и после.

Но причина такого перехода вовсе не в моде и не в эстетике.

Одни дизайнеры ругают скевоморфизм как направление, приводя в пример некоторые неудачные и даже утрированные приложения вроде Find My Friends для iOS 6. Другие против плоского дизайна из-за его примитивности.

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

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

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

Причина №1: @2x

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

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

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

Причина №2: скорость разработки

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

Как массовая платформа iOS не сможет быстро развиваться, если не будет позволять разрабатывать новые приложения быстро и без чрезмерных затрат. Переход от скевоморфного дизайна к плоскому в iOS был необходим, так как иначе разработчики со временем начали бы проявлять больший интерес к конкурентных платформам (Android или Windows Phone) только потому, что для них разрабатывать быстрее и дешевле.

Плоский дизайн теперь навсегда?

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

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

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

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

UPD 10.2014: После адаптации Pocket Lists для iPhone 6 и iPhone 6 Plus иконку нужно было подготовить в 10 размерах. Представляете какого труда стоила бы попиксельная доводка каждой иконки в случае скевоморфизма?