Google Material Design – возможный облик новой эпохи. Что такое материальный дизайн (Material Design)
Что будет, если детство человека пройдёт под фильмы, где поумневшие компьютеры неминуемо убивают всё человечество, а чуть повзрослев, этот же самый человек будет читать о АНБ и прочих злодеях, которые круглосуточно читают его SMS и отправляют их в США? Он будет опасаться Google.
Не так давно Корпорация Добра показала миру своё видение пользовательских интерфейсов будущего. Material Design - единая концепция построения логики работы и внешнего вида сервисов и приложений, унифицирующая все продукты Google с целью их максимально лёгкого и интуитивного восприятия пользователями.
Идея настолько масштабна, что преобразит не только внешний вид всех продуктов Google. С приходом новой концепции изменится роль самой компании в жизни людей.
Чем станет Google?
Да, пока что Google - это просто куча сервисов. Однако с «материальным» дизайном компания фактически создаёт вторую реальность внутри наших компьютеров и мобильных устройств. Со своей логикой, со своими правилами и законами, со своей физикой.
Когда вы создаёте физические вещи, вы опираетесь на тысячелетний человеческий опыт. Но дизайн программного обеспечения только зарождается. Мы посмотрели на всё наше программное обеспечение и спросили себя, из чего оно сделано? Джон Вайли, главный по дизайну поиска Google
Чем сейчас являются сервисы Google для людей? Это строка поиска, которая живёт в браузере? Или это ваше мобильное Android-устройство?
Google можно дать множество определений, и многие из них будут верны. Эта компания создала систему сервисов, ставших фундаментом нашей цифровой инфраструктуры.
Но в ближайшем будущем Google перестанет восприниматься просто как Chrome или Android.
Отдельные сервисы и продукты Google эволюционируют в единый информационный канал, где актуальные для человека данные просто появляются на нужном экране в правильное время.
Когда вы смотрите на часы, стоя на ж/д станции, вы видите на экране время прибытия следующего вашего поезда. Однако эти же часы сообщат вам о важном письме от руководства, если вы посмотрите на них на работе. Эти часы заменят вам пароль для входа в свою учётную запись на компьютере, экран которого тут же отобразит тело того важного письма от шефа. Нужно срочно отойти, и нет времени добить текст ответа? Нет проблем, ведь на вашем смартфоне или планшете уже открылся интерфейс почты с недопечатанным текстом, и даже курсор стоит в том месте, где вы остановились.
Рабочий день окончен, и вы едете домой. Те же самые экраны теперь выполняют совершенно иные функции. Они напомнят вам про то, чтобы забрать детей, купить продукты к ужину и оповестят о выходе новой серии любимого сериала.
Такое немыслимое многообразие функций и выполняемых задач будет работать в единой интуитивно понятной пользователю цифровой среде, постепенно сливающейся с реальным миром.
Одна из ключевых идей Material Design заключается в создании у пользователя интуитивного ощущения работы с реальными физическими объектами в рамках цифровой среды. По сути, это эмуляция трёхмерного пространства на плоскости экрана, но со всеми преимуществами, которые может дать виртуальная среда. Похожие на картонные карточки кнопки и окна здесь умеют увеличиваться и уменьшаться, распадаться на части и перестраиваться.
Самым впечатляющим в этой концепции является то, что свойства и поведение объектов на экране будут так же предсказуемы и понятны человеку, как и любое простое событие в физическом мире. В отличие от существующих интерфейсов, где нажатие кнопки не приводит к каким-то изменениям на остальной части экрана, любое действие в Android L вызывает соответствующий эффект, затрагивающий весь интерфейс. Тапните на конкретный день в календаре, и он увеличится, расталкивая своим растущим объёмом и массой остальные дни. Нажмите кнопку воспроизведения в плеере, и она, как фантик, развернётся в панель управления.
Такая концепция является результатом тщательного изучения компанией того, как происходит работа с бумагой в реальности. Команда, работающая над проектом, создала физические иконки приложений из настоящей бумаги. Они хотели увидеть, как свет и тень могут взаимодействовать с плоским (как экран), но реальным материалом.
Виртуальная среда, в свою очередь, позволяет нарушать правила. Вряд ли кто-то видел разделяющуюся на части бумагу, куски которой перестраиваются и снова сливаются в единый объект. Это даёт дополнительные возможности, но появляется риск создать слишком нереалистичную систему, чересчур далёкую от физических законов. Для того, чтобы сохранить естественную интуитивность, в процессе разработки была выброшена вся типографика, изображения и цвета. Команда сосредоточилась исключительно на работе чудо-бумаги.
Не нужно быть дизайнером, чтобы заметить нарушение правила из реального мира. Бумага падает на стол, как кусок камня? Очевидно, здесь что-то не так, и это будет понятно любому.
Опираясь на такие очевидные и понятные каждому законы, команда Google решила использовать реальный мир в качестве основы для своих концептов.
При наличии достаточно чёткой системы правил становится возможным добавлять новые материалы. Бумага была очевидным выбором из-за простоты её отображения на экране. Без выраженной текстуры, практически без объёма. Но попробуйте представить себе, например, ткань или жидкости.
В голову тут же приходит философия скевоморфизма, которую активно использовала Apple и в итоге отказалась от неё, не правда ли? Подход Apple также был направлен на то, чтобы сделать цифровой мир понятнее для пользователя, но по сравнению с решением Google он выглядит довольно поверхностным. Скевоморфизм от Apple лишь намекал на сходство приложения с его реальным аналогом.
Google хочет не просто провести какие-то аналогии для лучшего восприятия. Их цель - объяснить пользователям, что происходит, когда тот или иной элемент интерфейса появляется или исчезает с экрана.
Material Design - это не просто попытка создать одинаково спроектированные сервисы для различных устройств. Google создаёт параллельный мир, каждая частичка которого является фрагментом чего-то материального. Когда вы получаете сообщение на свои умные часы со смартфона, то видите не просто мёртвый кусок текста. Это кусочек картона, на котором находится послание, и это послание пришло со смартфона на ваше запястье.
Взаимодействие с цифровым миром возможно совершенно разными способами. Это может быть что-то круглое на нашем запястье или что-то прямоугольное в нашей руке. Material Design же нацелен на то, чтобы гарантированно предоставлять доступ к нужным и актуальным данным независимо от комбинации используемых человеком устройств.
Именно так, без навязывания и давления, компания просто создаёт технологии, опираясь на ключевой принцип «сосредоточьтесь на пользователе, и всё остальное придёт само».
Нам интересно ваше мнение. Считаете ли вы подобную концепцию злом или воспринимаете такие инициативы как перспективный способ взаимодействия с информационной средой в будущем?
На конференции для разработчиков Google I/O 2018, кроме обновленного Android и более глубокой интеграции искусственного интеллекта в свои сервисы, компания Google представила новый стандарт в дизайне системы и мобильных приложений - Material Design 2.0. Что нового?
Белое пространство и полупрозрачность
Одним из самых заметных изменений в новом материальном дизайне является минимальное количество насыщенных цветов и серых подложек, только сплошное белое пространство и полупрозрачность. На мой взгляд это смотрится очень свежо, тем самым выводит операционную систему и софт на новый уровень визуального восприятия. Отныне стоковый Android P, без графических надстроек от сторонних производителей, я по праву считаю самым красивым решением среди интерфейсов. ИМХО.Новые инструменты для разработчиков:
Material Theme
Плагин Material Theme для Sketch, представляет собой по сути библиотеку шрифтов, иконок и фирменных цветов предусмотренных новыми гайдлайнам Google в Android P. Также при разработке с его помощью вы в пару кликов можете отредактировать форму компонентов и типографику в вашем проекте.
Больше скруглений и минимализма
Как многие отметили, внешний вид стал очень схож с Apple iOS 10 и 11, но определенно такой шаг был предпринят компанией специально для производителей и владельцев безрамочных смартфонов, количество которых с каждым годом неумолимо становится все больше, ведь такой внешний вид системы и софта куда лучше сочетается с их закругленными дисплеями.
Новые шрифты
В новом оформлении логотипов и фирменных сервисов разработчики и дизайнеры Google использовали шрифтовую гарнитуру Product Sans. Для них создано специальное ответвление Google Sans. Оно базируется на вышеупомянутом шрифте, пришедшему на смену стандартному Roboto.
Так что в скором времени мы можем ждать масштабный редизайн всех веб и мобильных сервисов Google. На данный момент в магазине приложений одними их таких первенцев являются Google Play Игры, Google Tasks и приложение для участников конференции Google I/O 2018.
- Обновленный стиль фирменных иллюстраций
- Использование четырех основных цветов логотипа в качестве визуального языка
Пример, новая версия Gmail:
Концепты Material Design 2.0
Само собой сообщество дизайнеров отреагировало на предстоящие перемены в дизайне от Google, и ровно месяц назад пользователь Reddit под ником Morphicsn0w представил свое видение площадки Google Play.
Кроме визуальных изменений в виде закругленных карточек презентующих приложения, автор отказался от ненужных, на его взгляд, разделов вроде недавно загруженных приложений, сделав тем самым интерфейс магазина более простым и информативным.
На экранах с описанием приложений Morphicsn0w сфокусировал внимание на описании приложений, сместив акцент с информации о количестве загрузок и оценках пользователей.
Также дизайнер переработал систему поиска в Google Play, добавив сортировку найденных результатов по цене, дате обновления, рейтингу и количеству загрузок. Наличие такой сортировки, значительно упростило бы поиск нужного софта на просторах магазина, жду и надеюсь на реализацию таковой от Google.
Не обошли стороной и любимый многими YouTube, автор портала 9to5Google, а по совместительству неплохой дизайнер Алекс Брукс (Alex Brooks) пофантазировал над тем, что можно было бы изменить в существующем клиенте видеохостинга. Реузльтат лично меня очень и очень воодушевил.
Первое, что переделал Алекс, это навигационную панель главного экрана, окрасив её в яркие, жизнерадостные цвета. Вслед за первым пунктом идет переработанная поисковая строка, теперь она вынесена не отдельной кнопкой, а занимает всю полезную площадь верхней части приложения, тем самым упрощая доступ к ней. А плашка с количеством подписчиков, кнопкой оформления подписки на канал и возврата на предыдущий уровень в представлении автора располагается снизу, что тоже является полезным с точки зрения удобства использования решением.
Раздел библиотеки (история просмотренных видео, управление загруженными роликами, понравившиеся видео и т.д.) дизайнер совместил с разделом настроек пользовательского профиля, теперь доступ к обоим параметрам можно получить по нажатию на юзерпик. По моему мнению это хоть и спорное, но все же в некоторой степени правильное решение, так как оно упрощает взаимодействие пользователя с сервисом и делает приложение более понятным для новых пользователей, которые только знакомятся с миром мобильных технологий.
Более подробную информацию про концепт YouTube от Алекса читайте в оригинальной статье .
Концепт Google Play Music в Material Design 2.0
Вдохновившись презентацией и десятками работ других дизайнеров, я решил попробовать и сделать что-то свое, взяв за основу один из нынешних сервисов Google, мой выбор пал на Play Music. Ранее с этим сервисом, именно как со стриминговой платформой я никогда не работал, но по долгу службы пришлось. Впечатления сервис вызвал исключительно положительные хотя бы потому, что само приложение работает адекватно и не вылетает, в отличие от Apple Music, которым я пользуюсь с самого момента его релиза на Android.
В целом, сервисы похожи, и оба выполняют свою первостепенную задачу - воспроизведение музыки. И к обоим есть претензии по части интерфейса, но так как сегодня мы говорим о Google, то и рассматривать соответственно будем их сервис.
Главный экран
Первая претензия к главному экрану – мне не нравится что такое огромное пространство, занято исключительно поисковой строкой и обложками плейлистов с подборками. Собственно, в первую очередь я и решил это исправить.
В моем концепте главный экран представляет собой всю ту же, но немного переосмысленную ленту с подборками альбомов, песен, плейлистов на основе вкусов пользователя, только теперь чтобы посмотреть содержимое и перейти к воспроизведению нужного трека, вам не надо делать лишний клик и покидать главный экран, это же касается перехода между разделами (главная, недавние, хит-парад и т.д), которое теперь можно осуществить с помощью свайпов по экрану.
Плеер
Второй неудачный в оформлении, на мой взгляд пункт - это плеер. В официальном приложении Google Play Music обложки песен растягиваются по всей диагонали экрана смартфона, из-за чего на устройствах с высоким разрешением дисплея они выглядят очень неаккуратно и размазано, решение проблемы я представил так:
Теперь обложки аккуратно располагаются по середине, а по левому и правому краю показывается превью предыдущего и следующего трека, как бы намекая на возможность переключения их свайпом.
Медиатека
Третье, что мне не нравится в Play Music - это расположение и убранство медиатеки. На мой взгляд её устройство слишком сложное. Например, чтобы получить доступ к данному разделу с главного экрана, требуется совершить целых четыре действия: сделать свайп, чтобы вызвать боковое меню; клик для выбора раздела «Фонотека»; свайпнуть по списку чтобы выбрать требуемую вкладку (плейлисты, радиостанции, исполнители, альбомы).
Поэтому я переместил кнопку с доступом к добавленным трекам в нижний док, а при его открытии по умолчанию будет выставлена вкладка альбомов с возможность их сортировки по дате релиза, добавления и алфавиту.
Меню/Side Bar
В соответствии с новыми принципами дизайна приложений Google, привычное меню с доступом к настройкам я переместил в верхний правый угол.
Презентация концепта Google Play Music на Behance
Заключение
Подводя итоги, хочу сказать то, что меня очень радует путь по которому старается идти Google. Кроме серьезного скачка в развитии и удобстве своих сервисов компания двигает вперед дизайн-код. Писав полгода назад статью про опыт использования iOS 6 в 2018 году, я поймал себя на мысли, что на протяжении многих лет мобильные операционные системы Android и iOS в плане визуального и концептуального исполнения интерфейса не особо эволюционировали, но теперь же я полностью разубедился в своей позиции, по крайней мере в отношении к Android.
Спасибо за внимание!
Стиль Material design (материал дизайн в русской версии), набрав безумную популярность, остаётся для большинства непонятным и неизведанным объектом. Мы с вами разберёмся на простых и понятных примерах, что такое material design и как его использовать.
Изначально дизайнеры Google ставили перед собой три глобальные задачи:
- Создать не просто новый стиль, а целую систему оформления, в которой принципы и правила будут четко прописаны;
- Обновить существующие стили (FLAT/Metro, минимализм и другие), опираясь на новые технологии.
Откуда взялся Материал Дизайн: статистика мобильного интернета
Небольшой экран мобильного телефона предъявляет гораздо более высокие требования к usability, заставляя разработчиков тщательно продумывать всю механику работы приложения или адаптивного сайта. Новый стиль Google был создан в том числе для того, чтобы объединить «мобильные» и «десктопные» сайты, придумав для них единую концепцию.
«Материал» в дизайне: что это?
Основой стиля стало понятие материала. Это основной «строительный элемент», из которого собираются функциональные блоки дизайна. Кратко его можно описать так:
- Его должно хотеться пощупать;
- Он интерактивен, и на экране монитора ведёт себя так же, как вел бы себя какой-то физический объект в жизни;
- Он похож на бумагу;
- Он создаёт тени, изгибается, движется как настоящий.
Пример наложения слоёв "цифровой бумаги"
Эти условия вполне понятны: вы, наверное, замечали – и не раз – что чаще хочется кликнуть на «вкусную», объемную кнопку, которая ведет себя как настоящая при нажатии. Поскольку экран компьютера передает только визуальные образы, люди с другой системой восприятия (аудиалы и кинестеты) оказываются обделёнными и не получают тех ощущений, к которым привыкли. Дизайнеру остается только симулировать: сделать кнопку такой, чтобы этот образ вызвал в воображении посетителя чувство, как будто он эту кнопку трогает и чувствует её шероховатости, углы, объём. Это важно для кинестетов, например, - это люди, которые особо восприимчивы к тактильным ощущениям.
Конечно, такие свойства использовались в дизайне и раньше: например, в стиле Веб 2.0 были популярны большие глянцевые кнопки с бликами. Но в материал дизайне свойства четко прописаны. В частности, все элементы имеют одинаковую «толщину»: вебдванольных кнопок, выделяющихся на фоне остальных блоков страницы, больше нет.
Кнопка в стиле material дизайна и кнопка Web 2.0
Кроме того, по правилам, которые придумали дизайнеры Google для материал дизайна, отдельные элементы «лежат» вплотную друг на друге, а не висят в воздухе. Вследствие этого тени всегда небольшие и имеют четкие контуры (вместо теней от близкого рассеянного света, например).
Другое важное отличие нового стиля – это его динамичность. Причина здесь опять в мобильных телефонах и планшетах: ограниченный размер экрана не позволяет разместить всю нужную информацию и элементы управления на виду, и пользователю приходится много двигать, скроллить и кликать. В Google для material дизайна предусмотрели четкие схемы: любое движение имеет свой смысл – это или выдвигающееся меню, или элемент, удаляемый скользящим движением пальца и так далее.
Ошибки и заблуждения
Первое. Чтобы получился материал дизайн, достаточно все элементы и бекграунды на сайте заменить на текстуры. Нет! Если вы так сделаете, то получится грязный и некрасивый сайт, который не дотянет даже до вебдванольных.
Второе. Материалы в дизайне нужно использовать реалистичные. Не обязательно! Важно, чтобы они вели себя, как настоящие. Неважно, будет это реальная текстура дерева или «синтетическая» текстура, созданная в фотошопе с помощью инструмента Noise.
Третье. Материал и его интерактив – это единственное, что отличает этот стиль. Нет! Чтобы получился «канонический» material design, как у Google, нужно соблюдать и другие принципы:
- Картинки оформляются без промежутков, край к краю;
- Крупные, хорошо читаемые шрифты без засечек;
- Цветовое кодирование;
- Иконки, выполненные по тем же принципам материал дизайна;
- Адаптивная вёрстка.
Полный список правил можно узнать в официальном разделе Google про material design.
Android material design
В применении общих правил к мобильным приложениям есть и свои особенности. Помните, мы говорили про тени? Изначально элементы material design для Android действительно лежат друг на друге, как листки бумаги. Но при взаимодействии каждый элемент, будь то диалоговое окно или кнопка навигации, поднимается вверх. Это способ, с помощью которого в этом стиле выделяются активные блоки. Здесь используется тот же принцип, который со времен Web 2.0 заложен в технологию всплывающих окон (popup-ов).
Теперь "послойный принцип перешел от попапов ко всему интерфейсу
Интересно, что разработчики материал дизайна в Гугле даже прописали чётко все параметры для каждого из возможных элементов интерфейса!
Цвета в материал дизайне
Подход к цветовой гамме напоминает FLAT-style. Это достаточно яркие, сочные, природные цвета. Material design подразумевает использование трёх основных типов цветов:
- Главный цвет, который преобладает во всех экранах интерфейса;
- Дополнительный цвет, который обычно обозначает блоки, связанные с основным контентом, поясняющие или дополняющие его. Часто это просто более светлый или темный оттенок главного цвета.
- Акцидентный цвет, который служит для выделения кнопок, конверсионных элементов и прочих важных вещей.
Цвета material design: палитра Google
Главное правило компании Google — тщательно следить за потребностями пользователя и, исходя из них, корректировать свой дизайн (и не только его). Такой тренд как Material Design позволяет совершенствовать UX, вызывая желание возвращаться к ресурсу снова и снова. И одним из его ключевых элементов является возможность беспрепятственного взаимодействия различных функций на одной платформе.
Material Design вытекает из идеи свободного перемещения в нужном пользователю направлении и базируется на тактильной реальности. Первоначально его разработчики вдохновлялись обычными чернилами и бумагой, но с тех пор он, конечно, далеко ушел от этой фундаментальной особенности, приобретая черты настоящего волшебства. Иными словами, совершенствуя визуально-функциональную часть, специалисты Google объединили принципы хорошего дизайна с инновациями и возможностями новых технологий.
В чем же особенности Material Design? Поверхности и края элементов в данном направлении дизайна сочетают визуальные образы и сигналы, создавая подсказки, помогающие пользователю интуитивно ориентироваться на сайте (как если бы все это происходило в реальном мире).
Кроме того, Material Design использует принципы полиграфического дизайна для эффектной расстановки акцентов (то есть фокусировки внимания на нужном элементе), упрощения навигации в интерфейсе, интуитивной передачи смысла его элементов. Для Material Design характерны насыщенные, ровные цвета, резкие, очерченные края, крупная типографика и немалые отступы между элементами. В совокупности эти элементы не просто складываются в приятную для глаз картинку, а создают новую реальность с концептуальным смыслом и множеством функций, которые дарят пользователю уникальный UX.
В случае с этим видом дизайна действия пользователя находятся в центре внимания. Все взаимодействия происходят в одном окружении, интерактивные объекты без прерывания последовательности переходят из одной среду в другую.
Material Design — это история о функциональности, к которой стремится каждый элемент. Согласно этому принципу, важно сосредоточиться на основных точках внимания пользователя, чтобы направить его в нужном направлении.
Material Design — это история об интерактивности. Страница отзывается на любое малейшее движение пользователя, при этом каждый переход должен быть плавным, как будто вы плывете в лодке по спокойной реке и знаете, куда и зачем вам поворачивать. Поэтому Material Design — это еще и история об осознанности: помимо того, что каждое действие приятно (и легко) выполнять, пользователь должен ясно и четко понимать, что и зачем он делает и куда его приведет очередное прикосновение. Таким образом, обратная связь должна быть ясной, доступной и легко распознаваемой.
Как уже было сказано, структура интерфейса позаимствовала множество «фишек» полиграфического дизайна, однако все они применяются не в первоначальном, а усовершенствованном виде. Material Design добавляет к этим «фишкам» неограниченные возможности масштабирования и изменения размеров страницы, которые позволяют адаптировать дизайн для любого устройства, например, планшета или смартфона. Все эти возможности дарят ощущение максимального комфорта при работе с навигацией и всем интерфейсом (так как неограниченные возможности подчиняются принципам простоты) и вызывают чувство доверия.
Главный вопрос, на который стоит ответить дизайнеру перед разработкой — что именно пользователь будет (или захочет) делать при работе с приложением? Как только вы сформулировали ответ, можно начинать воплощение идей Material Design.
При создании приложения помните, что контент здесь не менее важен, чем его визуальное оформление. Он не должен вводить пользователя в ступор, а наоборот, должен создавать ощущение комфорта и четкое понимание, зачем он здесь и что он будет сейчас делать.
Тестируйте разные варианты расположения элементов, к примеру, панель инструментов (toolbar) может располагаться в верхней части экрана и таким образом решать все навигационные задачи, упрощая переключение между различными вкладками и поиск.
Помните о принципах функциональности и старайтесь направлять пользователя, не «бросайте» его на первой же странице. Такой подход окажется более выигрышным: вы сможете заострить внимание посетителя на важных аспектах продукта/услуги, который вы предоставляете. Задумайтесь уже на этапе разработки о создании навигационной системы, позволяющей выделить опорные составляющие, до которых сможет легко и быстро добраться каждый посетитель.
Выбирая лучшие объекты, формы и цвета, не останавливайтесь на достигнутом: начните манипулировать этими элементами с помощью движений, придайте им гибкость и ощутимый «материальный» вес. Этот полный тактильный контроль над каждым, даже самым маленьким движением делает Material Design неповторимо прекрасным.
Ваша цель на этом этапе разработки — найти баланс между легкостью движений и физической «телесностью» каждого объекта, который будет отвечать принципам беспрепятственного UX.
Тщательное планирование и тестирование окупится на этапе запуска: если вы все сделали правильно, пользователя «зацепит» представленная вами информация. Кроме того, если необходимо совершить действие в несколько шагов, спланированный алгоритм с применением ярких объектов и анимации доведет его до завершения операции (ведь он будет четко понимать, что от него ждут и как это выполнить).
Анимация в Material Design часто используется для создания более плавных переходов, но не стоит ограничиваться лишь этими рамками. С ее помощью можно улучшить многие детали интерфейса и навигационной панели. Кроме того, вы можете использовать мелкие детали в меню иконок, что не только добавит наглядности, но и лишний раз подчеркнет вашу заботу об эстетичности приложения.
Помните, что Material Design фокусируется на юзабилити, а не только на хорошем дизайне как таковом. Его принципы могут стать лучшей отправной точкой для создания приложения, которое будет покорять огромную аудиторию своим изяществом и удобством.
Ваша задача как дизайнера — сделать жизнь пользователя проще и дать эффективное решение, когда он взаимодействует с приложением. Это происходит, в первую очередь, благодаря предоставлению наиболее важной информации в предельно короткие сроки и в максимально удобном формате.
Постоянно держите в голове точки фокусировки, на которые должен ориентироваться пользователь, и убеждайтесь на каждом тестировании, что они не уходят на второй план, пока посетитель «бродит» по ресурсу. Всплывающие окна, уведомления и другие отвлекающие факторы могут раздражать посетителей или вовсе «загнать» их в угол. Будьте своеобразным гидом: помогайте им не потеряться и найти то, что нужно. Инструкции и кнопка помощи также должны быть доступны в любой момент.
Еще одна хорошая идея — вставить описания ссылок, которые вы размещаете на ресурсе. Они нужны для четкого и быстрого понимания, куда в итоге придет пользователь. Менее эффективным инструментом является использование кнопки «нажмите здесь»
4. Шаблон иконок от Google Design:
5. Icon Grid System для Android L:
Что такое material design? Это разработанный компанией Google набор стилей и графики, а также руководств и правил для соблюдения этих стилей. Впервые material design был показан на конференции для разработчиков, Google I/O , летом 2014 года. В основе стиля формат «карточек» и «блоков» – простых и лаконичных форм и графических элементов, а также общая простота и свежесть дизайна – спокойные, неяркие цвета, отсутствие объема, мелких деталей и детализации в целом. Первый «выход в свет» для material design состоялся вместе с запуском сервиса Google Now, а официально стиль стал основой для операционной системы Android совсем недавно, в версии 5.0, известной также как Android Lollipop.
На мой взгляд, material design имеет несколько очень важных плюсов перед всеми предыдущими попытками Google привести дизайн своей операционной системы и программ для нее к единому виду, но также и некоторые минусы. В этой небольшой статье я постараюсь представить свою точку зрения на новый язык дизайна от компании Google.
Material design – аргументы ЗА
Первый и самый важный аргумент в пользу нового стиля, на мой взгляд, – его исполнение. Не хочу вновь показаться ненавистником техники и подхода Apple, но в данном случае это не страшно, ведь я выражаю лишь свою точку зрения. Так вот, на мой взгляд, обновление iOS до седьмой версии и обновление Android до пятой версии – это, как говорится, две большие разницы.
В случае с Apple мы увидели обычный перенос предыдущей графики в плоский вид, никакой новой идеи, никакого желания привнести что-то свежее – просто взяли существующий интерфейс, сдавили его прессом, перерисовали значки и добавили радужных фоновых картинок. Именно фоновые изображения в новой iOS 7 и эффекты прозрачности меню – показатель безвкусия и нежелания дизайнеров сделать нечто хорошее и доброе, как мне кажется. В «семерке» всем просто пустили пыль в глаза красивыми эффектами анимации и общей яркостью нового интерфейса. О том, будет ли это удобно, мне кажется, никто особо не думал, потому что в противном случае дизайнеры Apple уделили бы больше внимания функциональным моментам, а не радужному оформлению.
Шторка уведомлений, вызываемая сверху, и панель управления, она вызывается снизу – наглядные примеры бесполезного «апгрейда» в iOS7. Первое так и не сделали понятнее – все уведомления кучкуются в кашу и их слишком много, второе сделали наполовину, переключатели позволяют производить включение/выключение интерфейсов, но не переходить к их настройке и выбору сетей
Android 5.0 обновился также очень серьезно в плане графики по сравнению с 4.x именно в связи с переводом операционной системы на material design. И, на первый взгляд, изменения здесь похожи на те, что происходили в iOS – окончательная смена стиля на плоский, более светлое в целом оформление, внешняя простота. Но дальше начинаются отличия. В Android 5.0 интерфейс более целостный как раз благодаря material design – все выполнено в одном спокойном стиле, ничего не выбивается и не выглядит пестро или чрезмерно ярко. Основной принцип material design исключает приоритет графических эффектов в интерфейсе перед его практичностью? и это очень здорово.
Если подводить итог первому аргументу – material design смотрится уже сейчас очень целостно, это именно то, чего так не хватало операционной системе от Google и КО – целостности и общности. Когда, открывая каждую отдельную программу, будь то контакты, браузер, почтовый клиент или что-то другое, вы видите одинаковую анимацию, одинаковую палитру цветов и просто узнаваемые элементы. За счет этого в новой ОС легче освоиться и с ней просто приятно работать.
Второй аргумент – если вы уже пользовались смартфоном на Lollipop или видели скриншоты, то наверняка заметили, что зрительно интерфейс укрупнился. Укрупнение интерфейса идет в сенсорных устройствах давно. Если сравнить первые версии Android с «тогдашним» Windows Mobile – очевидно, что Android был крупнее и проще, на экране помещалось меньше информации, но и управлять смартфоном было удобнее. В material design некоторые элементы заменены на «карточки», чуть увеличены шрифты, размеры значков и строк, интерфейс в целом стал крупнее. Мне это нравится, наверное, потому что я старею, шутки шутками, но чем старше, тем меньше желания вглядываться в «милипизерные» иконки и элементы, даже при условии хорошего зрения. Кстати, вот почему мне не нравится iPhone 5 и все, что меньше. Компактность компактностью, но даже на экране с диагональю 4.5"" хочется видеть нормальных размеров элементы, а не изучать его с лупой. Это банально удобнее во многих ситуациях, особенно при работе со смартфоном на ходу, например. Поэтому общее укрупнение интерфейса в Android 5.0 на основе material design мне кажется хорошим шагом.
Третий аргумент за – Google не просто перевела Android на новый дизайн, но и сразу подготовила необходимые наглядные руководства с демонстрацией реализации основных элементов для разработчиков софта. Проще говоря, если вы делаете новую программу или хотите перевести старую в новый дизайн, вы сайт и изучаете рекомендации Google.
Например, говорится, какие цвета нужно использовать. показаны шрифты и способы их применения. А рекомендации по использованию правильных графических изображений в программе.
Material design – аргументы ПРОТИВ
Впрочем, третий аргумент в пользу material design одновременно является и аргументом против. Да, Google молодцы, что не стали бросать разработчиков и предоставили им исчерпывающее руководство по правильному применению нового языка дизайна, но о пользователях в данном случае, скажем так, подумать не получилось. Программы, написанные по всем правилам material design или измененные внешне по руководству Google, будут смотреться очень гармонично в Android 5.0 и не очень – в более ранних версиях системы. И наоборот – все приложения, не выполняющие правила material design, на смартфоне с Android Lollipop будут выглядеть несколько инородно. А таких программ в ближайшие полгода окажется немало, рискну предположить. Все-таки, далеко не каждый разработчик востребованной программы, особенно если она сложная и требует постоянных обновлений и улучшений, бросит все дела и начнет переводить ее в material design.
Наглядный пример старого дизайна в очень актуальной программе – WhatsApp. Как долго приложение не будут переводить в md? Хороший вопрос
Получится, что часть разработчиков сейчас действительно бросят все дела и переведут свои программы в material design, а другие – нет. А еще в Google Play есть программы и в более старом, скажем так, дизайне, но также иногда необходимые в работе. В итоге оказывается, что одного желания Google (бесспорно, правильного!) привести Android к общему виду недостаточно, нужно что-то делать с сотнями тысяч программ. Вопрос – что?
Уважаемые читатели, а как вы относитесь к идее Google привести все свои сервисы и приложения к общему виду, используя в качестве основы material design?