Google показал обновлённую дизайн-систему Material Design 2.0 на конференции I/O — https://material.io/. Это серьёзное изменение визуального стиля и расширение инструментария, первые звоночки которого появились ещё в марте (https://www.theverge.com/2018/3/7/17092800/android-p-new-design-changes-features).

Визуально Android P продолжил сближение с iOS (различия между платформами стираются с обеих сторон):

1. Много скруглений, что сильно перекликается с iOS 10-11 (https://www.theverge.com/2018/3/7/17092800/android-p-new-design-changes-features). Возможно, это сделано с прицелом на безрамочные телефоны, которых становится всё больше — это лучше сочетается с их скруглёнными краями экрана.

2. Цвет настроения — белый (https://uxdesign.cc/previewing-material-design-2-0-ec0215f0588f). Больше нет яркой шапки приложения и серых подложек, сплошное белое пространство с минимумом акцентов. В каких-то приложениях Google встречается цветная нижняя панель (https://cdn-images-1.medium.com/max/2000/1*Tu6q1DcA1aGpUDKoVG4Yzw.png) и сама идея акцентных цветов не уходит из гайдлайнов (https://material.io/design/color/the-color-system.html) но тенденция явная (включая веб — https://www.engadget.com/2018/04/25/google-gmail-redesign/ и https://www.engadget.com/2018/05/10/google-drive-redesign/).

3. Навигация по операционке в духе iPhone X (https://storage.googleapis.com/gweb-uniblog-publish-prod/original_images/New-System-Navigation_03.gif). Паттерн «рукоятки» (https://uxdesign.cc/handlebars-in-ui-design-4b36af67733b?gi=aa27f4f2efcd) вместо кнопки «домой» с почти аналогичной механикой, отказ от отдельной кнопки списка приложений (также вызывается свайпом снизу), ну и ставшая официальной в последние годы нижняя панель навигации. Всё это помогает управлять современными телефонами, которые стали не только больше, но ещё и выше за счёт безрамочности. Кстати, в некоторых новых приложениях Google инструменты навигации почти везде внизу (https://www.androidpolice.com/2018/04/25/hands-google-tasks-another-beautiful-disjointed-way-get-things-done-google/). Осталось упростить кнопку «назад» (она уже пропала с домашнего экрана).

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

С другой стороны, теперь Material Design поддерживает более продвинутую тематизацию, чем просто замена цвета — https://material.io/design/material-theming/. Можно менять шрифтовую сетку, скругления элементов интерфейса (точнее, даже их форму — например, можно сделать диагональные скосы), иконки. К этому прилагается плагин для Sketch — https://material.io/tools/theme-editor/ (можно быстро примерить стиль на свой макет) и библиотека иконок — http://material.io/icons (в пяти стилях). Недавно обновлённые продукты Google также используют этот подход — https://material.io/articles/how-google-created-a-custom-material-theme.html (хотя их стиль как раз выхолощенный).

И самое главное — теперь это полноценная дизайн-система с компонентами в коде (https://material.io/develop), а не просто масштабные гайдлайны и шаблоны к ним с какими-то разрозненными примерами. Эти компоненты также поддерживают тематизацию, так что система выглядит целостной (сами компоненты начали появляться год назад). Новый сайт Material Design (https://material.io/) сделал фокус на две составляющие — дизайн и разработка — более явным. Они также запустили давно обещанный инструмент Gallery (https://material.io/tools/gallery/), аналог Zeplin и Wake. Но это как-то вяло на фоне обещаний, данных после покупки Pixate (основатель ушёл в Figma) и Form (Гугл подтверждает репутацию сгнаивателя купленных компаний).

#android #material

Из других интересных деталей анонса:

1. Четыре цвета логотипа как основа визуального языка (https://www.fastcodesign.com/90171295/google-just-remade-its-brand-again). Это хорошо получилось в Gmail для веба — иконка «+» и цвета индикаторов чётко наследуют идею.

2. Новый стиль иллюстраций Google (https://www.androidpolice.com/2018/04/25/hands-google-tasks-another-beautiful-disjointed-way-get-things-done-google/).

3. Похоже, для своих продуктов компания перейдёт на шрифт Google Sans — https://9to5google.com/2018/05/09/google-sans-vs-product-sans/.

4. Самоограничения на использование телефона и отдельных приложений (https://s.aolcdn.com/hss/storage/midas/26f53c50aaa835c66e937ab98714abbc/206359888/DigitalWellbeing_Blog.gif из https://www.engadget.com/2018/05/09/android-p-features-that-matter/ и https://www.engadget.com/2018/05/08/google-android-p-actions-slices-predictive-apps/). Пользователь сам задаёт их, после этого приложение становится чёрно-белым, мотивируя прерваться. В ночное время телефон полностью переходит в такой режим.

5. Проще настраивать частоту уведомлений (https://www.engadget.com/2018/05/09/android-p-features-that-matter/). Если пользователь несколько раз скрывает уведомление от приложения без прочтения, Android предложит скрыть его вообще. Наушники Pixel Buds могут зачитывать некоторые уведомления голосом (https://www.engadget.com/2018/05/09/google-pixel-buds-let-you-customize-which-apps-send-spoken-notif/).

6. Интеграция сторонних приложений в результаты поиска и контекстные меню в качестве Slices (https://s.aolcdn.com/hss/storage/midas/9a19c2df03d0e18c4dac34b7630ccfce/206359885/Slices_Blog.gif) и поиск по выделенному слову (https://o.aolcdn.com/images/dims?resize=980%2C640&quality=100&image_uri=https%3A%2F%2Fs.aolcdn.com%2Fhss%2Fstorage%2Fmidas%2F6c9302a32a0c5a3baf09628da8c5fbca%2F206360669%2F_MG_1041.jpg&client=cbc79c14efcebee57402&signature=e0c3469b7613c176e864832f38b65ad71d15ac59).

7. Google Assistant может сам позвонить и забронировать ресторан (https://www.engadget.com/2018/05/08/pretty-sure-googles-new-talking-ai-just-beat-the-turing-test/).

8. Мобильный Сhrome поддержит дополненную реальность (https://www.engadget.com/2018/05/09/google-augmented-reality-chrome/).

9. Экспериментальная камера Google Lens научилась делать больше (https://www.engadget.com/2018/05/09/google-lens-hands-real-world-copy-and-paste/) и станет частью стандартного приложения (https://www.engadget.com/2018/05/08/google-integrates-lens-camera-app/).

Бета-версию уже можно поставить на некоторые телефоны — http://android.com/beta. Финальная версия появится осенью. Засучиваем рукава, работы будет много.

#android #material