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

Новые коммиты в Chromium Gerrit, похоже, ссылаются на «Material Design 2», который может быть новой и улучшенной версией языка Material Design от Google.

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

С момента дебюта Material Design в 2014 году он распространился по экосистеме Android, как лесной пожар, не говоря уже о таких приложениях Google, как YouTube, Chrome, Gmail, Hangouts и Календарь Google. Плавающие кнопки действий, приятные цвета и методы подъема стали доступными как часть Библиотека компонентов материалов на 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. tabstrip — перетаскиваемые вкладки, содержащие заголовки веб-страниц, значки и кнопку «закрыть вкладку» над панелью Chrome. Адресная строка.

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

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

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

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

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

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

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

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

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


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

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

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

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

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

Судя по тому, что мы знаем о цветовой палитре 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 февраля 2018 г.: Вскоре после публикации этой статьи коммит стал конфиденциальным, что потенциально означает, что его планировалось держать в секрете. Мы продолжим проверять Chromium Gerrit на наличие изменений и обновим эту статью, если обнаружим их.