Роман Нурик, один из дизайнеров команды Google, в своем блоге на Medium рассказал, как изменилось приложение I/O 2014 в процессе разработки, чтобы соответствовать принципам Material Design. Специально для вас мы перевели его пост.

На прошлой неделе мы открыли исходный код приложения Google I/O 2014, и теперь вы можете изучить, как мы реализовывали некоторые фишки и элементы дизайна в программе, с которой вы знакомились на протяжении конференции. Сейчас я немного расскажу, как мы создавали внешний вид приложения в этом году.

Каждый год мы публикуем для Google I/O приложение, преследуя две цели. Во-первых, оно выступает как помощник в процессе конференции и позволяет спланировать свое расписание еще дома. Во-вторых, что более важно, фирменная программа становится эталоном для сторонних разработчиков и дизайнеров.

Дизайн приложения Google I/O в этом году использует основы Material Design и особенности Android L Developer Preview, чтобы демонстрировать контент рационально, последовательно, адаптивно и красиво. Давайте посмотрим на несколько дизайнерских решений и их результаты, которые повлияли на внешний вид приложения.

Плоскости и тени

В эру Material Design плоскости и тени играют важную роль в создании облика вашей программы. Спецификации Material Design содержат определенные рекомендации, которыми можно руководствоваться при принятии разных дизайнерских решений, включая размещение теней. К примеру, посмотрим на несколько итераций вкладки с расписанием, которые мы прошли:

Первая версия имела сразу несколько проблем. Во-первых, единственная тень разделяла программу на два уровня: верхний содержал лишь заголовок программы, а нижний — вкладки и собственно контент. Второй уровень получался очень загруженным: слой с полезными данными должен быть простым, здесь же он брал на себя слишком много функций, что приводило к образованию визуального шума. Альтернативным вариантом могло стать создание отдельного третьего уровня для вкладок, размещенного между заголовком и контентом, однако чрезмерное использование слоев также может негативно сказаться на восприятии.

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

Еще одна область, где концепция «поверхностей» играла роль — это страница подробного просмотра сессии. В первой версии при листании в верхней части страницы происходило замещение картинки сессии цветом сессии, а скорость этого изменения равнялась половине от скорости движения заголовка, что создавало parallax-эффект. Мы решили, что такое решение слишком сильно отличается от принципов Material Design. Получалось, будто текст скользит по бумаге, а та меняет свою прозрачность на протяжении всей анимации.

Лучший вариант, который мы представили в обновлении 25 июня, предлагал дополнительную короткую поверхность для заголовка. Она обладала постоянным цветом и прозрачностью. Перед листанием эта плоскость находится на одном уровне с поверхностью с контентом, образуя стык. Когда вы начинаете листать, новый слой (и прикрепленная к нему кнопка) поднимается, а плоскость с данными может заезжать под него.

Это куда ближе к идеям Material Design, поэтому в результате пользователи получают более последовательное и наглядное взаимодействие. (Смотрим код: Fragment, Layout XML)

Цвет

Ключевые принципы Material Design — это «заметный, наглядный, нарочитый» интерфейс и упор на визуальную составляющую ключевых элементов. Давайте рассмотрим два из них: цвет и отступы.

Цветовая палитра всех UI-элементов в Material Design состоит из одного основного цвета и одного цвета-акцента. Большие поля (такие как фон) заполняются 500 оттенком главного цвет, а более мелкие (статус-бар, например) — 700.

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

В приложении для I/O мы использовали два акцента для разных ситуаций. Для выделения мы использовали 500-ый оттенок розового, в то время как более консервативный 500-ый оттенок голубого лучше подошел для кнопка добавления события в расписание, которая часто соседствовала с основными цветами сессий. (Смотри код: XML значения цвета, Тема XML)

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

Ниже выдержка из нашей финальной палитры, созданной для сессий.

Отступы

Другим важным «традиционным» элементов «печатного дизайна», о котором мы думали, стали отступы и особенно некоторые ключевые линии. Хотя мы уже привыкли использовать сетку из 4dp (кнопки и простые списки составляли 48dp, стандартный верхний бар — 56dp и так далее), инструкции, связанные с отступами, стали новинкой в Material Design. Особенно полезной оказалась 2 линия (ее значения 72dp для телефона и 80dp для планшета), по которой выравниваются заголовки и другие текстовые элементы, она добавила чистоты и аккуратности приложению, а также облегчила восприятие информации. Победа принципа целостного восприятия!

Сетки

Еще один ключевой принцип Material Design — это адаптивность.

Одна лежащая в основе система дизайна определяет использование пространства и взаимодействия. Каждое устройство отражает разный взгляд на эту систему. Каждый взгляд зависит от размеров экрана и методов взаимодействия, свойственных для данного устройства. Цвета, иконки, иерархия и пространственное взаимодействие остаются не измены.

Множество экранов в приложении для I/O заполнены набором секций. Для их представления в Material Design можно использовать разные форматы: карточки, списки, сетки. Мы хотели использовать карточки для представления секций, однако из-за необходимости демонстрировать однородный контент, мы сочли карточки не уместными в нашем случае. Их скругленные грани и тени будут лишь отвлекать и не смогут помочь в визуальном группировании контента. Адаптивная сетка была наилучшим выбором в данной ситуации; мы могли изменять количество колонок в зависимости от размера экрана (смотри код), а также вставлять текст и картинки в места, где было необходимо сохранить пространство.

Очаровательные детали

Две маленькие вещи, которые мы дорабатывали особенно долго — это рябь от касаний и плавающая кнопка добавления в расписание.

Мы использовали в приложении как ограниченную, так и неограниченную рябь, и убедились, что она остается заметной (но аккуратной) вне зависимости от фона. (Смотри код: Light ripples, Dark ripples)

Одна из моих любимых деталей в приложении — это плавающая кнопка, которая показывает, добавили вы событие в свое расписание или нет.

Мы использовали несколько новых методов в L Preview (вместе с запасной реализацией), чтобы она точно работала, как надо:

1. View.setOutline и setClipToOutline для кругового сечения и динамического рендеринга тени
2. android:stateListAnimator для поднятия кнопки после вашего нажатия (увеличение падающей тени)
3. RippleDrawable для реакции слоя на нажатие
4. ViewAnimationUtils.createCircularReveal для выявления синего/белого фона
5. AnimatedStateListDrawable для определения кадров смены анимации (с добавлено на недобавлено)

В конечном счете мы получили замечательный и фантастичный элемент дизайна, которым мы гордимся и надеемся, что он сможет вдохновить вас или просто будет использован в вашем приложении.

Что дальше?

Продолжая разговор о переносе кода в ваше собственное приложение, напомним, что все исходники, включая особенности L Developer Preview и резервные части кода, уже доступны, так что вы можете уже детально разбираться, как мы создавали этот дизайн.

Я надеюсь, этот пост принесет вам вдохновение и вы сможете создать красивые Android-приложения по принципам Material Design, которые станут основой платформы.