Інтерфейс Google Material Design отримує нові кольори, іконографію та акцент на дотик

click fraud protection

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

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. Ми не стверджуємо, що це a належне наступник найновішого фреймворку 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» для сірих, червоних і червоно-темних тем Chromium, а також нові кольори для стандартної панелі інструментів Chrome і панелі інструментів анонімного режиму. Ми використали шістнадцяткову таблицю пошуку для створення зразків RGB:

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

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

Ось короткий макет того, як виглядатиме панель інструментів із застосуванням нових кольорів:

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

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


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

Отже, що означають нові кольори в ширшому контексті матеріального дизайну?

Матеріальний дизайн — це більше, ніж просто шари, компоненти та елементи, а також те, як вони поводяться по відношенню один до одного. Центральним мотивом дизайну Google є висококонтрастні теми, яскраві кольори та сміливі виділення — саме вони виділяють програми, сумісні з матеріальним дизайном, серед інших.

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.

Оновлення 04.02.2018: Невдовзі після публікації цієї статті коміт став приватним, що потенційно означає, що його мали зберігати в секреті. Ми продовжуватимемо перевіряти Chromium Gerrit на наявність змін і оновлюватимемо цю статтю, якщо знайдемо такі.