Material Design
Material Design – это не стиль оформления Android 5.0. Это целая идеология. Конечно, мобильная система получит от этого «материального дизайна» больше всех. Это не только новые принципы построения интерфейса, но еще и его «плоский» стиль, очень много анимации.
Но, как мы сказали, одним Android Google не ограничится. Она оформит в этом стиле все свои приложения, как для смартфонов/планшетов (в том числе iPhone/iPad), так и браузеров. И более того, на специальном сайте уже выложены целые тома, как этот самый Material Design использовать для собственных разработок. Цель компании проста: используя разные устройства (смартфон, планшет, часы, телевизор и даже машину) интерфейс должен оставаться привычным, как и везде.
Material Design использует такое понятие как «бумага». Под этим термином подразумевается все то, что выводится на экран приложением. Причем «листиков» у программы может быть сколько угодно много и все они располагаются над подложкой. То есть для «листа бумаги» можно задать Z-координату относительно подложки. Если она равна 0, значит это и есть фон, а если выше, то на фон проецируется тень. И чем лист выше, тем больше тень.
«Листы» могут быть разных размеров. Например, панель инструментов, которую Google называет «панель действий» (Action Bar), занимает тонкую полоску сверху (или снизу). И все это отбрасывает тень на подложку. Причем, если раньше отрисовка тени ложилась задачей на плечи разработчиков, обычно использовавших специальные графические файлы для этого, то теперь за все отвечает Android 5.0. Трехмерная тень обсчитывается и формируется в реальном времени самой системой. Особенно хорошо это заметно в эффектах с анимацией.
Все дело в том, что анимация в новом Android построена по совершенно иным принципам. Даже не так – эти самые принципы появились. Раньше их фактически не было. Анимацию разработчики вставляли по своему усмотрению, а кое-что Google внедрила на уровне ОС. А теперь предлагается единая модель, система, набор правил, согласно которым элементы и экраны перетекают из одного в другой.
Главное правило – ничего никуда не должно телепортироваться. Теперь будет видно, откуда что взялось и куда приехало. Google даже использует термин «хореография». Все плавно перетекает из одного в другое. Например, нажав по картинке, она равномерно развернется во весь экран. Если тапнуть по фрагменту текста, например, контакту, то имя переместится в верх экрана станет заголовком для карточки абонента. И даже в тех редких случаях, когда будет происходить полная смена экранов, новый не перекроет старый мгновенно, а плавно выедет на его место.
За все отвечает обновленный фреймворк Android 5.0. И, разумеется, придется следовать рекомендациям Google по формированию интерфейса. Но в этом случае не надо заботиться обо всех «красотах» новой системы – она это возьмет на себя.
Android 5.0 стал совершенно иным образом работать с цветом. Теперь Google рекомендует использовать насыщенный цвет для заголовков и белый цвет для текста в этом заголовке. Вместе с тем разработчики получили возможность перекрашивать строку состояния сверху и строку навигации снизу (если ее функции не выполняют отдельные кнопки). В частности строку состояния рекомендуется делать слегка более темного оттенка, чем основной заголовок. Напомним, что с выходом Android 3.0 строка состояния была сделана черной с синими иконками. Android 4.4 перекрасил их в серый. Но пятая версия предлагает куда менее скучный вариант, согласитесь.
Хотя, конечно, разработчик не ограничен только оттенком заголовка. Возможности расширены настолько, что цвет можно задать любой.
Причем Google и здесь пытается упростить жизнь разработчикам. Они могут как самостоятельно задать все цвета, так и использовать Palette API. Этот API сам выбирает цвета из предложенной ему картинке, а дальше, на основе подобранной палитры, формирует цвет элементов управления, заголовка, текста и строки состояния.
Конечно, Palette API актуален не для всех приложений. Один из ярких примеров – музыкальный плеер, который фоном показывает обложку альбома. Цвета выбираются на основе обложки и интерфейс соответствующим образом подстраивается под музыку. Именно это и было продемонстрировано в июне 2014 года на конференции Google I/O – приложение вело себя подобно хамелеону.
Конечно, возможны ситуации, когда Palette API не сработает – если обложка слишком монотонная и на рисунке просто недостаточно цветов для отбора контрастных вариантов. В этом случае разработчик может задать цвета по умолчанию.
Кроме этого Google привнесла в Android 5.0 кое-что из своего стиля iOS. Кнопка «гамбургера», вызывающая контекстное меню приложения, теперь выводится целиком, а не в половину своей ширины с самого края заголовка. Так она заметно лучше, да и попасть по ней пальцем куда проще.
Еще исчез значок приложения в заголовке. Теперь его заменяет либо кнопка-гамбургер с тремя полосками, либо кнопка возврата на прошлый экран.
Вероятно, многие уже заметили не только в Android 5.0, но и в обновленных приложениях Google, выполненных в соответствии с Material Design, большую круглую кнопку, обычно помещенную внизу. Она называется Floating Action Button или FAB. Если переводить дословно, то получится «плавающая кнопка действия». Она может быть расположена в любой части приложения. Неизменно ее назначение – вызов главной функции приложения. В почтовом клиенте это создание нового письма, в редакторе документов – нового документа и тому подобное.
Конечно, часто у приложений таких «главных» функций много. В этом случае кнопка вызовет не одну из них, а покажет их полный список. Например, в офисном приложении будет предложено создать файл Word, Excel или PowerPoint. А в мессенджере покажет список контактов.
И нет, FAB не заменяет кнопку с тремя квадратиками, обычно помещаемой в правом верхнем углу. Последняя сегодня вызывает дополнительное меню операций, если их список не влез в основную панель инструментов. И если среди этих не вместившихся операций есть такие, что относятся к главным действиям, то их перенесут в список FAB. Таким образом улучшается группировка: под FAB скрывается все главное, а под «квадратиками» - все остальное.