Тренды в дизайне интерфейсов

Скевоморфизм Это физический орнамент, который скопирован с формы другого объекта, но изготовлен другими методами или с помощью других материалов. Не так уже и легко понять, да? Проще говоря скеворфизм это одно из направлений дизайна, которое преподносит цифровой материал таким же, как и его физический аналог. Еще один синоним скевоморфизма, это реализм. На заре развития дизайна и цифровых технологий, у гигантов как Apple, IBM, Microsoft была большая проблема – им нужно познакомить и сблизить устройство, интерфейс и человека. И ведь согласитесь, как объяснить человеку что значит эта кнопка, как не придать ей вид кнопки в реальной жизни.

Скевоморфизм … Это не очень звучное слово означает, что основные принципы дизайна ОС берутся из физического мира. Помните, как до iOS 7 выглядело приложение «Заметки» или iBooks? В последнем случае это был деревянный книжный шкаф с полками со стоявшими на нём (если, конечно, было что «ставить») книжками и прочими файлами в формате PDF. Вот это — и есть то, что называется «скевоморфизм».

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

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

После увольнения Джобса из Apple в 1985 году скевоморфизм практически исчез из продуктов Apple. Его проявления встречались разве что в CD-плеере компании (да-да, был и такой) и в нескольких опциональных темах для Mac OS 8 в 1997 году.

Вернувшись в компанию, в 1999 году Джобс снова вспомнил о своем любимом стиле. Поводом стал разрабатывавшийся тогда видеоплеер QuickTime. Работавший тогда над проектом инженер рассказывал BusinessInsider, что Джобс хотел сделать его по-настоящему классным. Все из предложенных вариантов дизайна Стив беспощадно отбраковывал:

«Нет, нет, нет, вы просто не понимаете!».

Однажды Стив пришел на встречу с дизайнерами, держа в руках вырванный из какого-то журнала лист бумаги. Это была реклама часов Breitling. От их дизайна Джобс пришел в восторг:

«Просто сделайте так, чтобы это выглядело так же, как тут».

Дизайнеры наконец-то поняли, чего от них хотел Джобс. Чуть позже они вернулись с новыми набросками, и на этот раз Стив всё одобрил. Вот как выглядел плеер QuickTime 4:

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

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

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

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

Правда, на практике ни разработчики, ни сама Apple особо не придерживались рекомендаций. В 2003 году блог «512 Pixels» опубликовал скриншот актуальной тогда версии Mac OS. Многовато «металла», не правда ли?

Скевоморфизм в продуктах Apple просуществовал очень долго — в iOS от него отказались только в 2013 году, в OS X — в 2014 году.

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

 

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

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

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

 

Прообразом для плоского дизайна стали три направления в искусстве: минимализм, баухаус^[3][4][5] и Международный типографический стиль (также известный, как швейцарский стиль). Последнее оказало наибольшее влияние на формирование плоского дизайна^[6].

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

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

METRO ПРОТИВ METRO

В 2012 ГОДУ КОМПАНИЯ MICROSOFT НАРВАЛАСЬ НА КОНФЛИКТ С НЕМЕЦКОЙ СЕТЬЮ СУПЕРМАРКЕТОВ METRO ЗА НАРУШЕНИЕ ТОРГОВОЙ МАРКИ, ЧТО ПРИВЕЛО К ТОМУ, ЧТО ЕЙ ПРИШЛОСЬ ОТКАЗАТЬСЯ ОТ НАЗВАНИЯ «METRO UI».

ОНИ НЕ ПРИДУМАЛИ НИЧЕГО ЛУЧШЕ, ЧЕМ НАЗВАТЬ ЭТО «ЯЗЫК ДИЗАЙНА MICROSOFT».

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

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

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

 

