Uživatelské rozhraní Material Design společnosti Google se vylepšuje o nové barvy, ikonografii a zaměření na dotyk

Zdá se, že nové závazky v Chromium Gerrit odkazují na „Material Design 2“, což může být nová a vylepšená verze jazyka Material Design společnosti Google.

Material Design, jednotný designový jazyk, který byl uveden na trh společně s Androidem Lollipop, nabízí ploché pastelové barevné palety, hloubku, měkké osvětlení a realistickou fyziku. Má napodobovat hmatatelnost objektů reálného světa, aniž by se uchýlila ke skeuomorfismu; Google to popisuje jako syntézu „klasických principů“ s „[inovací a možností" technologie.

Od debutu Material Design v roce 2014 se šíří po ekosystému Android jako lavina – nemluvě o aplikacích Google, jako je YouTube, Chrome, Gmail, Hangouts a Kalendář Google. Plovoucí akční tlačítka, příjemné barvy a techniky elevace byly zpřístupněny jako součást Knihovna materiálových komponent na GitHubu (v návaznosti na Knihovnu podpory designu Android a webový Material Design Lite od Googlu), který přináší výhoda pro Android ve formě vlastních zobrazení a pro web ve formě balíčků, které lze importovat a používat jako standardní HTML značky.

Nyní, v předvečer čtvrtého výročí Material Designu, se zdá, že Google připravuje jeho další generaci inspirované papírem a inkoustem estetický: Materiálové provedení 2. O Material Design 2, jehož existenci jsme odhalili tento týden v nových commitech v Chromium Gerrit, je veřejně dostupných jen velmi málo informací. Netvrdíme, že se jedná o a správné nástupce nejnovějšího rámce Material Design, ale závazky poukazují na znatelné, i když jemné změny v paletách barev, ikonografii a chování dotykové obrazovky.


Material Design 2 se zobrazí v Chromium Gerrit

Začátkem února byly v prohlížeči Chrome implementovány nové závazky v uživatelském rozhraní Chromium Gerrit „Material Design 2“ tabstrip – přetahovatelné karty obsahující názvy webových stránek, oblíbené ikony a tlačítko „zavřít kartu“ nad adresní řádek.

Potvrzení nejsou drastická, ale provádějí změny ve vzhledu karet Chrome. Zvyšují výšku proužku; provádět blíže nespecifikovaná vylepšení rozložení obsahu karet, konkrétně názvů a indikátorů výstrah; a zmenšit šířku dotyku štítku a zároveň zvětšit standardní šířku štítku. Oni výslovně ne upravit barvy indikátoru upozornění na kartě, barvy oddělovače karet, tlačítko „nová karta“ nebo jakoukoli typografii karty.

Sbírka karet Chrome.

Potvrzení zjevně odkazují na ikonu tlačítka pro zavření karty „Material Design 2“ a „základní barevné konstanty požadované pro Google Material Design 2“.

Když se ponoříte hlouběji do kódu odevzdání, zobrazí se nové barevné palety „Material Design 2“ pro šedé, červené a červeno-tmavé motivy Chromium a nové barvy pro standardní panel nástrojů Chrome a panel nástrojů inkognito. Ke generování vzorníků RGB jsme použili hexadecimální vyhledávací tabulku:

Material Design 2 je červená mírně tmavší než současný Material Design Červená 800 (#C62828) a Červená 600 (#E53935), zatímco nové odstíny šedé (#3C4043, #5F6368, #BDC1C6, #F1F3F4) mají světlejší, namodralý odstín. Materiálové provedení se vyznačuje tradiční šedou, kde R=G=B, zatímco zde B>G>R u každého odstínu (ale pouze o 1-4 z 255).

Verze Chrome vyhovující Material Design 2 budou také obsahovat mnohem jasnější panel nástrojů než aktuální sestavení – ve srovnání se současným šedým barevným schématem je téměř bílý.

Zde je rychlý model toho, jak bude panel nástrojů vypadat s novými barvami:

Nakonec odevzdání přidá nový IsTouchOptimizedMaterial() vlajka k MaterialDesignController, což může odkazovat na prvky Material Design 2 optimalizované pro dotyk. Na začátku ledna jsme psali o snaze společnosti Google vylepšit Podpora dotykové obrazovky webového prohlížeče Chrome na zařízeních Chrome OS a zdá se, že je jejím pokračováním.

Například potvrzení ukazuje, že na zařízeních s dotykovou obrazovkou bude nastavení Chrome SetStackedLayout „vždy povoleno.“ Ve výchozím nastavení, když otevřete mnoho karet, šířky ostatních karet se zmenší, aby se přizpůsobily nové karty. Skládané rozvržení Chrome zachovává původní šířku karet a přidává nové karty za ně.


Význam barev v materiálovém designu

Co tedy nové barvy znamenají v širším kontextu Material Designu?

Material Design je více než jen o vrstvách, komponentách a prvcích a jejich chování ve vztahu k sobě navzájem. Ústředním motivem designu Google jsou vysoce kontrastní motivy, jasné barvy a výrazná zvýraznění – díky nim aplikace vyhovující Material Design vyčnívají z davu.

Google poskytuje ukázku barevné palety navrženy tak, aby „dobře spolupracovaly“ napříč platformami, a povzbuzují vývojáře, kteří využívají ke zdroji primární barva aplikace – jinak známá jako „dominantní“ barva – ze sbírky 500 různých barev vzorníky. (Přemýšlejte o „modré“, „zelené“ nebo „fialové“ a dalších základních barvách.) V případě potřeby získají sekundární barvu z rozšířené kolekce 700 barev (doplňkové barvy pro nejdůležitější prvky uživatelského rozhraní a analogické pro méně důležité prvky uživatelského rozhraní a terciární barva z podmnožiny 300).

Barva hraje důležitou roli v hierarchii Material Design. Jasné barvy naznačují důležitost – jsou vyhrazeny pro výrazná tlačítka a další interaktivní prvky. Jemnější barvy na druhé straně přidávají vizuální zajímavost tím, že zvýrazní textová pole, ukazatele průběhu, odkazy a další části uživatelského rozhraní.

Z toho, co víme o barevné paletě Material Design 2, je alespoň několik vzorků v „primárních 500“ Google, jako jsou Red 600 a 800, tmavší než jejich předchůdci Material Design. Ale jiní, jako je šedá, dostanou opačné zacházení -- jak šedé, tak bílé vzorky zobrazené v maketě karty Chrome mají chladnější odstíny šedé a vyšší modré hodnoty.


Právě teď je to vše, co o Material Design 2 skutečně víme. Ale potvrzení může být známkou toho, že se v zákulisí něco děje, a pokud je to pravda, možná se dříve nebo později dozvíme více. Očekává se, že Google zabalí Android P, další hlavní verzi Androidu, hned v březnu a Google I/O 2018 začne 8. května. Obojí je hlavní příležitostí, jak se opřít o Material Design 2.

Aktualizace 4. 2. 2018: Krátce po zveřejnění tohoto článku byl závazek soukromý, což potenciálně znamená, že měl být uchován v tajnosti. Budeme průběžně kontrolovat změny Chromium Gerrit a pokud nějaké najdeme, aktualizujeme tento článek.