Në artikullin tonë sot, ne do të prekim një temë që nuk është diskutuar ende për Rusability. Për hir të drejtësisë, vërejmë se në Runet si i tillë, interesi për këtë temë sapo ka filluar të fitojë vrull, përkundër faktit se vetë koncepti lindi vitin e kaluar. Ky është një drejtim i bujshëm dhe, siç besojnë disa, revolucionar dizajni, të cilin Google e ka quajtur si dizajn material.
Dizajni i materialit nuk është edhe aq një qasje e re për ndërtimin e marrëdhënieve midis përdoruesit dhe mjedisit virtual, por më tepër një filozofi e tërë që rregullon marrëdhënie të tilla. Ashtu si shumë fenomene vërtet të ndritshme dhe të freskëta të kohëve të fundit, dizajni i materialit është një përmbledhje e suksesshme e atyre ideve dhe koncepteve që ose janë hasur veçmas në produkte të ndryshme, ose, siç thonë ata, ishin në ajër. Debati nëse dizajni i materialit është një drejtim i mirë është ende në vazhdim, si dhe një kërkim i përpiktë dhe skrupuloz për të gjitha llojet e mangësive, megjithatë, ndoshta askush nuk e mohon që ky koncept është një pasqyrim shumë i saktë i frymës së kohës dhe kohës dhe aspiratat e përdoruesve të zakonshëm. Është estetikisht i qëndrueshëm, tërheqës, intuitiv dhe, me sa duket, shumë i lehtë për t'u përdorur. "Dizajni i materialit është i lezetshëm" - ky lloj emocioni bashkon një audiencë entuziaste dhe një audiencë me një sy më kritik, duke vënë në dukje mangësitë e dizajnit të materialit.
Dizajni i materialit mund të shihet si hapi i parë i madh dhe mjaft i parashikueshëm drejt unifikimit masiv të ndërfaqes, dhe për këtë arsye një përvojë e unifikuar e përdoruesit si e tillë. Kjo veçori është çelësi i dizajnit të materialit - është i gjithanshëm dhe i qëndrueshëm. Tipari i dytë karakteristik i dizajnit të materialit është intuitiviteti, i cili është aspekti tjetër më i rëndësishëm pas unifikimit gjithëpërfshirës. Në fakt, këta dy komponentë - unifikimi i ndërfaqes dhe intuitiviteti maksimal - janë krijuar për ta bërë dizajnin e materialit një fenomen vërtet masiv.
Google publikoi Material Design për publikun e gjerë më 25 qershor 2014 si dizajni i sistemit të ri operativ Android, i quajtur më vonë Lollipop. Dizajni i materialit mund të përdoret plotësisht vetëm brenda kornizës së krijimit të aplikacioneve për Lollipop, por disa aplikacione për Android 4 gjithashtu mund të ridizajnohen në stilin e materialit, megjithatë, me kufizime të caktuara. Faktori kryesor dhe ndoshta i vetmi që kufizon ndjeshëm lirinë e zhvilluesve të aplikacioneve për Lollipop është përputhshmëria e dobët e konceptit të dizajnit të materialit me versionet e mëparshme të Android dhe prevalenca ende e ulët e Android 5.1 Lollipop. Në çdo rast, eliminimi i mungesës së kësaj të fundit është vetëm çështje kohe.
Android Lollipop
Lëshimi i konceptit të dizajnit të materialit u shoqërua me shfaqjen e një koncepti të detajuar, të arritshëm dhe të detajuar Udhëzimet e Google... Ndërsa diskutojmë dizajnin e materialit në artikullin tonë, ne do t'i referohemi rregullisht këtij tutoriali të plotë dhe plot ngjyra nga dizajnerët e Google.
Pikat kryesore dhe parimet bazë të Dizajnit të Materialeve
E gjithë filozofia e dizajnit të materialit mbështetet në katër parime themelore dhe të kuptueshme:
- Sipërfaqet. Të mishëruara në formën e kartave të krijuara nga "letër dixhitale", sipërfaqe të tilla u binden plotësisht ligjeve të botës fizike, kanë një përgjigje prekëse dhe ofrojnë reagime të forta së bashku me intuitë të lartë.
- Tipografia e kuptimit poligrafik. Në vend që të rishpikni rrotën, pse të mos përfitoni nga më shumë se një shekull përvojë printimi? Duke marrë parasysh që sipërfaqja origjinale tani përfaqësohet nga shtresa letre virtuale, praktikisht të prekshme, është mjaft logjike të aplikoni informacion mbi të në përputhje me mostrat më të mira të produkteve të printimit. Në mënyrë më të ekzagjeruar, Google ka përshtatur rregullat e tipografisë "reale" për ekranet e celularëve.
- Animacion. Animacioni në dizajnimin e materialit duhet t'u bindet ligjeve fizike, dhe për këtë arsye - pritjeve intuitive të përdoruesit. Marrëdhënia e objekteve në lëvizje, ndikimi i tyre mbi njëri-tjetrin, mënyra se si ato shfaqen dhe lëvizin - e gjithë kjo duhet të jetë reale, logjike dhe e parashikueshme.
- Dizajn adaptues. Aspekti shumë kryesor për të cilin folëm në fillim të artikullit. Dizajni i përgjegjshëm synon të unifikojë përvojën e përdoruesit dhe ta bëjë atë të qëndrueshme në të gjitha platformat.
Duke kombinuar këto parime mjaft të thjeshta dhe të dukshme, Google ka krijuar një sistem të fuqishëm dhe shumë logjik, i cili, me shumë mundësi, do të përdoret nga ne për të paktën pesë vitet e ardhshme. Le të hedhim një vështrim më të afërt në secilin nga katër aspektet e dizajnit të materialit.
Sipërfaqet, vetitë dhe funksionet e tyre
Vetë materialiteti i konceptit të Google është i përqendruar në vetitë e sipërfaqeve. Vetë struktura e ndërfaqes është sa më realiste - ajo ka një thellësi të kufizuar nga trashësia e pajisjes. Për shembull, një pajisje 1 cm e trashë sipas dizajnit të materialit do të përmbajë një botë të brendshme me të njëjtën trashësi. Ky është shumë i ngjashëm me një akuarium të hollë, i cili ka një mur të pasmë dhe një xhami të përparmë, por në vend të jetës detare, sipërfaqet që ngjajnë me fletë letre notojnë në këtë akuarium dhe shpërndahen në të gjithë trashësinë e akuariumit në shtresa. Dhe, ashtu si banorët nënujorë, këto karta sipërfaqësore i nënshtrohen plotësisht ligjeve fizike - ndonjëherë duket se ato janë më se reale, të mbyllura midis pjesës së pasme të smartfonit dhe xhamit të ekranit.
Prerje e dizajnit të materialit
BoshtiZnë botëmaterial dizajni përgjegjës për vëllimin e ndërfaqes
Në botën e dizajnit të materialit, sipërfaqet janë në nivele të ndryshme thellësie. Dhe nëse në dizajnin e sheshtë, i cili është një nga paraardhësit e materialit, nuk kishte asnjë aluzion vëllimi, në dizajnin e materialit, hijet e lehta pothuajse të padukshme formojnë thellësi tepër realiste.
Si të shfaqni hijet në dizajnin e materialit
Imagjinoni që keni copa letre të zakonshme në tryezën tuaj, të prera në drejtkëndësha të madhësive të ndryshme. Duke i lëvizur nëpër tavolinë dhe duke i mbivendosur njëra-tjetrën, do të shihni qartë se cila nga kartat e letrës është mbi tjetrën. Kjo është për shkak të hijes së lehtë të hedhur nga skajet e letrës. Në dizajnimin e materialit, zhvilluesit e kanë rikrijuar plotësisht këtë parim, dhe shpërndarja e kartave dixhitale të letrës në nivele të ndryshme, kur një kartë mbivendoset me një tjetër, korrespondon plotësisht me hierarkinë e përmbajtjes - sipërfaqja mbi tjetrën dhe duke hedhur një hije mbi të është aktualisht. kryesore, mbi të përqendrohet vëmendja e përdoruesit.
Sipërfaqja prioritare del në pah, duke hedhur një hije në "gjethin" e poshtëm
Vetë sipërfaqja është me të vërtetë një rrafsh i një forme të caktuar (në shumicën e rasteve - drejtkëndëshe), i cili është në gjendje të hedhë një hije. Sipërfaqja shërben si një platformë për përmbajtjen, një copë letre bosh në të cilën do të shfaqen më vonë elementë të tjerë. Asgjë më shumë nuk nënkuptohet nga sipërfaqja në dizajnin e materialit - copat e "letrës dixhitale" nuk kanë dhe nuk mund të kenë asnjë teksturë ose tranzicion gradient.
Karakteristikat e tipografisë në dizajnimin e materialeve
Siç e kemi përmendur, tipografia në dizajnin e materialit është po aq “reale” sa edhe sipërfaqet. Kjo do të thotë se ajo përdor të gjitha rregullat dhe qasjet e njëjta që përdoren në radhitje. Në shembujt që Google shfaqi, mund të gjeni shembujt më të mirë të tipografisë klasike në ekzekutimin virtual.
Shembuj tipografiedizajn material
Fontet
Fonti i parazgjedhur i përdorur në Android për një kohë të gjatë është Roboto. Në sistemin e ri Lollipop OS dhe në Material Design, përdoret gjithashtu si fonti kryesor. Përveç Roboto, aplikacionet Android mund të përdorin edhe fontin Noto, i cili synon gjuhët për të cilat Roboto nuk është zhvilluar. Megjithë stilin e përgjithshëm të aplikacioneve Android dhe rekomandimet e fontit të dhëna në udhëzim, është mjaft e pranueshme në disa raste të përdorni fontin tuaj të markës në vend të Roboto, i krijuar për të formuar shoqatat e duhura për përdoruesin.
FontiRoboto
Një nga tiparet më të dukshme të tipografisë në Material Design është përdorimi i madhësive të kundërta të shkronjave. Kjo teknikë klasike mund të shihet në shumë shembuj nga Google - titujt në ekran janë shtypur në madhësi shumë të mëdha dhe, falë kësaj, ato dallohen dukshëm nga pjesa tjetër e tekstit. Në një farë mase, për shkak të titujve të mëdhenj, të dukshëm nga larg, përdoruesi mund të lundrojë lehtësisht midis ekraneve të aplikacioneve dhe të kuptojë shpejt thelbin e përmbajtjes aktuale. Për më tepër, tituj si këta duken shumë të bukur.
Kontrasti tipografi në veprim
Vendndodhja e përmbajtjes ose parimi i paraqitjes nëmaterial dizajni
Mënyra se si përmbajtja vendoset në konceptin e dizajnit të materialit përputhet gjithashtu me parimet e dizajnit të printimit. Komponenti kryesor dhe stil-formues i paraqitjes virtuale në dizajnimin e materialit është rregullimi i fushave. Margjinat dhe mbushja janë rregulluar në atë mënyrë që vëmendja kryesore e përdoruesit të përqendrohet në përmbajtjen e vendosur në mes të kolonës kryesore, dhe aksesi i lehtë dhe i shpejtë në elementë shtesë është i mundur falë diferencës së gjerë të majtë. Një parim i ngjashëm mund të vërehet në faqet e shumë botimeve të shtypit.
Struktura dhe paraqitja e marzheve në dizajnimin e materialit
Ikonat
Ikonografia e përdorur në Material Design është një zhvillim logjik i idesë së thjeshtimit maksimal që mund të shihet në versionet e mëparshme të Android. Google i përshkruan ikonat për materialin si të thjeshta, të qarta dhe miqësore. Në të njëjtën kohë, ideja e materialitetit mund të shtrihet edhe tek ikona - vetë Google mishëron vazhdimisht idenë e materialit në ikonat e produkteve të tij. Për shembull, ikona e zarfit të letrës Gmail vjen nga homologu i saj i vërtetë. Në një mjedis të projektimit material, zarfi i thjeshtuar duket pothuajse po aq i vërtetë sa prototipi "i vërtetë" - ikona tregon hijet dalluese që përfaqësojnë kthesat dhe strukturën fizike të zarfit të letrës së palosur.
Një prototip virtual i një zarfi letre dhe një ikonë e gatshmeGmail
Vlen të përmendet se një qasje materiale për krijimin e ikonave lejohet vetëm për ato ikona që simbolizojnë një produkt specifik - siç është Gmail. Të tjera, ikonat e sistemit (ose UI) që plotësojnë aplikacionet janë të një natyre më pak materiale. Ato janë vërtet minimale, uniforme dhe të thjeshta. Për shkak të thjeshtësisë dhe simbolizmit të tyre, ato janë të lexueshme edhe kur zvogëlohen shumë. Këto ikona mbizotërohen nga forma gjeometrike.
IkonatAndroid Lollipop- çfarë mund të jetë më minimaliste dhe e thjeshtë?
Për zhvilluesit, Google ofron një grup mbresëlënës ikonash të dizajnit të materialit. Në këtë koleksion mund të gjeni, ndoshta, çdo ikonë të nevojshme për krijimin e aplikacioneve me dizajn material. Grupi i ikonave të dizajnit material të Google është i disponueshëm në GitHub. Do të doja të përmendja gjithashtu burimin materialdesignicons.com, ku mund të gjeni jo vetëm ikonat e autorëve të tjerë, por edhe të propozoni të zhvilluara në mënyrë të pavarur.
Filozofia e ngjyrave
Ngjyra luan një rol më të madh në dizajnin e ri të Lollipop sesa në versionet e mëparshme të Android. Edhe në këtë aspekt të dizajnit bie në sy materialiteti për të cilin flasim gjatë gjithë artikullit. Vetë Google po manifeston veçmas një politikë të re ngjyrash, duke theksuar burimet e frymëzimit si arkitektura moderne, shenjat rrugore dhe madje edhe shiriti i trotuareve. Në të njëjtën kohë, kombinimet e ndritshme të ngjyrave të krijuara nga njeriu në dizajnin e materialit bashkëjetojnë me nuancat natyrore, natyrore të heshtura. Në shumë mënyra, kjo qasje përsëri pajtohet me kanunet e shtypjes, sipas të cilave ngjyra ka një efekt të veçantë në perceptimin e informacionit nga lexuesi.
Ideja kryesore e punës me ngjyra në dizajnin e materialit është ndarja e nuancave në kryesore dhe thekse. Google sugjeron përdorimin e 500 nuancave të ndryshme si ngjyra kryesore, të cilat së bashku përbëjnë paletën Primar. Të gjitha ngjyrat e tjera që nuk përfshihen në këtë paletë mund të përdoren si ngjyra të theksuara.
Shembuj të ngjyrave kryesore ngafillorepaletat dhe ngjyrat përkatëse të theksit (tregohen në kutitë e poshtme, të etiketuara si "A"Para numrit të hijes)
Gjatë dizajnimit të ndërfaqes, Google sugjeron kufizimin e tij në një maksimum prej tre ngjyrash nga paleta kryesore dhe një ngjyrë të theksuar. Ngjyrat primare aplikohen në elementë të tillë si shiriti i veprimit, si dhe (si në rastin e bardhë) aplikohen në sipërfaqen që përmban përmbajtjen kryesore të tekstit. Vlen të përmendet se duke ngjyrosur shiritin e veprimit të aplikacionit me njërën nga ngjyrat, duhet të ngjyrosim shiritin e statusit me një nuancë më të errët të së njëjtës ngjyrë:
Statusi barmerr ngjyrëveprim barpor gjithsesi dallohet me një nuancë më të pasur dhe më të errët
Ngjyra të vërteta të gjalla dhe tërheqëse në dizajnin e materialit përdoren për të krijuar thekse. Elementët aktivë të aplikacioneve kanë nevojë për thekse të tilla ngjyrash, para së gjithash, natyrisht, butonin e veprimit lundrues. Përveç tij, është e nevojshme të pikturohen rrëshqitës dhe çelsat e ndryshëm me ngjyra të theksuara të ndritshme.
Elementet e veprimit si butoni lundrues dhe rrëshqitësit janë shumë intuitivë falë përdorimit të ngjyrave të theksuara që e shtyjnë përdoruesin të ndërmarrë veprime
Animacion
Lëvizja e sheshit suprematist, Kazimir Malevich (1920) dheMe kuptim Lëvizja, Google Materiali Dizajn (2014)
Animacioni në dizajnimin e materialit është një nga aspektet më interesante të tij. Falë animacionit të detajuar që u bindet ligjeve fizike të botës reale, pajisjet me Android 5 në bord janë kaq magjepsëse dhe e bëjnë përdoruesin të dëshirojë të ndërhyjë me to për orë të tëra, veçanërisht në herën e parë pas takimit. Funksioni i animacionit në dizajnimin e materialit është t'i tregojë vazhdimisht përdoruesit pasojat e veprimeve të tyre. Animacioni tërheq syrin dhe në një mënyrë vizuale, elokuente i tregon përdoruesit saktësisht se çfarë po ndodh në një moment të caktuar kohor.
Ashtu si të gjithë komponentët e tjerë të dizajnit të materialit, animacioni që i bindet ligjeve fizike nuk është diçka thelbësisht e re - zhvilluesit kanë përshtatur vetëm rregullat e animacionit klasik në mjedisin virtual të sistemit operativ.
Baza e animacionit të dizajnit të materialit është ndërveprimi i avionëve, pjesëve të "letrës dixhitale" për të cilat folëm më parë. Këta avionë, duke lëvizur në nivele të ndryshme në botën e tyre, të kufizuar nga muri i pasmë i telefonit inteligjent dhe xhami i ekranit, mund të takohen, zhvendosin dhe zhvendosin njëri-tjetrin, të dalin në plan të parë me urdhër të përdoruesit, duke rritur përmasat dhe duke mbushur ekran.
Ashtu si në animacionin klasik, të gjitha lëvizjet e avionëve rregullohen nga rregulla strikte, falë të cilave ekziston një imitim i saktë i lëvizjes së sipërfaqeve në botën reale.
Së pari, çdo objekt në botën reale ka masë, dhe, për rrjedhojë, një rezistencë të caktuar. Për të lëvizur një objekt, duhet të zbatohet forcë ndaj tij. Në këtë rast, objekti (në rastin tonë, sipërfaqja) nuk do të fillojë të lëvizë menjëherë - për shkak të masës dhe rezistencës së tij, ai do të përshpejtohet për ca kohë, dhe më pas, pasi të përfundojë lëvizja kryesore e shkaktuar nga aplikimi i forcës, do të ngadalësohet edhe për pak kohë, duke lëvizur tashmë falë inercisë. Duke zbatuar këto ligje të thjeshta, ne marrim një ndërfaqe me lëvizje tepër realiste të sipërfaqes.
Sipërfaqet lëvizëse kanë aftësinë të lëvizin natyrshëm me rezistencë të parashikueshme ndaj lëvizjes.
Zhvendosni shtresën e letrës dixhitale në galeri
Së dyti, në dizajnin e materialit, një objekt i ri shfaqet ose largohet nga ekrani në mënyrë shumë efektive. Ashtu si në botën reale, në mjedisin e dizajnit material, objektet nuk shfaqen nga hiçi dhe as nuk shkojnë askund. Në OS Lollipop, shfaqja e një objekti të ri në plan të parë shoqërohet me metamorfoza kurioze - objekti në të vërtetë nuk shfaqet papritur nga askund, ai rrëshqet jashtë, duke u shtrirë gradualisht dhe duke marrë formën e një sipërfaqeje. Në këtë rast, nuk ndodh respektimi i përmasave, sepse një rritje ose ulje proporcionale dhe simetrike e sipërfaqes do të japë përshtypjen e afrimit ose largimit, ndërkohë që duhet të tregojmë shfaqjen në ekran të një copë letre dixhitale të re. , të ndara dhe të pavarura.
Për të realizuar këtë efekt të ri të objektit, dizajni i materialit ofron dy qasje, me shkallë të ndryshme provash. Përcaktimi më i gjallë dhe i paqartë i paraqitjes së një sipërfaqeje të re realizohet me ndihmën e një rënieje në rritje - pas prekjes me gisht dhe thirrjes së një objekti, sipërfaqja fillon të përhapet në të gjithë ekranin si një valë.
Një pikim që formon një sipërfaqe të re pune - një nga efektet më të dukshme në dizajnin e materialit
Efekti i sipërfaqes rrjedhëse mund të jetë shumë delikat dhe plot ngjyra
Një mënyrë tjetër për t'i treguar përdoruesit parimin e tranzicionit është krijimi i një rritjeje asimetrike, të pabarabartë në një sipërfaqe drejtkëndore të shkaktuar nga përdoruesi. Drejtkëndëshi i sipërfaqes shtrihet në mënyrë disproporcionale me formën e dëshiruar. Kjo teknikë ju lejon të tërhiqni vëmendjen e përdoruesit me lëvizje aktive, jolineare dhe të tërheqni vëmendjen e tij në parimin e shfaqjes së sipërfaqeve të reja.
Një shembull i animimit të ikonave bazë nëAndroid Lollipop
I kudondodhurRipple-efekti
Efekti i valëzimit, përkatësisht lëvizja me onde e hijeve ku gishti prek ekranin e pajisjes, është një tjetër aspekt i rëndësishëm i reagimit. Në Lollipop, efekti Ripple zbatohet pothuajse kudo. Kur prekni ndërfaqen e një sistemi të ri operativ, valët ndryshojnë në shumicën e rasteve, qoftë duke shtypur një buton apo duke shfletuar një galeri fotografish. Teknikisht, sapo sistemi merr informacionin hyrës (duke prekur ekranin me gisht), sistemi konfirmon menjëherë pranimin e këtij informacioni përmes një turbullimi të valëzuar të "bojës dixhitale".
Ripple-efekti që ndodh kur prekni shpejt ekranin me gisht
Ripple-efekti që ndodh kur përpiqeni të zhvendosni një imazh brenda galerisë
Aspekti teknik i animacionitmaterial dizajni ose zarf natyral
Siç kemi thënë tashmë, në botën reale, për të nxjerrë një objekt nga gjendja e prehjes, duhet të bëhet një përpjekje për të; në këtë rast, faza kryesore e lëvizjes së objektit do të paraprihet nga nxitimi i tij. ashtu si ndalimi i plotë do të paraprihet nga ngadalësimi. Duke ndikuar vazhdimisht në botën materiale, ne jemi mësuar me këtë gjendje, kështu që çdo mënyrë tjetër e lëvizjes së objekteve, si nxitimi i menjëhershëm dhe ndalimi i papritur pa inerci, na duken të panatyrshme, të çuditshme dhe, shpesh, të bezdisshme. Nisur nga ky aspekt, krijuesit e dizajnit të materialit kanë bërë një punë të mirë në “fizikën” e animacionit, duke e afruar sa më pranë jetës reale.
Në një mjedis dizajni material, objektet e nxjerra nga një gjendje pushimi shpejt (por jo menjëherë!) Përshpejtohen dhe ngadalësohen butësisht ngadalë. Ky lloj lëvizjeje dhe animacioni është i këndshëm për të bashkëvepruar, pasi korrespondon me përvojën tonë të zhvilluar në procesin e komunikimit me botën reale.
Grafiku i lëvizjes së objekteve të animuara: nxitim i shpejtë dhe ngadalësim i qetë
Dizajn adaptues
Aspekti më i rëndësishëm, kyç i dizajnit të materialit. Filozofia e dizajnit të materialit nënkupton një unifikim të plotë të përvojës së përdoruesit. Me fjalë të tjera, përdoruesi nuk duhet të përballet me versione të ndryshme të të njëjtit aplikacion duke përdorur pajisje të ndryshme. Përvoja e përdoruesit duhet të jetë e njëjtë për një desktop dhe për një smartphone ose tablet. Dallimet e vetme të pranueshme dhe objektive janë përmasat dhe përmasat e ndryshme të elementeve të ndërfaqes së aplikacionit. Përndryshe, versione të ndryshme të të njëjtit aplikacion duhet të formojnë një përvojë krejtësisht identike të përdoruesit.
Google ishte një nga të parët që njohu nevojën për të unifikuar dhe zhvilluar një përvojë të qëndrueshme të përdoruesit. Në praktikë, ky realizim u shndërrua në të ashtuquajturin projekt "Kennedy", kur në vitin 2011 kompania filloi të zhvillonte një lloj të vetëm ndërfaqeje për të gjitha aplikacionet e saj. Estetika dhe UX e Google ishin të mira, por kishte ende një hendek midis versioneve desktop dhe celular të produkteve të tyre për Android. Në fakt, vetë dizajni i materialit është përpjekja e radhës pas projektit Kennedy për të krijuar një ndërfaqe vërtet të unifikuar.
Thjeshtësia vizuale e materialit na ka lejuar të zhvillojmë një sërë rregullash dhe metodash që e bëjnë të lehtë përshtatjen e aplikacioneve të krijuara në stilin e dizajnit të materialit për platforma të ndryshme.
Së pari, aplikacionet e bëra në përputhje me konceptin e dizajnit të materialit kanë një strukturë blloku. Duke analizuar ndërfaqen e aplikacioneve të tilla, mund të shihni se ajo karakterizohet nga një shpërndarje e qartë e blloqeve në një rrjet modular. Në vend të një dizajni ndërfaqeje të larmishme, jo gjithmonë të dukshme dhe konfuze, marrim një lloj konstruktori, pjesët individuale të të cilit mund të zhvendosen relativisht lehtë dhe të përshtaten me një ekran specifik.
Rrjeti modular dhe blloqet e shpërndara
Falë blloqeve, secili prej të cilëve ka një kufi objektiv të zgjerimit ose tkurrjes, ne mund ta bëjmë ndërfaqen e aplikacionit të lexueshëm dhe të lehtë për t'u përdorur në çdo ekran. Falë marzhit për zgjerim dhe tkurrje që ka secili prej blloqeve të aplikacionit, dizajni i materialit ofron një mjet vërtet efektiv për unifikimin e plotë të ndërfaqeve të produkteve të ndryshme softuerike.
Ndërfaqja e projektuar në përputhje me parimetmaterial dizajni, universale për çdo ekran
Së dyti, përshtatja e ndërfaqes së aplikacionit për pajisje të ndryshme lidhet me sasinë e informacionit të shfaqur në ekran. Natyrisht, sa më i vogël të jetë ekrani, aq më pak informacion të detajuar mund të demonstrojmë brenda kornizës së tij. Në këtë rast, ne duhet të transferojmë një pjesë të përmbajtjes në ekrane të veçanta ose ta fshehim atë pas elementeve shtesë - kjo praktikë është veçanërisht tipike për aplikacionet e përshtatura për telefonat inteligjentë.
Elementet
Buton lundrues në dizajn normal ose mini
Lundrues veprim butonin. Butoni lundrues është një nga elementët më të veçantë dhe më të dallueshëm të dizajnit të materialit. Është ajo që përdoruesi vëren në radhë të parë. Butoni lundrues është një mënyrë shumë e mirë për të shtyrë përdoruesin në një veprim kyç, me ndihmën e tij një person shpejt merr akses në ato funksione që janë më të rëndësishme për të për momentin. Butoni tenton të shfaqet në pjesë të ndryshme të ekranit dhe, përkundër faktit se më së shpeshti gjendet në këndin e poshtëm, mund të gjendet kudo në ekran.
Duhet mbajtur mend se një buton lundrues mund të shoqërohet vetëm me një veprim kyç, bazë të kryer në një aplikacion specifik. Për shembull, në menaxherin e skedarëve, një buton lundrues mund të nënkuptojë shtimin e skedarëve ose krijimin e një dosjeje të re, në një aplikacion për mesazhe ose postë - krijimin e një mesazhi ose letre të re, në një rrjet social - një shenjë "like" etj. Veprimi kryesor është gjithmonë i lidhur me një buton lundrues, megjithëse ka disa kufizime.
Jo çdo ekran ka nevojë për një buton lundrues. Disa veprime janë më të lehta për t'u kryer duke ndërvepruar drejtpërdrejt me përmbajtjen e aplikacionit. Shembulli më tipik i një përjashtimi të tillë është galeria e fotografive. Duke parë fotot, është më e lehtë të vini në kontakt me imazhet menjëherë, pa ndërmjetës në formën e një butoni lundrues.
Ndërsa në galeri, përdoruesi nuk ka nevojë për një buton lundrues - veprimi kryesor është zgjedhja dhe shikimi i fotove
Butoni lundrues ka gjithmonë formën e një rrethi që lëshon një hije të vogël dhe është e njëjta copë letre dixhitale si sipërfaqet e tjera. Butoni ka një ngjyrë të ndritshme të theksuar që nuk përputhet me ngjyrat kryesore nga fillore paleta, kështu që mbetet gjithmonë elementi kryesor dhe më i dukshëm në ekran. Gjithashtu, dominimi i tij theksohet nga pozicioni i tij në lidhje me shtresat e tjera të ndërfaqes - butoni lundrues është gjithmonë në krye dhe nuk mund të mbivendoset nga elementë të tjerë të aplikacionit.
Butoni i veprimit lundruesv veprim
Më e mira nga të gjitha, një buton lundrues karakterizohet nga fakti se mund të shoqërohet vetëm me veprime pozitive si krijimi, shtimi ose lëvizja brenda navigimit. Lidhja e një butoni lundrues me veprime destruktive ose atipike - fshirja, rregullimi i volumit ose thirrja e menysë së cilësimeve - është e palogjikshme dhe psikologjikisht e paarsyeshme.
Veprimet pozitive dhe negativelundrues veprim butonin
Dhe së fundi, pika e fundit e rëndësishme - mund të ketë vetëm një buton lundrues në ekran. Pasja e shumë butonave të veprimit lundrues brenda të njëjtit ekran shkatërron plotësisht të gjithë pikën e një butoni lundrues - kryerja e një veprimi kyç në një aplikacion.
Aplikacioni barduke zëvendësuarveprim bar
Shiriti i veprimit ka ndryshuar ndjeshëm në krahasim me versionet e mëparshme. Në Android Lollipop, funksionaliteti i tij është rritur ndjeshëm dhe tani elementi i përditësuar quhet shiriti i aplikacionit. Falë ndryshimeve, shiriti i ri i aplikacionit është një mjet për kontroll të plotë të përdoruesit mbi aplikacionin dhe, siç është rasti me aspektet e tjera të dizajnit të materialit dhe në veçanti me sistemin e ri Lollipop, shiriti i aplikacionit është plotësisht intuitiv dhe i kuptueshëm.
Shiriti i aplikacionit nuk është i kufizuar në një madhësi fikse - tani ai mund të rritet në mënyrë proporcionale, duke vendosur në të të gjithë përmbajtjen e nevojshme dhe kontrollet e aplikacionit, të tilla si menutë me zbritje, filtrat, një formular kërkimi etj.
Versioni bazë i përditësuarveprim barqë përmban elementet e nevojshme për të kontrolluar aplikacionin
Hijeaplikacioni barpropozuar ngaGoogle
Gjendja aktuale e punëve me zhvillimin e aplikacionit Android Lollipop dhe AppCompat v21
Problemi kryesor me kalimin në Material Design është përputhshmëria e dobët e ndërfaqeve të reja me versionet më të vjetra të Android. Ka kaq shumë zhvillues që hezitojnë ta sakrifikojnë këtë pajtueshmëri, dhe për këtë arsye shpërndarja e aplikacioneve bazuar në parimet e dizajnit të materialit mbetet mjaft e kufizuar. Kjo gjendje do të vazhdojë për ca kohë, ndërkohë që shumica dërrmuese e pajisjeve Android funksionojnë në versionet më të vjetra të tij.
Sidoqoftë, për ata zhvillues që duan t'i mbajnë aplikacionet e tyre të pajtueshme me versionet më të vjetra të Android, Google ofron një sërë mjetesh që i lejojnë ata të përdorin elementë të dizajnit material në aplikacionet për paraardhësit e Lollipop. Në blogun përkatës, zhvilluesit inkurajohen të njihen me bibliotekën AppCombat, me të cilën mund të shtoni elemente materiale në versionet më të vjetra të Android.
Një nga veçoritë më interesante është pajisja e një aplikacioni që funksionon në versionet e mëparshme të Android me një shirit të plotë aplikacioni, i cili është një element thelbësor i dizajnit në Lollipop. Së bashku me miniaplikacionin e ri, aplikacionet e vjetra marrin të gjithë funksionalitetin e avancuar që e dallon shiritin e aplikacionit nga shiriti i mëparshëm i veprimeve.
Widgetaplikacioni bar
Një vështrim kritik në Dizajnin e Materialeve
Me gjithë risinë e dukshme dhe zbatimin e suksesshëm, ka disa të meta në dizajnin e materialit (nëse dëshironi). Edhe pse, si në të gjitha çështjet e ngjashme, të gjithë vendosin vetë nëse pikat e listuara janë disavantazhe. Duhet të theksohet se për momentin mbështetësit e konceptit të dizajnit të materialit përbëjnë ende shumicën e numrit të përgjithshëm të atyre që vazhdojnë të diskutojnë fuqishëm idenë e fundit të Google. Sidoqoftë, publiku më skeptik po bën ankesat e mëposhtme në lidhje me ndërfaqen Lollipop.
Microsoft E sheshtë Dizajnishte shumë më praktike dhe më e suksesshmematerial dizajni. Siç thamë më parë, dizajni i materialit nuk është gjë tjetër veçse një përmbledhje e suksesshme e qasjeve dhe teknikave që tashmë janë zhvilluar dhe përdorur nga dikush tjetër. Një koncept që është adoptuar nga zhvilluesit e dizajnit të materialit është i ashtuquajturi dizajn i sheshtë i Microsoft. Vetë ideja e braktisjes së frilleve në favor të një hapësire dixhitale të sheshtë u shfaq për herë të parë në produktet e Microsoft. Dizajni i sheshtë përfaqësonte një refuzim të plotë të skeomorfizmit në të gjitha format e tij. Dizajni i materialit është një version i zbutur i këtij koncepti duke simuluar letrën dixhitale dhe bojën dixhitale. Dizajni i materialit ka përfshirë më të mirën e të dy botëve - hapësira të sheshta dhe minimaliste nga dizajni i sheshtë dhe një vëllim i caktuar i animuar nga skeomorfizmi.
Microsoft Flat Design
Megjithatë, jo të gjithë e shohin dizajnin e materialit si pikën e ëmbël dhe versionin më miqësor të dizajnit të sheshtë. Shumë përdorues dhe zhvillues e konsiderojnë animacionin mjaft të pasur dhe vëllimin në dizajnin e materialit një tepricë, duke e shpërqendruar përdoruesin dhe duke e ngarkuar atë me informacione vizuale të panevojshme. Gjithashtu, dizajni i materialit fajësohet për kërkesat e larta për burimet që përdoren për të animuar të gjithë elementët.
Përdorimi joefikas i zonës së ekranit, shumë hapësirë e bardhë. Bollëku i "ajrit" famëkeq në dizajnin e materialit (si dhe në dizajnin modern në përgjithësi) është subjekt i debateve më të nxehta midis projektuesve, zhvilluesve dhe përdoruesve të zakonshëm. Çështja e hapësirave boshe në ndërfaqet moderne është me të vërtetë mjaft e diskutueshme, pasi qëndrimi ndaj sasisë së hapësirës së lirë në ekran varet, megjithatë, nga preferencat individuale. Shumë përdorues duan të shohin të gjithë (ose shumicën) e informacionit të nevojshëm përpara tyre, duke u përpjekur të mos përdorin lëvizjen dhe kthimin. Përdorues të tillë janë të bezdisur sinqerisht nga zbrazëtitë dhe boshllëqet e mëdha midis përmbajtjes, si dhe nevoja për të përdorur vazhdimisht lëvizjen. Përmbajtje e grupuar, e shpërndarë në mënyrë inteligjente në të gjithë zonën e ekranit - zgjedhja e tyre.
Një lloj tjetër përdoruesi, nga ana tjetër, mirëpret përmbajtjen e rrallë, praninë e “ajrit” dhe hapësirës së lirë të pastër. Ata nuk janë të rënduar nga nevoja për të përdorur më shpesh scrolling dhe për të kthyer faqet virtuale dhe e konsiderojnë praninë e indenteve të mëdha si një kusht të domosdoshëm për të nxjerrë në pah shpejt dhe me lehtësi elementin e dëshiruar nga masa e përgjithshme e përmbajtjes. Përveç kësaj, këta përdorues e gjejnë "ajrin" të justifikuar dhe estetikisht të këndshëm.
Për shembull, le të krahasojmë ndërfaqen e menysë Cilësimet në Android dhe iOS:
Krahasimi i ndërfaqeveiOSdheAndroid- triumfi i perceptimit subjektiv. Disa përdorues e konsiderojnë vendndodhjen e përmbajtjes nëiOSmë racionale dhe e justifikuar - gjithçka është në dorë, ndërsa nëAndroidkërkon përpjekje shtesë për të gjetur artikullin e menysë që dëshironi. Nga ana tjetër, një pjesë tjetër e përdoruesve gjen ndërfaqeniOS shumë i ngjeshur dhe i vështirë për t'u kuptuar, dhe ndërfaqjaAndroid- më e lehtë dhe më e përballueshme.
Diskutimi i meritave dhe të metave të dizajnit të materialit është ende në vazhdim, me përdoruesit dhe zhvilluesit që u kushtojnë vëmendje pikave dhe mangësive të diskutueshme dhe kërkojnë mënyra për të përdorur sa më efektivisht konceptin e dizajnit të materialit. Në një të ardhme shumë të afërt, do të shohim se çfarë fati e pret dizajni material - a do të mbetet një modë e paqartë e imponuar për pak kohë nga gjiganti Google, do të bëhet thjesht një eksperiment tjetër i madh në fushën e ndërfaqeve, apo do të jetë një fazë e re që do ta ngrejë artin e UI në një nivel të ri.
konkluzioni
Nëse po planifikoni të angazhoheni seriozisht në dizajnimin e materialit dhe dëshironi të shihni të gjithë konceptin e materialit në tërësinë e tij, atëherë duhet të studioni një të thjeshtë, të arritshme dhe vizuale Udhëzimet e Google... Shpresojmë që përmbledhja jonë e shkurtër do t'u sigurojë lexuesve të interesuar një hyrje në një fushë kaq premtuese si dizajni i materialit. Duke kuptuar filozofinë e projektit të ri të Google, ju jo vetëm që mund t'i zbatoni idetë tuaja në këtë format të freskët dhe praktik, por gjithashtu, me siguri, mund të përsosni dhe përmirësoni vetë konceptin e materialit, duke zhvilluar "patate të skuqura" tuaja dhe duke përmirësuar marrëdhëniet e përdoruesit me ndërfaqe dixhitale.
Google Design Evangelist Mustafa Kurtuldu mbi aplikimin e teknologjisë së tyre në zhvillimin e aplikacioneve Keep dhe Inbox.
Tek faqeshënuesit
Përkthimi u përgatit nga ekipi i shkollës online të anglishtes Skyeng.
Material Design ofron një sërë mjetesh dhe udhëzimesh për t'ju ndihmuar të bëni një dizajn të vetëdijshëm UX kur krijoni një ndërfaqe aplikacioni.
Por, çka nëse këto parime nuk funksionojnë për një produkt të caktuar? Dhe çfarë bëjnë dizajnerët e Google kur dizajnojnë një produkt që shkon përtej udhëzimeve klasike?
Udhëzimet materiale janë të përgjegjshme. Në këtë artikull, ne do t'i hedhim një vështrim dy aplikacioneve të Google, Keep dhe Inbox, për të kuptuar se si ato jo vetëm që devijojnë nga disa rregulla, por gjithashtu formojnë parime të reja të dizajnit të materialit.
Kutia hyrëse: Rrjeti modular
Zhvillimi i një shërbimi të ri emaili është një detyrë shumë ambicioze për Google, duke pasur parasysh tregun tashmë të rrënjosur të Gmail. Qëllimi i Inbox ishte të thellonte dizajnin e ndërfaqes dhe të krijonte një përvojë unike të përdoruesit dhe identitetin e korporatës, duke luajtur sipas rregullave të reja të Material Design.
Kur ekipi i Inbox-it po krijonte dizajne paraprake, koncepti i Material Design ishte ende në zhvillim. Kjo i dha Inbox një mundësi të shkëlqyeshme për të vendosur standardet e dizajnit të materialit duke trajtuar problemin e thellësisë dhe vëllimit në ndërfaqen e përdoruesit.
Thellesi
Dizajni origjinal i Inbox nuk ishte mjaftueshëm fleksibël - hapësira e rrjetës lejoi vetëm shtatë shkronja të vendoseshin në një ekran 13 inç. Kjo ishte shumë pak, veçanërisht në krahasim me Gmail, i cili mund të mbajë 16-20 email.
Nëse hapni Gmail dhe Inbox në dritaret ngjitur, mund të shihni një ndryshim të madh në peshën vizuale. Dhe një nga sfidat më të mëdha ishte gjetja e ekuilibrit të duhur midis përmbajtjes dhe hapësirës së bardhë.
Tim Smith
Kutia hyrëse e projektuesit kryesor
Duke ndryshuar cilësimet e rrjetit, lartësitë e rreshtave dhe mënyrën se si duket fonti, projektuesit e Inbox ishin në gjendje të arrinin thellësinë optimale të ndërfaqes ndërsa shfaqnin 12-17 emaile, secili brenda një karte Material Design. Ndërfaqja e aplikacionit përshtatet me pajisjen e përdoruesit. Për shembull, fonti në "Subject line" ndryshon në varësi të madhësisë së ekranit.
Ngjyrat, imazhet dhe ikona
Përdorimi i imazheve kontekstuale në grupe shkronjash është një tjetër veçori dalluese e shërbimit. Për shembull, nëse një përdorues po planifikon një udhëtim në Nju Jork, ai do të shohë qiellin e Manhatanit në kartën me shkronjën përkatëse.
Ka shumë ikona në shiritin e majtë të navigimit, ngjyrat e tyre korrespondojnë me funksionet e tyre në aplikacion. Kur përdoruesi klikon butonin jeshil Done, sfondi i shiritit të sipërm gjithashtu bëhet i gjelbër, duke treguar se konteksti ka ndryshuar.
Paneli i sipërm
Një detyrë tjetër e rëndësishme për ekipin ishte të hartonte shiritin e sipërm të aplikacionit. Ideja fillestare ishte krijimi i një paneli të transformueshëm që nuk do të shtrihej në gjerësinë e dritares së shfletuesit, por do të ndryshonte në varësi të përmbajtjes.
Ne kemi punuar me rreth një duzinë variacione të ndryshme të këtij koncepti derisa përfundimisht dolëm me modalitetin e ekranit të plotë që shihni tani. Ne krijuam gjithashtu disa koncepte të shiritit të kërkimit përpara se të zgjidhnim stilin më të mirë.
Tim Smith
Kutia hyrëse e projektuesit kryesor
Kartat në Inbox zgjerohen dhe tkurren, që do të thotë se formati i kokës ndryshon në varësi të mënyrës se si përdoruesi ndërvepron me emailin. Shiriti i sipërm shfaq gjithashtu një shirit kërkimi dhe meny me aplikacione të tjera të Google. Kjo qasje lejon Inbox të mbetet e përgjegjshme pa e komplikuar ndërfaqen.
Mbaj: mostra të përgjegjshme navigimi
Keep është një aplikacion për marrjen e shënimeve ndër-platformë që zgjeron dhe fshin kartat në ekran, duke e mbajtur vëmendjen e përdoruesit të fokusuar kur shton një shënim të ri. Shiriti i poshtëm i navigimit ju lejon të krijoni shpejt një shënim të ri me një klik.
Angazhimi, ekranet bosh dhe animacioni
Në mënyrë tipike, përdoruesi përballet me një ekran bosh kur nuk ka përmbajtje në faqe. Në Keep, ekrani duket si një kanavacë bosh ku përdoruesi mund të shënojë shpejt idetë e tij.
Hapësira e bardhë inkurajon përdoruesin të eksplorojë artikujt e menysë në panel, i cili zgjerohet për të shfaqur filtra të ndryshëm të paraqitur si ikona; menynë e shënjimit, të cilën mund ta përdorni për të kaluar midis listës dhe rrjetit, dhe shiritin e majtë të navigimit, ku mund të ndryshoni cilësimet bazë të aplikacionit.
Ne kemi punuar shumë në animacion - si rrjedhin shënimet, si lëvizin kur i hapni dhe mbyllni ato.
Genevieve Cuevas
Zgjedhja e elementeve të duhura materiale: navigimi i poshtëm ose butoni i veprimit lundrues
Konciziteti dhe lehtësia e përdorimit janë veçoritë kryesore të Keep. Gjatë ridizajnimit të aplikacionit, zhvilluesit studiuan shabllonet Material Design dhe përfunduan duke zgjedhur kartat që ndihmojnë në dallimin e shënimeve nga njëra-tjetra, një shirit navigimi majtas që e bën më të lehtë personalizimin e aplikacionit dhe një meny konteksti që ndryshon në varësi të llojit të shënimit. - si shënime me kuti kontrolli që shfaqin menutë për të kontrolluar dhe ndryshuar artikujt në listë.
Së bashku, këta elementë krijojnë një ndërfaqe të qartë dhe funksionale, duke iu përshtatur një situate specifike. Gjatë ripërpunimit të Keep, krijuesit eksperimentuan me disa elementë bazë të navigimit të aplikacionit - në veçanti, ata u përpoqën të zëvendësonin navigimin ekzistues me një buton veprimi lundrues.
Navigimi origjinal ju lejoi të krijoni një shënim të ri me një trokitje, dhe butoni i veprimit lundrues kërkonte dy klikime: një për të shfaqur opsionet dhe një për të krijuar një shënim.
Kur prezantuam butonin lundrues, disa nga përdoruesit tanë u ankuan se krijimi i një shënimi me dy klikime nuk ishte aq i përshtatshëm.
Genevieve Cuevas
Inxhinieri i softuerit të Google Keep
Shumë përdorues që e kanë përdorur aplikacionin më parë dhe janë mësuar me navigimin me një klikim nuk e miratuan këtë ndryshim. Pas testimit dhe përfundimisht braktisjes së butonit lundrues, zhvilluesit e Keep ishin në gjendje të zgjidhnin zgjidhjen që i përshtatet më mirë interesave të tyre të produktit.
Udhëheqja, jo një grup rregullash
Ekipet e Keep dhe Inbox përdorën udhëzimet si bazë për aplikimet e tyre. Kur hasën në një skript të personalizuar që nuk funksiononte, ata ishin në gjendje të përshtatnin dizajnin e tyre për t'iu përshtatur nevojave të përdoruesve.
Material Design ofron udhëzime të bazuara në vite përvojë në Google, por është e pamundur të zgjidhet absolutisht çdo problem me të. Shembujt Keep dhe Inbox tregojnë se mund të përdorni udhëzimet e dizajnit të materialit dhe t'i ndryshoni ato për t'iu përshtatur produktit tuaj të veçantë.
Çfarë është dizajni i materialit? Ky është një grup stilesh dhe grafikash të zhvilluara nga Google, si dhe udhëzime dhe rregulla për respektimin e atyre stileve. Dizajni i materialit u shfaq për herë të parë në një konferencë zhvilluesish, Google I / O, në verën e vitit 2014. Stili bazohet në formatin e "kartave" dhe "blloqeve" - forma dhe elementë grafikë të thjeshtë dhe lakonikë, si dhe thjeshtësia dhe freskia e përgjithshme e dizajnit - ngjyra të qeta, të shurdhër, mungesa e vëllimit, detaje të vogla dhe detaje në të përgjithshme. “Dalja” e parë për dizajnin e materialit u bë me lançimin e shërbimit Google Now, dhe stili u bë zyrtarisht bazë për sistemin operativ Android kohët e fundit, në versionin 5.0, i njohur gjithashtu si Android Lollipop.
Sipas mendimit tim, dizajni i materialit ka disa avantazhe shumë të rëndësishme mbi të gjitha përpjekjet e mëparshme të Google për të sjellë në një formë të vetme dizajnin e sistemit operativ dhe programet për të, por edhe disa disavantazhe. Në këtë artikull të shkurtër do të përpiqem të paraqes këndvështrimin tim mbi gjuhën e re të dizajnit nga Google.
Dizajni i materialit - të mirat
Argumenti i parë dhe më i rëndësishëm në favor të stilit të ri, për mendimin tim, është ekzekutimi i tij. Nuk dua të tingëlloj sërish si një urrejtës i teknologjisë dhe qasjes së Apple, por në këtë rast nuk është e frikshme, sepse po shpreh vetëm këndvështrimin tim. Pra, për mendimin tim, përditësimi i iOS në versionin e shtatë dhe përditësimi i Android në versionin e pestë janë, siç thonë ata, dy dallime të mëdha.
Në rastin e Apple, ne pamë transferimin e zakonshëm të grafikëve të mëparshëm në një pamje të sheshtë, asnjë ide të re, asnjë dëshirë për të sjellë diçka të freskët - thjesht morëm ndërfaqen ekzistuese, e shtrydhëm atë me një shtyp, rivizatuam ikonat dhe shtuam ylberin fotot e sfondit. Janë imazhet e sfondit në iOS 7 të ri dhe efektet e transparencës së menusë që janë tregues i pashijes dhe mosgatishmërisë së stilistëve për të bërë diçka të mirë dhe të sjellshme, siç më duket mua. Në "shtatë" të gjithë thjesht u tronditën nga efektet e bukura të animacionit dhe shkëlqimi i përgjithshëm i ndërfaqes së re. Më duket se askush nuk mendoi vërtet nëse do të ishte i përshtatshëm, sepse përndryshe dizajnerët e Apple do t'i kishin kushtuar më shumë vëmendje aspekteve funksionale, dhe jo modelit të ylberit.
Hija e njoftimit, e thirrur nga lart, dhe paneli i kontrollit, quhet nga poshtë, janë shembuj ilustrues të një "përmirësimi" të padobishëm në iOS7. E para nuk është bërë më e qartë - të gjitha njoftimet janë grumbulluar së bashku dhe ka shumë prej tyre, e dyta është bërë përgjysmë, çelsat ju lejojnë të ndizni / fikni ndërfaqet, por të mos shkoni në konfigurimin e tyre dhe zgjedhjen e rrjeteve
Android 5.0 gjithashtu është përditësuar shumë seriozisht për sa i përket grafikut në krahasim me 4.x pikërisht për shkak të kalimit të sistemit operativ në dizajn material. Dhe, në shikim të parë, ndryshimet këtu janë të ngjashme me ato që ndodhën në iOS - ndryshimi përfundimtar i stilit në dizajn të përgjithshëm të sheshtë, më të lehtë, thjeshtësi të jashtme. Por më pas fillojnë dallimet. Në Android 5.0, ndërfaqja është më holistike falë dizajnit të materialit - gjithçka është bërë në një stil të qetë, asgjë nuk bie në sy dhe nuk duket shumëngjyrësh ose tepër e ndritshme. A e përjashton parimi kryesor i dizajnit të materialit përparësinë e efekteve grafike në ndërfaqe ndaj praktikës së saj? dhe është shumë e lezetshme.
Për të përmbledhur argumentin e parë - dizajni i materialit tashmë duket shumë holistik, kjo është pikërisht ajo që i mungonte sistemit operativ nga Google dhe KO - integriteti dhe komuniteti. Kur hapni çdo program individual, qofshin kontakte, shfletues, klient email ose diçka tjetër, shihni të njëjtin animacion, të njëjtën gamë ngjyrash dhe elementë thjesht të dallueshëm. Për shkak të kësaj, sistemi operativ i ri është më i lehtë për t'u mësuar dhe është thjesht e këndshme të punosh me të.
Argumenti i dytë është se nëse keni përdorur tashmë një smartphone në Lollipop ose keni parë pamje nga ekrani, atëherë me siguri keni vënë re se ndërfaqja është zgjeruar vizualisht. Zgjerimi i ndërfaqes ka vazhduar në pajisjet me kontakt për një kohë të gjatë. Nëse krahasojmë versionet e para të Android me "atëherë" Windows Mobile, është e qartë se Android ishte më i madh dhe më i thjeshtë, kishte më pak informacion në ekran, por ishte gjithashtu më i përshtatshëm për të përdorur smartfonin. Në dizajnin e materialit, disa elementë janë zëvendësuar me "karta", fontet, madhësitë e ikonave dhe linjave janë rritur pak, ndërfaqja në tërësi është bërë më e madhe. Më pëlqen, ndoshta, sepse po plakem, shaka me batuta, por sa më e vjetër, aq më pak dëshira për të parë në ikonat dhe elementët "përleshje", qoftë edhe me shikim të mirë. Meqë ra fjala, kjo është arsyeja pse nuk më pëlqen iPhone 5 dhe asgjë më pak. Kompaktësia Kompaktësia, por edhe në një ekran me diagonale 4.5 "" dëshironi të shihni elementë me madhësi normale dhe jo ta studioni atë me një xham zmadhues. Kjo është shumë më e përshtatshme në shumë situata, veçanërisht kur punoni me një smartphone në lëvizje, për shembull. Prandaj, konsolidimi i përgjithshëm i ndërfaqes në Android 5.0 bazuar në dizajnin e materialit më duket se është një hap i mirë.
Argumenti i tretë është për - Google jo vetëm që transferoi Android në një dizajn të ri, por gjithashtu përgatiti menjëherë udhëzuesit e nevojshëm vizualë me një demonstrim të zbatimit të elementeve kryesore për zhvilluesit e softuerit. E thënë thjesht, nëse jeni duke bërë një program të ri ose dëshironi të përktheni një të vjetër në një dizajn të ri, ju faqe dhe studioni rekomandimet e Google.
Për shembull, thotë se cilat ngjyra duhet të përdoren. tregon fontet dhe mënyrën e përdorimit të tyre. Dhe rekomandime për përdorimin e grafikës së duhur në program.
Dizajni i materialit - argumente KUNDËR
Sidoqoftë, argumenti i tretë në favor të dizajnit të materialit është gjithashtu një argument kundër tij. Po, Google është i shkëlqyeshëm për të mos i braktisur zhvilluesit dhe për t'u ofruar atyre udhëzime gjithëpërfshirëse për përdorimin e saktë të gjuhës së re të dizajnit, por në këtë rast, le të themi, nuk funksionoi të mendosh për përdoruesit. Programet e shkruara sipas të gjitha rregullave të dizajnit të materialit ose të ndryshuara nga jashtë sipas udhëzimeve të Google do të duken shumë harmonike në Android 5.0 dhe jo shumë mirë në versionet e mëparshme të sistemit. Dhe anasjelltas - të gjitha aplikacionet që nuk përputhen me rregullat e dizajnit të materialit do të duken disi të huaja në një smartphone me Android Lollipop. Dhe do të ketë shumë programe të tilla në gjashtë muajt e ardhshëm, do të guxoja të sugjeroja. Megjithatë, jo çdo zhvillues i një programi të kërkuar, veçanërisht nëse është kompleks dhe kërkon përditësime dhe përmirësime të vazhdueshme, do të heqë gjithçka dhe do të fillojë ta përkthejë atë në dizajn material.
Një shembull i mirë i një dizajni të vjetër në një program shumë të përditësuar është WhatsApp. Për sa kohë aplikacioni nuk do të përkthehet në md? Pyetje e mirë
Rezulton se disa nga zhvilluesit tani me të vërtetë do të heqin dorë nga gjithçka dhe do t'i transferojnë programet e tyre në dizajnin e materialit, ndërsa të tjerët jo. Dhe gjithashtu në Google Play ka programe në një dizajn më të vjetër, le të themi, por edhe ndonjëherë të nevojshëm për punë. Si rezultat, rezulton se dëshira e Google (pa dyshim e saktë!) për të sjellë Android në një formë të zakonshme nuk mjafton, duhet të bësh diçka me qindra mijëra programe. Pyetja është çfarë?
Të nderuar lexues, si ndiheni për idenë e Google për të sjellë të gjitha shërbimet dhe aplikacionet e saj në një formë të përbashkët, duke përdorur si bazë dizajnin e materialit?
- Tutorial
A mund të jenë butonat gjashtëkëndor?
Google I / O 2018 la një sasi të madhe materialesh për të menduar. Cfare ka te re? Si të jetojmë? A është aplikacioni im i vjetëruar? A mund të jenë butonat gjashtëkëndor? A nuk nevojiten më dizajnerët? Është më e këndshme të kuptosh ngadalë dhe në pjesë të vogla. Kjo pjesë ka të bëjë me dizajnin.
Për katër vjet, Material Design është ngopur me të. Sipas Google, 1.5 milionë aplikacione janë ndërtuar rreth këtij sistemi dizajni. Pse? Në fund të fundit, ai u krijua fillimisht për nevojat e brendshme të Google.
Ajo zgjidhi problemet e dizajnit heterogjen për Android dhe mungesën e ndonjë sistemi.
- Ishte universal për pajisje të ndryshme: tableta, telefona inteligjentë, ueb.
- Është menduar nga këndvështrimi i përdoruesit dhe është intuitiv.
Sistemi u akuzua për jofleksibilitet dhe, si rezultat, për marrjen e një modeli plani. Nëse e dizajnoni shërbimin duke ndjekur rreptësisht udhëzuesit, atëherë vizualisht aplikacionet doli me të vërtetë pa karakter. Nga ana tjetër, pse të fajësohet sistemi? Udhëzimet nuk ishin kurrë Bibla, ju mund të devijoni prej tyre. Ndoshta keni zgjedhur ende një ngjyrë për aplikacionin tuaj vetëm në paletën e ngjyrave të Google? Shpresoj qe jo.
Nga ana tjetër, duke shtuar elementë të personalizuar, rrezikonit të takoni zhvilluesit tuaj të Android në një rrugicë të errët dhe të dëgjoni një fjalim të gjatë se pse dhe sa gabim e keni. Ishin kohë të rrezikshme.
Të gjithë fituesit e Çmimit të Dizajnit Material rrezikuan të njëjtin rrezik. A e keni vënë re se sa ndërfaqe të personalizuar kanë këto projekte? Por Google i inkurajoi dhe të gjithë u habitën.
Tani është e qartë se Google dëshiron që ne të personalizojmë aplikacionet tona. Produktet duhet të jenë të bukura dhe të ndryshme. MD i përditësuar është një përpjekje për t'u treguar stilistëve dhe bizneseve se si të personalizojnë ndërfaqen e përdoruesit pa frikën se do të qortohen nga zhvilluesit.
material.io - Projektimi, Zhvillimi, Mjetet
Ju mund të filloni të studioni sistemin e dizajnit nga faqja - jo vetëm një pjesë e përmbajtjes është përditësuar atje, por edhe stili vizual. Tani edhe ekrani 404 do t'ju mësojë dhe duke klikuar në një element nga udhëzuesit, do të shihni specifikimin e tij me të gjitha distancat, fontet dhe lidhjet e shkarkimit nga biblioteka e Google.
Rezultati nuk është ende mbresëlënës. Plus më i madh duhet të ishte kodi i gatshëm për elementët vendas, por lidhja GitHub nuk është edhe aq e mrekullueshme. Është shumë herët për t'u kërkuar zhvilluesve të shtojnë elementë të rinj në aplikacionin tuaj - kodi për ta nuk është dhënë ende.
Po nëse elementët tuaj nuk janë vendas? Ju mund të shihni shënimin, por nuk do të jeni në gjendje të merrni ikonat e prera. Pra, është shumë herët për të folur për zëvendësimin e Zeplin. 
Më 25 qershor 2014, Google prezantoi para publikut vizionin e tij të ri të dizajnit të ndërfaqes së së ardhmes - një grup i tërë rregullash dhe kushtesh, sipas të cilave do të ndërtohen ndërfaqet e të gjitha produkteve të korporatës tani e tutje. Pse ishte e nevojshme e gjithë kjo? Deri pesë vjet më parë, të gjitha produktet e Google ishin shumë të ndryshme nga njëri-tjetri, duke përfshirë versione të ndryshme të të njëjtit aplikacion në pajisje të ndryshme. Zhvilluesit menduan të krijonin rregulla të veçanta për ndërtimin dhe unifikimin e të gjitha aplikacioneve dhe shërbimeve të zhvilluara, të cilat më vonë u bashkuan me emrin e përgjithshëm "Projekti Kennedy". Ishte ky projekt që u zhvillua më vonë Dizajn Material (dizajn material).
Filozofia materiale
Falë projektit Kennedy, të gjitha shërbimet dhe shërbimet kryesore të Google morën veçori të përbashkëta të dizajnit dhe ndërfaqes. Kjo bëri të mundur unifikimin e qasjeve për krijimin e ndërfaqeve në internet, dhe më vonë, ndërfaqeve të aplikacioneve celulare.
Një nga veçoritë e dizajnit të unifikuar ishin kartat e informacionit që mund të vendoseshin kudo në hapësirën e punës. Duke i ekzaminuar ato në aplikacionin Google Now, zhvilluesit i bënë vetes pyetjen: "Çfarë ka nën këto karta?" Sipas zëvendësit të dizajnit të Google, Matias Duarte, kjo "pyetje e pafajshme ndezi një shkëndijë të fuqishme".
Ekipi i projektimit filloi ta shikonte dizajnin jo si një koleksion planesh dhe pikselësh, por si një objekt fizik të vërtetë. Ata donin t'i përcillnin të njëjtën gjë përdoruesit, në mënyrë që ai të kishte një ndjenjë të prekshmërisë së ndërfaqes, që ajo që ndodh në ekran të duket sa më e besueshme dhe logjike.
Pas dominimit total skeuomorfizëm(një imitim i saktë i objekteve reale të botës fizike në dizajn) gjithçka ka lëvizur ashpër në drejtim të kundërt -. Ishte ai që mori si bazë Google, duke shpikur " material". Në të njëjtën kohë, duke bërë një hap të vogël prapa drejt realizmit.
Letër kuantike
Elementi kryesor i dizajnit të materialit është metaforë e një objekti fizik për nga vetitë e tij të ngjashme me letrën dhe që zotëron shumicën e vetive të saj - madhësinë, ngjyrën, trashësinë. Çdo shtresë e këtij materiali metaforik ndodhet në hapësirën tredimensionale dhe i bindet të gjitha ligjeve fizike, prandaj, ndryshe nga stili klasik i sheshtë, mund të bëjë hije në shtresat e poshtme. Të gjitha shtresat vendosen në materialin kryesor fundor.
Për shkak të vetive të tij si letra, materiali fillimisht u quajt "letër kuantike". Kjo është e njëjta letër si në botën fizike, por ka një numër të vetive "magjike", për shembull, mund të ndryshojë madhësinë e saj dhe të lëvizë pa probleme në hapësirë, duke u bashkuar me "gjethe" të tjera ose duke u thyer në disa. Letra kuantike qëndron pak mbi sfond, e cila është më së shpeshti e bardhë. Hija lëviz në varësi të lëvizjes së vetë materialit, zvogëlohet ose rritet në varësi të lartësisë së materialit mbi sfond.
Bojë dixhitale
Nëse "letër kuantike" synon të pasqyrojë vetitë fizike të një objekti, atëherë gjithçka që është në sipërfaqen e kësaj letre - ngjyrat, imazhet, teksti, ikona - formohet duke përdorur " bojë dixhitale"- një tjetër objekt unik i dizajnit të materialit.
Material Design përdor të gjitha praktikat më të mira të printimit në dizajnin e ndërfaqes. Por edhe këtu ka veçori të pronarit të Google. Për shembull, fonti kryesor për përdorim në Material Design është Roboto. Sidoqoftë, asgjë nuk i pengon kompanitë të përdorin fontin e tyre të markës për të ruajtur identitetin e tyre. Udhëzimet e dizajnit të materialit ofrojnë shembuj për përdorimin e peshave dhe madhësive të ndryshme të shkronjave në ndërfaqe.
Por gjëja më e rëndësishme në lidhje me grafikën e dizajnit të materialit është ngjyrë... Ngjyra është mjeti kryesor i shprehjes në letrën kuantike dhe për këtë arsye luan një rol shumë të rëndësishëm. Është e zakonshme që të përdoret dizajni i materialit bazë dhe ngjyrat e theksit... Dhe gjithashtu disa nuanca të tyre për situata të ndryshme.
Zakonisht ngjyrat kryesore përdoret për të pikturuar zona të mëdha si titujt, shiritat e veprimit, shiritat e statusit. Për të theksuar elementë të rëndësishëm, përdorni ngjyra e theksit... Për shembull, për një kartëvizitë të dizajnit material - butona veprimi lundrues.
Parimet themelore të dizajnit të materialit diktojnë përdorimin e imazheve. Ky është një element kaq i rëndësishëm sa rekomandohet përdorimi i një imazhi të madhësisë maksimale pa kufij. Për më tepër, shiritat e veprimit bëhen transparente për të maksimizuar pamjen e imazhit.
Android mban një bibliotekë të dedikuar Paleta, i cili është në gjendje të nxjerrë ngjyrat kryesore dhe të theksuara nga imazhi dhe të ndryshojë dinamikisht dizajnin e aplikacionit, duke iu përshtatur imazhit aktiv (shembulli më sipër).
Rëndësia e animacionit
Duke vazhduar të nxjerrim analogji me botën natyrore, duhet theksuar se asgjë nuk zhduket në askund, ashtu siç asgjë nuk merret nga askund. Kështu, në dizajnimin e materialit, është e nevojshme të ndryshohet pa probleme ndërfaqja ekzistuese në përgjigje të të gjitha veprimeve të përdoruesit, në mënyrë që të gjitha tranzicionet të jenë logjike dhe të dukshme. Kështu, në dizajnimin e materialit, animacioni është pasojë e ndërveprimit midis përdoruesit dhe ndërfaqes.
Lëvizja aktive tërheq vëmendjen e përdoruesit, prandaj, për të arritur efektin e realizmit, është e nevojshme të përdoren disa rregulla:
- Asimetria
Zakonisht, madhësia e objekteve kufizohet nga gjerësia e pajisjes, kështu që për të bërë reale ndryshimin e madhësisë së letrës kuantike, gjerësia dhe lartësia e objektit duhet të ndryshohen në mënyrë asimetrike në mënyrë të pavarur, duke shmangur kështu iluzionin e rritjes ose zvogëlimit të objektit. . - Përgjigju
Çdo veprim i përdoruesit duhet të ketë një përgjigje të përshtatshme. Si shembull, Google ofron një efekt valëzues të objekteve të ndërfaqes me epiqendrën në pikën e ndërveprimit. - Lëvizje autentike natyrale
Në natyrë, kur lëvizin, objektet nuk mund të marrin shpejtësinë ose të ndalojnë menjëherë, kështu që për t'i bërë ato të duken realiste, të gjitha animacionet nuk duhet të jenë lineare, por me ngadalësime dhe përshpejtime.
konkluzioni
Dizajn materialËshtë një mënyrë krejtësisht e re e ndërveprimit dhe ndërtimit të ndërfaqeve, e cila është ende në zhvillim dhe mund të shtohet në çdo kohë. Megjithatë, tashmë është e mundur të parashikohen perspektivat e saj. Të paktën në zhvillimin e aplikacioneve për Android do të dominojë, pasi unifikimi i të gjitha ndërfaqeve do të ndikojë pozitivisht në përdorshmërinë.
Në Google, dizajni i materialit renditet së bashku me zhvillime të tilla të rëndësishme si kontrolli i dritareve dhe kursorit (Xerox PARC) dhe ekranet me prekje (Apple). Epo, le të shohim se çfarë ndodh.
Logoja dhe identiteti i ri i Google promovon idetë e dizajnit të materialit
Udhëzimet e hollësishme nga një zhvillues i dizajnit të materialit mund të gjenden këtu -