Несмотря на то, что интерфейсы и сайты с элементами плоскости и минимализма создавались ещё в 2000-е годы, массовую популярность они приобрели после того, как с 2010 года, Microsoft стала выпускать продукцию, выдержанную в плоском стиле, тем самым, противопоставляя свою дизайн-политику продукции Apple, выдержанной в стиле скевоморфизма. Однако ещё в 2006 году компанией Microsoft был выпущен MP3 Плеер Zune, который содержал в себе элементы плоского дизайна^[6]. В 2010 году Microsoft выпустила мобильную операционную систему Windows Phone 7 с использованием интерфейса, выдержанного в стиле плоского дизайна, где также доминируют яркие цвета. После коммерческого успеха, Microsoft выпускает новую операционную систему Windows 8 в стиле. Фактически с началом выпуска Windows Phone и Windows 8 начинается эра плоского дизайна.^[2]

В 2013 году компания Apple выпустила операционную систему iOS 7, дизайн которой также отказывается от скевоморфизма в пользу плоскости^[6], это приводит к ещё большей популяризации плоского дизайна и делает его новым преобладающим направлением в компьютерном дизайне^[2]. Вскоре после этого на плоский дизайн также перешли поисковик и приложения от Google, вместе с их операционной системой Android, вышедшей в интерфейсе Material Design.^[7]

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

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

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

Критики плоского дизайна утверждают, что он зашел слишком далеко. Отделение слоя тенями, анимированные элементы — вот что позволяет нам более интуитивно понимать элементы страницы. Для тех кто не знал, материал дизайн зародился в Google, и они сделали небольшую страницу в которой изложены правила материал дизайна. У этого стиля есть бесчисленные и уникальные особенности, но, возможно, одна из самых лучших особенностей — это использование оси Z. По сути, это добавляет немного скевоморфизма, что позволяет двум плоскостям будто «плавать» друг по другу. Он также является стандартом для приложений на Android. Должен ли он использоваться на iOS? Этот вопрос до сих пор является актуальной темой для обсуждений, хотя одни говорят, что данный стиль лучше оставить в тех рамках в которые он заключен сейчас. Ну, у каждого, как обычно, свое мнение относительно этого вопроса.

 

Material Design.
Представляет собой качественно новый визуальный язык, представленный компанией-флагманом Google. Он относительно очень молодой, так как в первый раз был представлен только в июне 2014 года, но произвел фурор в дизайн-сообществе моментально. Это и объяснимо, так как он способен систематически решать самые главные проблемы дизайнеров.
Главной целью разработчиков было создать многофункциональный визуальный язык, способный объединить классические принципы дизайна с техническими новинками. Другими словами — это единая среда, позволяющая унифицировать опыт взаимодействия без учета размеров используемого устройства и платформы.

Основные принципы Material Design

В разных источниках можно встретить разную «разбивку» на принципы, но вернее будет выделить 9 основных аспектов, способных четко охарактеризовать разработку:

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

Принцип №2: всегда интуитивно понятные поверхности. Это значит, что грани с плоскостями всегда обязаны точно передавать смыслы визуального характера. То есть ощущения появляются на подсознательном уровне, благодаря теням, границам.

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

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

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

Принцип №6: первоначальность действия. По факту, это самая суть Материал Дизайна, так как посредством действий пользователя меняется дизайн, чтобы облегчить все задачи относительно эксплуатации web-ресурса или приложения.

Принцип №7: пользователь неизменно инициатор всех происходящих изменений, совершая определенные действия. Все начинается с «общения» с интерфейсом.

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

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

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

 

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

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

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

Неоморфизм

Неоморфизм — это свежий (относительно skeuo/flat/material) тренд в дизайне, который по сути представляет из себя реинкарнацию похороненного скевоморфизма. Так как у этого стиля нет чётко задокументированных гайдлайнов, как например у material, его различные применения вызывают немало споров среди дизайнеров. Новый тренд назвали “неоморфизмом” от смешения слов “новый” и “скевоморфизм”.

Главным преимуществом такого стиля является «свежесть» (по крайней мере, пока что). Он дарит то самое ощущение новизны при взгляде на интерфейс и выделяет его на фоне остальных. Данный стиль также можно сочетать с другими, чтобы от макета не оставалось ощущения «спрессованного мягкого пластика».

В отличие от material карточек и кнопок, здесь каждый объёмный элемент не "парит" над поверхностью, а соприкасается с ней.

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

 

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

Такой эффект крайне ограничен и работает только на серых и светлых поверхностях.

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