Пользовательский интерфейс Google Material Design обновляется благодаря новым цветам, иконографии и ориентации на сенсорный экран

  1. Material Design 2 появляется в Chromium Gerrit
  2. Важность цвета в дизайне материалов

Material Design, унифицированный язык дизайна, запущенный вместе с Android Lollipop, отличается плоской, пастельной цветовой палитрой, глубиной, мягким освещением и реалистичной физикой. Он предназначен для имитации тактильности объектов реального мира, не прибегая к скейоморфизму; Google описывает это как синтез «классических принципов» с «инновациями и возможностями» технологий.

Со времени дебюта Material Design в 2014 году он распространился по всей экосистеме Android, как лесной пожар, не говоря уже о приложениях Google, таких как YouTube, Chrome, Gmail, Hangouts и Google Calendar. Плавающие кнопки действий, приятные цвета и методы возвышения стали доступны как часть Библиотека компонентов материалов на GitHub (продолжение библиотеки поддержки дизайна Android и веб-ориентированного Material Design Lite от Google), которая приносит доброту Материала в Android в виде пользовательских представлений и в сеть в виде пакетов, которые можно импортировать и использовать как стандартные теги HTML.

Теперь, накануне четвертой годовщины Material Design, Google, похоже, готовит следующее поколение своих бумаги и чернил, вдохновенное Эстетика: Материал Дизайн 2 . Публично доступная бесценная информация о Material Design 2, существование которой мы обнаружили на этой неделе в новых коммитах в Chromium Gerrit. Мы не утверждаем, что он является надлежащим преемником новейшей среды Material Design, но фиксации указывают на заметные, хотя и неуловимые, изменения в цветовой палитре, иконографии и поведении сенсорного экрана.

Material Design 2 появляется в Chromium Gerrit

В начале февраля новые коммиты в Chromium Gerrit реализовали пользовательский интерфейс «Material Design 2» в вкладке Chrome - перетаскиваемые вкладки, содержащие заголовки веб-страниц, значки избранного и кнопку «Закрыть вкладку» над адресной строкой Chrome.

Фиксация не является существенной, но вносит изменения во внешний вид вкладок Chrome. Они увеличивают высоту вкладки; вносить неопределенные изменения в макет содержимого вкладок, в частности в заголовки и индикаторы предупреждений; и уменьшите ширину касания вкладки при увеличении стандартной ширины вкладки. Они явно не изменяют цвета индикатора оповещения вкладки, цвета разделителя вкладок, кнопку «новая вкладка» или любую типографику вкладок.

Они явно не изменяют цвета индикатора оповещения вкладки, цвета разделителя вкладок, кнопку «новая вкладка» или любую типографику вкладок

Коллекция вкладок Chrome.

Примечательно, что коммиты ссылаются на значок кнопки закрытия вкладки «Material Design 2» и «основные цветовые константы, необходимые для Google Material Design 2».

Примечательно, что коммиты ссылаются на значок кнопки закрытия вкладки «Material Design 2» и «основные цветовые константы, необходимые для Google Material Design 2»

При углубленном изучении кода фиксации отображаются новые цветовые палитры «Material Design 2» для серой, красной и красно-темной тем Chromium, а также новые цвета для стандартной панели инструментов Chrome и панели инструментов в режиме инкогнито. Мы использовали шестнадцатеричную таблицу поиска для генерации образцов RGB:

Мы использовали шестнадцатеричную таблицу поиска для генерации образцов RGB:

Красный у Material Design 2 немного темнее, чем у текущего Material Design Red 800 (# C62828) и Red 600 (# E53935), в то время как новые оттенки серого (# 3C4043, # 5F6368, # BDC1C6, # F1F3F4) имеют более светлый, голубоватый оттенок. оттенок. Конструкция материала отличается традиционными серыми оттенками, где R = G = B, тогда как здесь B> G> R на каждом оттенке (но только на 1-4 из 255).

Конструкция материала отличается традиционными серыми оттенками, где R = G = B, тогда как здесь B> G> R на каждом оттенке (но только на 1-4 из 255)

Версии, совместимые с Material Design 2 В Chrome также будет гораздо более яркая панель инструментов, чем в текущих сборках, - она ​​почти белая по сравнению с текущей сероватой цветовой схемой.

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

Наконец, коммит добавляет новый флаг IsTouchOptimizedMaterial () к MaterialDesignController , который может относиться к элементам Material Design 2, оптимизированным для касания. В начале января мы писали об усилиях Google по улучшению Поддержка сенсорного экрана в браузере Chrome на устройствах с ОС Chrome, и, похоже, это продолжение этого.

Например, фиксация показывает, что на устройствах с сенсорным экраном Chrome SetStackedLayout будет «всегда включен». По умолчанию, когда вы открываете много вкладок, ширина других вкладок уменьшается, чтобы вместить новые вкладки. Скомпонованный макет Chrome сохраняет ширину исходных вкладок и добавляет новые вкладки за ними.

Важность цвета в дизайне материалов

Так что же означают новые цвета в более широком контексте Material Design?

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

Google предоставляет образец цветовые палитры предназначен для «совместной работы» на разных платформах и поощряет разработчиков, использующих преимущества, выбрать исходный цвет приложения, иначе называемый «доминирующим» цветом, из коллекции из 500 различных образцов. (Представьте «синий», «зеленый» или «фиолетовый» и другие основные цвета.) При необходимости они получают вторичный цвет из расширенной коллекции из 700 цветов (дополнительные цвета для наиболее важных элементов пользовательского интерфейса и аналогичные для менее важные элементы пользовательского интерфейса и третичный цвет из подмножества 300).

Цвет играет важную роль в иерархии дизайна материалов. Яркие цвета предполагают важность - они зарезервированы для выдающихся кнопок и других интерактивных элементов. Более тонкие цвета, с другой стороны, добавляют визуальный интерес, акцентируя текстовые поля, индикаторы выполнения, ссылки и другие части пользовательского интерфейса.

Из того, что мы знаем о цветовой палитре Material Design 2, по крайней мере, некоторые образцы в «первичных 500» Google, такие как Red 600 и 800, темнее, чем их предшественники Material Design. Но другие, такие как серый, получают противоположную обработку - и серый, и белый образцы, показанные на макете вкладки Chrome, имеют более холодную градацию серого и более высокие значения синего .

Прямо сейчас это все, что мы действительно знаем о Material Design 2. Но коммиты могут быть признаком того, что что-то происходит за кулисами, и если это правда, мы можем узнать больше раньше, чем позже. Ожидается, что Google снимает обертки с Android P, следующей основной версии Android, уже в марте, а Google I / O 2018 стартует 8 мая. Обе эти возможности - отличная возможность снять обертки с Material Design 2.

Обновление от 4/4/2018: вскоре после публикации этой статьи фиксация стала конфиденциальной, что потенциально означает, что она должна храниться в секрете. Мы продолжим проверять Chromium Gerrit на наличие изменений и обновим эту статью, если найдем.

Хотите, чтобы больше подобных сообщений доставлялось на ваш почтовый ящик? Введите адрес электронной почты, чтобы подписаться на нашу рассылку.

Хотите, чтобы больше подобных сообщений доставлялось на ваш почтовый ящик?