Лого 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

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

0

"3D-самолет" — о, Великий Надмозг! Может быть,всё таки, "3D-план"?

В 90-х на экранах компьютеров появились цвета — дизайнеры, как дети, дорвавшиеся к игрушке, рисовали дикие кислотные интерфейсы. Потом появилась gif-анимация, стали играться с ней, где можно и где нельзя. К 2000-м цветов стало больше, разрешение экранов выше, появились градиенты, блики и сияние, дизайнеры стали рожать интерфейсы с выпуклыми, блестящими, прозрачными, сияющими элементами. Кто поспокойнее, стали рисовать скевоморфные интерфейсы.
И вот, на конец, через ещё 10 лет, цветовое и пространственное разрешение экранов подобралось к практическому максимуму. Играться уже особо не счем, новые игрушки закончились. И в дизайн пришла сдержанность. Дизайнеры интерфейсов "повзрослели" и вернулись к столпам графического дизайна, таким, как швейцарский типографский стиль, только добавив средства, помогающие визуально воспринимать интерактивность и иерархию элементов интерфейса. Это замечательно, я считаю.

А я скучаю по скевоморфизму...
Понятно, почему туда пошли Microsoft. Надо Windows Store чем-то наполнять, а команд с дизайнером намного меньше (дизайнеры любят Apple). Да и просто чтобы разработка была дешевле.
А вот зачем Apple зарезала одно из своих главных преимуществ - непонятно. После отказа от скевоморфизма они уже не настолько отличаются от Microsoft и Google в плане дизайна интерфейсов. Пропала "магия". Раньше я получал эстетическое удовольствие от происходящего на экране, а сейчас это просто инструмент.

0

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

0

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

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Актуальная Птица

у соседа на заборе тоже написано :)
исполнятся одни желания, появятся другие
а если желаний нет то вы уже почти святой.

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Kirill Nikolaev

Да тут та же самая проблема, как на фрилансе. Смотрим портфель, смотрим квалификацию.
Заплатили за шлак - пишем в ТП.

Bramio — поиск экспертов и решение задач с помощью видеозвонков
0
Kirill Nikolaev

Короче, вот:
1. Я зарегистрировался. Почему-то смутило, что в блоке "номер телефона", на вкладке "верификация" номер телефона отображался, как верифицированный. Хотя я его только лишь ввёл.
2. Ребята, пожалуйста, UX, UX, UX в личном кабинете.
3. А где работа-то? Одна заявка двухмесячной давности. Или я не вовремя зашёл?
4. Деньги через пейр. Только пейр. Вы серьёзно? В 2016м? А что не онли догекоины? Я честно создал второй акк, чтобы потестить, как происходит сам "процесс", но, к сожалению, после составления контакта баланс я так и не смог пополнить, хотя в пейре я всё-таки зарегистрировался (ну за что)
5. Опять же, классификаторы и рубрикаторы очень надо адекватные делать. Очень. Надо.

Резюмирую (очень субъективно):
Очень сыро, но задатки хорошие.
Самая боль - это ux и биллинг. Я понимаю, что вы можете заставлять пройти 9 кругов ада, чтобы вывести деньги. Но дайте мне, чёрт возьми, возможность их туда завести так, как мне удобно.

Bramio — поиск экспертов и решение задач с помощью видеозвонков
0
Andre Vlasov

Эцсамое. Во первых Amy Tunick это женщина, а во вторых ник fuck Jerry - это не "переспать с Джерри", а "ну его Джерри ***** (на половой член)". Причём там Под Джерри имеется в виду комик Джерри Сайнфелд. Ну и ещё, beigeCardigan это вроде его девушка. А в остальном все верно. Спасибо, пожалуйста.

«Брендам должно быть комфортно»: как американский блогер под псевдонимом FuckJerry завоевал популярность рекламодателей
0
Слава Діонісьєв

К роскомдозору стоит очередь

Роскомнадзор заявил об отсутствии претензий к Netflix из-за «непопулярности сервиса» в России
0
Показать еще