Потребителският интерфейс на Google за материален дизайн се обновява с нови цветове, иконография и фокус върху докосването

Новите ангажименти в Chromium Gerrit изглежда препращат към „Material Design 2“, което може да е нова и подобрена версия на езика на Google за Material Design.

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).

Съвместимите с Material Design 2 версии Chrome също така ще разполагат с много по-ярка лента с инструменти в сравнение с текущите компилации – тя е почти бяла в сравнение с текущата сивкава цветова схема.

Ето кратък макет на това как ще изглежда лентата с инструменти с приложените нови цветове:

Накрая ангажиментът добавя нов IsTouchOptimizedMaterial() флаг към MaterialDesignController, което може да се отнася до оптимизирани за докосване елементи Material Design 2. Писахме в началото на януари за усилията на Google да подобри Поддръжката на сензорен екран на уеб браузъра Chrome на устройства с Chrome OS и изглежда, че е нейното продължение.

Например ангажиментът показва, че на устройства със сензорен екран SetStackedLayout на Chrome ще бъде „винаги активиран.' По подразбиране, когато отворите много раздели, ширината на другите раздели се свива, за да поеме нови раздели. Подреденото оформление на Chrome запазва ширините на оригиналните раздели и добавя нови раздели зад тях.


Значението на цвета в материалния дизайн

И така, какво означават новите цветове в по-широкия контекст на 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.2.2018 г.: Малко след публикуването на тази статия ангажиментът беше направен частен, което потенциално означава, че е трябвало да се пази в тайна. Ще продължим да проверяваме Chromium Gerrit за промени и ще актуализираме тази статия, ако открием такива.