Лого vc.ru

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

Мнение: 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 всё равно уже имеет и будет продолжать получать кредит доверия за то, что стал первой попыткой открыть основы дизайна для взаимодействия человек-устройство.

Теги

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

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

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

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

0

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

0

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

0

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

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

Прямой эфир
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления