Мнение: 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 комментариев
Будущее наступит во вторник на OneRetailConf
Сотрудник М.Видео: «Лучше не берите»

Или как М.Видео и Эльдорадо продаёт вам витринные образцы за полную цену.

8 правил для обучения Руководителей продаж

Автор : Кристина Суходольская специально для хлеб, вода и два процента

«Spotify: История продукта». Как мы разработали алгоритмы музыкальных рекомендаций

Из онлайн-библиотеки — в сервис персонализированных рекомендаций.

В МВД и Минтрансе разработали ПДД для электросамокатов и других средств индивидуальной мобильности Статьи редакции

Россияне смогут ездить на скорости до 25 км/ч при весе устройств не более 35 килограммов.

Дефицит цифровых кадров в России и их подготовка

Весь мир переходит в цифровую среду. Пока в ежегодном глобальном рейтинге конкурентоспособности Россия занимает 43-е место, но задерживаться на нем не намерена. Для этого правительство запустило программу «Цифровая экономика РФ», которая будет поддерживать цифровую экономику в стране и подготовку необходимых кадров.

Лекарство или яд: самые интересные исследования про алкоголь Статьи редакции

Материал издания Reminder.

Объявлены победители Finlanding
Onboarding как отражение продукта
«Российский рынок акций был и остаётся одним из самых привлекательных в мире»

Виталий Исаков, директор по инвестициям УК «Открытие» («Открытие Инвестиции»).

Может ли Тинькофф распоряжаться вашими ценными бумагами

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

null