Мнение: Material Design — лучшая попытка унифицировать дизайн Статьи редакции

Дизайнер Даниэль Холлик в своём блоге на Medium опубликовал заметку о том, почему представленная Google концепция Material Design является лучшей унификацией теории дизайна.

Digital-агентство Red Collar подготовило для рубрики «Интерфейсы» перевод статьи.

В 2013 году Apple выпустила iOS 7, и мир влюбился во flat-дизайн. Apple, конечно, не изобрела flat-дизайн (на самом деле, Microsoft боролась за flat задолго до Apple), но они принесли его в массы. И они отлично справились с этим.

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

Всё начинается со страсти

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

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

Apple медленно, но верно приближал смерть скевоморфичного дизайна. А мы тащили его труп по улицам интернета. Дизайнеры и креативные директора выстраивались в очередь, чтобы оплевать его останки. Они скандировали: «Смерть градиенту! Размоем фоновые изображения!»

Дальше идёт практика

Теперь все проекты, которые проходили через меня, я делал плоскими. Я их «притаптывал» до тех пор, пока не останется только заливка и обрисовка. У Apple всё смотрится просто, и у меня заняло несколько месяцев, чтобы отточить свои навыки в работе с flat и при этом чувствовать себя комфортно. Когда выметаешь всё лишнее, получается больший фокус на расположении и пропорции.

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

Наконец о реализации

Как только вся пыль уселась, многие дизайнеры огляделись вокруг опустошённой пост-скевоморфичной местности, ими же созданной, и задались вопросом: «Куда же двигаться дальше? Как все наши работы будут улучшаться или развиваться, основываясь на принципах flat?» И ответ таков: «Не будут».

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

Весь процесс напомнил мне о том, как я учился пользоваться Photoshop. Я покрывал каждое изображение эффектами и фильтрами. Я уменьшал насыщенность абсолютно у всего. Я спрашивал себя: «Нужны ли этой картинке блики?». Потом отвечал: «Ещё бы». «Сколько?» — «Целая сотня, чёрт возьми!»

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

Встречайте Material Design

Google выпустили Material Design на Android L на их конференции 2014 I/O, и что стало сразу очевидно – в этот проект они вложили свою душу. Это был не просто язык дизайна. Это был регулирующий набор принципов, который управлял дизайном и интеракциями.

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

Я предчувствую ваши вопросы: «Так что же интересного в Material Design? Что не даёт ему быть временной новинкой?» Что ж, всё просто.

Пространство — время

Material Design одновременно работает и с пространством, и с временем, как с элементами дизайна.

Пространство

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

Вместо этого он обеспечивает нас набором правил, которые управляют пространством, в котором могут находиться элементы. Material Design представляет себе экран, как 3D-самолёт, который отражает физический мир. Этот экран напоминает бумагу — что-то настолько тактильное и знакомое, что я готов поспорить, вы прямо сейчас можете представить лист бумаги у вас в руках.

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

Отведение элементам их собственного места создаёт глубину и тактильность.

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

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

Время

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

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

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

В этот момент вы думаете: «Ладно, круто. Я просто добавлю везде анимацию». Но всё не так просто. Анимация должна казаться настоящей. Она должна появляться и служить реальным силам, прямо как объекты в реальном мире.

Material Design использует асимметричное время в работе с устройствами для имитации массы и веса — как на этой анимации. Material Design не просто использует анимацию, он ставит её во главу угла. Анимацию нельзя назвать «приятным дополнением» — напротив, Material Design способствует осмысленным анимациям. И это идёт на пользу юзабилити.

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

И что

Уже слышу ваше недоумение: «И что?». Что мешает Material Design быть временной новинкой, как любой другой знакомый нам тренд в дизайне?»

Что ж, визуальные компоненты, которые содержатся и характеризуют Material Design, могут раствориться в хрониках дизайн-трендов. Глубокие цвета и характерная кнопка действия (floating action button) определённо будут жить долго.

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

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

{ "author_name": "Филипп Концаренко", "author_type": "editor", "tags": ["\u043f\u043b\u043e\u0441\u043a\u0438\u0439_\u0434\u0438\u0437\u0430\u0439\u043d","\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435_\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","ux","material_design","ios_7"], "comments": 9, "likes": 17, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 9106, "is_wide": true, "is_ugc": false, "date": "Mon, 06 Jul 2015 18:25:29 +0300", "is_special": false }
0
9 комментариев
Популярные
По порядку
Написать комментарий...

Комментарий удален

Комментарий удален

Флешеры, которые анимировали плоские векторные обекты последние 15 лет, сейчас смотрят на все это и улыбаются.

4

Все круто, но жить этому недолго. Одним словом - мода

3

Словоблудие какое-то.

3

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

1

Не знаю как вы, но мне все понятно. Я даже весь свой проект сделал в material

2

Комментарий удален

А есть что-то практичное почитать по этой теме для чайников? В гугле в картинках не понятно, тут какие-то ритуальные песнопения...

0

Гайд читайте - если непонятно .. то непонятно зачем оно вам.

2

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

0

Дизайн всегда развивается. Согласен с автором в том, что это достойная попытка привести UX в некий свод человекопонятных рекомендаций.

0
Читать все 9 комментариев
В даркнете выставили на продажу базу данных водителей Москвы и Московской области из 50 млн строк — «Ъ» Статьи редакции

В базе есть данные с 2006 по 2019 год, бонус при покупке — файл с информацией от 2020 года.

#20вопросов Ивану Юнину, директору проекта "Транспортные инновации Москвы"

Транспортная отрасль сегодня претерпевает колоссальные изменения, во многом благодаря инновациям. Стартапы с технологиями на базе AI для транспортной сферы востребованы как никогда. Согласно отчету Deloitte "Transporattion Trends 2020" глобальный рынок AI для транспортной отрасли к 2023 году может достигнуть 3,5 млрд долларов США.

Кейс: как мы за 45 дней заработали 1,5 млн. рублей для центра медицинского онлайн-образования

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

Цифровая трансформация банков: что это такое?
Автор: Ксения Борбачева
заместитель генерального лиректора Агентства инноваций Москвы
Бизнес-филантропия и благотворительность. Почему это не затраты, а вложения? Рассказываем на примере CloudPayments

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

«Яндекс.Маркет»: в моем заказе вместо наушников оказалась бутылка водки

Я давно хотела беспроводные наушники и наконец заказала себе Apple AirPods. Оформила заказ 15.10.2021 через Яндекс.Маркет в магазине Superbia.ru

«Модульбанк» запустил льготные кредиты для продавцов на маркетплейсах

Предприниматели могут получить до 10 млн рублей.

Dylan Gillis
«Опора России» предложила штрафовать маркетплейсы за дискриминацию товаров и продавцов Статьи редакции

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

Исследование: сотрудники хотели бы иметь комнату отдыха, бесплатный сок, а работодатели уже готовы покупать ЗОЖ-снеки

Онлайн-сервис доставки продуктов и товаров СберМаркет и исследовательское агентство Research Me спросили сотрудников, как они хотели бы питаться в офисе и что в нем видеть. В опросе приняли участие более 1500 работающих людей по всей России. Сервис также спросил работодателей – В2В-клиентов СберМаркета: что они покупают в офис, что точно никогда…

НДФЛ, льготы и поправки. Что нового в бухгалтерии и налогах в 2021 году

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

Акции Facebook, Twitter и других зарабатывающих на интернет-рекламе компаний упали на 2-6% после отчётности Snap Статьи редакции

Snap отчиталась о выручке ниже прогнозов аналитиков из-за изменения условий конфиденциальности в iOS 15.

null