{"id":247535,"date":"2023-01-02T13:14:00","date_gmt":"2023-01-02T10:14:00","guid":{"rendered":"https:\/\/inform.click\/materjalide-disaini-uurimine-googlei-uus-kasutajaliidese-disaini-kontseptsioon\/"},"modified":"2023-01-02T13:14:00","modified_gmt":"2023-01-02T10:14:00","slug":"materjalide-disaini-uurimine-googlei-uus-kasutajaliidese-disaini-kontseptsioon","status":"publish","type":"post","link":"https:\/\/inform.click\/et\/materjalide-disaini-uurimine-googlei-uus-kasutajaliidese-disaini-kontseptsioon\/","title":{"rendered":"Materjalide disaini uurimine: Google’i uus kasutajaliidese disaini kontseptsioon"},"content":{"rendered":"

\n Paar kuud tagasi, oma seitsmendal iga-aastasel I\/O arendajate konverentsil, tutvustas Google uut kasutajaliidese disaini kontseptsiooni nimega Material Design.\n<\/p>\n

\n See inspireeriv, elav ja uhke disainistiil muutub disainerite seas kiiresti populaarseks ning see on t\u00f5epoolest Google'i suur pingutus visuaalse, liikumis- ja interaktsioonidisaini \u00fchendamisel eri t\u00fc\u00fcpi platvormidel ja seadmetel. Kasutades julget graafilist disaini, puutetundlikke pindu ja sujuvat liikumist, pakub see sisule keskendunud disainikeel kasutajatele \u00fchtset, m\u00e4ngulist ja intuitiivset kogemust.\n<\/p>\n

\n Algselt loodi Material Design Androidi L-v\u00e4ljaande jaoks, kuid hiljem rakendas Google selle rakenduste Dokumendid<\/a>, Arvutustabelid<\/a> ja Esitlused<\/a> avakuvadele. Sellest inspireerituna hakkasid disainerid oma loodud veebisaitidel kasutama materjalidisaini. Selles blogipostituses tutvustan teid materjalidisaini kontseptsiooni tutvustavale ringk\u00e4igule ja uurin ka, kuidas saate seda oma tulevastes veebidisainiprojektides kasutada.\n<\/p>\n

\n Alustagem!\n<\/p>\n

\n Materjalide disaini p\u00f5hiprintsiibid\n<\/p>\n

\n Materjali metafoor:
\n<\/h5>\n

\n Materjalidisain paneb suurt r\u00f5hku sellele, et elemendid, animatsioonid ja \u00fcleminekud oleksid nii reaalsed, nagu need p\u00e4riselus paistavad. P\u00e4rast intensiivset paberi ja tindi uurimist otsustas Google'i meeskond kasutada ratsionaliseeritud ruumi ja liikumiss\u00fcsteemi \u00fchtse p\u00f5him\u00f5ttena materjali metafoori. L\u00fchidalt v\u00f5ib \u00f6elda, et materjalidisain pole midagi muud kui kombinatsioon erinevatest klassikalistest disainikontseptsioonidest ja p\u00f5hilistest f\u00fc\u00fcsikalistest omadustest.\n<\/p>\n

\n K\u00e4egakatsutavad pinnad:
\n<\/h5>\n

\n Materjali kujundamisel loovad materjali pinnad ja servad f\u00fc\u00fcsilise struktuuri, et anda kasutajatele visuaalseid n\u00e4pun\u00e4iteid, mis aitavad neil kiiresti m\u00f5ista, mida nad saavad puudutada ja liigutada. Kasutades tr\u00fckikujunduse p\u00f5him\u00f5tteid, hoiab materjalidisain olulise sisu kasutaja silme ees, j\u00e4ttes t\u00e4helepanuta muu v\u00e4hem kasuliku sisu. Tuttavate, intuitiivsete ja loomulike atribuutide kasutamine v\u00f5imaldab kasutaja ajul v\u00e4hem t\u00f6\u00f6tada ja v\u00f5imetest kiiresti aru saada.\n<\/p>\n

\n M\u00f5\u00f5tmed:
\n<\/h5>\n

\n Kui teie laual on hunnik pabereid, saavad need koos varjude kaitsmisega m\u00f5\u00f5tmeid. Samamoodi on materjalikujunduses selle atribuudi kasutajaliidesele rakendamisel hierarhia ja varjud, mis juhivad kasutaja t\u00e4helepanu k\u00f5ige olulisemale objektile, millega ta peaks suhtlema. Kasutades valguse, pinna ja liikumise p\u00f5hit\u00f5desid, annab materjalidisain edasi, kuidas objekt kasutajatega suhtleb. Lisaks v\u00f5imaldab realistlik valgustus kasutajatel saada teie loodud liidesest k\u00f5ige realistlikuma \u00fclevaate.\n<\/p>\n

\n \u00dcks adaptiivne disain:
\n<\/h5>\n

\n Materjalide disain kasutab ruumi ja interaktsioonide korraldamiseks \u00fchtset aluseks olevat disainis\u00fcsteemi. \u00dche adaptiivse disaini kontseptsioon toob erinevate seadmete vahel sidususe, see t\u00e4hendab, et \u00fchtne disain loob eri t\u00fc\u00fcpi seadmetele erivaateid. Iga vaade on kohandatud ainulaadsel viisil vastavalt konkreetsele seadmele sobivale interaktsioonile ja suurusele. Teisest k\u00fcljest ei tehta muudatusi hierarhias, ikonograafias, v\u00e4rvides ja ruumisuhetes.\n<\/p>\n

\n Paks ja tahtlik sisu:
\n<\/h5>\n

\n Veel \u00fcks asi, mida selle uue visuaalse keele puhul m\u00e4rkate, on selle julge kujundus koos ereda v\u00e4rvilahendusega. V\u00f5ttes vihjeid teekatte m\u00e4rgistuslindilt, kaasaegselt arhitektuurilt, liiklusm\u00e4rkidelt ja spordiv\u00e4ljakutelt, on Google tutvustanud fantastilisi ja erksaid v\u00e4rve, mida te poleks oodanud. Samuti on nad p\u00f5hjalikult viimistlenud Roboto fonti<\/a>, muutes selle lugemiskogemuse parandamiseks veidi laiemaks ja \u00fcmaramaks. Lisaks loovad sihilik valge ruum ja servast servani kujutised selguse ja s\u00fcvenemise.\n<\/p>\n

\n R\u00f5hutage tegevusi:
\n<\/h5>\n

\n Materjalide disain paneb suurt r\u00f5hku kasutajate ja pindade vahelise suhtluse digitaalsemaks, maagilisemaks ja tundlikumaks muutmisele. Kui keegi kasutajaliidesega suhtleb, siis selle kujundusstiili puhul muutub kogu kujundus \u00fcllataval viisil. V\u00e4rvi, pinna ja ikonograafiaga graafiline v\u00e4ljendus annab kasutajatele selge ettekujutuse objekti v\u00f5imest, samas kui reageeriv suhtlus julgustab kasutajat liidest p\u00f5hjalikult uurima: kui ma seda puudutan, mis juhtub? Ja mis saab edasi?\n<\/p>\n

\n Kasutaja algatatud muudatus:
\n<\/h5>\n

\n Kui inimene puudutab veepinda ja loob lainekesi, annab tema tegevusest saadud energia liideses muudatuste tegemiseks talle reaalse ja k\u00e4egakatsutava kogemuse. Samamoodi v\u00f5imaldab materjalidisain kasutajatel kasutajaliidest puudutada nagu p\u00e4riselus. Selleks soovitab Google disaineritel arvestada interaktsiooni lisam\u00f5\u00f5tmega, milleks on liikumise tagasiside. Nii v\u00f5ib kasutaja tunda, et pind kuuleb kerimisel, lohistamisel, libistamisel ja puudutamisel.\n<\/p>\n

\n Animatsiooni koreograafia:
\n<\/h5>\n

\n Reaalses maailmas on igal tegevusel liikumine, algus ja l\u00f5pp. N\u00e4iteks kui avate p\u00e4riselus karbi, puudutate seda kuskil ja n\u00e4itate, mis seal sees on. Samuti toimuvad k\u00f5ik materjalidisaini kasutaja toimingud \u00fchtses keskkonnas. Iga objekt esitatakse kasutajale kiire, sujuva ja pideva animatsiooniga, mis on koreografeeritud \u00fchisel laval. Kuna k\u00f5ik materjalidisaini varad liiguvad r\u00fctmi, n\u00e4ib ekraan p\u00f5nevam ja interaktiivsem kui kunagi varem.\n<\/p>\n

\n Sisukas liikumine:
\n<\/h5>\n

\n Nagu me k\u00f5ik teame, on Google'i jaoks kasutajakogemus t\u00e4htsam kui miski muu. Sama reegel kehtib ka materjali kujundamise viimase p\u00f5him\u00f5tte kohta. See p\u00f5him\u00f5te \u00fctleb, et liikumine peaks olema sobiv, t\u00e4hendusrikas ja hoolikalt koreograafiline ning seda ei tohi kasutada ainult kasutajatele mulje avaldamiseks. Liikumine materjali disainis ei peaks olema mitte ainult ilus, vaid ka funktsionaalsusele ja ruumilistele suhetele t\u00e4hendust andma ning s\u00e4ilitama sujuva kasutuskogemuse ilu ja lihtsuse.\n<\/p>\n

\n Materjalide disaini rakendamine veebis pol\u00fcmeeriga
\n<\/h3>\n

\n Pole veel pol\u00fcmeeriga<\/a> tuttav? Noh! Polymer on suurep\u00e4rane kasutajaliidese t\u00f6\u00f6riistakomplekt, mis v\u00f5imaldab teil materjalide disaini veebi tuua. Polymeri paberelementide kollektsiooniga<\/a> on teil juurdep\u00e4\u00e4s k\u00f5ikidele materjalide kujundamise v\u00f5imalustele ning v\u00f5imalus tuua oma veebirakendustesse k\u00e4egakatsutavus, julge graafika ning sujuvad \u00fcleminekud ja animatsioonid. L\u00f5busa viktoriinirakenduse Topeka<\/a> abil saate n\u00e4ha pol\u00fcmeeride ja materjalide disainimustreid .\n<\/p>\n

\n N\u00fc\u00fcd uurin Polymeri paberielemente ja n\u00e4itan teile, kuidas saate seda uut disainiparadigmat oma veebiprojektides kasutada.\n<\/p>\n

\n Alustamine:
\n<\/h5>\n

\n Polymeri alustamisjuhendiga<\/a> on kaasas l\u00fchike \u00f5petus ja stardiprojekt, mis aitab teil tutvuda Polymeri p\u00f5hikontseptsioonidega. Esiteks peate alla laadima k\u00e4ivitusprojekti<\/a>, mis sisaldab k\u00f5iki Polymeriga t\u00f6\u00f6tamiseks vajalikke s\u00f5ltuvusi ja teeke. Kui olete k\u00e4ivitusprojekti alla laadinud, pakkige see kuskilt kohalikul kettal lahti.\n<\/p>\n

\n Enne alustamist vajate kiiret HTTP-serverit. Kui teil on Python juba installitud, k\u00e4ivitage n\u00e4idisprojekti \u00fclatasemel m\u00f5ni j\u00e4rgmistest k\u00e4skudest.\n<\/p>\n

\n Python 2.x:\n<\/p>\n

python -m SimpleHTTPServer<\/code><\/pre>\n
\n  Python 3.x:\n<\/p>\n
python -m http.server<\/code><\/pre>\n
\n  N\u00fc\u00fcd laadige veebiserveri testimiseks projekti valmis versioon. N\u00e4iteks kui kohalik server kuulab porti 8000:\n<\/p>\n
\n  http:\/\/localhost:8000\/finished\/<\/a>\n<\/p>\n
\n  Paberielementide paigaldamine:
\n<\/h5>\n
\n  P\u00e4rast seda peate installima paberelemendid, kasutades \u00fchte j\u00e4rgmistest kolmest viisist.\n<\/p>\n