Praktický úvod do Material Design Lite od spoločnosti Google. Zmeňte všetko tak, ako to váš produkt potrebuje: ako samotní dizajnéri Google uplatňujú pokyny pre Material Design. Povrchy, ich vlastnosti a funkcie

Dnes všetci veľká kvantita firemní zákazníci uvedú v stĺpci „Prianie pre dizajn“ v pokynoch na vytvorenie stránky - „ Material Design“. Zároveň to nie je ani tak vizuálna zložka, ktorá priťahuje pozornosť firemného segmentu, ako skutočnosť, že štýl je v trende a je počuť.

Skôr než prejdeme k príkladom, objasnime si jednu jednoduchú pravdu:

Material Design je firemná identita spoločnosti Google. Napodobňovať ho je rovnako hlúpe, ako sa napríklad výrobca instantných rezancov snaží napodobniť značku Ferrari.

Smernica Material Design sa okrem samotného Google týka aj produktov partnerských spoločností, hlavne aplikácií pre platformu Android. Všetci ostatní, ktorí nesúvisia so spoločnosťou Google a platforma Android, záujem o Material Design by mal byť čisto vzdelávací.

Firemná webová stránka si vyžaduje zmysluplnejší prístup ako len povedať „chcem to takto“. Ak je stránka tvárou značky na webe, mala by mať individuálne vlastnosti a vizuálne zodpovedať všeobecnému obrazu spoločnosti.

Material Design ešte nedosiahol svoj vrchol vývoja a dnes už nie je veľa stránok, ktoré sú nielen realizované v úplnom súlade s pokynmi knihy značiek od Google, ale sú aj harmonicky integrované do vlastného vizuálneho brandingu. Napriek tomu sa nám podarilo nájsť niekoľko dobrých príkladov stránok Material Design.

Príklady stránok v štýle Material Design

Web Kiosk Browser je vyrobený nielen v štýle Material Design, ale je tiež dobre optimalizovaný pre mobilné zariadenia.

vysoko dobré rozhodnutie, ktorý harmonicky kombinuje detaily a vzory podľa smerníc Material Design (tiene, gombíky, plochý dizajn, farby a JS efekty) a firemnú identitu skupiny medzinárodných škôl ISoE.

Platforma Lifeaweso je vyrobená v súlade so základnými princípmi Material Design: jednoduchosť, jasnosť, zrozumiteľnosť. Stránka je stále vo výstavbe, ale vizuálna integrácia Material Design vyzerá celkom dobre.

Známa developerská spoločnosť digitálnych riešení a online služby Futurice jednoducho nedokázali vytvoriť zlú stránku. Pastelové farby, plynulá navigácia a funkčné prvky vytvárajú skvelý používateľský zážitok.

Táto stránka využíva princíp jednoduchosti, ktorý je súčasťou Material dizajnu, a dopĺňa ho živými fotografiami vysokej kvality. Obzvlášť pôsobivé obrázky na pozadí pri rolovaní.

Tu vidíme kľúčový prvok Material Design – karty. Stránka je veľmi ľahká a jednoduchá: nie je tu žiadny neporiadok nepotrebné prvky a kľúčové informácie sa zobrazujú v samostatných blokoch.

Okrem iných atribútov z konceptu Material Design sa tu nachádza kľúčový ovládací prvok – tlačidlo, ktoré sa vznáša nad stránkou. Po kartách je to možno jeden z najpamätnejších prvkov v dizajnovom smere Google.

A, samozrejme, nezabudnime na pôvodný zdroj. Rozhranie služby Google Alerts bolo nedávno aktualizované na Material Design, čo výrazne zlepšilo jeho vizuálne vlastnosti a použiteľnosť.

• Návod

Môžu byť tlačidlá šesťhranné?

Google I/O 2018 odišiel veľké množstvo materiál na pochopenie. Čo je nové? Ako ďalej žiť? Je moja žiadosť neaktuálna? Môžu byť tlačidlá šesťhranné? Už nie sú potrební dizajnéri? Je príjemnejšie chápať pomaly a v malých porciách. Táto časť je o dizajne.

Na štyri roky má Material Design dosť. Autor: údaje Google Na základe tohto dizajnového systému bolo vytvorených 1,5 milióna aplikácií. prečo? Veď pôvodne vznikol pre interné potreby Google.

Vyriešila problémy heterogénneho dizajnu pre Android a nedostatok akéhokoľvek systému.
- Bol univerzálny pre rôzne zariadenia: tablety, smartfóny, web.
- Je premyslený z pohľadu používateľa a je intuitívny.

Systém bol obvinený z nepružnosti a v dôsledku toho dostal návrh plánu. Ak službu navrhnete striktne podľa pokynov, vizuálne sa aplikácie skutočne ukázali ako bezcharakterné. Na druhej strane, prečo obviňovať systém? Smernice nikdy neboli bibliou, mohli ste sa od nich odchýliť. Možno ste si stále vybrali farbu pre svoju aplikáciu iba v palete farieb Google? Dúfam, že nie.

Na druhej strane, pridaním vlastných prvkov ste riskovali, že stretnete svoje Vývojári systému Android v tmavej uličke a vypočujte si dlhú reč o tom, prečo a ako veľmi sa mýlite. Boli to nebezpečné časy.

Všetci víťazi Material Design Award riskovali rovnaké riziko. Všimli ste si, aké prispôsobené používateľské rozhranie majú tieto projekty? Google ich však povzbudil a všetci boli prekvapení.

Teraz je jasné, že Google chce, aby sme si prispôsobili naše aplikácie. Výrobky by mali byť krásne a odlišné. Aktualizované MD je pokusom ukázať dizajnérom a firmám, ako prispôsobiť používateľské rozhranie bez strachu, že ich vývojári budú nadávať.

material.io - Dizajn, vývoj, nástroje

Systém dizajnu môžete začať študovať zo stránky – aktualizovala sa tam nielen časť obsahu, ale aj vizuálny štýl. Teraz vás to naučí aj obrazovka 404 a kliknutím na prvok zo sprievodcov sa vám zobrazí jeho špecifikácia so všetkými vzdialenosťami, typmi písma a odkazmi na stiahnutie z knižnice Google.

Výsledok zatiaľ nie je pôsobivý. Najväčšie plus malo byť pripravený kód pre natívne prvky, ale prepojenie na GitHub nie je také úžasné. Je príliš skoro žiadať vývojárov, aby do vašej aplikácie pridali nové prvky – kód pre ne ešte nebol poskytnutý.

Čo ak vaše prvky nie sú pôvodné? Môžete vidieť označenie, ale nebudete môcť získať vystrihnuté ikony. Takže je priskoro hovoriť o výmene Zeplin.

• Návod

"Je tento nudný dialóg naozaj potrebný?"

V tomto článku som načrtol hlavné princípy Material Designu a dal rady, ako ich implementovať. Text bol napísaný po stopách majstrovského kurzu pre vývojárov, ktorý sme my, Roboti, zorganizovali spolu s ruskou kanceláriou Google (Think Mobile).

Kedysi všetky produkty Google vyzerali inak zle. Dokonca jeden produkt za rôzne platformy vyzeral nekonzistentne.

Všetko sa začalo meniť v roku 2011, kedy Google začal tvrdo pracovať na zjednotení vizuálnej časti ekosystému svojich produktov a nazval ho Project Kennedy.

Čo s tým má spoločné Kennedy?

Legenda je takáto: Prezident Kennedy inicioval program pilotovaného letu na Mesiac (ak si myslíte, že tento let niekedy bol). A veľký šéf v Google Larry Page sa drží zásady, že nemá zmysel zlepšovať produkty o 10 % – mali by byť 10-krát lepšie ako u konkurencie. Ak máme spustiť produkt, tak okamžite na Mesiac. Takže tu bolo rozhodnuté všetko náhle prerobiť.

Výsledok sa dotkol predovšetkým webu, no dotkol sa aj niektorých mobilných produktov. Zároveň prebehla samostatná práca na dizajne Androidu – Holo, ktorý nahradil nie príliš esteticky príjemné rozhrania starého Androidu.
Bol tu však jeden problém: Holo bol stále iný ako projekt Kennedy.


Používatelia sa museli prispôsobiť nové rozhranie pri prepínaní, zvykaní si na vzhľad, rozloženie ovládacích prvkov a pod.
Preto sa v určitom momente dala dokopy skupina dizajnérov z rôznych častí Google a začala s týmto problémom bojovať, aby ho raz a navždy vyriešili.

V roku 2014 bol na konferencii I/O predstavený nový dizajnový systém, prístup s názvom Material Design. Nový dizajnový systém vám umožňuje vytvoriť konzistentný používateľský zážitok na všetkých obrazovkách: stolný počítač, smartfón, tablety, hodinky, televízory, autá. Pre aplikácie pre Android predstavuje Material Design evolúciu vizuálneho jazyka a pokynov pre dizajn Holo. V mnohých smeroch ide o flexibilnejší systém, ktorý bol vytvorený s predpokladom, že ho budú používať aj iní dizajnéri – Google bol len prvým používateľom.

Material Design vám umožňuje objektívnejšie pristupovať k rozhodnutiam o dizajne: ako niečo vyzerá, ako niečo funguje, ako prebieha animácia atď. Poskytuje rozumný rámec, ale nie zbytočné obmedzenia.

4 princípy Material Designu

Material Design je založený na štyroch hlavných princípoch:

1. Dotykové povrchy. V Material Design je rozhranie tvorené hmatateľnými vrstvami takzvaného „digitálneho papiera“. Tieto vrstvy sú umiestnené v rôznych výškach a vrhajú na seba tiene, čo pomáha používateľom lepšie pochopiť anatómiu rozhrania a spôsob interakcie s ním.
2. Dizajn tlače. Ak uvažujeme o vrstvách ako o kusoch „digitálneho papiera“, potom v súvislosti s „digitálnym atramentom“ (všetko, čo je zobrazené na „digitálnom papieri“), je prístup prevzatý z tradičného grafický dizajn: napríklad časopis a plagát.
3. Zmysluplná animácia. V skutočnom svete sa predmety neobjavia z ničoho nič a nezmiznú nikde – to sa stáva len vo filmoch. Preto v Material Design vždy premýšľame o tom, ako použiť animáciu vo vrstvách a digitálnym atramentom, aby sme používateľom poskytli rady o tom, ako rozhranie funguje.
4. Adaptívny dizajn. Takto aplikujeme predchádzajúce tri koncepty rôzne zariadenia s rôzne povolenia a veľkosti obrazovky.

Takže poďme po poriadku.

Dotykové povrchy

Začnime hmatovými plochami. Sú to práve tie kúsky „digitálneho papiera“, ktoré majú na rozdiel od bežného papiera superschopnosti – dokážu sa natiahnuť, spojiť a zmeniť svoj tvar. Inak sa správajú plne v súlade s fyzikálnymi zákonmi a legislatívou Ruskej federácie.

Povrch

Čo je povrch? V podstate ide o „nádobu“ s tieňom a ničím iným. To však stačí na rozlíšenie jedného objektu od druhého a na zobrazenie toho, ako sú umiestnené voči sebe navzájom. Filozofia Material Designu sa snaží o jednoduchosť a čistý dizajn.

Nie je potrebné ísť príliš ďaleko a použiť textúru, použiť prechody na zobrazenie šerosvitu. Pokožke netreba dávať vizuálne vlastnosti ako pri babkiných dverách do bytu – úhľadný tieň dokáže veľa vyjadriť. Každý povrch má ale svoju výšku – umiestnenie na osi Z. A každý z povrchov vrhá na spodok tieň, tak ako v skutočnom svete.

Hĺbka

V tradičnom plochom dizajne sa vyhýbajú tieňom ako akejkoľvek forme objemu, ale slúžia dôležitej funkcii na označenie štruktúry a hierarchie prvkov na obrazovke. Napríklad, ak je zdvih prvku väčší, jeho tieň bude väčší. Táto zvýšená hĺbka pomáha sústrediť pozornosť používateľa na kritické záležitosti a robiť to elegantne.

Hĺbka tiež definuje indície interakcie. Tu, keď používateľ roluje, zelená pevná látka sa prilepí na vrchnú vrstvu a pridá sa tieň. To ukazuje, že sa nehýbe len „atrament“, ale Biele pozadie je dole a úplne sa pohybuje.

Je dôležité poznamenať, že hĺbka má „spodok“. Predpokladá sa, že je obmedzený hrúbkou samotného mobilného zariadenia. To znamená, že ak je to na smartfóne centimeter od skla k zadnej stene a v rozhraní máte kreditnú kartu, nemôžete ju len tak otočiť – bude spočívať na skle a zadnej stene.

NB!

1. Hĺbka by mala dávať zmysel. Položte si otázku: "Prečo je to tak a nie inak?" Ak neexistuje odpoveď, má zmysel hľadať iné riešenie.
2. Postarajte sa o logistiku. Plávajúce tlačidlá, panely nástrojov a dialógové okná sú v určitej výške. Niekedy sa potrebujú pohybovať pozdĺž osi Z, aby sa vyhli kolíziám, keď sa niečo stane. Pri tejto choreografii musíte byť mimoriadne opatrní.
3. Tlačidlo nestláčajte nasilu. Veľmi výrazným prvkom je plávajúce tlačidlo. Mnoho ľudí si myslí, že sa oplatí pridať ho do rozhrania: okamžite sa z neho stane Material Design. Malo by sa však používať iba na kľúčová akcia vo vašej aplikácii. Ak potrebujete zatvoriť okno alebo potvrdiť akciu, nemusíte použiť plávajúce tlačidlo. Sú na to iné prvky.
4. Nie všetko musí byť na karte. Ak má predmet veľa podôb a obsahuje veľa odlišný obsah potom karta pasuje. A ak nie, možno je lepšie to urobiť ako obyčajný text alebo textový zoznam?
5. Je tento nudný dialóg naozaj potrebný? Dizajnéri Google sa pokúsili vylepšiť dialógové okná, no spodné hárky sú stále vhodnejšie pre väčšinu úloh. K dispozícii sú aj Snackbary. Dialógové okná sú potrebné iba na položenie otázky používateľovi.
6. Použite rozšírenie zoznamu. Toto je podceňovaný vzor, ​​ale je dosť materiálny a robí dobrú prácu.

Dizajn tlače

Keďže povrchy v Material dizajne nazývame „ digitálny papier“, Potom všetko, čo je na ňom umiestnené – text, obrázky, piktogramy – sa aplikuje „digitálnym atramentom“. A Material Design využíva klasické princípy tlačového dizajnu pri navrhovaní rozhraní.

Elegantná typografia

V dizajne tlače hrá typografia zásadnú úlohu dôležitá úloha... Vezmite si akýkoľvek časopis a všimnete si, že typografia robí dva dôležité funkcie... Po prvé, výber a kompozícia písma je štýlotvorným prvkom značky publikácie. Po druhé, typografia definuje štruktúru obsahu.


Na tejto obrazovke je pomerne málo textu. Ak však zahodíme ikony a zmeníme text na sivé bloky, je zrejmé, že štruktúra je celkom rozlíšiteľná.

Pred nami veľký nadpis a súbor menších prvkov, ktoré sa líšia svojou sýtosťou – dôležitejšie sú tmavšie. Zároveň jasne rozlišujeme zoskupenie vďaka tomu, že niektoré obdĺžniky sú blízko a medzi blokmi je výrazné odsadenie. Vo všeobecnosti je všetko v najlepších tradíciách!

Veľkosť písma

Google.com/design/spec má štandardnú paletu písiem, ktorú môžete bezpečne používať. Paleta používa písmo Roboto, ale môžete ho nahradiť vlastným značkovým písmom na podporu značky. Je dôležité všetko dôkladne otestovať, pretože vykresľovanie písma môže na rôznych zariadeniach fungovať odlišne. Písma OTF zvyčajne fungujú lepšie ako písma TTF.

Kontrastná typografia

Ďalším princípom zo sveta tlače, ktorý si rozumie s Material Designom, je kontrastná typografia – skutočne citeľný kontrast medzi veľkosťou písma nadpisu a sadzbou textu. To krásne a dobre zdôrazňuje to hlavné.

Modulárna mriežka a vodidlá

Teraz k rozloženiu obsahu na obrazovke. V dizajne tlače sa používajú modulárne mriežky, v dizajne obrazovky sú to skôr základné mriežky s veľmi malými modulmi. Napríklad Material Design používa mriežku 8dp. DP znamená pixel nezávislý od hustoty, jednotku veľmi podobnú jednotke bodu v systéme iOS.

Ale to hlavné charakteristický znak umiestnenie obsahu v súlade s princípmi Material Design – umiestnenie kľúčových sprievodcov. Nastavujú výplň z okrajov obrazovky, štruktúrujú informácie a kontrolujú pohľad používateľa. Ak poznáte dizajn viacstranových publikácií alebo ste čítali Tschichold, pravdepodobne viete veľa o mriežke a okrajoch a chápete, odkiaľ tu nohy rastú.

V skutočnosti vidíme stĺpec textu v strede a veľký okraj vľavo, čo umožňuje zamerať sa na hlavný obsah a pridať pomocné prvky na okraje.

Geometrická ikonografia

Čo sa týka ikonografie, v Androide sa už nejaký čas používajú jednoduché ikony, no v Material dizajne sú ešte jednoduchšie a prívetivejšie. zapnuté neoficiálny zdroj Dizajnéri materialdesignicons.com môžu nájsť ikony pre svoje účely a prispieť čo najviac.

Farba

Rovnako ako pri dizajne tlače, farba je dôležitým výrazovým prostriedkom v dizajne rozhrania. V starom Androide bola farba doplnková, ale teraz hrá výraznejšiu úlohu. V Material dizajne štandard farebná paleta aplikácia pozostáva z hlavných a akcentových farieb.

Hlavný sa používa pre veľké oblasti, ako je akčný panel, a stavový riadok je zafarbený v tmavšej variácii. V bodoch na ovládacích prvkoch, tlačidlách, pruhoch, indikátoroch a ďalších bodoch sa používa jasnejšia zvýrazňujúca farba. Akcentná farba je navrhnutá tak, aby upriamila pozornosť používateľa Kľúčové elementy ako napríklad plávajúce tlačidlo.

Koľko farby by ste mali použiť? Akcenty sú umiestnené bodovo, v malých množstvách. Existuje jednoduché základné pravidlo pre farbenie zvyšku rozhrania. Ak je tam veľa textu, napríklad toto je zoznam pošty, mali by ste opustiť panel aplikácií štandardná veľkosť a vyfarbite ho, aby sa používateľ mohol sústrediť na obsah. Ak nie je veľa obsahu, napríklad podrobné zobrazenie individuálny prvok, fotografiu alebo kalkulačku, potom je to skvelá príležitosť použiť veľké farebné raznice - 2x alebo 3x výška lišty aplikácie.

Android spravuje knižnicu s názvom Palette, ktorá vám umožňuje extrahovať farby z fotografií. To znamená, že je možné dynamicky maľovať rozhranie na základe fotografických ilustrácií v aplikácii.

Urobili sme fotografiu a algoritmus z nej extrahoval 6 farieb s rôznymi charakteristikami:
- sú 3 šťavnaté a 3 tlmené farby;
- sú rozdelené na svetlé, štandardné a tmavé tóny;
- pre každú farbu pozadia je definovaná jej vlastná farba textu, ktorú je možné aj použiť.

Pekné obrázky

Napokon, rovnako ako pri dizajne tlače, aj Material Design podporuje použitie fotografie a ilustrácie v celej svojej kráse. Obrázky sú väčšinou umiestňované bez rámov, často "priamo". Dokonca aj stavový riadok je zámerne priehľadný, aby neprekážal. Navyše každá kvapka „digitálneho atramentu“ na obrazovke má svoju funkciu, nie je tu takmer nič len na okrasu.

NB!

1. Užite si branding. Google je v lepšej pozícii na používanie svetlé farby ako značkové, ale nemalo by to byť vnímané ako problém. Farby je možné vybrať z firemnej knihy značiek a vo všeobecnosti použiť logo.
2. Nezabudnite na vypchávky a „poďme sa nadýchať“. Základná čiara 8dp a ľavý okraj 72dp je prakticky pravidlom. Udržujte obsah dobrý a bezplatný.
3. Expresívne fotografie robia počasie. Fotografie a ilustrácie ako výrazové prostriedky sú našou voľbou.

Zmysluplná animácia

V skutočnom svete sa predmety nemôžu z ničoho nič objaviť alebo zmiznúť. Spôsobilo by to zmätok a zmätok. Preto sa v Material dizajne používa zmysluplná animácia, ktorá presne ukazuje, čo sa práve stalo.

Príklad 1 Animácia ukazuje, že práve táto karta sa po kliknutí dostala dopredu, rozbalila sa a zviditeľnilo sa viac informácií.

Príklad 2 Udalosť v kalendári sa po stlačení odlepí od povrchu, zmení sa na samostatnú vrstvu „papiera“, začne sa premieňať a odkryje sa v podobe detailných informácií o udalosti.

Zaujímavosťou je, že aktívny pohyb priťahuje oko – to je prirodzené pre naše videnie. Pomocou animácie kontrolujeme pozornosť používateľa.

Asymetria

Keďže hĺbka rozhrania je obmedzená hrúbkou zariadenia, všetky transformácie objektu sa musia vykonávať v rovine. To tiež spôsobuje, že animácia transformácie je asymetrická - to znamená, že zmena šírky a výšky objektu by mala byť nezávislá. V opačnom prípade vzniká ilúzia približovania sa alebo vzďaľovania sa od diváka, a to pri veľmi veľká vzdialenosť.

Reakcia

Ďalší veľmi dôležitý princíp animácie v Material dizajne sú reakciami na akcie používateľa. Ak je to možné, epicentrom zmien rozhrania by mal byť dotyk obrazovky zariadenia. Napríklad vlna, ktorá sa objavuje a prechádza z bodu kontaktu s vaším prstom. Tento efekt je ľahko implementovaný v systéme Android L.

Mikroanimácia

V Androide L môžeme animovať každý prvok aplikácie, či už ide o prechody medzi obsahom alebo malé akčné ikony. Každý detail aplikácie je dôležitý a mikroanimácie dodávajú aplikácii väčšiu podrobnosť a odozvu na každú akciu používateľa.

Jasnosť a ostrosť

A posledný, kľúčový princíp animácie: pohyb musí byť rýchly a jasný. Na rozdiel od banálneho zrýchlenia na začiatku a spomalenia na konci je animačná krivka v Material dizajne prirodzenejšia a zaujímavejšia. Objekty reagujú rýchlejšie a dosiahnu cieľový stav, vrátia sa prudšie, ale na konci prejdú trochu dlhšie do stavu pokoja. Výsledkom je, že používateľ musí čakať menej (je to menej nepríjemné). Zároveň tam, kde už objekt opustil sféru záujmov používateľov, si dovoľuje správať sa prirodzenejšie.

NB!

1. Nenechávajte animáciu na koniec. Nenechávajte animáciu až na úplný koniec – môže to byť kľúčový faktor. používateľskú skúsenosť, a to si treba vopred premyslieť.
2. Vedieť, kedy prestať. Príliš veľa animácií tiež škodí. Ovládajte sa a pamätajte, že to musí mať zmysel.

Adaptívny dizajn

Posledným hlavným aspektom Material Designu je koncept responzívny dizajn... To znamená, ako môžeme použiť všetky tri prvé koncepty na rôznych zariadeniach a obrazovkách v rôznych tvarových faktoroch.

Od všeobecného ku konkrétnemu

Najbežnejšou technikou je zníženie množstva informácií zobrazených na obrazovke spolu s menšou obrazovkou. Ak si na veľkej obrazovke môžeme dovoliť zobraziť zoznam aj detailné informácie pre vybratú položku, potom sa na smartfónoch najprv zobrazí zoznam a podrobnosti, ktoré potrebujete samostatná obrazovka... V prípade tabletov sa dá lišta aplikácií občas zväčšiť, aby sa s prebytkom voľného miesta aspoň trochu vyrovnala.

Odsadenie

Umiestňovanie obsahu pomocou blokov výrazne uľahčuje prácu s voľným priestorom na veľkých obrazovkách. Poznáme obsah každého bloku, chápeme, aký môže byť široký, aby nestratil čitateľnosť, a tiež ako úzky, aby nebol príliš preplnený. zapnuté širokouhlé obrazovky bloky sa roztiahnu na hranicu čitateľnosti a potom sa od okrajov pridajú okraje, ktoré môžu byť veľké. Môžu byť naplnené plávajúcim gombíkom a farebnými blokmi.

Biele rámy

Nápady na usporiadanie priestoru a vypchávky pre rôzne obrazovky môžete sledovať na google.com/design/spec pod Whiteframes. Toto je skvelé miesto, kde začať, pochopte všeobecný význam a potom pokračujte vo vlastných experimentoch.

Sprievodcovia

Sprievodcovia nám dávajú zárez pre "atrament". samostatné listy"Papier". Na smartfóne máme vľavo jeden hárok a jedno dobré odsadenie a na tablete dva a v oboch prípadoch je odsadenie. Je dôležité, aby sa odsadenie pre tieto dva tvarové faktory líšilo. Na tablete je to 80dp a na smartfóne je to 72dp. Odlišné sú aj posuny od okrajov obrazovky.

Rozmery (upraviť)

Odporúča sa použiť viaceré proporcie pre všetky prvky. Najmä je oveľa pohodlnejšie zvoliť veľkosť panela aplikácií, ak ho urobíte násobkom: 1x, 2x, 3x. Táto veľkosť je iná na smartfónoch a tabletoch, no aplikácia sa bez problémov prispôsobí.

Bloky

Myslenie v blokoch môže byť vo všeobecnosti užitočné. Ak sa spýtate toto modulárna mriežka z blokov, ktoré sú násobkami 8dp, získate vynikajúci vizuálny rytmus a bude pohodlnejšie sa rozhodovať. Prejdite na webovú stránku s whiteframes a pozrite si materiály.

Panel s nástrojmi

Panel akcií je jednou z najdôležitejších častí rozhrania. Obsahuje názov, tlačidlá akcií a navigáciu. V systéme Android Lollipop sa panel akcií zmenil zo spútaného prúžku navrchu na plnohodnotný widget – funkčný a krásny blok ovládanie aplikácie. Bolo to možné vďaka skutočnosti, že teraz môžete na panel s nástrojmi umiestniť veľa funkčných prvkov, o ktorých ste predtým ani nesnívali:
- vstupné polia, formuláre;
- plávajúce tlačidlo hlavnej akcie;
- panel nástrojov je skrytý pod rozšírenou navigáciou, no aj tu vidíme úplne funkčný widget;
- v prípade potreby je vhodné ovládať panel nástrojov.

NB!

1. Nie vždy potrebujete navigačnú zásuvku. Google vo svojich aplikáciách veľa používa vysúvaciu navigáciu, takže ju vidíte v rôzne príklady... Google má však veľa úloh, ktoré možno s jeho pomocou vyriešiť: uverejňovanie pomoci, nastavenia, prihlásenie / odhlásenie, informácie o používateľovi atď. Ak máte podobné úlohy, potom je všetko v poriadku, ale ak vyrábate jednoduchý nástroj, nestojí to za to.
2. Inteligentnejšie a inteligentnejšie s panelmi nástrojov. Schopnosť dynamicky meniť veľkosť panela s nástrojmi, zdvojnásobiť a ztrojnásobiť, je veľmi cool a pohodlná. Väčšina dizajnérov sa do toho bojí zapojiť a vybrať si jednu veľkosť raz a navždy, ale tu môžete a mali by ste byť odvážnejší.
3. Nie je potrebné robiť zo spodného rohu geta plávajúce tlačidlo. Plávajúce tlačidlo môže byť kdekoľvek: dole, hore, vpravo, vľavo. Samozrejme, môže byť pohodlné siahnuť po ňom v rohu, no nie je to jediná možnosť. Tlačidlo sa môže pohybovať z miesta na miesto v závislosti od úloh.
4. Smartfóny aj tablety; vertikálne aj horizontálne. Rozsah zariadení so systémom Android je veľký, čo vývojárom neuľahčuje život. Ale pravdou je, že používatelia majú všetky tieto zariadenia, ktoré otáčajú tak a tak (aj keď ide o smartfóny). Tento moment sa musí prepracovať.

Toto je Material Design. Nebojte sa experimentovať a robiť chyby: nenechajte sa zavesiť na kopírovanie existujúce riešenia... Skús to!

Štítky: Pridať štítky

Označte svoj príspevok Štítky je lepšie oddeľovať čiarkou. Napríklad: programovanie, algoritmy

Komentáre 121

• • • • • • • • • • Držíte, podobne ako Google, telefón iba vodorovne?
                    

                    Vertikálne sa využíva iba 50-70% obrazovky

                    
                    

                    • Na tejto obrazovke je pomerne málo textu.

                      Je to veľa textu? Čo urobil Twitter ľuďom...

Čo je materiálový dizajn? Ide o súbor štýlov a grafiky vyvinutých spoločnosťou Google, ako aj pokyny a pravidlá na dodržiavanie týchto štýlov. Materiálový dizajn bol prvýkrát predstavený na vývojárskej konferencii Google I/O v lete 2014. Štýl je založený na formáte "kartičiek" a "blokov" - jednoduchých a lakonických tvarov a grafických prvkov, ako aj všeobecnej jednoduchosti a sviežosti dizajnu - pokojné, nudné farby, nedostatok objemu, malé detaily a detaily v všeobecný. Prvý „objav“ pre materiálový dizajn prebehol spolu so spustením služby Google Now a oficiálne sa štýl stal základom pre operačnú sálu. systémy Android najnovšie vo verzii 5.0, známej aj ako Android Lollipop.

Material design má podľa mňa oproti všetkým doterajším pokusom Google dostať dizajn svojho operačného systému a programov preň do jednotnej podoby niekoľko veľmi dôležitých výhod, ale aj niektoré nevýhody. V tomto krátkom článku sa pokúsim predstaviť môj pohľad na nový dizajnový jazyk od Google.

Materiálové prevedenie – klady

Prvým a najdôležitejším argumentom v prospech nového štýlu je podľa mňa jeho prevedenie. Nechcem opäť pôsobiť ako nenávidenec technológií a prístupu Apple, ale in v tomto prípade nie je to strašidelné, pretože vyjadrujem len svoj názor. Aktualizácia iOS na siedmu verziu a aktualizácia Androidu na piatu sú teda podľa mňa, ako sa hovorí, dva veľké rozdiely.

V prípade Apple sme videli zvyčajné prenesenie predchádzajúcej grafiky do plochého zobrazenia, žiadny nový nápad, žiadna túžba priniesť niečo čerstvé – jednoducho sme existujúce rozhranie, stlačil ho lisom, prekreslil ikony a pridal dúhu obrázky na pozadí... Presne obrázky na pozadí v nový iOS 7 a efekty transparentnosti jedálneho lístka sú podľa mňa indikátorom nevkusu a neochoty dizajnérov urobiť niečo dobré a láskavé. V „sedmičke“ si každý len hádzal prach do očí krásne efekty animáciu a celkový jas nového rozhrania. Zdá sa mi, že sa nikto skutočne nezamýšľal nad tým, či by to bolo pohodlné, pretože inak by dizajnéri Apple dali viac pozornosti funkčné body, nie dúhový dizajn.

Odtieň upozornení, nazývaný zhora, a ovládací panel, nazývaný zdola, sú názornými príkladmi zbytočného „upgradu“ v iOS7. Prvá nebola spresnená - všetky notifikácie sú zhlukované a je ich priveľa, druhá je spravená na polovicu, prepínače umožňujú zapínať/vypínať rozhrania, no neprechádzať do ich konfigurácie a voľby siete

Android 5.0 bol oproti 4.x aktualizovaný veľmi vážne aj po grafickej stránke práve z dôvodu presunu operačného systému do materiálového prevedenia. A na prvý pohľad sú tu zmeny podobné tým, ktoré sa udiali v iOS – posledná zmena štýlu na plochý, ľahší celkový dizajn, vonkajšia jednoduchosť. Potom však začnú rozdiely. V Androide 5.0 je rozhranie holistickejšie vďaka materiálovému dizajnu – všetko je urobené v jednom pokojnom štýle, nič nevyčnieva a nepôsobí farebne ani prehnane žiarivo. Vylučuje hlavný princíp materiálového dizajnu prednosť grafických efektov v rozhraní pred jeho praktickosťou? a je to veľmi cool.

Aby som zhrnul prvý argument – ​​materiálový dizajn už vyzerá veľmi holisticky, presne toto chýbalo operačnému systému od Google a KO – celistvosť a komunita. Keď, otvorte každý samostatný program, či už sú to kontakty, prehliadač, e-mailový klient alebo niečo iné, vidíte rovnakú animáciu, rovnakú paletu farieb a len rozpoznateľné prvky. Vďaka tomu sa na nový OS ľahšie zvyká a jednoducho sa s ním pracuje príjemne.

Druhým argumentom je, že ak ste už používali smartfón na Lollipop alebo ste videli snímky obrazovky, pravdepodobne ste si všimli, že rozhranie sa vizuálne zväčšilo. Zväčšovanie rozhrania prebieha v dotykových zariadeniach už dlhšiu dobu. Ak porovnáme prvé Verzia pre Android s „vtedajším“ Windows Mobile – je zrejmé, že Android bol väčší a jednoduchší, na displeji bolo menej informácií, no aj pohodlnejšie sa smartfón ovládal. V materiálovom prevedení boli niektoré prvky nahradené „kartami“, mierne sa zväčšili fonty, veľkosti ikon a čiar, zväčšilo sa rozhranie ako celok. Páči sa mi to, asi preto, že starnem, vtipy sú vtipy, ale čím starší, tým menšia chuť pozerať sa na ikony a prvky „na blízko“, aj keď dobré videnie... Mimochodom, preto sa mi nepáči iPhone 5 a nič menej. Kompaktnosť Kompaktnosť, ale aj na obrazovke s uhlopriečkou 4,5 "" chcete vidieť normálne veľkosti prvkov, než aby to študovali lupou. To je v mnohých situáciách oveľa pohodlnejšie, najmä napríklad pri práci so smartfónom na cestách. Preto sa mi celkové spevnenie rozhrania v Androide 5.0 na základe materiálového dizajnu javí ako dobrý krok.

Tretí argument je pre – Google nepreložil len Android do nový dizajn, ale okamžite pripravil aj potrebných obrazových sprievodcov s ukážkou implementácie hlavných prvkov pre vývojárov softvéru. Jednoducho povedané, ak vytvárate nový program alebo chcete preložiť starý do nového dizajnu, vy stránky a preštudujte si odporúčania Google.

Napríklad hovorí, ktoré farby použiť. zobrazuje fonty a ako ich používať. A odporúčania na použitie správne grafické obrázky v programe.

Materiálové prevedenie – argumenty PROTI

Tretí argument v prospech materiálového dizajnu je však zároveň argumentom proti nemu. Áno, Google je skvelý na to, že neopúšťa vývojárov a dáva im komplexný sprievodca na správnu aplikáciu nového dizajnového jazyka, no v tomto prípade sa povedzme nedalo myslieť na používateľov. Programy napísané podľa všetkých pravidiel materiálového dizajnu alebo externe zmenené správa google, bude vyzerať veľmi harmonicky v systéme Android 5.0 a nie tak v starších verziách systému. A naopak – všetky aplikácie, ktoré nespĺňajú pravidlá materiálového dizajnu, budú na smartfóne s Androidom Lollipop pôsobiť akosi cudzo. A dovolím si navrhnúť, že v nasledujúcich šiestich mesiacoch bude veľa takýchto programov. Napriek tomu nie každý vývojár požaduje program, najmä ak je zložitý a vyžaduje neustále aktualizácie a vylepšenia, zahodí všetko a začne to prekladať do materiálového dizajnu.

Dobrým príkladom starého dizajnu vo veľmi aktuálny program- WhatsApp. Ako dlho nebude aplikácia preložená do md? Dobrá otázka

Ukazuje sa, že niektorí z vývojárov sa teraz naozaj vzdajú všetkého a prenesú svoje programy do materiálového dizajnu, zatiaľ čo iní nie. A tiež v Google Play existujú programy v staršom, povedzme, dizajne, ale tiež niekedy potrebné v práci. V dôsledku toho sa ukazuje, že jedna túžba spoločnosti Google (nepochybne správna!) Priniesť Android všeobecný pohľad nestačí, musíte niečo urobiť so stovkami tisíc programov. Otázka je čo?

Milí čitatelia, ako sa vám páči nápad spoločnosti Google priniesť všetky svoje služby a aplikácie do spoločnej podoby, na ktorej je založený materiálový dizajn?

Na konferencii pre vývojárov Google I / O 2018 okrem aktualizovaného systému Android a hlbšej integrácie umela inteligencia k vašim službám, Google zaviedol nový štandard v dizajne systému a mobilné aplikácie- Material Design 2.0. Čo je nové?

Biely priestor a priesvitnosť

Jednou z najvýraznejších zmien v novom materiálovom dizajne je minimálne množstvo sýtych farieb a šedej, iba jednoliaty biely priestor a priesvitnosť. Podľa môjho názoru to vyzerá veľmi čerstvo, čím sa zobrazuje operačný systém a softvér nová úroveň zrakové vnímanie. Odteraz stock Android P, žiadne grafické doplnky od výrobcov tretích strán, právom považujem za najkrajšie riešenie medzi rozhraniami. PODĽA MÔJHO NÁZORU.

Nové nástroje pre vývojárov:

Materiálová téma

Doplnok Material Theme pre Sketch je v podstate knižnica písiem, ikon a podnikových farieb, ktoré poskytujú nové pokyny Google v systéme Android P. Pri vývoji s ním môžete tiež upravovať tvar komponentov a typografiu vo svojom projekte. pár kliknutí.

Viac zaoblenia a minimalizmu

Ako mnohí poznamenali, vzhľad sa stal veľmi podobným Apple iOS 10 a 11, no rozhodne tento krok podnikla spoločnosť špeciálne pre výrobcov a majiteľov bezrámčekové smartfóny, ktorých počet sa každým rokom neúprosne zvyšuje, pretože tento vzhľad systému a softvéru je oveľa lepšie kombinovaný s ich zaoblenými displejmi.

Nové fonty

Vývojári a dizajnéri Google použili typ písma Product Sans na nový dizajn log a značkových služieb. Pre nich bol vytvorený špeciálny Google Sans fork. Vychádza zo spomínaného písma, nahrádzajúceho štandardné Roboto.

Čoskoro teda môžeme očakávať rozsiahly redizajn celého webu a mobilu služby Google... V súčasnosti sú v obchode s aplikáciami niektoré z týchto prvorodených hier Google Play Games, Google Tasks a konferenčná aplikácia Google I / O 2018.

• Aktualizované ilustrácie značky

• Použitie štyroch základných farieb loga ako vizuálneho jazyka

príklad, nová verzia Gmail:

Koncepty Material Design 2.0

Netreba dodávať, že dizajnérska komunita zareagovala na pripravované zmeny dizajnu od Google a presne pred mesiacom predstavil používateľ Redditu pod prezývkou Morphicsn0w svoju víziu stránky Google Play.

okrem vizuálne zmeny vo forme zaoblených kariet prezentujúcich aplikácie autor podľa jeho názoru opustil zbytočné sekcie, ako sú nedávno stiahnuté aplikácie, čím sa rozhranie obchodu stalo jednoduchším a informatívnejším.

Na obrazovkách aplikácií sa Morphicsn0w zameral na popisy aplikácií a presunul pozornosť od sťahovania a hodnotení používateľov.

Dizajnér prepracoval aj vyhľadávací systém Google Play, pridal radenie nájdených výsledkov podľa ceny, dátumu aktualizácie, hodnotenia a počtu stiahnutí. Prítomnosť takéhoto triedenia by výrazne zjednodušila vyhľadávanie. potrebný softvér na otvorených priestoroch predajne čakám a dúfam v implementáciu jedného od Google.

Nešetril ani mnohými obľúbený YouTube autor portálu 9to5Google a v kombinácii dobrý dizajnér Alex Brooks fantazírovali o tom, čo by sa dalo zmeniť v existujúceho klienta video hosting. Reuzltat ma osobne veľmi, veľmi inšpiroval.

Prvá vec, ktorú Alex urobil, bola navigačná lišta hlavnú obrazovku a vyfarbite ju jasnými, veselými farbami. Po prvej položke nasleduje prepracovaný riadok vyhľadávania, teraz to nie je samostatné tlačidlo, ale zaberá celú využiteľnú plochu hornej časti aplikácie, čím uľahčuje prístup. A štítok s počtom odberateľov, tlačidlo na prihlásenie sa na odber kanála a návrat na predchádzajúcu úroveň z pohľadu autora sa nachádza v spodnej časti, čo je tiež užitočné riešenie z hľadiska jednoduchosti používania.

Sekciu knižnica (história pozretých videí, správa nahraných videí, lajkovaných videí atď.) dizajnér spojil so sekciou nastavení. užívateľský profil, teraz sú oba parametre prístupné kliknutím na užívateľský obrázok. Podľa mňa je to síce kontroverzné, ale predsa len do istej miery správne riešenie, pretože zjednodušuje interakciu používateľa so službou a robí aplikáciu zrozumiteľnejšou pre nových používateľov, ktorí ešte len spoznávajú svet mobilných technológií.

Viac detailné informácie prečítajte si o koncepte YouTube od Alexa v pôvodnom článku.

Koncept Hudby Google Play v Material Design 2.0

Inšpirovaný prezentáciou a desiatkami prác iných dizajnérov som sa rozhodol skúsiť urobiť niečo vlastné, pričom som si vybral jednu zo súčasných služieb Google. Prehrávať hudbu... Predtým som s touto službou nikdy nepracoval, rovnako ako so streamingovou platformou, ale musel som pracovať na svojej povinnosti. Služba vyvolala mimoriadne pozitívne dojmy, už len preto, že samotná aplikácia funguje primerane a na rozdiel od nej nepadá Apple Music ktorý používam od jeho vydania na Android.

Vo všeobecnosti sú služby podobné a obe plnia svoj primárny účel – prehrávanie hudby. A k obom existujú tvrdenia týkajúce sa rozhrania, ale keďže dnes hovoríme o spoločnosti Google, budeme ich službu podľa toho posudzovať.

Hlavná obrazovka

Prvá sťažnosť na hlavnú obrazovku - nepáči sa mi, čo to je obrovský priestor, ktorú zaberá výlučne vyhľadávací panel a obaly zoznamov skladieb s výberom. Vlastne v prvom rade som sa rozhodol to napraviť.

V mojom poňatí Hlavná obrazovka predstavuje tú istú, ale mierne prepracovanú pásku s kolekciami albumov, skladieb, zoznamov skladieb podľa vkusu používateľa, len teraz, ak chcete zobraziť obsah a prejsť na prehrávanie požadovanej skladby, nemusíte robiť ďalšie kliknutia a opustite hlavnú obrazovku, to isté platí aj pre prechod medzi sekciami (hlavná, nedávna, hitparáda atď.), ktorý je teraz možné vykonať potiahnutím prstom po obrazovke.

Hráč

Druhým dizajnovo nepodareným bodom je podľa mňa prehrávač. V oficiálna aplikácia Obaly skladieb Hudby Google Play sa tiahnu cez celú uhlopriečku obrazovky smartfónu, vďaka čomu na zariadeniach s displejom s vysokým rozlíšením vyzerajú veľmi nedbale a rozmazane, riešenie problému som prezentoval takto:

Teraz sú kryty úhľadne usporiadané v strede a pozdĺž ľavého a pravého okraja sa zobrazuje náhľad predchádzajúcej a nasledujúcej stopy, akoby naznačoval možnosť ich prepínania potiahnutím prstom.

Mediathek

Tretia vec, ktorá sa mi na Play Music nepáči, je rozloženie a výzdoba knižnice médií. Podľa môjho názoru je jeho štruktúra príliš komplikovaná. Napríklad na prístup túto sekciu z hlavnej obrazovky musíte vykonať až štyri akcie: potiahnutím prstom zavoláte bočný panel; kliknutím vyberte časť „Hudobná knižnica“; potiahnutím prstom cez zoznam vyberte požadovanú kartu (zoznamy skladieb, rádiové stanice, interpreti, albumy).

Tlačidlo s prístupom k pridaným skladbám som preto presunul do spodného docku a po jeho otvorení sa štandardne zobrazí záložka albumov s možnosťou ich zoradenia podľa dátumu vydania, prídavku a abecedy.

Menu / Bočný panel

V súlade s novými princípmi dizajnu aplikácií Google známe menu s prístupom k nastaveniam som sa presunul do pravého horného rohu.

Prezentácia konceptu Hudby Google Play na Behance

Záver

Na záver chcem povedať, že som veľmi spokojný s cestou, ktorou sa Google snaží ísť. Okrem veľkého skoku vpred vo vývoji a pohodlí svojich služieb spoločnosť posúva vpred aj dizajnový kód. Po napísaní článku pred šiestimi mesiacmi o skúsenostiach s používaním iOS 6 v roku 2018 som sa pristihla pri myšlienke, že v priebehu rokov sa mobilné operačné systémy Android a iOS veľmi nevyvinuli, pokiaľ ide o vizuálny a koncepčný výkon rozhrania, ale teraz Úplne som odhováral svoju pozíciu, aspoň pokiaľ ide o Android.

Ďakujem za pozornosť!