U našem današnjem članku dotaknut ćemo se teme o kojoj se još nije raspravljalo o Rusability-u. Da budemo pošteni, napominjemo da u RuNetu kao takvom interes za ovu temu tek počinje dobivati zamah, unatoč činjenici da je sam koncept rođen prošle godine. Riječ je o senzacionalnom i, kako neki smatraju, revolucionarnom smjeru dizajna, koji je Google nazvao material design.
Materijalni dizajn nije toliko čak ni neki novi pristup izgradnji odnosa između korisnika i virtualnog okruženja, koliko čitava filozofija koja regulira takve odnose. Kao i mnogi doista svijetli i svježi fenomeni novijeg doba, materijalni dizajn uspješna je kompilacija onih ideja i koncepata koji su se ili već zasebno susreli u različitim proizvodima, ili su, kako kažu, bili u zraku. Još se vode rasprave o tome je li materijalni dizajn dobar smjer, kao i pedantno i skrupulozno traženje svakojakih nedostataka, ali možda nitko ne poriče da je ovaj koncept vrlo točan odraz duha vremena i težnji obični korisnici. Estetski je ispravan, atraktivan, intuitivan i, naizgled, vrlo jednostavan za korištenje. “Material design is cool” - ovakva emocija spaja entuzijastičnu i kritičniju publiku, ukazujući na nedostatke materijalnog dizajna.
Materijalni dizajn možemo promatrati kao prvi ozbiljan i prilično predvidljiv korak prema masovnoj unificiranju sučelja, a posljedično i unificiranju korisničkog iskustva kao takvog. Ova značajka ključna je za dizajn materijala - univerzalna je i ujednačena. Kao drugu karakterističnu značajku materijalnog dizajna treba istaknuti intuitivnost, koja je sljedeći najvažniji aspekt nakon sveobuhvatne unifikacije. Zapravo, ove dvije komponente - objedinjavanje sučelja i maksimalna intuitivnost - osmišljene su da materijalni dizajn učine istinski masovnim fenomenom.
Google je 25. lipnja 2014. objavio Material Design široj javnosti kao dizajn za novi operativni sustav Android, kasnije nazvan Lollipop. Potpuno korištenje materijalnog dizajna moguće je samo u okviru izrade aplikacija za Lollipop, no neke aplikacije za Android 4 također se mogu redizajnirati u materijalnom stilu, ali uz određena ograničenja. Glavni i vjerojatno jedini faktor koji značajno ograničava slobodu programera aplikacija za Lollipop je slaba kompatibilnost koncepta materijalnog dizajna s ranijim verzijama Androida i još uvijek niska rasprostranjenost Androida 5.1 Lollipop. U svakom slučaju, samo je pitanje vremena kada će najnoviji nedostatak biti otklonjen.
Android Lizalica
Objavljivanje koncepta materijalnog dizajna povezano je s pojavom detaljnog, pristupačnog i temeljitog Googleove smjernice. Dok raspravljamo o materijalnom dizajnu u našem članku, redovito ćemo se pozivati na ovaj sveobuhvatan i živahan vodič koji su razvili Googleovi dizajneri.
Glavne teze i osnovni principi materijalnog dizajna
Cjelokupna filozofija materijalnog dizajna počiva na četiri temeljna i razumljiva principa:
- Površine. Utjelovljene u obliku kartica stvorenih od “digitalnog papira”, takve su površine potpuno podložne zakonima fizičkog svijeta, imaju taktilni odgovor i pružaju snažnu povratnu informaciju uz visoku intuitivnost.
- Tisak tipografije. Umjesto ponovnog izuma kotača, zašto ne iskoristiti više od stoljeća iskustva u području tiska? S obzirom da je izvorna površina sada predstavljena slojevima virtualnog, praktično opipljivog papira, sasvim je logično na nju aplicirati informaciju u skladu s najboljim primjercima tiskarskih proizvoda. Pretjerano rečeno, Google je prilagodio pravila "prave" tipografije za zaslone mobilnih uređaja.
- Animacija. Animacija u materijalnom dizajnu mora se pokoravati fizikalnim zakonima, a time i intuitivnim očekivanjima korisnika. Odnos pokretnih objekata, njihov utjecaj jednih na druge, način na koji se pojavljuju i kreću - sve to mora biti stvarno, logično i predvidljivo.
- Adaptivni dizajn. Glavni aspekt o kojem smo govorili na početku članka. Responzivni dizajn ima za cilj objediniti korisničko iskustvo i učiniti ga dosljednim na svim platformama.
Kombinirajući ove prilično jednostavne i očite principe, Google je stvorio snažan i izrazito logičan sustav, koji ćemo vjerojatno koristiti u nekom obliku barem sljedećih pet godina. Pogledajmo pobliže svaki od četiri aspekta materijalnog dizajna.
Površine, njihova svojstva i funkcije
Sama materijalnost Googleovog koncepta koncentrirana je u svojstvima površina. Sama struktura sučelja je maksimalno realistična – ima dubinu ograničenu debljinom uređaja. Na primjer, uređaj debljine 1 cm prema dizajnu materijala sadržavat će unutarnji svijet iste debljine. Ovo je vrlo slično tankom akvariju koji ima stražnju stijenku i prednje staklo, ali umjesto morskog života koji pluta oko ovog akvarija, ovaj akvarij ima površine koje nalikuju komadima papira i raspoređene su u slojevima po cijeloj debljini akvarija. I, baš poput podvodnih stanovnika, ove površine kartica potpuno su podložne fizičkim zakonima - ponekad se čini da su više nego stvarne, zatvorene između stražnje stijenke pametnog telefona i stakla zaslona.
Dizajn sekcijskih materijala
OsZu svijetumaterijal oblikovati odgovoran za glasnoću sučelja
U svijetu materijalnog dizajna, površine postoje na različitim razinama dubine. A ako u ravnom dizajnu, koji je jedan od prethodnika materijala, nije bilo naznake volumena, onda u materijalnom dizajnu gotovo neprimjetne, svijetle sjene tvore nevjerojatno realističnu dubinu.
Kako prikazati sjene u materijalnom dizajnu
Zamislite da se na vašem stolu nalaze obični papiri izrezani u obliku pravokutnika različitih veličina. Pomičući ih po površini stola i međusobno preklapajući, jasno ćete vidjeti koja je papirnata kartica iznad druge. To se događa zbog blage sjene koju bacaju rubovi papira. U materijalnom dizajnu, programeri su potpuno rekreirali ovo načelo, a distribucija kartica "digitalnog papira" na različitim razinama, kada se jedna kartica preklapa s drugom, u potpunosti odgovara hijerarhiji sadržaja - površina koja se nalazi na vrhu druge i baca sjenu na njemu je trenutno glavni na njemu je usmjerena pozornost korisnika.
Prioritetna površina dolazi do izražaja, bacajući sjenu na donji „list“
Sama površina zapravo je ravnina određenog oblika (u većini slučajeva pravokutna), koja može bacati sjenu. Površina služi kao platforma za sadržaj, prazan komad papira na kojem će se kasnije pojaviti drugi elementi. U dizajnu materijala ne misli se ništa više od površine - komadi "digitalnog papira" nemaju i ne mogu imati nikakve prijelaze teksture ili gradijenta.
Značajke tipografije u materijalnom dizajnu
Kao što smo već spomenuli, tipografija u materijalnom dizajnu jednako je “stvarna” kao i površine. To znači da koristi sva pravila i pristupe koji se koriste u tiskarstvu. U primjerima koje je pokazao Google možete pronaći najbolje primjere klasične tipografije u virtualnoj izvedbi.
Primjeri tipografijedizajn materijala
Fontovi
Standardni font koji se dugo koristi u Androidu je Roboto. Novi Lollipop OS i Material Design također ga koriste kao glavni font. Osim Robota, Android aplikacije mogu koristiti i Noto font, namijenjen onim jezicima koji nemaju svoje verzije Robota. Unatoč općem stilu Android aplikacija i preporukama za fontove danim u smjernicama, sasvim je prihvatljivo u nekim slučajevima koristiti vlastiti vlasnički font umjesto Robota, dizajniran da stvori odgovarajuće asocijacije kod korisnika.
FontRoboto
Jedna od najuočljivijih tipografskih značajki u materijalnom dizajnu je korištenje kontrastnih veličina fonta. Ova klasična tehnika može se vidjeti u mnogim primjerima iz Googlea - naslovi na ekranima ispisani su vrlo velikim fontom i zahvaljujući tome značajno se ističu od ostatka teksta. U određenoj mjeri, zahvaljujući velikim zaglavljima koja su vidljiva izdaleka, korisnik može jednostavno navigirati između zaslona aplikacije i brzo shvatiti bit trenutnog sadržaja. Osim toga, zaglavlja u ovom formatu izgledaju stvarno cool.
Tipografija visokog kontrasta na djelu
Raspored sadržaja ili princip izgleda umaterijal oblikovati
Način postavljanja sadržaja u koncept materijalnog dizajna također odgovara principima print dizajna. Glavna komponenta koja oblikuje stil virtualnog izgleda u materijalnom dizajnu je položaj polja. Margine i padding raspoređeni su na način da je fokus korisnika na sadržaju koji se nalazi u sredini glavnog stupca, a lak i brz pristup dodatnim elementima omogućen je zahvaljujući širokoj lijevoj margini. Sličan princip može se uočiti na stranicama mnogih tiskanih publikacija.
Struktura i raspored polja u materijalnom dizajnu
Ikone
Ikonografija korištena u materijalnom dizajnu logična je evolucija ideje o maksimalnom pojednostavljenju koje se moglo vidjeti u ranijim verzijama Androida. Google opisuje ikone za materijal kao jednostavne, jasne i prijateljske. Istodobno, ideja materijalnosti može se proširiti i na ikone - sam Google dosljedno utjelovljuje ideju materijalnosti u ikonama svojih proizvoda. Na primjer, Gmail ikona papirnate omotnice potječe od svog stvarnog dvojnika. U okruženju materijalnog dizajna, pojednostavljena slika omotnice izgleda gotovo jednako stvarno kao i "pravi" prototip - ikona pokazuje karakteristične sjene koje predstavljaju krivulje i fizičku strukturu komada papira presavijenog u oblik omotnice.
Virtualni prototip papirnate omotnice i gotove ikoneGmail
Važno je napomenuti da je materijalni pristup izradi ikona dopušten samo za one ikone koje simboliziraju određeni proizvod, poput Gmaila. Druge, ikone sustava (ili ikone korisničkog sučelja) koje ispunjavaju aplikacije, manje su materijalne prirode. Uistinu su minimalni, jednolični i jednostavni. Zbog svoje jednostavnosti i simbolike čitljivi su i jako smanjeni. Ovim ikonama dominiraju geometrijski oblici.
IkoneAndroid Lizalica– može li postojati nešto minimalističnije i jednostavnije?
Za programere Google nudi impresivan skup ikona izrađenih u stilu materijalnog dizajna. U ovoj zbirci možete pronaći, možda, sve potrebne ikone za izradu aplikacija s materijalnim dizajnom. Googleov set ikona materijalnog dizajna dostupan je na GitHubu. Također bih želio spomenuti resurs materialdesignicons.com, gdje možete pronaći ne samo ikone drugih autora, već i ponuditi one koje ste sami razvili.
Filozofija boje
U novom dizajnu Lollipopa boja igra značajniju ulogu nego u prethodnim verzijama Androida. Čak iu ovom aspektu dizajna uočljiva je materijalnost o kojoj govorimo u cijelom članku. Sam Google zasebno manifestira novu politiku boja, bilježeći izvore inspiracije kao što su moderna arhitektura, prometni znakovi, pa čak i trake za označavanje pločnika. Istodobno, svijetle kombinacije boja koje je stvorio čovjek u dizajnu materijala koegzistiraju s prirodnim, prigušenim prirodnim nijansama. Na mnogo načina, ovaj je pristup ponovno u skladu s tiskarskim kanonima, prema kojima boja ima poseban utjecaj na čitateljevu percepciju informacija.
Glavna ideja rada s bojom u dizajnu materijala je podjela nijansi na glavne i naglašene nijanse. Google predlaže korištenje 500 različitih nijansi kao primarnih boja, koje zajedno čine paletu Primary. Sve ostale boje koje nisu uključene u ovu paletu mogu se koristiti kao akcentne boje.
Primjeri primarnih boja izPrimarnipalete i srodne akcentne boje (prikazane u donjim blokovima, s oznakom slova u obliku "A" prije broja nijanse)
Kada dizajnirate sučelje, Google predlaže da se ograničite na najviše tri boje iz glavne palete i jednu akcentnu boju. Primarne boje primjenjuju se na elemente kao što je akcijska traka, a također (kao u slučaju bijele) primjenjuju se na površinu koja sadrži glavni tekstualni sadržaj. Važno je napomenuti da kada bojamo akcijsku traku aplikacije jednom od boja, moramo obojiti statusnu traku tamnijom nijansom iste boje:
Status barpoprima bojuakcijski bar, ali ipak se ističe kao bogatija, tamnija nijansa
Stvarno svijetle i privlačne boje u dizajnu materijala koriste se za stvaranje naglasaka. Aktivni elementi aplikacije trebaju takve naglaske u boji, prije svega, naravno, Plutajući akcijski gumb. Osim toga, potrebno je obojiti razne klizače i prekidače u svijetle akcentne boje.
Aktivni elementi poput plutajućeg gumba i klizača vrlo su intuitivni, velikim dijelom zahvaljujući korištenju istaknutih boja koje potiču korisnika na akciju.
Animacija
Suprematistički kvadratni pokret, Kazimir Malevič (1920.) iZnačajan Pokret, Google Materijal Oblikovati (2014)
Animacija u materijalnom dizajnu jedan je od njegovih najzanimljivijih aspekata. Upravo zahvaljujući detaljnoj animaciji koja poštuje fizikalne zakone stvarnog svijeta uređaji s Androidom 5 toliko su zadivljujući i tjeraju korisnika da se s njima satima petlja, osobito u početku nakon upoznavanja s njima. Funkcionalna svrha animacije u materijalnom dizajnu je stalno demonstrirati korisniku posljedice njegovih postupaka. Animacija privlači poglede i jasno, elokventno prikazuje korisniku što se točno događa u određenom trenutku.
Kao i sve ostale komponente materijalnog dizajna, animacija koja se pokorava fizikalnim zakonima nije nešto fundamentalno novo - programeri su samo prilagodili pravila klasične animacije virtualnom okruženju operacijskog sustava.
Osnova animacije materijalnog dizajna je interakcija ravnina, komada “digitalnog papira” o kojima smo ranije govorili. Ove ravnine, koje se kreću na različitim razinama u svom svijetu, ograničene stražnjom stijenkom pametnog telefona i staklom ekrana, mogu se susretati, pomicati i pomicati jedna drugu, izaći u prvi plan na naredbu korisnika, povećavajući se u veličini i ispunjavajući zaslon.
Baš kao iu klasičnoj animaciji, sva kretanja ravnina regulirana su strogim pravilima, zahvaljujući kojima se točno simulira kretanje površina u stvarnom svijetu.
Prvo, svi objekti u stvarnom svijetu imaju masu, a time i određeni otpor. Da bi se neki objekt pomaknuo, na njega mora djelovati sila. U tom slučaju se objekt (u našem slučaju površina) neće odmah početi gibati – zbog svoje mase i otpora neko će vrijeme ubrzavati, a zatim, nakon završetka glavnog gibanja uzrokovanog primjenom sile, također će neko vrijeme usporiti, krećući se zahvaljujući inerciji. Primjenom ovih jednostavnih zakona dobivamo sučelje s nevjerojatno realističnim pokretima površine.
Pokretne površine imaju sposobnost prirodnog kretanja, pružajući predvidljiv otpor kretanju
Premještanje sloja "digitalni papir" u galeriji
Drugo, dizajn materijala je vrlo učinkovit u označavanju pojave ili odlaska novog objekta sa ekrana. Baš kao u stvarnom svijetu, u okruženju materijalnog dizajna, objekti se ne pojavljuju niotkuda, niti odlaze nigdje. U Lollipop OS-u, pojava novog objekta u prvom planu povezana je sa znatiželjnim metamorfozama - objekt se doista ne pojavljuje iznenada niotkuda, on klizi van, postupno se rastežući i poprimajući oblik površine. U tom slučaju ne dolazi do poštivanja proporcija, jer će proporcionalno i simetrično povećanje ili smanjenje površine dati dojam približavanja ili udaljavanja, dok moramo naznačiti pojavu na ekranu novog komada “digitalnog papira” , izoliran i neovisan.
Da bi se ostvario ovaj učinak izgleda novog objekta, materijalni dizajn nudi dva pristupa s različitim stupnjevima očitosti. Najživlji i najnedvosmisleniji pokazatelj pojave nove površine ostvaruje se uz pomoć rastućeg pada - nakon dodira prstom i pozivanja predmeta, površina se počinje širiti ekranom poput vala.
Kapljica koja se širi i formira novu radnu površinu jedan je od najvizualnijih efekata u dizajnu materijala.
Učinak površine koja se širi može biti vrlo elegantan i šaren.
Drugi način da se korisniku pokaže princip prijelaza je asimetrično, neravnomjerno povećanje pravokutne površine koje uzrokuje korisnik. Površinski pravokutnik se neproporcionalno rasteže dok ne dobije zadani oblik. Ova tehnika omogućuje vam da privučete pozornost korisnika aktivnim, nelinearnim pokretom i privučete njegovu pozornost na princip pojavljivanja novih površina.
Primjer animacije osnovnih ikona uAndroid Lizalica
SveprisutanMreškanje-Posljedica
Ripple efekt, odnosno valovito kretanje sjena gdje prst dodiruje zaslon uređaja, još je jedan važan aspekt povratne informacije. U Lollipopu se Ripple efekt primjenjuje gotovo posvuda. Pri dodiru sučelja novog operativnog sustava valovi se u većini slučajeva razilaze, bilo da se radi o pritisku tipke ili pregledavanju galerije fotografija. U tehničkom smislu, čim sustav primi ulaznu informaciju (dodir prstom po zaslonu), sustav odmah potvrđuje prihvaćanje te informacije kroz valovito širenje “digitalne tinte”.
Mreškanje-efekat koji se javlja kada brzo dodirnete ekran prstom
Mreškanje-efekt koji se javlja kada pokušate pomaknuti sliku unutar galerije
Tehnički aspekt animacijematerijal oblikovati ili prirodnog omotača
Kao što smo već rekli, u stvarnom svijetu, da bi se objekt izveo iz stanja mirovanja, na njega mora djelovati sila, dok će glavnoj fazi kretanja objekta prethoditi njegovo ubrzanje, baš kao i potpunom zaustavljanju će prethoditi usporavanje. U stalnoj interakciji s materijalnim svijetom, navikli smo na takvo stanje stvari, pa nam se svaki drugi način pomicanja predmeta, poput trenutnog ubrzanja i oštrog zaustavljanja bez inercije, čini neprirodnim, čudnim i često dosadnim. Uzimajući u obzir ovaj aspekt, kreatori materijalnog dizajna naporno su radili na "fizici" animacije, približavajući je što je moguće bliže stvarnom životu.
U okruženju materijalnog dizajna, objekti izvedeni iz stanja mirovanja brzo (ali ne odmah!) ubrzavaju i lagano, polako usporavaju. Ova vrsta pokreta i animacije zabavna je za interakciju jer usklađuje naša iskustva sa stvarnim svijetom.
Grafikon kretanja animiranih objekata: brzo ubrzanje i glatko usporavanje
Adaptivni dizajn
Najvažniji, ključni aspekt dizajna materijala. Filozofija materijalnog dizajna podrazumijeva potpunu unificiranost korisničkog iskustva. Drugim riječima, korisnik ne bi trebao naići na različite verzije iste aplikacije kada koristi različite gadgete. Korisničko iskustvo treba biti isto i za desktop i za pametni telefon ili tablet. Jedine prihvatljive i objektivne razlike su različite veličine i omjeri elemenata sučelja aplikacije. U svemu ostalom, različite verzije iste aplikacije trebale bi pružiti potpuno identično korisničko iskustvo.
Google je bio jedan od prvih koji je shvatio potrebu za unificiranjem i razvojem jedinstvenog korisničkog iskustva. U praksi se ta realizacija pretvorila u tzv. Kennedyjev projekt, kada je 2011. tvrtka počela razvijati jedinstvenu vrstu sučelja za sve svoje aplikacije. Google je postigao dobre rezultate u smislu estetike i korisničkog doživljaja, ali je još uvijek postojao pravi jaz između verzija njihovih proizvoda za stolna računala i mobilnih gadgeta s Androidom. Zapravo, sam materijalni dizajn sljedeći je pokušaj nakon Kennedyjevog projekta da se stvori istinski unificirano sučelje.
Vizualna jednostavnost materijala omogućila nam je da razvijemo niz pravila i metoda koje olakšavaju prilagodbu aplikacija kreiranih u stilu materijalnog dizajna za različite platforme.
Prvo, aplikacije izrađene u skladu s konceptom dizajna materijala imaju blok strukturu. Analizirajući sučelje takvih aplikacija, možete vidjeti da ga karakterizira jasna raspodjela blokova duž modularne mreže. Umjesto raznolikog, ne uvijek očitog i zbunjujućeg dizajna sučelja, dobivamo svojevrsni konstruktor čiji se pojedini dijelovi relativno lako pomiču i prilagođavaju određenom zaslonu.
Modularna mreža i raspodijeljeni blokovi
Zahvaljujući blokovima, od kojih svaki ima objektivno ograničenje proširenja ili kompresije, možemo učiniti sučelje aplikacije vrlo čitljivim i lakim za korištenje na bilo kojem zaslonu. Zahvaljujući margini za širenje i skupljanje koju ima svaki blok aplikacije, materijalni dizajn pruža uistinu učinkovit alat za potpuno objedinjavanje sučelja različitih softverskih proizvoda.
Sučelje dizajnirano prema načelimamaterijal oblikovati, univerzalno za bilo koji ekran
Drugo, prilagođavanje sučelja aplikacije za različite uređaje povezano je s količinom informacija prikazanih na zaslonu. Očito, što je zaslon manji, to manje detaljnih informacija možemo prikazati na njemu. U tom smo slučaju prisiljeni prenijeti dio sadržaja na zasebne zaslone ili ga sakriti iza dodatnih elemenata - ova praksa je posebno tipična za aplikacije prilagođene pametnim telefonima.
Elementi
Plutajući gumb u normalnoj ili mini verziji
Plutajući akcijski dugme. Plutajući gumb jedan je od najkarakterističnijih i najprepoznatljivijih elemenata materijalnog dizajna. To je ono što korisnik prvo primijeti. Plutajući gumb vrlo je dobar način da se korisnik gurne na neku ključnu radnju; uz njegovu pomoć osoba brzo dobiva pristup onim funkcijama koje su mu trenutno najrelevantnije. Gumb se obično pojavljuje u različitim dijelovima zaslona i, unatoč činjenici da se najčešće nalazi u donjem kutu, može se nalaziti bilo gdje na zaslonu.
Mora se imati na umu da plutajući gumb može biti povezan samo s ključnom, glavnom radnjom koja se izvodi u određenoj aplikaciji. Na primjer, u upravitelju datotekama, plutajući gumb može značiti dodavanje datoteka ili stvaranje nove mape, u aplikaciji za slanje poruka ili e-pošte - stvaranje nove poruke ili pisma, u društvenoj mreži - označavanje "sviđa mi se" i tako dalje. Glavna radnja uvijek je vezana za plutajući gumb, iako postoje određena ograničenja.
Ne treba svaki zaslon plutajući gumb. Neke radnje lakše je izvršiti izravnom interakcijom sa sadržajem aplikacije. Najtipičniji primjer takve iznimke je galerija fotografija. Kada gledate fotografije, lakša je izravna interakcija sa slikama, bez posrednika plutajućeg gumba.
Dok je u galeriji, korisnik ne treba plutajući gumb - glavna radnja je odabir i pregled fotografija
Plutajući gumb uvijek ima oblik kruga, baca malu sjenu i isti je fragment "digitalnog papira" kao i druge površine. Gumb ima svijetlu naglašenu boju koja se ne presijeca s glavnim bojama iz primarni paleta, zahvaljujući kojoj uvijek ostaje glavni i najuočljiviji element na ekranu. Njegova dominacija također je naglašena njegovim položajem u odnosu na druge slojeve sučelja - plutajući gumb je uvijek na vrhu i ne mogu se preklapati drugim elementima aplikacije.
Plutajući akcijski gumbV akcijski
Ono što najbolje karakterizira plutajući gumb jest činjenica da se može povezati samo s pozitivnim radnjama, poput stvaranja, dodavanja ili pomicanja unutar navigacije. Povezivanje lebdećeg gumba s destruktivnim ili netipičnim radnjama - brisanjem, podešavanjem glasnoće ili pozivanjem izbornika postavki - nelogično je i psihološki neutemeljeno.
Pozitivne i negativne akcijeplutajući akcijski dugme
I na kraju, zadnja važna točka je da na ekranu može postojati samo jedan plutajući gumb. Prisutnost nekoliko plutajućih akcijskih gumba unutar jednog zaslona potpuno uništava cijelu poantu plutajućeg gumba - provedbu ključne radnje u aplikaciji.
aplikacija barkoji je zamijenioakcijski bar
Traka s radnjama ozbiljno se promijenila u usporedbi s prethodnim verzijama. U Androidu Lollipop njegova se funkcionalnost značajno povećala i sada se ažurirani element zove traka aplikacija. Zahvaljujući promjenama, nova traka s aplikacijama daje korisniku potpunu kontrolu nad aplikacijom, a, kao što je slučaj s drugim aspektima materijalnog dizajna, a posebice s novim Lollipop OS-om, traka s aplikacijama potpuno je intuitivna i pregledna.
Traka aplikacija nije ograničena fiksnom veličinom - sada se može proporcionalno povećati, postavljajući na nju sav potreban sadržaj i kontrole aplikacija, kao što su padajući izbornici, filtri, obrazac za pretraživanje i tako dalje.
Osnovna verzija ažuriranaakcijski bar, koji sadrži potrebne elemente za kontrolu aplikacije
Sjenilaaplikacija bar, zaprosioGoogle
Trenutno stanje s razvojem aplikacija za Android Lollipop i AppCompat v21
Glavni problem povezan s prelaskom na materijalni dizajn je slaba kompatibilnost novih sučelja sa starijim verzijama Androida. Mnogi razvojni programeri nerado žrtvuju tu kompatibilnost i iz tog je razloga usvajanje aplikacija materijalnog dizajna još uvijek prilično ograničeno. Ovakvo će se stanje nastaviti još neko vrijeme, sve dok veliki broj Android uređaja radi na starijim verzijama.
Međutim, za one programere koji žele zadržati kompatibilnost svojih aplikacija sa starijim verzijama Androida, Google nudi skup alata koji vam omogućuju korištenje elemenata materijalnog dizajna u aplikacijama prethodnicima Lollipopa. U odgovarajućem blogu programeri su pozvani da se upoznaju s bibliotekom AppCombat koja se može koristiti za uvođenje materijalnih elemenata u starije verzije Androida.
Jedna od najzanimljivijih značajki je opremanje aplikacije koja radi pod prethodnim verzijama Androida punom trakom aplikacija, što je ključni element dizajna u Lollipopu. Zajedno s novim widgetom, stare aplikacije dobivaju sve napredne funkcije koje razlikuju traku aplikacija od prethodne trake radnji.
Widgetaplikacija bar
Kritički pogled na materijalni dizajn
Unatoč svim očitim novostima i uspješnoj implementaciji, materijalni dizajn (po želji) može imati neke nedostatke. Iako, kao i u svim takvim pitanjima, svatko za sebe odlučuje jesu li navedene točke nedostaci. Vrijedno je napomenuti da u ovom trenutku pristaše koncepta materijalnog dizajna još uvijek čine većinu onih koji nastavljaju žustro raspravljati o Googleovom najnovijem izumu. Međutim, skeptičnija javnost ima sljedeće pritužbe na Lollipop sučelje.
Microsoft Ravan Oblikovatibio mnogo praktičniji i uspješnijimaterijal oblikovati. Kao što smo već rekli, materijalni dizajn nije ništa drugo nego uspješna kompilacija pristupa i tehnika koje je već netko prije razvio i koristio. Jedan od koncepata koji su usvojili programeri materijalnog dizajna je takozvani Microsoftov "flat dizajn". Sama ideja o napuštanju ekscesa u korist ravnog digitalnog prostora prvi put se pojavila u Microsoftovim proizvodima. Ravni dizajn predstavljao je potpuno odbacivanje skeomorfizma u bilo kojoj njegovoj manifestaciji. Materijalni dizajn je ublažena verzija ovog koncepta simulacijom "digitalnog papira" i "digitalne tinte". Materijalni dizajn uključuje najbolje od oba svijeta - ravne i minimalističke prostore iz ravnog dizajna i određeni animirani volumen iz skeomorfizma.
Microsoftov ravni dizajn
Međutim, ne smatraju svi materijalni dizajn sredinom i prijateljskom verzijom ravnog dizajna. Prilično bogatu animaciju i volumen u materijalnom dizajnu mnogi korisnici i programeri smatraju viškom koji ometa korisnika i opterećuje ga nepotrebnim vizualnim informacijama. Materijalni dizajn također se okrivljuje za visoke zahtjeve prema resursima koji se koriste za animiranje svih elemenata.
Neučinkovito korištenje prostora na ekranu, previše praznog prostora. Obilje notornog "zraka" u dizajnu materijala (kao iu modernom dizajnu općenito) predmet je najžešćih rasprava između dizajnera, programera i običnih korisnika. Pitanje praznih prostora u modernim sučeljima doista je prilično kontroverzno, budući da odnos prema količini slobodnog prostora na ekranu ovisi, na kraju krajeva, o individualnim preferencijama. Mnogi korisnici žele vidjeti sve (ili većinu) potrebnih informacija ispred sebe, pokušavajući ne pribjegavati listanju i stranicama. Takve korisnike iskreno smetaju velike uvlake i praznine između sadržaja, kao i potreba za stalnim listanjem. Grupirani sadržaj, inteligentno raspoređen po cijeloj površini zaslona, njihov je izbor.
Druga vrsta korisnika, naprotiv, pozdravlja oskudan sadržaj, prisutnost "zraka" i čistog slobodnog prostora. Nisu opterećeni potrebom češćeg korištenja skrolanja i listanja virtualnih stranica, a postojanje velikih uvlaka smatraju nužnim uvjetom za brz i jednostavan odabir željenog elementa iz ukupne mase sadržaja. Osim toga, ovi korisnici smatraju "zrak" opravdanim i povoljnim s estetskog gledišta.
Na primjer, usporedimo sučelje izbornika postavki za Android i iOS:
Usporedba sučeljaiOSIAndroid– trijumf subjektivne percepcije. Neki korisnici razmatraju lokaciju sadržaja uiOSracionalnije i opravdanije - sve je pri ruci, dok je uAndroidpotreban je dodatni napor da pronađete stavku izbornika koju tražite. Zauzvrat, drugi dio korisnika pronalazi sučeljeiOS preopterećeno i teško razumljivo te sučeljeAndroid– lakše i dostupnije.
Rasprave o prednostima i nedostacima materijalnog dizajna još uvijek traju, a korisnici i programeri obraćaju pažnju na kontroverzna pitanja i nedostatke, a također traže načine za najučinkovitiju upotrebu koncepta materijalnog dizajna. U vrlo bliskoj budućnosti vidjet ćemo kakva sudbina čeka materijalni dizajn – hoće li još neko vrijeme ostati dvosmislena moda koju nam je nametnuo gigant Google, hoće li postati samo još jedan veliki eksperiment na polju sučelja ili će biti nova faza koja podiže umjetnost korisničkog sučelja na novu razinu?
Zaključak
Ako se planirate ozbiljno baviti materijalnim dizajnom i želite vidjeti cijeli materijalni koncept u cijelosti, tada morate proučavati jednostavan, pristupačan i vizualan Googleova smjernica. Nadamo se da će naš kratki pregled postati uvod u tako obećavajući smjer kao materijalni dizajn za zainteresirane čitatelje. Razumijevanjem filozofije novog Google projekta, moći ćete ne samo implementirati svoje ideje u ovom svježem i praktičnom formatu, već također, možda, doraditi i poboljšati sam koncept materijala, razvijajući vlastite "trikove" i poboljšavajući odnos korisnika s digitalnim sučeljem.
Evanđelist Google dizajna Mustafa Kurtuldu o korištenju njihove tehnologije u razvoju aplikacija Keep i Inbox.
Na oznake
Prijevod je pripremio tim Skyeng online škole engleskog jezika.
Materijalni dizajn pruža skup alata i pravila koji vam pomažu da svjesno pristupite UX dizajnu prilikom izrade sučelja aplikacije.
Ali što ako ti principi ne funkcioniraju za određeni proizvod? A što rade Google dizajneri kada razviju proizvod koji nadilazi klasične smjernice?
Materijalne smjernice su prilagodljive. U ovom ćemo članku pogledati dvije Googleove aplikacije, Keep i Inbox, kako bismo razumjeli kako ne samo da odstupaju od nekih pravila, već i oblikuju nova načela materijalnog dizajna.
Inbox: Modularna rešetka
Razvoj nove usluge e-pošte vrlo je ambiciozan zadatak za Google, s obzirom na već etablirani Gmail na tržištu. Cilj Inboxa bio je dodati dubinu dizajnu sučelja i stvoriti jedinstveno korisničko iskustvo i identitet robne marke, postupajući po novim pravilima Material Designa.
Kad je tim Inboxa slagao preliminarne dizajne, koncept Material Designa još je bio u razvoju. To je Inboxu dalo izvrsnu priliku da postavi standarde za materijalni dizajn, a istodobno se pozabavi izazovom dubine i volumena u korisničkom sučelju.
Dubina
Izvorni dizajn Inboxa nije bio dovoljno fleksibilan - prostor u obliku rešetke dopuštao je da samo sedam e-poruka stane na 13-inčni zaslon. To je bilo premalo, pogotovo u usporedbi s Gmailom koji stane 16-20 slova.
Ako otvorite Gmail i Inbox u susjednim prozorima, možete vidjeti veliku razliku u vizualnoj težini. A jedan od najvećih izazova bilo je pronaći pravu ravnotežu između sadržaja i bijelog prostora.
Tim Smith
Glavni dizajner u Inboxu
Promjenom postavki rešetke, visine redaka i izgleda fonta, dizajneri Inboxa uspjeli su postići optimalnu dubinu sučelja dok su i dalje prikazivali 12-17 slova, svako unutar kartice Material Design. Sučelje aplikacije prilagođava se uređaju korisnika. Na primjer, font u retku "Predmet" mijenja se ovisno o veličini zaslona.
Boje, slike i ikone
Upotreba kontekstualnih slika u skupinama slova još je jedna posebna značajka usluge. Na primjer, ako korisnik planira putovanje u New York, vidjet će nebo Manhattana na kartici s pripadajućim slovom.
Postoji mnogo ikona na lijevoj navigacijskoj traci, njihove boje odgovaraju njihovim funkcijama u aplikaciji. Kada korisnik klikne zeleni gumb Dovršeno, pozadina gornje trake također postaje zelena, što znači da se kontekst promijenio.
Gornja ploča
Još jedan važan zadatak za tim bio je razviti gornju traku aplikacije. Početna ideja bila je stvoriti transformabilnu ploču koja se neće protezati po širini prozora preglednika, već će se mijenjati ovisno o sadržaju.
Razradili smo oko desetak različitih varijacija ovog koncepta dok na kraju nismo došli do doživljaja preko cijelog zaslona koji sada vidite. Također smo izradili nekoliko koncepata trake za pretraživanje prije odabira najboljeg stila.
Tim Smith
Glavni dizajner u Inboxu
Kartice u Inboxu se šire i skupljaju, što znači da se format zaglavlja mijenja ovisno o tome kako korisnik komunicira s e-poštom. Gornja traka također prikazuje traku za pretraživanje i izbornik s drugim Googleovim aplikacijama. Ovaj pristup omogućuje Inboxu da ostane prilagodljiv bez kompliciranja sučelja.
Keep: uzorci responzivne navigacije
Keep je višeplatformska aplikacija za bilježenje koja proširuje i sažima kartice na zaslonu, usmjeravajući pozornost korisnika prilikom dodavanja nove bilješke. Donja navigacijska traka omogućuje vam brzo stvaranje nove bilješke jednim klikom.
Angažman, prazni ekrani i animacija
Obično se korisnik suočava s praznim zaslonom kada na stranici nema sadržaja. U Keepu ovaj zaslon izgleda poput praznog platna na kojem korisnik može brzo zabilježiti svoje ideje.
Bijeli prostor potiče korisnika da istražuje stavke izbornika na ploči koja se širi za prikaz različitih filtara predstavljenih kao ikone; izbornik izgleda koji vam omogućuje prebacivanje između popisa i mreže te lijeva navigacijska traka na kojoj možete promijeniti osnovne postavke aplikacije.
Puno smo radili na animaciji - kako se bilješke prikazuju kao tok, kako se pomiču kada ih otvarate i zatvarate.
Genevieve Cuevas
Odabir pravih elemenata materijala: donja navigacija ili plutajući akcijski gumb
Sažetost i jednostavnost korištenja ključne su značajke Keepa. Tijekom redizajna aplikacije, programeri su proučavali uzorke materijalnog dizajna i na kraju odabrali kartice koje pomažu razlikovati bilješke jedne od drugih, lijevu navigacijsku traku koja olakšava prilagodbu aplikacije i kontekstni izbornik koji se mijenja ovisno o vrsti bilješke - poput bilješke s potvrdnim okvirima koji prikazuju izbornik za provjeru i promjenu elemenata na popisu.
Zajedno, ovi elementi stvaraju jasno i funkcionalno sučelje, prilagođavajući se specifičnoj situaciji. Prilikom redizajniranja Keepa, kreatori su eksperimentirali s nekim od osnovnih navigacijskih elemenata aplikacije - konkretno, pokušali su zamijeniti postojeću navigaciju s plutajućim akcijskim gumbom.
Izvorna navigacija vam je omogućila stvaranje nove bilješke jednim dodirom, a plutajući akcijski gumb zahtijevao je dva klika: jedan za prikaz opcija i drugi za stvaranje bilješke.
Kad smo predstavili plutajući gumb, neki od naših korisnika žalili su se da stvaranje bilješke u dva klika nije tako zgodno.
Genevieve Cuevas
Google Keep softverski inženjer
Mnogi korisnici koji su prije koristili aplikaciju i navikli na navigaciju jednim klikom nisu odobrili ovu promjenu. Testiranjem i konačnim odbacivanjem plutajućeg gumba, programeri Keepa uspjeli su odabrati rješenje koje najbolje odgovara interesima njihovog proizvoda.
Vodič, a ne skup pravila
Timovi Keepa i Inboxa upotrijebili su smjernice kao osnovu za svoje aplikacije. Kada su naišli na korisnički scenarij koji nije funkcionirao, mogli su prilagoditi svoj dizajn kako bi odgovarao potrebama korisnika.
Material Design nudi smjernice temeljene na Googleovom dugogodišnjem iskustvu, ali ne može riješiti baš svaki problem. Primjeri programa Keep i Inbox pokazuju da možete koristiti smjernice materijalnog dizajna, mijenjajući ih prema potrebi za svoj proizvod.
Što je materijalni dizajn? To je skup stilova i grafika koje je razvio Google, kao i smjernice i pravila za pridržavanje tih stilova. Materijalni dizajn je prvi put prikazan na konferenciji za programere, Google I/O, u ljeto 2014. Stil se temelji na formatu "kartica" i "blokova" - jednostavnih i jezgrovitih oblika i grafičkih elemenata, kao i sveukupne jednostavnosti i svježine dizajna - mirne, nježne boje, nedostatak volumena, sitni detalji i detalji u Općenito. Prva “objava” materijalnog dizajna dogodila se lansiranjem servisa Google Now, a stil je službeno postao osnova za operativni sustav Android nedavno, u verziji 5.0, poznatoj i kao Android Lollipop.
Po mom mišljenju materijalni dizajn ima nekoliko vrlo važnih prednosti u odnosu na sve dosadašnje pokušaje Googlea da dizajn svog operativnog sustava i programa za njega dovede u unificirani oblik, ali i neke nedostatke. U ovom kratkom članku pokušat ću iznijeti svoje stajalište o novom dizajnerskom jeziku iz Googlea.
Materijalni dizajn – argumenti ZA
Prvi i najvažniji argument u korist novog stila, po mom mišljenju, je njegova izvedba. Ne želim ponovno ispasti kao mrzitelj Appleove tehnologije i pristupa, ali u ovom slučaju to nije strašno, jer samo izražavam svoje stajalište. Dakle, po mom mišljenju, ažuriranje iOS-a na sedmu verziju i ažuriranje Androida na petu verziju su, kako se kaže, dvije velike razlike.
U slučaju Applea, vidjeli smo uobičajeni prijenos prethodne grafike u ravnu formu, bez nove ideje, bez želje da se donese nešto svježe - samo su uzeli postojeće sučelje, smrvili ga, ponovno iscrtali ikone i dodali dugine pozadinske slike. Upravo su pozadinske slike u novom iOS-u 7 i efekti transparentnosti izbornika pokazatelj lošeg ukusa i nespremnosti dizajnera da učine nešto dobro i ljubazno, kako mi se čini. U "sedmici" jednostavno su pokazali svačije oči prekrasnim efektima animacije i općom svjetlinom novog sučelja. Čini mi se da nitko nije razmišljao o tome bi li to bilo zgodno, jer bi inače Appleovi dizajneri više pažnje posvetili funkcionalnim aspektima nego dizajnu duginih boja.
Zaslon obavijesti, koji se poziva s vrha, i upravljačka ploča, koja se poziva s dna, jasni su primjeri beskorisne "nadogradnje" u iOS7. Prva nikad jasnija - sve su obavijesti nagomilane u neredu i previše ih je, druga je gotova napola, prekidači vam omogućuju uključivanje/isključivanje sučelja, ali nemojte nastaviti s njihovim postavljanjem i odabir mreža
Android 5.0 je također vrlo ozbiljno grafički ažuriran u odnosu na 4.x upravo vezano uz prelazak operativnog sustava na materijal dizajn. I, na prvi pogled, promjene su slične onima koje su se dogodile u iOS-u - konačna promjena stila u ravni, lakši cjelokupni dizajn, vanjska jednostavnost. Ali tada počinju razlike. U Androidu 5.0 sučelje je holističnije zahvaljujući dizajnu materijala - sve je napravljeno u jednom mirnom stilu, ništa se ne ističe i ne izgleda šareno ili pretjerano svijetlo. Isključuje li osnovni princip materijalnog dizajna prednost grafičkih efekata u sučelju nad njegovom praktičnošću? i to je jako cool.
Da sažmemo prvi argument - materijalni dizajn već izgleda vrlo holistički, to je upravo ono što je nedostajalo operativnom sustavu iz Googlea i CO - cjelovitost i općenitost. Kada, otvarajući svaki pojedini program, bili to kontakti, preglednik, email klijent ili nešto treće, vidite istu animaciju, istu paletu boja i jednostavno prepoznatljive elemente. Zbog toga se lakše naviknete na novi OS i jednostavno je ugodno raditi s njim.
Drugi argument je da ako ste već koristili pametni telefon na Lollipopu ili vidjeli snimke zaslona, vjerojatno ste primijetili da je sučelje postalo vizualno veće. Konsolidacija sučelja u uređajima osjetljivim na dodir traje već duže vrijeme. Ako usporedimo prve verzije Androida s “tadašnjim” Windows Mobileom, vidljivo je da je Android bio veći i jednostavniji, manje informacija je stalo na ekran, ali je bilo i praktičnije upravljati pametnim telefonom. U materijalnom dizajnu neki su elementi zamijenjeni "karticama", malo su povećani fontovi, ikone i veličine linija, a sučelje u cjelini postalo je veće. Sviđa mi se ovo, vjerojatno zato što starim, šalu na stranu, ali što sam stariji, to imam manju želju da gledam "milizirane" ikone i elemente, čak i s dobrim vidom. Usput, zbog toga ne volim iPhone 5 i sve manje. Kompaktnost je kompaktna, ali čak i na ekranu dijagonale 4,5" želite vidjeti elemente normalne veličine, a ne proučavati ih povećalom. To je jednostavno praktičnije u mnogim situacijama, posebice kada, primjerice, radite s pametnim telefonom u pokretu. Stoga mi se općenito proširenje sučelja u Androidu 5.0 temeljeno na materijalnom dizajnu čini dobrim korakom.
Treći argument u prilog je da Google nije samo prebacio Android na novi dizajn, već je odmah pripremio potrebne vizualne vodiče koji pokazuju implementaciju glavnih elemenata za programere softvera. Jednostavno rečeno, ako izrađujete novi program ili želite pretvoriti stari u novi dizajn, vi web stranica i proučite Googleove preporuke.
Na primjer, piše koje boje koristiti. prikazani su fontovi i kako ih koristiti. I preporuke za korištenje ispravnih grafičkih slika u programu.
Materijalni dizajn – argumenti PROTIV
Međutim, treći argument u korist materijalnog dizajna ujedno je i argument protiv njega. Da, Google je bio izvrstan jer nije napustio programere i pružio im sveobuhvatne smjernice o ispravnom korištenju novog dizajnerskog jezika, ali u ovom slučaju, recimo, nisu mislili na korisnike. Programi napisani prema svim pravilima materijalnog dizajna ili eksterno modificirani prema Googleovim smjernicama izgledat će vrlo skladno u Androidu 5.0, a ne toliko u ranijim verzijama sustava. I obrnuto – sve aplikacije koje ne slijede pravila materijalnog dizajna izgledat će nekako strano na pametnom telefonu s Androidom Lollipop. A u sljedećih šest mjeseci bit će mnogo takvih programa, usudio bih se pretpostaviti. Ipak, neće svaki programer popularnog programa, pogotovo ako je složen i zahtijeva stalna ažuriranja i poboljšanja, odbaciti sve i početi pretvarati u materijalni dizajn.
Jasan primjer starog dizajna u vrlo aktualnom programu - WhatsApp. Koliko dugo prijava neće biti prebačena na md? Dobro pitanje
Ispada da će neki developeri sada stvarno dići ruke od svega i prebaciti svoje programe na materijalni dizajn, a drugi neće. I na Google Playu postoje programi sa starijim, recimo, dizajnom, ali ponekad i potrebni za rad. Kao rezultat toga, ispada da Googleova želja (nedvojbeno točna!) da dovede Android u zajednički oblik nije dovoljna; nešto treba učiniti sa stotinama tisuća programa. Pitanje - što?
Dragi čitatelji, što mislite o Googleovoj ideji da sve svoje usluge i aplikacije dovede u zajednički oblik, koristeći materijalni dizajn kao osnovu?
- Tutorial
Mogu li gumbi biti šesterokutni?
Google I/O 2018 ostavio je ogromnu količinu materijala za razumijevanje. Što ima novog? Kako živjeti dalje? Je li moja prijava zastarjela? Mogu li gumbi biti šesterokutni? Zar dizajneri više nisu potrebni? Ugodnije je shvaćati polako i u malim obrocima. Ovaj dio je o dizajnu.
Nakon četiri godine dosta sam se zasitio Material Designa. Prema Googleu, 1,5 milijuna aplikacija kreirano je na temelju ovog sustava dizajna. Zašto? Uostalom, izvorno je stvoren za Googleove interne potrebe.
Riješio je probleme heterogenog dizajna za Android i nedostatka bilo kakvog sustava
- Bio je univerzalan za različite uređaje: tablete, pametne telefone, web.
- Dizajniran je sa stajališta korisnika i intuitivan je.
Sustav je optužen da je nefleksibilan i da je, kao rezultat toga, dobio dizajn kopije. Ako dizajnirate uslugu strogo slijedeći vodiče, tada vizualno aplikacije stvarno ispadaju beskarakterne. S druge strane, zašto kriviti sustav? Smjernice nikada nisu bile biblija; od njih se moglo odstupiti. Možda ste samo u Google Color paleti odabrali boju za svoju aplikaciju? Nadam se da ne.
S druge strane, dodavanjem prilagođenih elemenata riskirali ste da se sa svojim Android programerima nađete u mračnoj ulici i slušate dugi govor o tome zašto i koliko griješite. Bila su to opasna vremena.
Svi dobitnici nagrade Material Design preuzeli su isti rizik. Jeste li primijetili koliko je korisničko sučelje ovih projekata prilagođeno? Ali Google ih je ohrabrio i svi su bili iznenađeni.
Sada je očito: Google želi da prilagodimo svoje aplikacije. Proizvodi trebaju biti lijepi i drugačiji. Ažurirani MD pokušaj je pokazati dizajnerima i tvrtkama kako prilagoditi korisničko sučelje bez straha da će ih programeri grditi.
material.io – dizajn, razvoj, alati
Možete započeti s učenjem sustava dizajna s web stranice - ne samo da je dio sadržaja tamo ažuriran, već i vizualni stil. Sada će vas čak i ekran 404 podučiti, a klikom na element iz vodiča vidjet ćete njegovu specifikaciju sa svim udaljenostima, fontovima i poveznicama za preuzimanje iz Google knjižnice.
Rezultat još nije impresivan. Najveća prednost trebao je biti gotov kod za izvorne elemente, ali GitHub link nije tako cool. Također je prerano tražiti od programera da vašoj aplikaciji dodaju nove elemente - kôd za njih još nije dostavljen.
Što ako vaši elementi nisu izvorni? Možete vidjeti oznake, ali nećete moći dobiti izrezane ikone. Tako da je prerano govoriti o zamjeni Zeplina. 
25. lipnja 2014. Google je javnosti predstavio svoju novu viziju dizajna sučelja budućnosti - cijeli skup pravila i uvjeta prema kojima će se od sada graditi sučelja svih proizvoda korporacije. Zašto je sve ovo bilo potrebno? Prije samo pet godina svi su se Googleovi proizvodi jako razlikovali jedni od drugih, uključujući različite verzije iste aplikacije na različitim uređajima. Programeri su razmišljali o stvaranju posebnih pravila za izgradnju i objedinjavanje svih razvijenih aplikacija i usluga, koje su kasnije objedinjene pod zajedničkim nazivom "Projekt Kennedy". Taj se projekt kasnije razvio u Dizajn materijala (dizajn materijala).
Filozofija materijala
Zahvaljujući Kennedyjevom projektu, sve glavne Googleove usluge dobile su zajednički dizajn i značajke sučelja. Time je omogućeno objedinjavanje pristupa izradi web sučelja, a kasnije i sučelja mobilnih aplikacija.
Jedna od značajki jedinstvenog dizajna bile su kartice s informacijama koje su se mogle postaviti u bilo kojem dijelu radnog područja. Dok su ih istraživali u aplikaciji Google Now, programeri su se zapitali: "Što je ispod ovih kartica?" Prema Googleovom potpredsjedniku dizajna Matiasu Duarteu, ovo je "nevino pitanje zapalilo snažnu iskru".
Dizajnerski tim počeo je na dizajn gledati ne kao na skup ravnina i piksela, već kao na stvarni fizički objekt. Istu stvar željeli su prenijeti korisniku, kako bi on imao osjećaj opipljivosti sučelja, da ono što se događa na ekranu izgleda što vjerodostojnije i logičnije.
Nakon totalne dominacije skeuomorfizam(točna imitacija stvarnih objekata fizičkog svijeta u dizajnu) svi su se oštro pomaknuli u suprotnom smjeru - . To je Google uzeo kao osnovu kada je izumio " materijal" U isto vrijeme pravi mali korak unatrag prema realizmu.
Kvantni papir
Glavni element dizajna materijala je metafora fizičkog objekta sličan po svojstvima papiru i posjeduje većinu njegovih svojstava - veličinu, boju, debljinu. Svaki sloj ovog metaforičkog materijala nalazi se u trodimenzionalnom prostoru i pokorava se svim fizikalnim zakonima, stoga, za razliku od klasičnog ravnog stila, može bacati sjenu na donje slojeve. Svi slojevi se postavljaju na glavni materijal dna.
Zbog svojstava poput papira, materijal je izvorno nazvan "kvantni papir". Ovo je isti papir kao u fizičkom svijetu, ali ima niz "čarobnih" svojstava, na primjer, može promijeniti svoju veličinu i glatko se kretati u prostoru, kombinirajući se s drugim "listovima" ili razbijajući se na nekoliko. Kvantni papir nalazi se točno iznad pozadine, koja je najčešće bijele boje. Sjena se pomiče ovisno o kretanju samog materijala, a smanjuje se ili povećava ovisno o visini materijala iznad pozadine.
Digitalna tinta
Ako je "kvantni papir" namijenjen odražavanju fizičkih svojstava objekta, onda je sve što je na površini tog papira - boje, slike, tekst, ikone - oblikovano pomoću " digitalna tinta" - još jedan jedinstveni objekt materijalnog dizajna.
Materijalni dizajn koristi sva dostignuća tiska u dizajnu sučelja. Ali i ovdje postoje vlasničke značajke Googlea. Na primjer, glavni font koji se koristi u dizajnu materijala je Roboto. Međutim, ništa ne sprječava tvrtke da koriste svoj korporativni font za održavanje svog identiteta. Smjernice za korištenje materijalnog dizajna pružaju primjere za korištenje različitih stilova i veličina fontova u sučeljima.
Ali najvažnija stvar u grafičkom dizajnu materijala jest boja. Boja je glavno sredstvo izražavanja na kvantnom papiru i stoga ima vrlo važnu ulogu. Uobičajeno je koristiti materijalni dizajn Osnovni, temeljni I akcentne boje. Kao i nekoliko nijansi za različite situacije.
Obično primarne boje koristi se za bojanje velikih područja kao što su zaglavlja, akcijske trake, statusne trake. Koristi se za isticanje važnih elemenata boja akcenta. Na primjer, za posjetnicu materijalnog dizajna - plutajući akcijski gumbi.
Osnovna načela materijalnog dizajna nalažu korištenje slika. To je toliko važan element da se preporuča koristiti slike maksimalne veličine bez okvira. Štoviše, akcijske trake postaju prozirne kako bi se povećao pogled na sliku.
Android podržava posebnu biblioteku Paleta, koji je sposoban izdvojiti glavne i akcentne boje sa slike i dinamički mijenjati dizajn aplikacije, prilagođavajući se aktivnoj slici (primjer gore).
Važnost animacije
Nastavljajući povlačiti analogije sa svijetom prirode, treba napomenuti da ništa ne nestaje niotkuda, kao što ništa ne dolazi niotkuda. Dakle, u materijalnom dizajnu potrebno je glatko mijenjati postojeće sučelje kao odgovor na sve radnje korisnika tako da su svi prijelazi logični i očiti. Dakle, u materijalnom dizajnu animacija je posljedica interakcije između korisnika i sučelja.
Aktivno kretanje privlači pozornost korisnika, pa je za postizanje učinka realizma potrebno koristiti neka pravila:
- Asimetrija
Tipično je veličina objekata ograničena širinom uređaja, pa je za realističnu promjenu veličine kvantnog papira potrebno neovisno asimetrično mijenjati širinu i visinu objekta, čime se izbjegava iluzija da objekt postaje veći ili manji. . - Odgovor
Mora postojati odgovarajući odgovor na svaku radnju korisnika. Kao primjer, Google nudi efekt promjene vala u objektima sučelja s epicentrom u točki interakcije - Prirodni autentični pokreti
U prirodi, objekti kada se kreću ne mogu trenutno dobiti brzinu ili se zaustaviti, stoga, da bi se dobio realizam, sve animacije ne bi trebale biti linearne, već s usporavanjem i ubrzavanjem.
Zaključak
Dizajn materijala je potpuno novi način interakcije i izgradnje sučelja, koji je još uvijek u razvoju i može se proširiti u bilo kojem trenutku. Međutim, već je moguće predvidjeti njegove izglede. Minimalno će dominirati u razvoju Android aplikacija, budući da će objedinjavanje svih sučelja pozitivno utjecati na jednostavnost korištenja.
U samom Googleu razvoj materijalnog dizajna stavlja se u rang s tako značajnim događajima kao što su razvoj sučelja prozora i kontrole kursora (Xerox PARC) i stvaranje zaslona osjetljivih na dodir (Apple). Pa, da vidimo što će biti od ovoga.
Googleov novi logotip i identitet gura materijalni dizajn naprijed
Detaljne smjernice razvojnog programera materijalnog dizajna možete pronaći ovdje -
