[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Philipp Kontsarenko", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\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","ios_7","ux","\u043f\u043b\u043e\u0441\u043a\u0438\u0439_\u0434\u0438\u0437\u0430\u0439\u043d","material_design"], "comments": 12, "likes": 16, "favorites": 20, "is_advertisement": false, "section_name": "default", "id": "9106" }
Philipp Kontsarenko
7 877

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

#Интерфейсы #мобильные_приложения #ios_7 #UX #плоский_дизайн #интерфейсы #Material_Design

Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления